@xyhp915/slack-base-ui 0.0.1 → 0.0.3

package/src/pages/ComponentShowcase.tsx

@@ -0,0 +1,1964 @@
+import { Link } from 'react-router-dom'
+import {
+  ArrowLeft,
+  Bell,
+  Home,
+  Settings,
+  Plus,
+  FileText,
+  Copy,
+  ClipboardPaste,
+  Trash2,
+  MoreVertical,
+  File,
+  Folder,
+  Save,
+  Scissors,
+  RefreshCw,
+  Download,
+  Share2,
+  Star,
+  StarOff,
+  Pencil,
+  FolderOpen,
+  Image,
+  Link as LinkIcon,
+  ExternalLink,
+  ZoomIn,
+  ZoomOut,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  MessageSquare,
+  UserCircle,
+  LogOut,
+  ShieldCheck,
+  Command,
+} from 'lucide-react'
+import { useState } from 'react'
+
+import { Button } from '../components/Button'
+import { Avatar } from '../components/Avatar'
+import { Badge } from '../components/Badge'
+import { Input } from '../components/Input'
+import { IconButton } from '../components/IconButton'
+import { Tooltip } from '../components/Tooltip'
+import { Dialog, DialogFooter, DialogBody } from '../components/Dialog'
+import { useDialog } from '../components/Dialog'
+import { AlertDialog } from '../components/AlertDialog'
+import { Form, FormInput, FormTextarea, FormSelect, FormCheckbox, FormActions } from '../components/Form'
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverHeader,
+  PopoverBody,
+  PopoverFooter,
+  PopoverClose,
+  useImperativePopover,
+} from '../components'
+import {
+  Menu,
+  MenuTrigger,
+  MenuContent,
+  MenuItem,
+  MenuItemWithIcon,
+  MenuCheckboxItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuLabel,
+  MenuSeparator,
+  MenuSub,
+  MenuSubTrigger,
+  MenuSubContent,
+} from '../components/Menu'
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItemWithIcon,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuLabel,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+} from '../components/ContextMenu'
+import { Select } from '../components/Select'
+import { Checkbox } from '../components/Checkbox'
+import { Radio, RadioGroup } from '../components/Radio'
+import { Switch } from '../components/Switch'
+import { Tabs, TabList, Tab, TabPanel } from '../components/Tabs'
+import { Progress } from '../components/Progress'
+import { useToast } from '../components/Toast'
+import { Loading } from '../components/Loading'
+import { AutoComplete } from '../components/AutoComplete'
+
+export const ComponentShowcase = () => {
+  const [simpleDialogOpen, setSimpleDialogOpen] = useState(false)
+  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false)
+  const [customDialogOpen, setCustomDialogOpen] = useState(false)
+
+  // AlertDialog states
+  const [infoAlertOpen, setInfoAlertOpen] = useState(false)
+  const [successAlertOpen, setSuccessAlertOpen] = useState(false)
+  const [warningAlertOpen, setWarningAlertOpen] = useState(false)
+  const [dangerAlertOpen, setDangerAlertOpen] = useState(false)
+
+  // Menu states
+  const [showToolbar, setShowToolbar] = useState(true)
+  const [showSidebar, setShowSidebar] = useState(false)
+  const [theme, setTheme] = useState('light')
+
+  // ContextMenu states
+  const [showPreview, setShowPreview] = useState(true)
+  const [isPinned, setIsPinned] = useState(false)
+  const [textAlign, setTextAlign] = useState('left')
+  const [isStarred, setIsStarred] = useState(false)
+  const [zoom, setZoom] = useState('100')
+
+  // New component states
+  const [selectValue, setSelectValue] = useState<string | null>(null)
+  const [checkboxChecked, setCheckboxChecked] = useState(false)
+  const [radioValue, setRadioValue] = useState('email')
+  const [switchOn, setSwitchOn] = useState(false)
+  const [notificationsOn, setNotificationsOn] = useState(true)
+  const [progressValue, setProgressValue] = useState(60)
+  const { toast } = useToast()
+
+  // AutoComplete states
+  const [acValue, setAcValue] = useState('')
+  const [acAsync, setAcAsync] = useState('')
+
+  // Imperative Dialog
+  const { show: showDialog, confirm: confirmDialog, alert: alertDialog } = useDialog()
+  const [dialogResult, setDialogResult] = useState<string | null>(null)
+
+  // Imperative Popover
+  const imperativePopover = useImperativePopover()
+
+  return (
+      <div className="min-h-screen bg-(--bg-muted) pb-20 font-sans transition-colors duration-300">
+        {/* Header */}
+        <div
+            className="bg-(--bg-primary) border-b border-(--border-light) sticky top-0 z-10 px-8 py-4 flex items-center justify-between shadow-sm">
+          <div className="flex items-center gap-4">
+            <Link to="/"
+                  className="p-2 hover:bg-(--bg-hover) rounded-full transition-colors text-(--text-secondary)">
+              <ArrowLeft className="w-5 h-5"/>
+            </Link>
+            <h1 className="text-xl font-bold text-(--text-primary)">Component Library</h1>
+          </div>
+          <div className="text-sm text-(--text-secondary)">
+            Base UI Primitives
+          </div>
+        </div>
+
+        <main className="max-w-5xl mx-auto px-8 py-12 space-y-16">
+
+          {/* Section: Buttons */}
+          <section>
+            <div className="mb-6 pb-2 border-b border-(--border-light)">
+              <h2 className="text-2xl font-bold text-(--text-primary)">Buttons</h2>
+              <p className="text-(--text-secondary) mt-1">Interactive elements for actions and navigation.</p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+              <div className="space-y-4">
+                <h3 className="font-semibold text-(--text-secondary)">Variants</h3>
+                <div className="flex flex-wrap gap-4 items-center">
+                  <Button variant="primary">Primary</Button>
+                  <Button variant="secondary">Secondary</Button>
+                  <Button variant="danger">Danger</Button>
+                  <Button variant="ghost">Ghost</Button>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <h3 className="font-semibold text-(--text-secondary)">Sizes</h3>
+                <div className="flex flex-wrap gap-4 items-center">
+                  <Button size="sm">Small</Button>
+                  <Button size="md">Medium</Button>
+                  <Button size="lg">Large</Button>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <h3 className="font-semibold text-(--text-secondary)">States</h3>
+                <div className="flex flex-wrap gap-4 items-center">
+                  <Button disabled>Disabled</Button>
+                  <Button variant="primary" disabled>Disabled Primary</Button>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <h3 className="font-semibold text-(--text-secondary)">Full Width</h3>
+                <Button fullWidth>Full Width Button</Button>
+              </div>
+            </div>
+          </section>
+
+          {/* Section: Avatars */}
+          <section>
+            <div className="mb-6 pb-2 border-b border-(--border-light)">
+              <h2 className="text-2xl font-bold text-(--text-primary)">Avatars</h2>
+              <p className="text-(--text-secondary) mt-1">User profile images with status indicators.</p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+              <div className="space-y-4">
+                <h3 className="font-semibold text-(--text-secondary)">Sizes</h3>
+                <div className="flex items-end gap-4">
+                  <Avatar size="xs" fallback="XS"/>
+                  <Avatar size="sm" fallback="SM"/>
+                  <Avatar size="md" fallback="MD"/>
+                  <Avatar size="lg" fallback="LG"/>
+                  <Avatar size="xl" fallback="XL"/>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <h3 className="font-semibold text-(--text-secondary)">Status Indicators</h3>
+                <div className="flex items-center gap-6">
+                  <Avatar status="online" fallback="ON"/>
+                  <Avatar status="away" fallback="AW"/>
+                  <Avatar status="dnd" fallback="DND"/>
+                  <Avatar status="offline" fallback="OFF"/>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <h3 className="font-semibold text-(--text-secondary)">Image vs Fallback</h3>
+                <div className="flex items-center gap-6">
+                  <Avatar src="https://i.pravatar.cc/150?u=12" alt="User"/>
+                  <Avatar fallback="CD"/>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <h3 className="font-semibold text-(--text-secondary)">Shape</h3>
+                <div className="flex items-center gap-6">
+                  <Avatar rounded={true} fallback="R"/>
+                  <Avatar rounded={false} fallback="C"/>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* Section: Badges */}
+          <section>
+            <div className="mb-6 pb-2 border-b border-(--border-light)">
+              <h2 className="text-2xl font-bold text-(--text-primary)">Badges</h2>
+              <p className="text-(--text-secondary) mt-1">Notification counts and status labels.</p>
+            </div>
+
+            <div className="flex gap-8">
+              <div className="space-y-2">
+                <h3 className="font-semibold text-(--text-secondary) text-sm">Neutral</h3>
+                <div className="flex gap-2">
+                  <Badge count={1} variant="neutral"/>
+                  <Badge count={99} variant="neutral"/>
+                </div>
+              </div>
+              <div className="space-y-2">
+                <h3 className="font-semibold text-(--text-secondary) text-sm">Danger</h3>
+                <div className="flex gap-2">
+                  <Badge count={1} variant="danger"/>
+                  <Badge count={5} variant="danger"/>
+                </div>
+              </div>
+              <div className="space-y-2">
+                <h3 className="font-semibold text-(--text-secondary) text-sm">Dot</h3>
+                <div className="flex gap-2">
+                  <Badge dot variant="danger"/>
+                  <Badge dot variant="neutral"/>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* Section: Inputs */}
+          <section>
+            <div className="mb-6 pb-2 border-b border-(--border-light)">
+              <h2 className="text-2xl font-bold text-(--text-primary)">Inputs</h2>
+              <p className="text-(--text-secondary) mt-1">Form controls for user input.</p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-2xl">
+              <div className="space-y-2">
+                <Input label="Email Address" placeholder="name@work-email.com" fullWidth/>
+              </div>
+              <div className="space-y-2">
+                <Input label="Password" type="password" placeholder="••••••••" error="Password is too short" fullWidth/>
+              </div>
+            </div>
+          </section>
+
+          {/* Section: Icon Buttons */}
+          <section>
+            <div className="mb-6 pb-2 border-b border-(--border-light)">
+              <h2 className="text-2xl font-bold text-(--text-primary)">Icon Buttons</h2>
+              <p className="text-(--text-secondary) mt-1">Compact buttons for toolbars and actions.</p>
+            </div>
+
+            <div className="flex flex-wrap gap-4">
+              <IconButton><Bell className="w-5 h-5"/></IconButton>
+              <IconButton variant="ghost"><Settings className="w-5 h-5"/></IconButton>
+              <IconButton active><Plus className="w-5 h-5"/></IconButton>
+              <IconButton size="sm"><Home className="w-4 h-4"/></IconButton>
+            </div>
+          </section>
+
+          {/* Section: Tooltips */}
+          <section>
+            <div className="mb-6 pb-2 border-b border-(--border-light)">
+              <h2 className="text-2xl font-bold text-(--text-primary)">Tooltips</h2>
+              <p className="text-(--text-secondary) mt-1">Contextual information on hover.</p>
+            </div>
+
+            <div className="flex gap-4">
+              <Tooltip content="This is a tooltip">
+                <Button>Hover Me</Button>
+              </Tooltip>
+
+              <Tooltip content="Tooltip on bottom" side="bottom">
+                <Button variant="secondary">Bottom Tooltip</Button>
+              </Tooltip>
+            </div>
+          </section>
+
+          {/* Section: Dialogs */}
+          <section>
+            <div className="mb-6 pb-2 border-b border-(--border-light)">
+              <h2 className="text-2xl font-bold text-(--text-primary)">Dialogs</h2>
+              <p className="text-(--text-secondary) mt-1">Modal dialogs for important interactions and
+                confirmations.</p>
+            </div>
+
+            <div className="flex flex-wrap gap-4">
+              <Button onClick={() => setSimpleDialogOpen(true)}>
+                Simple Dialog
+              </Button>
+
+              <Button variant="secondary" onClick={() => setConfirmDialogOpen(true)}>
+                Confirmation Dialog
+              </Button>
+
+              <Button variant="ghost" onClick={() => setCustomDialogOpen(true)}>
+                Custom Layout
+              </Button>
+            </div>
+
+            {/* Simple Dialog */}
+            <Dialog
+                open={simpleDialogOpen}
+                onOpenChange={setSimpleDialogOpen}
+                title="Welcome to Slack Base UI"
+                description="This is a simple dialog with a title and description."
+                size="md"
+            >
+              <DialogBody>
+                <p className="text-(--text-secondary)">
+                  This dialog component is built on top of Base UI's Dialog primitive,
+                  styled to match Slack's design system. It supports multiple sizes,
+                  custom content, and follows accessibility best practices.
+                </p>
+              </DialogBody>
+              <DialogFooter>
+                <Button variant="secondary" onClick={() => setSimpleDialogOpen(false)}>
+                  Close
+                </Button>
+                <Button variant="primary" onClick={() => setSimpleDialogOpen(false)}>
+                  Got it
+                </Button>
+              </DialogFooter>
+            </Dialog>
+
+            {/* Confirmation Dialog */}
+            <Dialog
+                open={confirmDialogOpen}
+                onOpenChange={setConfirmDialogOpen}
+                title="Delete channel?"
+                description="Are you sure you want to delete this channel? This action cannot be undone."
+                size="sm"
+            >
+              <DialogBody>
+                <div className="bg-(--bg-secondary) border border-(--border-light) rounded-lg p-4 mb-4">
+                  <p className="font-semibold text-(--text-primary) mb-1">#design-system</p>
+                  <p className="text-sm text-(--text-secondary)">12 members · 234 messages</p>
+                </div>
+                <p className="text-(--text-secondary) text-sm">
+                  All messages and files in this channel will be permanently deleted.
+                  Members will no longer have access to this channel.
+                </p>
+              </DialogBody>
+              <DialogFooter>
+                <Button variant="secondary" onClick={() => setConfirmDialogOpen(false)}>
+                  Cancel
+                </Button>
+                <Button variant="danger" onClick={() => setConfirmDialogOpen(false)}>
+                  Delete Channel
+                </Button>
+              </DialogFooter>
+            </Dialog>
+
+            {/* Custom Layout Dialog */}
+            <Dialog
+                open={customDialogOpen}
+                onOpenChange={setCustomDialogOpen}
+                title="Invite people to workspace"
+                size="lg"
+            >
+              <DialogBody className="space-y-4">
+                <div>
+                  <label className="block text-sm font-semibold text-(--text-primary) mb-2">
+                    Email addresses
+                  </label>
+                  <Input
+                      placeholder="name@example.com"
+                      fullWidth
+                  />
+                  <p className="text-xs text-(--text-secondary) mt-1">
+                    Separate multiple emails with commas
+                  </p>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-semibold text-(--text-primary) mb-2">
+                    Add to channels (optional)
+                  </label>
+                  <Input
+                      placeholder="Search for channels..."
+                      fullWidth
+                  />
+                </div>
+
+                <div className="bg-(--bg-secondary) rounded-lg p-4 border border-(--border-light)">
+                  <div className="flex items-start gap-3">
+                    <div
+                        className="w-10 h-10 rounded bg-(--slack-blue) flex items-center justify-center text-white font-bold shrink-0">
+                      💡
+                    </div>
+                    <div>
+                      <p className="font-semibold text-(--text-primary) text-sm mb-1">
+                        Pro tip
+                      </p>
+                      <p className="text-sm text-(--text-secondary)">
+                        Invited members will receive an email with instructions to join your workspace.
+                        They'll also be automatically added to #general.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </DialogBody>
+              <DialogFooter>
+                <Button variant="secondary" onClick={() => setCustomDialogOpen(false)}>
+                  Cancel
+                </Button>
+                <Button variant="primary" onClick={() => setCustomDialogOpen(false)}>
+                  Send Invitations
+                </Button>
+              </DialogFooter>
+            </Dialog>
+          </section>
+
+          {/* Section: Alert Dialogs */}
+          <section>
+            <div className="mb-6 pb-2 border-b border-(--border-light)">
+              <h2 className="text-2xl font-bold text-(--text-primary)">Alert Dialogs</h2>
+              <p className="text-(--text-secondary) mt-1">Focused alerts for important confirmations with semantic
+                variants.</p>
+            </div>
+
+            <div className="flex flex-wrap gap-4">
+              <Button onClick={() => setInfoAlertOpen(true)}>
+                Info Alert
+              </Button>
+
+              <Button variant="secondary" onClick={() => setSuccessAlertOpen(true)}>
+                Success Alert
+              </Button>
+
+              <Button onClick={() => setWarningAlertOpen(true)}>
+                Warning Alert
+              </Button>
+
+              <Button variant="danger" onClick={() => setDangerAlertOpen(true)}>
+                Danger Alert
+              </Button>
+            </div>
+
+            {/* Info Alert */}
+            <AlertDialog
+                open={infoAlertOpen}
+                onOpenChange={setInfoAlertOpen}
+                title="New feature available"
+                description="We've added a new way to organize your channels."
+                variant="info"
+                confirmText="Learn More"
+                onConfirm={() => {
+                  console.log('Info confirmed')
+                }}
+            >
+              <p className="text-(--text-secondary)">
+                You can now create channel sections to group related channels together.
+                This helps keep your sidebar organized and easy to navigate.
+              </p>
+            </AlertDialog>
+
+            {/* Success Alert */}
+            <AlertDialog
+                open={successAlertOpen}
+                onOpenChange={setSuccessAlertOpen}
+                title="Channel created successfully"
+                description="Your new channel is ready to use."
+                variant="success"
+                confirmText="Go to Channel"
+                showCancel={false}
+            />
+
+            {/* Warning Alert */}
+            <AlertDialog
+                open={warningAlertOpen}
+                onOpenChange={setWarningAlertOpen}
+                title="Your workspace is almost full"
+                description="You're using 95% of your storage space."
+                variant="warning"
+                confirmText="Upgrade Plan"
+                cancelText="Dismiss"
+                onConfirm={async () => {
+                  await new Promise(resolve => setTimeout(resolve, 1000))
+                  console.log('Upgrade clicked')
+                }}
+            >
+              <p className="text-(--text-secondary)">
+                Consider upgrading to a paid plan to get more storage and unlock premium features.
+              </p>
+            </AlertDialog>
+
+            {/* Danger Alert */}
+            <AlertDialog
+                open={dangerAlertOpen}
+                onOpenChange={setDangerAlertOpen}
+                title="Delete workspace?"
+                description="This action cannot be undone and will permanently delete your workspace."
+                variant="danger"
+                confirmText="Delete Workspace"
+                cancelText="Cancel"
+                onConfirm={() => {
+                  console.log('Workspace deleted')
+                }}
+            >
+              <div className="space-y-2">
+                <p className="text-(--text-secondary)">
+                  This will permanently delete:
+                </p>
+                <ul className="list-disc list-inside text-(--text-secondary) space-y-1 ml-2">
+                  <li>All channels and messages</li>
+                  <li>All files and attachments</li>
+                  <li>All workspace settings</li>
+                  <li>All member data</li>
+                </ul>
+              </div>
+            </AlertDialog>
+          </section>
+
+          {/* Section: Imperative Dialog API */}
+          <section>
+            <div className="mb-6 pb-2 border-b border-(--border-light)">
+              <h2 className="text-2xl font-bold text-(--text-primary)">Imperative Dialog</h2>
+              <p className="text-(--text-secondary) mt-1">
+                通过 <code
+                  className="text-sm bg-(--bg-secondary) px-1.5 py-0.5 rounded border border-(--border-light) font-mono">useDialog()</code> 命令式调用对话框，无需自行管理{' '}
+                <code
+                    className="text-sm bg-(--bg-secondary) px-1.5 py-0.5 rounded border border-(--border-light) font-mono">open</code> 状态。
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              {/* show() */}
+              <div className="bg-(--bg-primary) rounded-lg border border-(--border-light) p-5 space-y-4">
+                <div>
+                  <h3 className="font-semibold text-(--text-primary) flex items-center gap-2">
+                    <Command size={15} className="text-(--text-muted)"/>
+                    show()
+                  </h3>
+                  <p className="text-sm text-(--text-secondary) mt-1">
+                    显示通用对话框，关闭时 Promise resolve。
+                  </p>
+                </div>
+                <Button
+                    variant="secondary"
+                    fullWidth
+                    onClick={async () => {
+                      await showDialog({
+                        title: '键盘快捷键',
+                        description: '以下是常用操作的快捷键列表',
+                        size: 'sm',
+                        content: (
+                            <div className="space-y-2 mt-1">
+                              {([
+                                ['⌘K', '打开命令面板'],
+                                ['⌘/', '切换侧边栏'],
+                                ['⌘N', '新建频道'],
+                                ['⌘⇧M', '切换静音'],
+                                ['⌘⇧Y', '设置状态'],
+                              ] as [string, string][]).map(([key, desc]) => (
+                                  <div key={key} className="flex items-center justify-between text-sm py-1">
+                                    <span className="text-(--text-secondary)">{desc}</span>
+                                    <kbd
+                                        className="px-2 py-0.5 rounded bg-(--bg-secondary) border border-(--border-light) text-(--text-primary) font-mono text-xs">
+                                      {key}
+                                    </kbd>
+                                  </div>
+                              ))}
+                            </div>
+                        ),
+                      })
+                      setDialogResult('对话框已关闭')
+                    }}
+                >
+                  Show Dialog
+                </Button>
+              </div>
+
+              {/* confirm() */}
+              <div className="bg-(--bg-primary) rounded-lg border border-(--border-light) p-5 space-y-4">
+                <div>
+                  <h3 className="font-semibold text-(--text-primary) flex items-center gap-2">
+                    <ShieldCheck size={15} className="text-(--text-muted)"/>
+                    confirm()
+                  </h3>
+                  <p className="text-sm text-(--text-secondary) mt-1">
+                    返回{' '}
+                    <code className="text-xs bg-(--bg-secondary) px-1 rounded font-mono">Promise&lt;boolean&gt;</code>
+                    ，确认为 <code className="text-xs bg-(--bg-secondary) px-1 rounded font-mono">true</code>。
+                  </p>
+                </div>
+                <Button
+                    variant="danger"
+                    fullWidth
+                    onClick={async () => {
+                      const ok = await confirmDialog({
+                        title: '离开频道？',
+                        description: '你将无法再收到此频道的消息，但随时可以重新加入。',
+                        confirmLabel: '离开频道',
+                        cancelLabel: '取消',
+                        confirmVariant: 'danger',
+                      })
+                      setDialogResult(ok ? '✅ 已离开频道' : '❌ 操作已取消')
+                    }}
+                >
+                  Confirm Dialog
+                </Button>
+              </div>
+
+              {/* alert() */}
+              <div className="bg-(--bg-primary) rounded-lg border border-(--border-light) p-5 space-y-4">
+                <div>
+                  <h3 className="font-semibold text-(--text-primary) flex items-center gap-2">
+                    <Bell size={15} className="text-(--text-muted)"/>
+                    alert()
+                  </h3>
+                  <p className="text-sm text-(--text-secondary) mt-1">
+                    仅有 OK 按钮，适合错误或提示信息场景。
+                  </p>
+                </div>
+                <Button
+                    fullWidth
+                    onClick={async () => {
+                      await alertDialog({
+                        title: '无法发送消息',
+                        description: '你没有在 #design-system 频道发送消息的权限，请联系工作区管理员。',
+                        confirmLabel: '知道了',
+                      })
+                      setDialogResult('提示框已关闭')
+                    }}
+                >
+                  Alert Dialog
+                </Button>
+              </div>
+            </div>
+
+            {/* Result display */}
+            {dialogResult && (
+                <div
+                    className="mt-4 flex items-center gap-3 text-sm bg-(--bg-secondary) border border-(--border-light) rounded-lg px-4 py-2.5">
+                  <span className="text-(--text-secondary)">上次操作结果：</span>
+                  <span className="font-semibold text-(--text-primary)">{dialogResult}</span>
+                  <button
+                      className="ml-auto text-xs text-(--text-muted) hover:text-(--text-secondary) underline"
+                      onClick={() => setDialogResult(null)}
+                  >
+                    清除
+                  </button>
+                </div>
+            )}
+          </section>
+
+          {/* Section: Forms */}
+          <section>
+            <div className="mb-6 pb-2 border-b border-(--border-light)">
+              <h2 className="text-2xl font-bold text-(--text-primary)">Forms</h2>
+              <p className="text-(--text-secondary) mt-1">Complete form system with validation and various input
+                types.</p>
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+              {/* Simple Form */}
+              <div className="bg-(--bg-primary) rounded-lg border border-(--border-light) p-6">
+                <h3 className="font-semibold text-(--text-primary) mb-4">Contact Form</h3>
+                <Form
+                    initialValues={{
+                      name: '',
+                      email: '',
+                      message: '',
+                    }}
+                    validate={(values) => {
+                      const errors: Record<string, string> = {}
+                      if (!values.name) {
+                        errors.name = 'Name is required'
+                      }
+                      if (!values.email) {
+                        errors.email = 'Email is required'
+                      } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
+                        errors.email = 'Invalid email address'
+                      }
+                      if (!values.message) {
+                        errors.message = 'Message is required'
+                      }
+                      return errors
+                    }}
+                    onSubmit={(values) => {
+                      console.log('Form submitted:', values)
+                      alert('Form submitted! Check console for values.')
+                    }}
+                >
+                  <FormInput
+                      name="name"
+                      label="Full Name"
+                      placeholder="John Doe"
+                      required
+                      fullWidth
+                  />
+                  <FormInput
+                      name="email"
+                      label="Email Address"
+                      type="email"
+                      placeholder="john@example.com"
+                      required
+                      fullWidth
+                  />
+                  <FormTextarea
+                      name="message"
+                      label="Message"
+                      placeholder="Your message here..."
+                      required
+                      fullWidth
+                      rows={4}
+                  />
+                  <FormActions>
+                    <Button type="button" variant="secondary">
+                      Cancel
+                    </Button>
+                    <Button type="submit" variant="primary">
+                      Send Message
+                    </Button>
+                  </FormActions>
+                </Form>
+              </div>
+
+              {/* Advanced Form */}
+              <div className="bg-(--bg-primary) rounded-lg border border-(--border-light) p-6">
+                <h3 className="font-semibold text-(--text-primary) mb-4">User Registration</h3>
+                <Form
+                    initialValues={{
+                      username: '',
+                      email: '',
+                      role: '',
+                      bio: '',
+                      newsletter: false,
+                    }}
+                    validate={(values) => {
+                      const errors: Record<string, string> = {}
+                      if (!values.username) {
+                        errors.username = 'Username is required'
+                      } else if (values.username.length < 3) {
+                        errors.username = 'Username must be at least 3 characters'
+                      }
+                      if (!values.email) {
+                        errors.email = 'Email is required'
+                      }
+                      if (!values.role) {
+                        errors.role = 'Please select a role'
+                      }
+                      return errors
+                    }}
+                    onSubmit={(values) => {
+                      console.log('Registration form submitted:', values)
+                      alert('Registration form submitted! Check console.')
+                    }}
+                >
+                  <FormInput
+                      name="username"
+                      label="Username"
+                      placeholder="johndoe"
+                      required
+                      fullWidth
+                  />
+                  <FormInput
+                      name="email"
+                      label="Email"
+                      type="email"
+                      placeholder="john@company.com"
+                      required
+                      fullWidth
+                  />
+                  <FormSelect
+                      name="role"
+                      label="Role"
+                      required
+                      fullWidth
+                      options={[
+                        { value: 'admin', label: 'Administrator' },
+                        { value: 'member', label: 'Member' },
+                        { value: 'guest', label: 'Guest' },
+                      ]}
+                  />
+                  <FormTextarea
+                      name="bio"
+                      label="Bio (Optional)"
+                      placeholder="Tell us about yourself..."
+                      fullWidth
+                      rows={3}
+                  />
+                  <FormCheckbox
+                      name="newsletter"
+                      label="Subscribe to newsletter"
+                  />
+                  <FormActions>
+                    <Button type="button" variant="secondary">
+                      Reset
+                    </Button>
+                    <Button type="submit" variant="primary">
+                      Register
+                    </Button>
+                  </FormActions>
+                </Form>
+              </div>
+            </div>
+          </section>
+
+          {/* Section: Popover */}
+          <section>
+            <div className="mb-6 pb-2 border-b border-(--border-light)">
+              <h2 className="text-2xl font-bold text-(--text-primary)">Popover</h2>
+              <p className="text-(--text-secondary) mt-1">Display temporary content and interactive interfaces.</p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+              <div className="space-y-4">
+                <h3 className="font-semibold text-(--text-secondary)">Basic Popover</h3>
+                <Popover>
+                  <PopoverTrigger render={<Button variant="secondary">
+                    Open Popover</Button>}
+                  />
+                  <PopoverContent>
+                    <div className="p-4">
+                      <h3 className="font-bold mb-2 text-(--text-primary)">Popover Title</h3>
+                      <p className="text-sm text-(--text-secondary)">
+                        This is a simple popover with custom content.
+                      </p>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              </div>
+
+              <div className="space-y-4">
+                <h3 className="font-semibold text-(--text-secondary)">With Header & Footer</h3>
+                <Popover>
+                  <PopoverTrigger render={<Button variant="secondary">Settings</Button>}/>
+                  <PopoverContent>
+                    <PopoverHeader>User Settings</PopoverHeader>
+                    <PopoverBody>
+                      <p className="text-sm text-(--text-secondary)">
+                        Configure your preferences and account settings here.
+                      </p>
+                    </PopoverBody>
+                    <PopoverFooter>
+                      <PopoverClose render={<Button variant="secondary" size="sm">Cancel</Button>}/>
+                      <Button variant="primary" size="sm">Save</Button>
+                    </PopoverFooter>
+                  </PopoverContent>
+                </Popover>
+              </div>
+
+              <div className="space-y-4">
+                <h3 className="font-semibold text-(--text-secondary)">Different Sides</h3>
+                <div className="flex gap-2">
+                  <Popover>
+                    <PopoverTrigger render={<Button variant="ghost" size="sm">Top</Button>}/>
+                    <PopoverContent side="top">
+                      <div className="p-3">
+                        <p className="text-sm">Top popover</p>
+                      </div>
+                    </PopoverContent>
+                  </Popover>
+                  <Popover>
+                    <PopoverTrigger render={<Button variant="ghost" size="sm">Bottom</Button>}/>
+                    <PopoverContent side="bottom">
+                      <div className="p-3">
+                        <p className="text-sm">Bottom popover</p>
+                      </div>
+                    </PopoverContent>
+                  </Popover>
+                  <Popover>
+                    <PopoverTrigger render={<Button variant="ghost" size="sm">Left</Button>}/>
+                    <PopoverContent side="left">
+                      <div className="p-3">
+                        <p className="text-sm">Left popover</p>
+                      </div>
+                    </PopoverContent>
+                  </Popover>
+                  <Popover>
+                    <PopoverTrigger render={<Button variant="ghost" size="sm">Right</Button>}/>
+                    <PopoverContent side="right">
+                      <div className="p-3">
+                        <p className="text-sm">Right popover</p>
+                      </div>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+              </div>
+
+              {/* Imperative — user card */}
+              <div className="space-y-4 md:col-span-2">
+                <h3 className="font-semibold text-(--text-secondary)">
+                  Imperative{' '}
+                  <code
+                      className="text-xs bg-(--bg-secondary) px-1.5 py-0.5 rounded border border-(--border-light) font-mono font-normal">
+                    useImperativePopover()
+                  </code>
+                </h3>
+                <p className="text-sm text-(--text-secondary)">
+                  命令式调用，将 Popover 锚定到任意 DOM 元素；同一按钮再次点击自动关闭（toggle）。
+                </p>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  {/* User list — click to show profile card */}
+                  <div className="space-y-2">
+                    <p className="text-xs font-medium text-(--text-muted) uppercase tracking-wide">成员列表（点击查看卡片）</p>
+                    <div
+                        className="rounded-lg border border-(--border-light) overflow-hidden divide-y divide-(--border-light)">
+                      {([
+                        {
+                          name: 'Alice Johnson',
+                          role: 'Design Lead',
+                          status: 'online' as const,
+                          tz: 'UTC+8 · 下午 3:24',
+                        },
+                        {
+                          name: 'Bob Smith',
+                          role: 'Senior Engineer',
+                          status: 'away' as const,
+                          tz: 'UTC-5 · 上午 2:24',
+                        },
+                        {
+                          name: 'Charlie Wang',
+                          role: 'Product Manager',
+                          status: 'dnd' as const,
+                          tz: 'UTC+8 · 下午 3:24',
+                        },
+                      ]).map(user => (
+                          <button
+                              key={user.name}
+                              className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-(--bg-hover) transition-colors text-left"
+                              onClick={e =>
+                                  imperativePopover.toggle(e.currentTarget, {
+                                    content: (
+                                        <div className="w-56">
+                                          <div className="px-4 pt-4 pb-3 space-y-3">
+                                            <div className="flex items-center gap-3">
+                                              <Avatar
+                                                  fallback={user.name.slice(0, 2)}
+                                                  status={user.status}
+                                                  size="lg"
+                                              />
+                                              <div className="min-w-0">
+                                                <p className="font-bold text-(--text-primary) text-sm truncate">{user.name}</p>
+                                                <p className="text-xs text-(--text-secondary) truncate">{user.role}</p>
+                                              </div>
+                                            </div>
+                                            <p className="text-xs text-(--text-muted)">{user.tz}</p>
+                                          </div>
+                                          <div
+                                              className="border-t border-(--border-light) px-3 py-2 flex flex-col gap-1">
+                                            <button
+                                                className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-(--bg-hover) text-sm text-(--text-primary) w-full text-left transition-colors">
+                                              <MessageSquare size={14} className="text-(--text-muted)"/>
+                                              发送消息
+                                            </button>
+                                            <button
+                                                className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-(--bg-hover) text-sm text-(--text-primary) w-full text-left transition-colors">
+                                              <UserCircle size={14} className="text-(--text-muted)"/>
+                                              查看个人资料
+                                            </button>
+                                          </div>
+                                        </div>
+                                    ),
+                                    side: 'right',
+                                    align: 'start',
+                                    sideOffset: 6,
+                                  })
+                              }
+                          >
+                            <Avatar fallback={user.name.slice(0, 2)} status={user.status} size="sm"/>
+                            <span className="text-sm text-(--text-primary)">{user.name}</span>
+                          </button>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Toolbar — toggle settings popover */}
+                  <div className="space-y-2">
+                    <p className="text-xs font-medium text-(--text-muted) uppercase tracking-wide">工具栏（Toggle
+                      用法）</p>
+                    <div
+                        className="flex items-center gap-1 p-2 rounded-lg border border-(--border-light) bg-(--bg-secondary)">
+                      <Tooltip content="消息">
+                        <IconButton size="sm">
+                          <MessageSquare size={15}/>
+                        </IconButton>
+                      </Tooltip>
+                      <Tooltip content="成员">
+                        <IconButton size="sm">
+                          <UserCircle size={15}/>
+                        </IconButton>
+                      </Tooltip>
+                      <div className="flex-1"/>
+                      <Tooltip content="设置">
+                        <IconButton
+                            size="sm"
+                            active={imperativePopover.isOpen}
+                            onClick={e =>
+                                imperativePopover.toggle(e.currentTarget, {
+                                  content: (
+                                      <div className="w-52">
+                                        <div className="px-4 py-3 border-b border-(--border-light)">
+                                          <p className="font-bold text-[15px] text-(--text-primary)">频道设置</p>
+                                        </div>
+                                        <div className="px-3 py-2 flex flex-col gap-1">
+                                          {([
+                                            [Settings, '通知偏好'],
+                                            [Star, '加入收藏'],
+                                            [UserCircle, '查看成员'],
+                                          ] as const).map(([Icon, label]) => (
+                                              <button
+                                                  key={label}
+                                                  className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-(--bg-hover) text-sm text-(--text-primary) w-full text-left transition-colors"
+                                                  onClick={() => imperativePopover.hide()}
+                                              >
+                                                <Icon size={14} className="text-(--text-muted)"/>
+                                                {label}
+                                              </button>
+                                          ))}
+                                          <div className="h-px bg-(--border-light) my-1"/>
+                                          <button
+                                              className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-red-50 dark:hover:bg-red-950/30 text-sm text-(--danger) w-full text-left transition-colors"
+                                              onClick={() => imperativePopover.hide()}
+                                          >
+                                            <LogOut size={14}/>
+                                            离开频道
+                                          </button>
+                                        </div>
+                                      </div>
+                                  ),
+                                  side: 'bottom',
+                                  align: 'end',
+                                  sideOffset: 6,
+                                })
+                            }
+                        >
+                          <Settings size={15}/>
+                        </IconButton>
+                      </Tooltip>
+                    </div>
+                    <p className="text-xs text-(--text-muted)">
+                      点击设置图标打开/关闭浮层；
+                      <code className="text-[11px] bg-(--bg-secondary) px-1 rounded font-mono">isOpen</code>
+                      {' = '}
+                      <span className="font-medium text-(--text-primary)">{imperativePopover.isOpen
+                          ? 'true'
+                          : 'false'}</span>
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* Section: Menu */}
+          <section>
+            <div className="mb-6 pb-2 border-b border-(--border-light)">
+              <h2 className="text-2xl font-bold text-(--text-primary)">Menu</h2>
+              <p className="text-(--text-secondary) mt-1">Dropdown menus with various item types and interactions.</p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+              <div className="space-y-4">
+                <h3 className="font-semibold text-(--text-secondary)">Basic Menu</h3>
+                <Menu>
+                  <MenuTrigger render={<Button variant="secondary">File</Button>}/>
+                  <MenuContent>
+                    <MenuItem onSelect={() => console.log('New')}>New File</MenuItem>
+                    <MenuItem onSelect={() => console.log('Open')}>Open...</MenuItem>
+                    <MenuSeparator/>
+                    <MenuItem onSelect={() => console.log('Save')}>Save</MenuItem>
+                    <MenuItem onSelect={() => console.log('Save As')}>Save As...</MenuItem>
+                  </MenuContent>
+                </Menu>
+              </div>
+
+              <div className="space-y-4">
+                <h3 className="font-semibold text-(--text-secondary)">With Icons & Shortcuts</h3>
+                <Menu>
+                  <MenuTrigger render={
+                    <Button variant="secondary">
+                      <FileText className="w-4 h-4 mr-2"/>
+                      Actions
+                    </Button>
+                  }/>
+                  <MenuContent>
+                    <MenuItemWithIcon icon={<File size={16}/>} shortcut="⌘N">
+                      New File
+                    </MenuItemWithIcon>
+                    <MenuItemWithIcon icon={<Folder size={16}/>} shortcut="⌘O">
+                      Open Folder
+                    </MenuItemWithIcon>
+                    <MenuSeparator/>
+                    <MenuItemWithIcon icon={<Save size={16}/>} shortcut="⌘S">
+                      Save
+                    </MenuItemWithIcon>
+                  </MenuContent>
+                </Menu>
+              </div>
+
+              <div className="space-y-4">
+                <h3 className="font-semibold text-(--text-secondary)">Checkbox Items</h3>
+                <Menu>
+                  <MenuTrigger render={<Button variant="secondary">View</Button>}/>
+                  <MenuContent>
+                    <MenuLabel>Options</MenuLabel>
+                    <MenuCheckboxItem
+                        checked={showToolbar}
+                        onCheckedChange={setShowToolbar}
+                    >
+                      Show Toolbar
+                    </MenuCheckboxItem>
+                    <MenuCheckboxItem
+                        checked={showSidebar}
+                        onCheckedChange={setShowSidebar}
+                    >
+                      Show Sidebar
+                    </MenuCheckboxItem>
+                  </MenuContent>
+                </Menu>
+                <p className="text-xs text-(--text-muted)">
+                  Toolbar: {showToolbar ? 'On' : 'Off'}, Sidebar: {showSidebar ? 'On' : 'Off'}
+                </p>
+              </div>
+
+              <div className="space-y-4">
+                <h3 className="font-semibold text-(--text-secondary)">Radio Group</h3>
+                <Menu>
+                  <MenuTrigger render={<Button variant="secondary">Theme</Button>}/>
+                  <MenuContent>
+                    <MenuLabel>Select Theme</MenuLabel>
+                    <MenuRadioGroup value={theme} onValueChange={setTheme}>
+                      <MenuRadioItem value="light">Light</MenuRadioItem>
+                      <MenuRadioItem value="dark">Dark</MenuRadioItem>
+                      <MenuRadioItem value="system">System</MenuRadioItem>
+                    </MenuRadioGroup>
+                  </MenuContent>
+                </Menu>
+                <p className="text-xs text-(--text-muted)">Current: {theme}</p>
+              </div>
+
+              <div className="space-y-4">
+                <h3 className="font-semibold text-(--text-secondary)">Submenu</h3>
+                <Menu>
+                  <MenuTrigger render={
+                    <Button variant="secondary">
+                      <MoreVertical className="w-4 h-4"/>
+                    </Button>
+                  }/>
+                  <MenuContent>
+                    <MenuItem>Copy</MenuItem>
+                    <MenuItem>Paste</MenuItem>
+                    <MenuSub>
+                      <MenuSubTrigger>More Options</MenuSubTrigger>
+                      <MenuSubContent>
+                        <MenuItem>Cut</MenuItem>
+                        <MenuItem>Duplicate</MenuItem>
+                        <MenuItem>Rename</MenuItem>
+                      </MenuSubContent>
+                    </MenuSub>
+                    <MenuSeparator/>
+                    <MenuItem destructive>Delete</MenuItem>
+                  </MenuContent>
+                </Menu>
+              </div>
+
+              <div className="space-y-4">
+                <h3 className="font-semibold text-(--text-secondary)">With Danger Action</h3>
+                <Menu>
+                  <MenuTrigger render={<Button variant="secondary">Edit</Button>}/>
+                  <MenuContent>
+                    <MenuItem>Edit Details</MenuItem>
+                    <MenuItem>Duplicate</MenuItem>
+                    <MenuSeparator/>
+                    <MenuItem destructive onSelect={() => alert('Delete confirmed!')}>
+                      Delete Item
+                    </MenuItem>
+                  </MenuContent>
+                </Menu>
+              </div>
+            </div>
+          </section>
+
+          {/* Section: Context Menu */}
+          <section>
+            <div className="mb-6 pb-2 border-b border-(--border-light)">
+              <h2 className="text-2xl font-bold text-(--text-primary)">Context Menu</h2>
+              <p className="text-(--text-secondary) mt-1">Right-click menus for contextual actions. <strong
+                  className="text-(--text-primary)">右键点击</strong>下方区域即可打开菜单。</p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+
+              {/* Basic clipboard */}
+              <div className="space-y-3">
+                <h3 className="font-semibold text-(--text-secondary)">Basic</h3>
+                <ContextMenu>
+                  <ContextMenuTrigger>
+                    <div
+                        className="w-full h-28 flex items-center justify-center gap-2 rounded-lg bg-(--bg-secondary) border border-(--border-light) cursor-context-menu select-none hover:bg-(--bg-hover) transition-colors">
+                      <Copy size={16} className="text-(--text-muted)"/>
+                      <span className="text-(--text-secondary) text-sm font-medium">Right-click here</span>
+                    </div>
+                  </ContextMenuTrigger>
+                  <ContextMenuContent>
+                    <ContextMenuItemWithIcon icon={<Copy size={15}/>} shortcut="⌘C">Copy</ContextMenuItemWithIcon>
+                    <ContextMenuItemWithIcon icon={<Scissors size={15}/>} shortcut="⌘X">Cut</ContextMenuItemWithIcon>
+                    <ContextMenuItemWithIcon icon={<ClipboardPaste size={15}/>}
+                                             shortcut="⌘V">Paste</ContextMenuItemWithIcon>
+                    <ContextMenuSeparator/>
+                    <ContextMenuItemWithIcon icon={<RefreshCw size={15}/>}
+                                             shortcut="⌘R">Refresh</ContextMenuItemWithIcon>
+                  </ContextMenuContent>
+                </ContextMenu>
+              </div>
+
+              {/* File list — realistic file items */}
+              <div className="space-y-3">
+                <h3 className="font-semibold text-(--text-secondary)">File List (with Submenu)</h3>
+                <div
+                    className="rounded-lg border border-(--border-light) bg-(--bg-primary) overflow-hidden divide-y divide-(--border-light)">
+                  {[
+                    { name: 'design-system.fig', icon: <File size={15} className="text-purple-500"/>, size: '4.2 MB' },
+                    { name: 'meeting-notes.md', icon: <FileText size={15} className="text-blue-500"/>, size: '12 KB' },
+                    { name: 'assets', icon: <Folder size={15} className="text-yellow-500"/>, size: '128 MB' },
+                  ].map(item => (
+                      <ContextMenu key={item.name}>
+                        <ContextMenuTrigger>
+                          <div
+                              className="flex items-center gap-3 px-4 py-2.5 cursor-context-menu select-none hover:bg-(--bg-hover) transition-colors">
+                            {item.icon}
+                            <span className="flex-1 text-sm text-(--text-primary)">{item.name}</span>
+                            <span className="text-xs text-(--text-muted)">{item.size}</span>
+                          </div>
+                        </ContextMenuTrigger>
+                        <ContextMenuContent>
+                          <ContextMenuItemWithIcon icon={<FolderOpen size={15}/>}>Open</ContextMenuItemWithIcon>
+                          <ContextMenuItemWithIcon icon={<Pencil size={15}/>}>Rename</ContextMenuItemWithIcon>
+                          <ContextMenuItemWithIcon icon={<Copy size={15}/>}>Duplicate</ContextMenuItemWithIcon>
+                          <ContextMenuSub>
+                            <ContextMenuSubTrigger>
+                              <Share2 size={15}/>
+                              <span>Share</span>
+                            </ContextMenuSubTrigger>
+                            <ContextMenuSubContent>
+                              <ContextMenuItemWithIcon icon={<LinkIcon size={15}/>}>Copy Link</ContextMenuItemWithIcon>
+                              <ContextMenuItemWithIcon icon={<ExternalLink size={15}/>}>Open in
+                                Browser</ContextMenuItemWithIcon>
+                              <ContextMenuSeparator/>
+                              <ContextMenuItemWithIcon icon={<Download size={15}/>}>Download</ContextMenuItemWithIcon>
+                            </ContextMenuSubContent>
+                          </ContextMenuSub>
+                          <ContextMenuSeparator/>
+                          <ContextMenuItemWithIcon icon={<Trash2 size={15}/>} destructive shortcut="⌫">Move to
+                            Trash</ContextMenuItemWithIcon>
+                        </ContextMenuContent>
+                      </ContextMenu>
+                  ))}
+                </div>
+                <p className="text-xs text-(--text-muted)">Right-click any file row</p>
+              </div>
+
+              {/* Image viewer — RadioGroup zoom */}
+              <div className="space-y-3">
+                <h3 className="font-semibold text-(--text-secondary)">Image Viewer (Radio Group)</h3>
+                <ContextMenu>
+                  <ContextMenuTrigger>
+                    <div
+                        className="w-full h-36 flex flex-col items-center justify-center gap-2 rounded-lg bg-gradient-to-br from-violet-50 to-indigo-100 dark:from-violet-950/30 dark:to-indigo-950/30 border border-(--border-light) cursor-context-menu select-none overflow-hidden relative"
+                        style={{ fontSize: `${Number(zoom) / 100}em` }}
+                    >
+                      <Image size={32} className="text-indigo-400"/>
+                      <span className="text-xs text-(--text-muted)">photo_{zoom}pct.jpg</span>
+                      <span
+                          className="absolute top-2 right-3 text-xs font-mono font-medium text-(--text-muted) bg-(--bg-primary)/60 px-1.5 py-0.5 rounded">{zoom}%</span>
+                    </div>
+                  </ContextMenuTrigger>
+                  <ContextMenuContent>
+                    <ContextMenuLabel>Zoom Level</ContextMenuLabel>
+                    <ContextMenuRadioGroup value={zoom} onValueChange={setZoom}>
+                      <ContextMenuRadioItem value="50">50%</ContextMenuRadioItem>
+                      <ContextMenuRadioItem value="100">100% (Original)</ContextMenuRadioItem>
+                      <ContextMenuRadioItem value="150">150%</ContextMenuRadioItem>
+                      <ContextMenuRadioItem value="200">200%</ContextMenuRadioItem>
+                    </ContextMenuRadioGroup>
+                    <ContextMenuSeparator/>
+                    <ContextMenuItemWithIcon icon={<ZoomIn size={15}/>} shortcut="⌘+">Zoom In</ContextMenuItemWithIcon>
+                    <ContextMenuItemWithIcon icon={<ZoomOut size={15}/>} shortcut="⌘−">Zoom
+                      Out</ContextMenuItemWithIcon>
+                    <ContextMenuSeparator/>
+                    <ContextMenuItemWithIcon icon={<Download size={15}/>}>Save Image As…</ContextMenuItemWithIcon>
+                  </ContextMenuContent>
+                </ContextMenu>
+                <p className="text-xs text-(--text-muted)">Current zoom: <span
+                    className="font-medium text-(--text-primary)">{zoom}%</span></p>
+              </div>
+
+              {/* Document — full featured */}
+              <div className="space-y-3">
+                <h3 className="font-semibold text-(--text-secondary)">Document (Full Featured)</h3>
+                <ContextMenu>
+                  <ContextMenuTrigger>
+                    <div
+                        className="w-full h-36 rounded-lg border border-(--border-light) bg-(--bg-primary) cursor-context-menu select-none hover:bg-(--bg-hover) transition-colors overflow-hidden">
+                      <div className="px-4 py-2.5 border-b border-(--border-light) flex items-center gap-2">
+                        <FileText size={14} className="text-(--text-muted)"/>
+                        <span className="text-xs font-medium text-(--text-secondary)">quarterly-report.md</span>
+                        {isStarred && <Star size={12} className="text-yellow-500 fill-yellow-400 ml-auto"/>}
+                        {isPinned && <span
+                            className="text-[10px] bg-blue-100 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400 px-1.5 py-0.5 rounded font-medium ml-auto">Pinned</span>}
+                      </div>
+                      <div
+                          className="px-4 py-3 space-y-1.5"
+                          style={{ textAlign: textAlign as 'left' | 'center' | 'right' }}
+                      >
+                        <div className="h-2.5 rounded bg-(--bg-hover) w-full"/>
+                        <div className="h-2.5 rounded bg-(--bg-hover) w-4/5"/>
+                        <div className="h-2.5 rounded bg-(--bg-hover) w-3/5"/>
+                      </div>
+                    </div>
+                  </ContextMenuTrigger>
+                  <ContextMenuContent>
+                    <ContextMenuLabel>Edit</ContextMenuLabel>
+                    <ContextMenuItemWithIcon icon={<Copy size={15}/>} shortcut="⌘C">Copy</ContextMenuItemWithIcon>
+                    <ContextMenuItemWithIcon icon={<Scissors size={15}/>} shortcut="⌘X">Cut</ContextMenuItemWithIcon>
+                    <ContextMenuItemWithIcon icon={<ClipboardPaste size={15}/>}
+                                             shortcut="⌘V">Paste</ContextMenuItemWithIcon>
+                    <ContextMenuSeparator/>
+                    <ContextMenuLabel>Text Alignment</ContextMenuLabel>
+                    <ContextMenuRadioGroup value={textAlign} onValueChange={setTextAlign}>
+                      <ContextMenuRadioItem value="left">
+                        <AlignLeft size={14} className="mr-1.5"/>Left
+                      </ContextMenuRadioItem>
+                      <ContextMenuRadioItem value="center">
+                        <AlignCenter size={14} className="mr-1.5"/>Center
+                      </ContextMenuRadioItem>
+                      <ContextMenuRadioItem value="right">
+                        <AlignRight size={14} className="mr-1.5"/>Right
+                      </ContextMenuRadioItem>
+                    </ContextMenuRadioGroup>
+                    <ContextMenuSeparator/>
+                    <ContextMenuLabel>Options</ContextMenuLabel>
+                    <ContextMenuCheckboxItem checked={showPreview} onCheckedChange={setShowPreview}>
+                      Show Preview
+                    </ContextMenuCheckboxItem>
+                    <ContextMenuCheckboxItem checked={isPinned} onCheckedChange={setIsPinned}>
+                      Pin to Top
+                    </ContextMenuCheckboxItem>
+                    <ContextMenuSeparator/>
+                    <ContextMenuItemWithIcon
+                        icon={isStarred ? <StarOff size={15}/> : <Star size={15}/>}
+                        onSelect={() => setIsStarred(v => !v)}
+                    >
+                      {isStarred ? 'Remove from Starred' : 'Add to Starred'}
+                    </ContextMenuItemWithIcon>
+                    <ContextMenuItemWithIcon icon={<Save size={15}/>} shortcut="⌘S">Save</ContextMenuItemWithIcon>
+                    <ContextMenuSeparator/>
+                    <ContextMenuItemWithIcon icon={<Trash2 size={15}/>} destructive shortcut="⌘⌫">
+                      Delete Document
+                    </ContextMenuItemWithIcon>
+                  </ContextMenuContent>
+                </ContextMenu>
+                <p className="text-xs text-(--text-muted)">
+                  Align: <span className="font-medium text-(--text-primary)">{textAlign}</span>
+                  {' · '}Preview: <span className="font-medium text-(--text-primary)">{showPreview
+                    ? 'On'
+                    : 'Off'}</span>
+                  {' · '}Pinned: <span className="font-medium text-(--text-primary)">{isPinned ? 'Yes' : 'No'}</span>
+                  {' · '}Starred: <span className="font-medium text-(--text-primary)">{isStarred ? '★' : '☆'}</span>
+                </p>
+              </div>
+
+            </div>
+          </section>
+
+        </main>
+
+        {/* ── New Component Sections ─────────────────────────────────────── */}
+
+        {/* Section: Select */}
+        <section className="max-w-5xl mx-auto px-8 pb-16 space-y-6">
+          <div className="pb-2 border-b border-(--border-light)">
+            <h2 className="text-2xl font-bold text-(--text-primary)">Select</h2>
+            <p className="text-(--text-secondary) mt-1">Dropdown selection with keyboard navigation and grouped
+              options.</p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">Basic</h3>
+              <Select
+                  label="Channel type"
+                  placeholder="Choose a type"
+                  options={[
+                    { value: 'public', label: 'Public channel' },
+                    { value: 'private', label: 'Private channel' },
+                    { value: 'dm', label: 'Direct message' },
+                  ]}
+                  value={selectValue ?? undefined}
+                  onValueChange={(v) => setSelectValue(v)}
+                  fullWidth
+              />
+              {selectValue && (
+                  <p className="text-sm text-(--text-muted)">Selected: <strong>{selectValue}</strong></p>
+              )}
+            </div>
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">Grouped options</h3>
+              <Select
+                  label="Notification sound"
+                  placeholder="Pick a sound"
+                  groups={[
+                    {
+                      label: 'Slack sounds',
+                      options: [
+                        { value: 'knock', label: 'Knock Brush' },
+                        { value: 'ding', label: 'Ding' },
+                      ],
+                    },
+                    {
+                      label: 'System sounds',
+                      options: [
+                        { value: 'none', label: 'None' },
+                        { value: 'default', label: 'Default' },
+                      ],
+                    },
+                  ]}
+                  fullWidth
+              />
+            </div>
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">With error</h3>
+              <Select
+                  label="Status"
+                  placeholder="Select status"
+                  options={[
+                    { value: 'active', label: 'Active' },
+                    { value: 'away', label: 'Away' },
+                  ]}
+                  error="Please select a status"
+                  fullWidth
+              />
+            </div>
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">Disabled</h3>
+              <Select
+                  label="Region"
+                  placeholder="Disabled"
+                  options={[{ value: 'us', label: 'United States' }]}
+                  disabled
+                  fullWidth
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Section: Checkbox */}
+        <section className="max-w-5xl mx-auto px-8 pb-16 space-y-6">
+          <div className="pb-2 border-b border-(--border-light)">
+            <h2 className="text-2xl font-bold text-(--text-primary)">Checkbox</h2>
+            <p className="text-(--text-secondary) mt-1">Standalone checkbox with label, description and indeterminate
+              state.</p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">With label</h3>
+              <div className="space-y-3">
+                <Checkbox
+                    label="Email notifications"
+                    description="Receive digest emails for missed activity"
+                    checked={checkboxChecked}
+                    onCheckedChange={setCheckboxChecked}
+                />
+                <Checkbox label="Desktop notifications" defaultChecked/>
+                <Checkbox label="Mobile push notifications"/>
+              </div>
+            </div>
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">States</h3>
+              <div className="space-y-3">
+                <Checkbox label="Checked" checked/>
+                <Checkbox label="Unchecked"/>
+                <Checkbox label="Indeterminate" indeterminate/>
+                <Checkbox label="Disabled" disabled/>
+                <Checkbox label="Disabled checked" disabled checked/>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Section: Radio */}
+        <section className="max-w-5xl mx-auto px-8 pb-16 space-y-6">
+          <div className="pb-2 border-b border-(--border-light)">
+            <h2 className="text-2xl font-bold text-(--text-primary)">Radio</h2>
+            <p className="text-(--text-secondary) mt-1">Single-selection radio button group.</p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">Vertical (default)</h3>
+              <RadioGroup
+                  label="Preferred contact"
+                  value={radioValue}
+                  onValueChange={setRadioValue}
+              >
+                <Radio value="email" label="Email" description="Receive messages via email"/>
+                <Radio value="slack" label="Slack" description="Receive messages in Slack"/>
+                <Radio value="sms" label="SMS" description="Receive text messages"/>
+              </RadioGroup>
+              <p className="text-sm text-(--text-muted)">Selected: <strong>{radioValue}</strong></p>
+            </div>
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">Horizontal</h3>
+              <RadioGroup label="Theme" defaultValue="light" orientation="horizontal">
+                <Radio value="light" label="Light"/>
+                <Radio value="dark" label="Dark"/>
+                <Radio value="auto" label="Auto"/>
+              </RadioGroup>
+              <div className="space-y-2 mt-4">
+                <h3 className="font-semibold text-(--text-secondary)">With error</h3>
+                <RadioGroup label="Required field" error="Please select an option">
+                  <Radio value="a" label="Option A"/>
+                  <Radio value="b" label="Option B"/>
+                </RadioGroup>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Section: Switch */}
+        <section className="max-w-5xl mx-auto px-8 pb-16 space-y-6">
+          <div className="pb-2 border-b border-(--border-light)">
+            <h2 className="text-2xl font-bold text-(--text-primary)">Switch</h2>
+            <p className="text-(--text-secondary) mt-1">Toggle switch for binary on/off settings.</p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">With label</h3>
+              <div className="space-y-4">
+                <Switch
+                    label="Enable notifications"
+                    description="You'll receive alerts for new messages"
+                    checked={notificationsOn}
+                    onCheckedChange={setNotificationsOn}
+                />
+                <Switch
+                    label="Dark mode"
+                    checked={switchOn}
+                    onCheckedChange={setSwitchOn}
+                />
+                <Switch label="Disabled switch" disabled/>
+                <Switch label="Disabled on" disabled checked/>
+              </div>
+            </div>
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">Sizes</h3>
+              <div className="flex flex-col gap-4">
+                <div className="flex items-center gap-4">
+                  <Switch size="sm" defaultChecked/>
+                  <span className="text-sm text-(--text-secondary)">Small</span>
+                </div>
+                <div className="flex items-center gap-4">
+                  <Switch size="md" defaultChecked/>
+                  <span className="text-sm text-(--text-secondary)">Medium (default)</span>
+                </div>
+                <div className="flex items-center gap-4">
+                  <Switch size="lg" defaultChecked/>
+                  <span className="text-sm text-(--text-secondary)">Large</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Section: Tabs */}
+        <section className="max-w-5xl mx-auto px-8 pb-16 space-y-6">
+          <div className="pb-2 border-b border-(--border-light)">
+            <h2 className="text-2xl font-bold text-(--text-primary)">Tabs</h2>
+            <p className="text-(--text-secondary) mt-1">Animated tab navigation with indicator bar.</p>
+          </div>
+          <div className="grid grid-cols-1 gap-10">
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">Horizontal tabs</h3>
+              <Tabs defaultValue="messages">
+                <TabList>
+                  <Tab value="messages">Messages</Tab>
+                  <Tab value="threads">Threads</Tab>
+                  <Tab value="mentions">Mentions & reactions</Tab>
+                  <Tab value="drafts" disabled>Drafts (disabled)</Tab>
+                </TabList>
+                <TabPanel value="messages">
+                  <div className="space-y-2 text-(--text-primary)">
+                    <p className="text-[15px] font-semibold">📬 Messages</p>
+                    <p className="text-[14px] text-(--text-secondary)">Your direct messages and channel messages appear
+                      here.</p>
+                  </div>
+                </TabPanel>
+                <TabPanel value="threads">
+                  <div className="space-y-2 text-(--text-primary)">
+                    <p className="text-[15px] font-semibold">🧵 Threads</p>
+                    <p className="text-[14px] text-(--text-secondary)">Conversations you're participating in are shown
+                      here.</p>
+                  </div>
+                </TabPanel>
+                <TabPanel value="mentions">
+                  <div className="space-y-2 text-(--text-primary)">
+                    <p className="text-[15px] font-semibold">🔔 Mentions & reactions</p>
+                    <p className="text-[14px] text-(--text-secondary)">See when someone mentions you or reacts to your
+                      messages.</p>
+                  </div>
+                </TabPanel>
+              </Tabs>
+            </div>
+          </div>
+        </section>
+
+        {/* Section: Progress */}
+        <section className="max-w-5xl mx-auto px-8 pb-16 space-y-6">
+          <div className="pb-2 border-b border-(--border-light)">
+            <h2 className="text-2xl font-bold text-(--text-primary)">Progress</h2>
+            <p className="text-(--text-secondary) mt-1">Progress bar with variants, sizes and indeterminate state.</p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">Variants</h3>
+              <div className="space-y-4">
+                <Progress value={progressValue} label="Uploading file…" showValue/>
+                <Progress value={progressValue} variant="success" label="Storage used" showValue/>
+                <Progress value={progressValue} variant="warning" label="Rate limit" showValue/>
+                <Progress value={progressValue} variant="danger" label="Disk usage" showValue/>
+              </div>
+              <div className="flex gap-2 mt-2">
+                <Button size="sm" onClick={() => setProgressValue(v => Math.max(0, v - 10))}>-10%</Button>
+                <Button size="sm" onClick={() => setProgressValue(v => Math.min(100, v + 10))}>+10%</Button>
+              </div>
+            </div>
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">Sizes &amp; indeterminate</h3>
+              <div className="space-y-4">
+                <Progress value={40} size="sm" label="Small"/>
+                <Progress value={60} size="md" label="Medium (default)"/>
+                <Progress value={80} size="lg" label="Large"/>
+                <Progress label="Indeterminate (loading…)"/>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Section: Loading */}
+        <section className="max-w-5xl mx-auto px-8 pb-16 space-y-6">
+          <div className="pb-2 border-b border-(--border-light)">
+            <h2 className="text-2xl font-bold text-(--text-primary)">Loading</h2>
+            <p className="text-(--text-secondary) mt-1">Spinner、dots 和 bar 三种加载指示器。</p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+            {/* Variants */}
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">Variants</h3>
+              <div className="flex flex-wrap gap-6 items-center">
+                <Loading variant="spinner" label="Spinner"/>
+                <Loading variant="dots" label="Dots"/>
+              </div>
+              <div className="pt-2">
+                <Loading variant="bar" label="Bar"/>
+              </div>
+            </div>
+
+            {/* Sizes */}
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">Sizes</h3>
+              <div className="flex flex-wrap gap-6 items-center">
+                <Loading variant="spinner" size="sm" label="Small"/>
+                <Loading variant="spinner" size="md" label="Medium"/>
+                <Loading variant="spinner" size="lg" label="Large"/>
+              </div>
+              <div className="flex flex-wrap gap-6 items-center pt-2">
+                <Loading variant="dots" size="sm"/>
+                <Loading variant="dots" size="md"/>
+                <Loading variant="dots" size="lg"/>
+              </div>
+            </div>
+
+            {/* Centered */}
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">Centered</h3>
+              <div className="border border-(--border-light) rounded-lg p-6 bg-(--bg-secondary)">
+                <Loading variant="spinner" size="lg" label="Loading data…" centered/>
+              </div>
+            </div>
+
+            {/* Colors */}
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">Custom colors</h3>
+              <div className="flex flex-wrap gap-6 items-center">
+                <Loading variant="spinner" color="text-(--slack-green)" label="Green"/>
+                <Loading variant="spinner" color="text-(--danger)" label="Red"/>
+                <Loading variant="dots" color="bg-amber-400" label="Amber"/>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Section: AutoComplete */}
+        <section className="max-w-5xl mx-auto px-8 pb-16 space-y-6">
+          <div className="pb-2 border-b border-(--border-light)">
+            <h2 className="text-2xl font-bold text-(--text-primary)">AutoComplete</h2>
+            <p className="text-(--text-secondary) mt-1">带下拉过滤的输入框，支持受控模式与键盘导航。</p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+            {/* Basic */}
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">基础用法</h3>
+              <AutoComplete
+                  label="选择频道"
+                  placeholder="搜索频道…"
+                  options={[
+                    { value: 'general', label: '#general' },
+                    { value: 'random', label: '#random' },
+                    { value: 'design', label: '#design' },
+                    { value: 'engineering', label: '#engineering' },
+                    { value: 'marketing', label: '#marketing' },
+                    { value: 'product', label: '#product' },
+                  ]}
+                  value={acValue}
+                  onValueChange={setAcValue}
+                  fullWidth
+              />
+              {acValue && (
+                  <p className="text-[13px] text-(--text-secondary)">
+                    已选：<span className="font-semibold text-(--text-primary)">{acValue}</span>
+                  </p>
+              )}
+            </div>
+
+            {/* Required + error */}
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">Required & Error</h3>
+              <AutoComplete
+                  label="所在城市"
+                  placeholder="请选择城市…"
+                  required
+                  error="请选择一个城市"
+                  options={[
+                    { value: 'beijing', label: '北京' },
+                    { value: 'shanghai', label: '上海' },
+                    { value: 'guangzhou', label: '广州' },
+                    { value: 'shenzhen', label: '深圳' },
+                    { value: 'hangzhou', label: '杭州' },
+                    { value: 'chengdu', label: '成都' },
+                  ]}
+                  fullWidth
+              />
+            </div>
+
+            {/* Disabled options */}
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">禁用选项</h3>
+              <AutoComplete
+                  label="编程语言"
+                  placeholder="选择语言…"
+                  options={[
+                    { value: 'ts', label: 'TypeScript' },
+                    { value: 'js', label: 'JavaScript' },
+                    { value: 'py', label: 'Python' },
+                    { value: 'rs', label: 'Rust' },
+                    { value: 'java', label: 'Java', disabled: true },
+                    { value: 'php', label: 'PHP', disabled: true },
+                  ]}
+                  fullWidth
+              />
+            </div>
+
+            {/* Disabled whole */}
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">Disabled</h3>
+              <AutoComplete
+                  label="项目"
+                  placeholder="已禁用"
+                  disabled
+                  options={[{ value: 'a', label: 'Project Alpha' }]}
+                  defaultValue="a"
+                  fullWidth
+              />
+            </div>
+
+            {/* No clear + async hint */}
+            <div className="space-y-4 md:col-span-2">
+              <h3 className="font-semibold text-(--text-secondary)">onInputChange（模拟异步搜索）</h3>
+              <div className="flex items-center gap-4">
+                <AutoComplete
+                    placeholder="输入关键词…"
+                    clearable={false}
+                    options={[
+                      { value: 'apple', label: 'Apple' },
+                      { value: 'apricot', label: 'Apricot' },
+                      { value: 'banana', label: 'Banana' },
+                      { value: 'blueberry', label: 'Blueberry' },
+                      { value: 'cherry', label: 'Cherry' },
+                      { value: 'grape', label: 'Grape' },
+                      { value: 'mango', label: 'Mango' },
+                      { value: 'orange', label: 'Orange' },
+                      { value: 'peach', label: 'Peach' },
+                      { value: 'pear', label: 'Pear' },
+                      { value: 'pineapple', label: 'Pineapple' },
+                      { value: 'strawberry', label: 'Strawberry' },
+                    ]}
+                    value={acAsync}
+                    onValueChange={setAcAsync}
+                    onInputChange={(v) => console.log('input:', v)}
+                    className="w-64"
+                />
+                {acAsync && (
+                    <span className="text-[13px] text-(--text-secondary)">
+                    已选：<span className="font-semibold text-(--text-primary)">{acAsync}</span>
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Section: Toast */}
+        <section className="max-w-5xl mx-auto px-8 pb-16 space-y-6">
+          <div className="pb-2 border-b border-(--border-light)">
+            <h2 className="text-2xl font-bold text-(--text-primary)">Toast</h2>
+            <p className="text-(--text-secondary) mt-1">Lightweight notification toasts with five semantic types.</p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">Types</h3>
+              <div className="flex flex-wrap gap-3">
+                <Button
+                    size="sm"
+                    onClick={() => toast(
+                        { title: 'Default notification', description: 'This is a default toast message.' })}
+                >
+                  Default
+                </Button>
+                <Button
+                    size="sm"
+                    onClick={() => toast(
+                        { type: 'info', title: 'Info', description: 'Your workspace is being updated.' })}
+                >
+                  Info
+                </Button>
+                <Button
+                    size="sm"
+                    variant="primary"
+                    onClick={() => toast({
+                      type: 'success',
+                      title: 'Message sent!',
+                      description: 'Your message was delivered to #general.',
+                    })}
+                >
+                  Success
+                </Button>
+                <Button
+                    size="sm"
+                    onClick={() => toast({
+                      type: 'warning',
+                      title: 'Storage almost full',
+                      description: 'You have used 90% of your storage.',
+                    })}
+                >
+                  Warning
+                </Button>
+                <Button
+                    size="sm"
+                    variant="danger"
+                    onClick={() => toast({
+                      type: 'error',
+                      title: 'Failed to send',
+                      description: 'Could not deliver the message. Try again.',
+                    })}
+                >
+                  Error
+                </Button>
+              </div>
+            </div>
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">With action</h3>
+              <div className="flex flex-wrap gap-3">
+                <Button
+                    size="sm"
+                    onClick={() =>
+                        toast({
+                          type: 'info',
+                          title: 'New message in #general',
+                          description: 'Alice: "Hey everyone, quick update…"',
+                          action: {
+                            label: 'View',
+                            onClick: () => {},
+                          },
+                        })
+                    }
+                >
+                  Notification with action
+                </Button>
+                <Button
+                    size="sm"
+                    onClick={() =>
+                        toast({
+                          type: 'success',
+                          title: 'Invite sent',
+                          description: 'bob@example.com will receive an invitation.',
+                          timeout: 8000,
+                        })
+                    }
+                >
+                  Custom timeout (8s)
+                </Button>
+              </div>
+            </div>
+          </div>
+        </section>
+
+      </div>
+  )
+}