SideBar 设计文档

AI 侧边信息栏套件（重量级组合，分阶段交付）：P0 SideBarContainer 为可伸缩浮层壳——贴视口右侧（RTL 贴左），role=dialog + aria-labelledby(title)，打开移焦 + focus-trap 焦点捕获/归还 + Esc 关闭，堆叠 z-index 与 Modal/SideSheet 统一层栈（后开者在上），resizable 时左边缘（RTL 右边缘）把手拖拽调宽——复用 core createResizeDrag（axis:x 单轴 + clamp minWidth/maxWidth）与 Resizable 同套把手 a11y（role=separator + aria-orientation=vertical + aria-valuenow + 键盘 ←→/Home/End），motion 展开/收起为 CSS transition（reduced-motion / motion=false 退化即时显隐）。P1 SideBar 主壳按 mode 路由：main 渲染顶部 Options 图标 tab 组（role=tablist + roving tabindex + 键盘，name 作无障碍名）+ renderMainContent(activeKey)；detail（code/file/自定义）渲染 renderDetailHeader + 返回按钮（onBackWard 可异步，await 期间禁用防重触发）+ renderDetailContent(mode)。受控 visible / activeKey（不回写，仅回调通知）。P2 SideBarAnnotation 参考来源/引用溯源：外层复用 SideBarContainer 浮层壳（透传全部 Container props，title 默认走 i18n annotationTitle），内部用 Collapse 渲染 info 分组（每组一折叠面板 + aria-expanded），展开区渲染 video（封面/时长/播放态，duration 走 locale 数值格式化为 mm:ss）/text（站点 logo/名称/引用序号）卡片；可点击卡片（url 或 onClick）用原生 button（键盘 Enter/Space + focus 环 + 时长/序号本地化可访问文本），renderItem 可整条覆盖。P4 SideBarCodeContent 代码/JSON 预览：Collapse 折叠列表，每项按 isJson 分流 JsonViewer / CodeHighlight（透传 jsonViewerProps/codeHighlightProps），onExpand 全屏回调。P3 SideBarMcpConfigure MCP 工具配置面板：外层复用 SideBarContainer（title 默认走 i18n mcpTitle），内部顶部已启用计数 + 搜索框（Input，前缀放大镜 + aria-label，headless filterMcpOptions 支持自定义 filter）+ 内置/自定义双列表并列（Semi 为 radio 二选一，本库改并列双列表更直观）；每项前置图标（string→img / Snippet）+ label + desc + 动作按钮（内置 configure 显示配置 / 自定义显示编辑，aria-label 含工具名）+ 启用开关（复用本库 Switch，原生 role=switch + aria-checked，disabled 预设项锁定 + title tooltip），启用变化经 core toggleMcpOptionActive 产出「下一份数组 + custom 标记」上抛 onStatusChange 不回写；自定义组空态显示添加按钮，无搜索结果显示提示。P5 SideBarFileContent 富文本查看/编辑：Collapse 折叠列表，每项 SideBarFileItem 一个 tiptap v3 编辑器（editable 控查看/编辑，编辑态渲染格式工具栏），默认扩展集对齐 Semi（StarterKit link openOnClick:false + TextStyleKit + Image + TextAlign + 自研 SelectionMark + 自研 ImageUploadNode，末尾拼接 extensions），onContentChange 回调 editor.getHTML()；ImageUploadNode 用 svelte-tiptap NodeViewRenderer 内嵌本库 Upload（draggable + getUploadImageSrc）；tiptap 内核 + 3 官方扩展（text-style/image/text-align）+ svelte-tiptap 全程动态 import 不进主 bundle。