@lemoncat7/dsh-theme-xiaohei 0.3.1 → 0.3.2

package/README.md

@@ -4,7 +4,7 @@
 
 ## 兼容性
 
-正式版 `0.3.1` 针对 DeepSeek Harness `0.1.2-rc.1` 构建，需要 Node.js `22.19+` 或 `24+`。Conversation、Renderer、Sidebar、Slots 与 Theme 接口均对应 `0.1.2-rc.1`。本版包含侧栏玻璃收放同步和启动配色交接修复，发布为 npm `latest`。“跟随系统”读取当前设备／浏览器的配色偏好，不按服务器时间切换。
+正式版 `0.3.2` 针对 DeepSeek Harness `0.1.2-rc.1` 构建，需要 Node.js `22.19+` 或 `24+`。Conversation、Renderer、Sidebar、Slots 与 Theme 接口均对应 `0.1.2-rc.1`。本版增加人物局部 2D 骨骼动画，优化侧栏切换性能和文字入场时序，发布为 npm `latest`。“跟随系统”读取当前设备／浏览器的配色偏好，不按服务器时间切换。
 
 ## 当前范围
 
@@ -14,7 +14,8 @@
 - 背景与人物分层：保留日间／夜间的柔和天空；人物使用独立高清、无损 WebP，不随整张壁纸放大。坐姿、托腮和打盹统一为 720×1019，探头素材宽 360；最大显示尺寸仍有约 3 倍像素密度。姿势按需解码后再显示，保留轮廓与五官细节。
 - 根据真实剩余空间决定姿势：右侧宽裕时坐在小平台上，中等窗口扶着侧栏探头；细侧栏空位使用更窄的半脸偷看。没有安全空间时暂时隐藏，不覆盖消息、头像或侧栏按钮，不修改业务布局。
 - 坐姿下，用户空闲 30 秒后托腮、3 分钟后闭眼打盹；鼠标、键盘、触摸点击或滚轮操作后恢复。页面隐藏或不再使用坐姿时暂停计时，返回后重新开始。最多一个空闲计时器，睡着后不继续轮询，不绑定 AI 状态，不读取输入内容。姿势以 220ms 淡化过渡，不是连续骨骼动画。
-- 装饰背景使用稳定的大视口高度；姿势仅做短暂 transform / opacity 入退场，不横穿会话、不做骨骼扭曲。不读取会话内容或执行状态，无持续渲染循环；流式文本高度变化不触发布局重测。软键盘兼容性仍需 iOS / Android 真机验收。
+- 耳朵以独立耳根转动，坐姿和托腮的尾巴通过 7 个关节点与网格蒙皮连续变形，鼠标靠近可触发联动。WebP 仅用于静态图层，不播放帧条；眨眼仍为眼睑贴图合成，身体与四肢没有完整骨骼绑定，并非完整 Live2D。动作最高 30 帧，静止、后台和减少动态模式不持续绘制。
+- 装饰背景使用稳定的大视口高度；姿势切换不横穿会话，不读取会话内容或执行状态；流式文本高度变化不触发布局重测。软键盘兼容性仍需 iOS / Android 真机验收。
 - bloub 嘿咻保留 alpha.171 略宽于高的小黑团轮廓和圆润奶白眼圈。单击依次眨眼回应、轻跳、歪头、感叹号惊讶；双击或键盘 Shift+Enter 轮换散开重聚、蛋形、环绕、六边形、单眼眨眼、睁大眼、感叹号、警觉、休眠、思考、通知。每隔随机 20–40 秒自动选择一种待机动作（含眨眼、休眠，不含思考、通知、感叹号），不连续重复；打字、飞行或其他动作尚未结束时顺延。后台/离屏/减少动态时取消调度，恢复后重新等待，不补播。
 - 嘿咻通过可选的官方 `sessions.list` / `binding().session` 只读订阅当前会话：运行中显示三点思考（代表本轮处理中，不细分推理/输出/工具），观察到本轮结束时提醒一次，新执行错误显示感叹号。提醒表示本轮结束，不承诺任务成功，手动停止也可能触发。初次加载历史、切换会话、重新加载历史不会补发完成提醒。通知徽点采用暖金色和真正透明的缺口；不申请浏览器通知权限、不发送消息、不操作会话、不关联壁纸。
 - 新会话将同一只嘿咻停在输入框上方、Logo 左边；输入区落到底部时，用可打断的约 950 ms 飞行动画转移到输入框左侧。手机给 Logo 左侧留出空间并缩小角色；普通窗口缩放不触发跨区域飞行。仅使用现有 Hero 品牌元素和输入框位置，不读取或改变会话业务数据。
@@ -22,6 +23,7 @@
 - 嘿咻初始只有 10 个 SVG 节点；首次触发特殊动作才一次性建立粒子/轨道池及通知缺口，之后固定复用（总计 102 节点），帧循环不新增节点、不测量布局，结束后隐藏特效。小尺寸变形中的眼圈适当收窄，避免相互粘连。空闲间歇唤醒，离屏、隐藏和减少动态时暂停，卸载释放监听、观察器、帧请求和定时器。宽屏使用框外空位，窄屏使用框内左侧预留位，不改发送键。原项目 MIT 许可与固定源码版本见 `THIRD_PARTY_NOTICES.md`；观察及改动记录见 `docs/heixiu-motion-reference.md`。
 - 对话双方保留静态身份头像；消息气泡使用更舒适的横向留白。
 - 左侧栏只有一层独立磨砂材质，目录与会话不再各自模糊。展开目录、Hover、选中会话使用逐级增强的中性底色；移除拼接空间框和底部卡片，原生滚动、拖拽和菜单保持不变。
+- 侧栏展开时，内容等待列宽到位后统一淡入，避免文字先出现再被展开裁切。切换期间暂停装饰角色布局和绘制；侧栏品牌金属画面缓存复用，不再反复创建 WebGL 和编译着色器。
 - 新会话使用统一圆角控件；发送键嘿咻继续保留完整帧眨眼。左栏行宽、缩进、滚动条预留和收起布局交给 DSH 管理，避免主题强行计算宽度。
 - 支持减少动态、增强对比度、强制颜色和打印模式降级。
 - 主题通过 DSH Theme Runtime 覆盖 Light / Dark / System 的语义 token，不替换用户的主题偏好；卸载后由 DSH 恢复原始 token。
@@ -31,13 +33,13 @@
 通过 npm 安装正式版：
 
 ```bash
-dsh plugin --profile web add @lemoncat7/dsh-theme-xiaohei@0.3.1
+dsh plugin --profile web add @lemoncat7/dsh-theme-xiaohei@0.3.2
 ```
 
-也可从 [GitHub Releases](https://github.com/lemoncat7/dsh-theme-xiaohei/releases/tag/v0.3.1) 下载完整包后安装：
+也可从 [GitHub Releases](https://github.com/lemoncat7/dsh-theme-xiaohei/releases/tag/v0.3.2) 下载完整包后安装：
 
 ```bash
-dsh plugin --profile web add ./lemoncat7-dsh-theme-xiaohei-0.3.1.tgz
+dsh plugin --profile web add ./lemoncat7-dsh-theme-xiaohei-0.3.2.tgz
 ```
 
 卸载：

package/lib/chrome/sidebar.d.ts

@@ -1,3 +1,3 @@
 /** One glass surface over DSH's native sidebar geometry and controls. */
-export declare const XIAOHEI_SIDEBAR_CSS = "\n/* The layout column and SidebarRoot both consume the native sidebar fill.\n * The theme token makes those surfaces transparent; this stable slot\n * relationship removes the layout column's remaining straight divider. */\n#root :has(> [data-slot='sidebar']) {\n  background: transparent !important;\n  border-right-color: transparent !important;\n}\n\n#root [data-slot='sidebar'] {\n  position: relative;\n}\n\n/* Hide the tree scrollbar's paint, retaining its gutter so rows do not grow\n * into the glass edge. Wheel, touch and keyboard remain native; dialogs and\n * other plugin panels keep their normal scrollbar affordance. */\n#root [data-slot='sidebar.workspaces'] [role='tree'] {\n  scrollbar-color: transparent transparent !important;\n}\n\n#root [data-slot='sidebar.workspaces'] [role='tree']::-webkit-scrollbar,\n#root [data-slot='sidebar.workspaces'] [role='tree']::-webkit-scrollbar-thumb,\n#root [data-slot='sidebar.workspaces'] [role='tree']::-webkit-scrollbar-track {\n  background: transparent !important;\n  border-color: transparent !important;\n  box-shadow: none !important;\n}\n\n/* The host shell remains paint- and filter-free because Settings is a fixed\n * descendant. The glass itself lives outside #root in the scene layer. */\n#root [data-slot='sidebar'] > div {\n  --dsh-sidebar-inline-padding: 18px;\n  position: relative;\n  background: transparent !important;\n  border-right: 0;\n  box-shadow: none;\n}\n\n#dsh-theme-xiaohei\\/sidebar-glass {\n  position: absolute;\n  box-sizing: border-box;\n  left: var(--xiaohei-sidebar-glass-left, 7px);\n  top: var(--xiaohei-sidebar-glass-top, 8px);\n  width: var(--xiaohei-sidebar-glass-width, 0px);\n  height: var(--xiaohei-sidebar-glass-height, 0px);\n  pointer-events: none;\n  overflow: hidden;\n  border: 1px solid var(--xiaohei-sidebar-glass-edge);\n  border-radius: var(--xiaohei-sidebar-glass-radius);\n  background: var(--xiaohei-sidebar-glass-fill);\n  box-shadow:\n    inset 0 1px var(--xiaohei-sidebar-glass-highlight),\n    inset 1px 0 var(--xiaohei-sidebar-glass-refraction),\n    0 18px 50px -32px var(--xiaohei-sidebar-shadow);\n  -webkit-backdrop-filter:\n    blur(var(--xiaohei-sidebar-glass-blur))\n    saturate(var(--xiaohei-sidebar-glass-saturation));\n  backdrop-filter:\n    blur(var(--xiaohei-sidebar-glass-blur))\n    saturate(var(--xiaohei-sidebar-glass-saturation));\n}\n\n/* Width dragging changes the full-height glass raster every frame. Suspend\n * only the filters while geometry is moving; the translucent surface remains\n * visible and the settled glass returns after the resize gesture ends. */\nhtml[data-xiaohei-sidebar-resizing] #dsh-theme-xiaohei\\/sidebar-glass {\n  -webkit-backdrop-filter: none;\n  backdrop-filter: none;\n}\n\n/* One restrained inner rim completes the glass edge without tinting content. */\n#dsh-theme-xiaohei\\/sidebar-glass::after {\n  content: '';\n  position: absolute;\n  pointer-events: none;\n  inset: 1px;\n  border-radius: calc(var(--xiaohei-sidebar-glass-radius) - 1px);\n  box-shadow:\n    inset 0 1px var(--xiaohei-sidebar-glass-refraction),\n    inset 0 -20px 28px -32px var(--xiaohei-sidebar-shadow-soft);\n}\n\n/* The official brand slot owns geometry in both the wide sidebar and rail.\n * The bitmap remains visible as a no-WebGL fallback while the compact\n * MetallicPaint canvas adds a restrained liquid-metal pass above it. */\n.xiaohei-brand-mark {\n  position: relative;\n  display: inline-grid;\n  flex: none;\n  place-items: center;\n  width: var(--xiaohei-brand-mark-size);\n  height: var(--xiaohei-brand-mark-size);\n  margin: -2px;\n  overflow: visible;\n  pointer-events: none;\n  filter: drop-shadow(0 2px 3px rgb(8 13 15 / 18%));\n  transform: translateY(-1px);\n}\n\n.xiaohei-brand-mark__fallback,\n.xiaohei-brand-mark__metal {\n  position: absolute;\n  inset: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n.xiaohei-brand-mark__fallback {\n  opacity: .94;\n  transition: opacity var(--xiaohei-motion-base) ease;\n}\n\n.xiaohei-brand-mark__metal {\n  opacity: 0;\n  transition:\n    opacity var(--xiaohei-motion-base) ease,\n    filter var(--xiaohei-motion-base) ease;\n}\n\n.xiaohei-brand-mark[data-metallic-ready='true'] .xiaohei-brand-mark__fallback {\n  opacity: .28;\n}\n\n.xiaohei-brand-mark[data-metallic-ready='true'] .xiaohei-brand-mark__metal {\n  opacity: .92;\n}\n\n.xiaohei-brand-name {\n  white-space: nowrap;\n  letter-spacing: .025em;\n  font-size: 17px;\n  font-weight: 600;\n}\n\n/* ui-conversation currently exposes the Hero mark but not its headline as a\n * slot. Anchor the visual copy to that official mark occupant so hashed Host\n * class names and unrelated headings remain untouched. */\n#root span:has(> .xiaohei-brand-mark[data-brand-context='hero']) + span {\n  font-size: 0;\n}\n\n#root span:has(> .xiaohei-brand-mark[data-brand-context='hero']) + span::after {\n  content: '\u4E07\u7269\u6709\u7075\uFF0C\u81EA\u5728\u540C\u884C';\n  font-size: 26px;\n  font-weight: 500;\n  line-height: 32px;\n}\n\n#root [data-slot='sidebar'] button:hover .xiaohei-brand-mark__metal {\n  filter: brightness(1.12) contrast(1.04);\n}\n\n/* Keep native rail/wide geometry and one consistent control material. */\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > div:first-child button:last-child,\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {\n  color: var(--xiaohei-sidebar-emphasis);\n  transition:\n    background-color var(--xiaohei-motion-fast) ease,\n    border-color var(--xiaohei-motion-fast) ease,\n    transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);\n}\n\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > div:first-child button:last-child:hover {\n  background: var(--xiaohei-sidebar-hover);\n}\n\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {\n  border: 1px solid var(--xiaohei-sidebar-control-edge);\n  border-radius: var(--xiaohei-radius-control);\n  background: var(--xiaohei-sidebar-control);\n  box-shadow: inset 0 1px var(--xiaohei-sidebar-control-highlight);\n  justify-content: flex-start;\n  gap: 8px;\n  padding-inline: 12px;\n  text-align: start;\n}\n\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD']:hover,\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session']:hover {\n  border-color: var(--xiaohei-sidebar-control-edge-hover);\n  background: var(--xiaohei-sidebar-hover);\n}\n\n/* The footer uses a divider instead of another framed card. */\n#root [data-slot='sidebar'] > div:not([class*='_collapsed'])\n  > :has(> div > [data-slot='sidebar.footer.action']) {\n  box-sizing: border-box;\n  gap: 2px;\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--xiaohei-sidebar-control-edge);\n}\n\n#root [data-slot='sidebar.footer.action'] > button,\n#root [data-slot='sidebar.settings'] > button {\n  color: var(--dsw-alias-label-secondary);\n  border-radius: var(--xiaohei-radius-small) !important;\n  transition:\n    color var(--xiaohei-motion-fast) ease,\n    background-color var(--xiaohei-motion-fast) ease,\n    transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);\n}\n\n#root [data-slot='sidebar.footer.action'] > button:hover,\n#root [data-slot='sidebar.settings'] > button:hover,\n#root [data-slot='sidebar.footer.action'] > button[aria-expanded='true'],\n#root [data-slot='sidebar.settings'] > button[aria-expanded='true'] {\n  color: var(--xiaohei-sidebar-emphasis);\n  background: var(--xiaohei-sidebar-hover);\n}\n\n#root [data-slot='sidebar.footer.action'] > button:active,\n#root [data-slot='sidebar.settings'] > button:active {\n  transform: translateY(1px);\n}\n\n#root [data-slot='sidebar'] button:focus-visible {\n  outline: 2px solid var(--xiaohei-sidebar-emphasis);\n  outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  #root [data-slot='sidebar'] button {\n    transition-duration: 0ms !important;\n  }\n\n\n  .xiaohei-brand-mark__fallback,\n  .xiaohei-brand-mark__metal {\n    transition-duration: 0ms !important;\n  }\n}\n\n@media (prefers-reduced-transparency: reduce) {\n  #dsh-theme-xiaohei\\/sidebar-glass {\n    background: var(--xiaohei-sidebar-glass-solid);\n    -webkit-backdrop-filter: none;\n    backdrop-filter: none;\n  }\n\n}\n\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n  #dsh-theme-xiaohei\\/sidebar-glass {\n    background: var(--xiaohei-sidebar-glass-solid);\n  }\n}\n\n@media (forced-colors: active) {\n  #dsh-theme-xiaohei\\/sidebar-glass {\n    border-color: CanvasText;\n    background: Canvas;\n    box-shadow: none;\n    -webkit-backdrop-filter: none;\n    backdrop-filter: none;\n  }\n\n  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],\n  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {\n    border-color: ButtonText;\n  }\n\n}\n";
+export declare const XIAOHEI_SIDEBAR_CSS = "\n/* The layout column and SidebarRoot both consume the native sidebar fill.\n * The theme token makes those surfaces transparent; this stable slot\n * relationship removes the layout column's remaining straight divider. */\n#root :has(> [data-slot='sidebar']) {\n  background: transparent !important;\n  border-right-color: transparent !important;\n}\n\n#root [data-slot='sidebar'] {\n  position: relative;\n}\n\n/* Reveal wide navigation only after its column has reached the target width.\n * Keep the toggle itself native. Opacity is applied to content, never the shell\n * (which also hosts fixed-position settings dialogs). */\n@media (prefers-reduced-motion: no-preference) {\n  #root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal]:not([class*='_collapsed']) > :not(:first-child),\n  #root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal]:not([class*='_collapsed']) > div:first-child > button:first-child {\n    transition: opacity 100ms ease-out;\n  }\n  #root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal='waiting']:not([class*='_collapsed']) > :not(:first-child),\n  #root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal='waiting']:not([class*='_collapsed']) > div:first-child > button:first-child {\n    opacity: 0 !important;\n    visibility: hidden;\n    transition: none;\n  }\n}\n\n/* Hide the tree scrollbar's paint, retaining its gutter so rows do not grow\n * into the glass edge. Wheel, touch and keyboard remain native; dialogs and\n * other plugin panels keep their normal scrollbar affordance. */\n#root [data-slot='sidebar.workspaces'] [role='tree'] {\n  scrollbar-color: transparent transparent !important;\n}\n\n#root [data-slot='sidebar.workspaces'] [role='tree']::-webkit-scrollbar,\n#root [data-slot='sidebar.workspaces'] [role='tree']::-webkit-scrollbar-thumb,\n#root [data-slot='sidebar.workspaces'] [role='tree']::-webkit-scrollbar-track {\n  background: transparent !important;\n  border-color: transparent !important;\n  box-shadow: none !important;\n}\n\n/* The host shell remains paint- and filter-free because Settings is a fixed\n * descendant. The glass itself lives outside #root in the scene layer. */\n#root [data-slot='sidebar'] > div {\n  --dsh-sidebar-inline-padding: 18px;\n  position: relative;\n  background: transparent !important;\n  border-right: 0;\n  box-shadow: none;\n}\n\n#dsh-theme-xiaohei\\/sidebar-glass {\n  position: absolute;\n  box-sizing: border-box;\n  left: var(--xiaohei-sidebar-glass-left, 7px);\n  top: var(--xiaohei-sidebar-glass-top, 8px);\n  width: var(--xiaohei-sidebar-glass-width, 0px);\n  height: var(--xiaohei-sidebar-glass-height, 0px);\n  pointer-events: none;\n  overflow: hidden;\n  border: 1px solid var(--xiaohei-sidebar-glass-edge);\n  border-radius: var(--xiaohei-sidebar-glass-radius);\n  background: var(--xiaohei-sidebar-glass-fill);\n  box-shadow:\n    inset 0 1px var(--xiaohei-sidebar-glass-highlight),\n    inset 1px 0 var(--xiaohei-sidebar-glass-refraction),\n    0 18px 50px -32px var(--xiaohei-sidebar-shadow);\n  -webkit-backdrop-filter:\n    blur(var(--xiaohei-sidebar-glass-blur))\n    saturate(var(--xiaohei-sidebar-glass-saturation));\n  backdrop-filter:\n    blur(var(--xiaohei-sidebar-glass-blur))\n    saturate(var(--xiaohei-sidebar-glass-saturation));\n}\n\n/* Width dragging changes the full-height glass raster every frame. Suspend\n * only the filters while geometry is moving; the translucent surface remains\n * visible and the settled glass returns after the resize gesture ends. */\nhtml[data-xiaohei-sidebar-resizing] #dsh-theme-xiaohei\\/sidebar-glass {\n  -webkit-backdrop-filter: none;\n  backdrop-filter: none;\n}\n\n/* One restrained inner rim completes the glass edge without tinting content. */\n#dsh-theme-xiaohei\\/sidebar-glass::after {\n  content: '';\n  position: absolute;\n  pointer-events: none;\n  inset: 1px;\n  border-radius: calc(var(--xiaohei-sidebar-glass-radius) - 1px);\n  box-shadow:\n    inset 0 1px var(--xiaohei-sidebar-glass-refraction),\n    inset 0 -20px 28px -32px var(--xiaohei-sidebar-shadow-soft);\n}\n\n/* The official brand slot owns geometry in both the wide sidebar and rail.\n * The bitmap remains visible as a no-WebGL fallback while the compact\n * MetallicPaint canvas adds a restrained liquid-metal pass above it. */\n.xiaohei-brand-mark {\n  position: relative;\n  display: inline-grid;\n  flex: none;\n  place-items: center;\n  width: var(--xiaohei-brand-mark-size);\n  height: var(--xiaohei-brand-mark-size);\n  margin: -2px;\n  overflow: visible;\n  pointer-events: none;\n  filter: drop-shadow(0 2px 3px rgb(8 13 15 / 18%));\n  transform: translateY(-1px);\n}\n\n.xiaohei-brand-mark__fallback,\n.xiaohei-brand-mark__metal {\n  position: absolute;\n  inset: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n.xiaohei-brand-mark__fallback {\n  opacity: .94;\n  transition: opacity var(--xiaohei-motion-base) ease;\n}\n\n.xiaohei-brand-mark__metal {\n  opacity: 0;\n  transition:\n    opacity var(--xiaohei-motion-base) ease,\n    filter var(--xiaohei-motion-base) ease;\n}\n\n.xiaohei-brand-mark[data-metallic-ready='true'] .xiaohei-brand-mark__fallback {\n  opacity: .28;\n}\n\n.xiaohei-brand-mark[data-metallic-ready='true'] .xiaohei-brand-mark__metal {\n  opacity: .92;\n}\n\n.xiaohei-brand-name {\n  white-space: nowrap;\n  letter-spacing: .025em;\n  font-size: 17px;\n  font-weight: 600;\n}\n\n/* ui-conversation currently exposes the Hero mark but not its headline as a\n * slot. Anchor the visual copy to that official mark occupant so hashed Host\n * class names and unrelated headings remain untouched. */\n#root span:has(> .xiaohei-brand-mark[data-brand-context='hero']) + span {\n  font-size: 0;\n}\n\n#root span:has(> .xiaohei-brand-mark[data-brand-context='hero']) + span::after {\n  content: '\u4E07\u7269\u6709\u7075\uFF0C\u81EA\u5728\u540C\u884C';\n  font-size: 26px;\n  font-weight: 500;\n  line-height: 32px;\n}\n\n#root [data-slot='sidebar'] button:hover .xiaohei-brand-mark__metal {\n  filter: brightness(1.12) contrast(1.04);\n}\n\n/* Keep native rail/wide geometry and one consistent control material. */\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > div:first-child button:last-child,\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {\n  color: var(--xiaohei-sidebar-emphasis);\n  transition:\n    background-color var(--xiaohei-motion-fast) ease,\n    border-color var(--xiaohei-motion-fast) ease,\n    transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);\n}\n\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > div:first-child button:last-child:hover {\n  background: var(--xiaohei-sidebar-hover);\n}\n\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {\n  border: 1px solid var(--xiaohei-sidebar-control-edge);\n  border-radius: var(--xiaohei-radius-control);\n  background: var(--xiaohei-sidebar-control);\n  box-shadow: inset 0 1px var(--xiaohei-sidebar-control-highlight);\n  justify-content: flex-start;\n  gap: 8px;\n  padding-inline: 12px;\n  text-align: start;\n}\n\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD']:hover,\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session']:hover {\n  border-color: var(--xiaohei-sidebar-control-edge-hover);\n  background: var(--xiaohei-sidebar-hover);\n}\n\n/* The footer uses a divider instead of another framed card. */\n#root [data-slot='sidebar'] > div:not([class*='_collapsed'])\n  > :has(> div > [data-slot='sidebar.footer.action']) {\n  box-sizing: border-box;\n  gap: 2px;\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--xiaohei-sidebar-control-edge);\n}\n\n#root [data-slot='sidebar.footer.action'] > button,\n#root [data-slot='sidebar.settings'] > button {\n  color: var(--dsw-alias-label-secondary);\n  border-radius: var(--xiaohei-radius-small) !important;\n  transition:\n    color var(--xiaohei-motion-fast) ease,\n    background-color var(--xiaohei-motion-fast) ease,\n    transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);\n}\n\n#root [data-slot='sidebar.footer.action'] > button:hover,\n#root [data-slot='sidebar.settings'] > button:hover,\n#root [data-slot='sidebar.footer.action'] > button[aria-expanded='true'],\n#root [data-slot='sidebar.settings'] > button[aria-expanded='true'] {\n  color: var(--xiaohei-sidebar-emphasis);\n  background: var(--xiaohei-sidebar-hover);\n}\n\n#root [data-slot='sidebar.footer.action'] > button:active,\n#root [data-slot='sidebar.settings'] > button:active {\n  transform: translateY(1px);\n}\n\n#root [data-slot='sidebar'] button:focus-visible {\n  outline: 2px solid var(--xiaohei-sidebar-emphasis);\n  outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  #root [data-slot='sidebar'] button {\n    transition-duration: 0ms !important;\n  }\n\n\n  .xiaohei-brand-mark__fallback,\n  .xiaohei-brand-mark__metal {\n    transition-duration: 0ms !important;\n  }\n}\n\n@media (prefers-reduced-transparency: reduce) {\n  #dsh-theme-xiaohei\\/sidebar-glass {\n    background: var(--xiaohei-sidebar-glass-solid);\n    -webkit-backdrop-filter: none;\n    backdrop-filter: none;\n  }\n\n}\n\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n  #dsh-theme-xiaohei\\/sidebar-glass {\n    background: var(--xiaohei-sidebar-glass-solid);\n  }\n}\n\n@media (forced-colors: active) {\n  #dsh-theme-xiaohei\\/sidebar-glass {\n    border-color: CanvasText;\n    background: Canvas;\n    box-shadow: none;\n    -webkit-backdrop-filter: none;\n    backdrop-filter: none;\n  }\n\n  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],\n  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {\n    border-color: ButtonText;\n  }\n\n}\n";
 //# sourceMappingURL=sidebar.d.ts.map

package/lib/chrome/sidebar.js

@@ -12,6 +12,22 @@ export const XIAOHEI_SIDEBAR_CSS = `
   position: relative;
 }
 
+/* Reveal wide navigation only after its column has reached the target width.
+ * Keep the toggle itself native. Opacity is applied to content, never the shell
+ * (which also hosts fixed-position settings dialogs). */
+@media (prefers-reduced-motion: no-preference) {
+  #root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal]:not([class*='_collapsed']) > :not(:first-child),
+  #root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal]:not([class*='_collapsed']) > div:first-child > button:first-child {
+    transition: opacity 100ms ease-out;
+  }
+  #root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal='waiting']:not([class*='_collapsed']) > :not(:first-child),
+  #root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal='waiting']:not([class*='_collapsed']) > div:first-child > button:first-child {
+    opacity: 0 !important;
+    visibility: hidden;
+    transition: none;
+  }
+}
+
 /* Hide the tree scrollbar's paint, retaining its gutter so rows do not grow
  * into the glass edge. Wheel, touch and keyboard remain native; dialogs and
  * other plugin panels keep their normal scrollbar affordance. */