@blade-hq/agent-react 2612.0.0-beta.27 → 2612.0.0-beta.29

package/dist/style.css

@@ -98,15 +98,8 @@
  * CSS 不分层，仍然赢过这里所有层。 */
 @layer properties, theme, base, components, utilities, blade-chat-overrides;
 
-/* 主题变量（--background、--primary 等）不在这里：唯一来源是 packages/ui/src/styles/tokens.css，
- * 由两个 Tailwind 入口按挂载点编进产物——Shadow DOM 版只挂 :host（宿主在 blade-chat 元素上的
- * 覆盖深浅主题都生效），npm 版挂 .blade-chat（不碰宿主的 :root）。 */
-
 @layer components {
-  /* -------------------------------------------------------------- 布局骨架 */
 
-  /* <blade-chat> 宿主默认块级 + 默认高度；页面对元素写的任何尺寸规则都会覆盖
-   * :host 默认值。host 容器把高度传导给内部 flex 链，消息区撑满、输入框钉底。 */
   :host {
     display: block;
     height: 560px;
@@ -118,8 +111,7 @@
     flex-direction: column;
   }
 
-  /* 弹层根：<blade-chat> 在 shadow root 顶层建的弹层挂载点（见 embed/blade-chat-element.tsx），
-   * 在聊天根节点外面，字体与文字色要单独给，弹层内容才和聊天区一致。 */
+
   [data-blade-overlay-root] {
     color: hsl(var(--foreground));
     font-family:
@@ -139,8 +131,7 @@
    * 容器一个确定宽度（flex/grid 拉伸或显式宽度都可以）。
    * 底色与文字色也从这里给：根节点上没有对应的 Tailwind class。 */
   .blade-chat {
-    /* 具名容器：宿主或以后的子组件万一在中间又建了个匿名 query container，
-     * 下面的 @container 查询不会悄悄改成以那个为基准。 */
+
     container: blade-chat / inline-size;
     min-width: 0;
     --blade-chat-gutter: 1rem;
@@ -175,35 +166,27 @@
     align-items: center;
     justify-content: center;
     gap: 0.75rem;
-    /* 这里的双写是有效降级：cqi 出现在属性值里，旧浏览器会丢掉整条声明并回落到上一条。 */
+
     padding: 4rem 0;
     padding: clamp(2.5rem, 12cqi, 6rem) 0;
     color: hsl(var(--muted-foreground));
   }
 
-  /* -------------------------------------------------------------- 输入区 */
 
-  /* 左右内边距和消息区共用同一个 gutter，否则输入框与消息文字左边缘对不齐。
-   * 上下留白由组件上的 py-3 / pt-0 给。 */
   .blade-chat-input {
-    /* 队列面板占位时组件会加上 border-t-0 收起这条线，所以这里不能写死：写死会
-        盖过那个切换。用变量保留默认值，外层仍按原样渲染一条分隔线。 */
+
     border-top: var(--blade-chat-input-top-border, 1px solid hsl(var(--border)));
     padding-left: var(--blade-chat-gutter);
     padding-right: var(--blade-chat-gutter);
   }
 
-  /* 队列面板的外层左右留白：必须跟下面输入框一致，两边各自居中才不会错位。
-   * 默认跟随本包输入框用的同一个 gutter 变量；宿主输入框用别的留白时（内置 Web
-   * 的输入框外层是 px-5），在自己的样式里覆盖 --blade-chat-queue-gutter 即可。 */
+
   .blade-chat-queue {
     --blade-chat-queue-gutter: var(--blade-chat-gutter, 1rem);
     padding-left: var(--blade-chat-queue-gutter);
     padding-right: var(--blade-chat-queue-gutter);
   }
 
-  /* ------------------------------------------------- 无 preflight 时的控件复位 */
-
   /* 组件上的工具类不负责这些：宿主只用 style.css 且自己的 Tailwind 关了 preflight 时，
      输入框和按钮会退回浏览器默认外观（原生边框、原生按钮底色）。 */
   .blade-chat-textarea {
@@ -219,10 +202,7 @@
     background-color: transparent;
   }
 
-  /* ------------------------------------------------------------ 出错条配色 */
 
-  /* 配色由 .blade-chat-error-bar 的 --destructive 变量给，别写死 red-*：
-   * Tailwind 的 dark: 变体跟的是系统偏好，会和 data-theme 主题打架。 */
   .blade-chat-error-bar {
     border-bottom-color: hsl(var(--destructive) / 0.3);
     background: hsl(var(--destructive) / 0.08);
@@ -231,9 +211,7 @@
 }
 
 @layer blade-chat-overrides {
-  /* 消息区的留白与轮次间距按容器宽度伸缩（见 .blade-chat 的说明）。消息列表组件上还带着内置 Web
-   * 用的 px-* / gap-* 工具类，这两条必须压过它们，所以归 blade-chat-overrides；
-   * 底部那份补白是消息顶置功能的 spacer（--blade-chat-pin-spacer）。 */
+
   .blade-chat-messages-scroll {
     padding: calc(var(--blade-chat-gutter) * 1.4) var(--blade-chat-gutter)
       calc(var(--blade-chat-gutter) * 1.1 + var(--blade-chat-pin-spacer, 0px));
@@ -243,9 +221,6 @@
     gap: var(--blade-chat-turn-gap);
   }
 
-  /* ------------------------------------------------- 窄容器与移动端的手感 */
-  /* 需要跳变而非连续伸缩的值才用 @container：窄容器里 72% 只剩 250px 左右，
-   * 一句话就折三行。这条必须压过组件上的 max-w-[72%]，所以归 blade-chat-overrides。 */
   @container blade-chat (max-width: 480px) {
     .blade-chat-user-col {
       max-width: 88%;
@@ -272,8 +247,6 @@
     }
   }
 
-  /* ------------------------------------------------------------- Markdown */
-
   /* 正文是 streamdown 生成的 HTML，元素上没有类名可挂，排版只能写在这里。
    * 反过来，带 Tailwind class 的那几个外壳（codeblock、prose 容器）不在这里重复。 */
   .blade-chat-markdown {
@@ -311,16 +284,13 @@
     height: auto;
   }
 
-  /* 长 URL 和长内联代码是撑宽的另外两个常见肇事者。用 anywhere 而不是 break-word：
-   * 只有 anywhere 参与 min-content 计算，break-word 挡不住 flex item 被顶宽。 */
+
   .blade-chat-markdown :not(pre) > code,
   .blade-chat-markdown a {
     overflow-wrap: anywhere;
   }
 
-  /* 未闭合的加粗/斜体/行内代码，在闭合符真正到达前先按最终标签
-   * 渲染、只用透明度标出"待确认"——内容和标签结构全程不变，闭合符到达后
-   * 这条规则自然不再匹配，恢复完全不透明，DOM 节点没有被替换过。 */
+
   .blade-chat-markdown [data-markdown-pending="true"] {
     opacity: 0.6;
   }
@@ -403,8 +373,7 @@
     text-align: left;
   }
 
-  /* 代码块正文（<pre>）的排版：外层 codeblock 外壳与滚动由组件上的类给，
-   * 这里只补等宽字体和底色。 */
+
   .blade-chat-codeblock-body {
     background: hsl(var(--muted) / 0.25);
     padding: 0.875rem 1rem;
@@ -413,14 +382,12 @@
     line-height: 1.7;
   }
 
-  /* 代码块里的内联 code 不再套一层底色和留白。 */
+
   .blade-chat-codeblock-body code {
     background: transparent;
     padding: 0;
   }
 
-  /* ---------------------------------------------------------------- 动效 */
-
   .blade-shimmer-text {
     background: linear-gradient(
       90deg,
@@ -446,10 +413,7 @@
   }
 }
 
-/* ------------------------------------------------------------ 消息导航轨 */
 
-/* 右侧的发言刻度轨。定位绝对：悬停才展开的目录不能占布局宽度，否则同一行的
- * 内容会被挤窄，而不悬停时那块空间永远是空的。 */
 .blade-turn-nav {
   position: absolute;
   right: 0.5rem;
@@ -463,8 +427,7 @@
   flex-direction: column;
   align-items: flex-end;
   max-height: 20rem;
-  /* 条数超过可视高度时要能滚：固定 hidden 会让后面的刻度永远点不到。
-     滚动条本身藏掉，它只是给长会话兜底。 */
+
   overflow-y: auto;
   scrollbar-width: none;
   padding: 0.375rem 0.375rem 0.375rem 0;
@@ -521,7 +484,7 @@
   background: hsl(var(--foreground));
 }
 
-/* 定位的进度与失败提示：贴在刻度轨左侧，不随面板开合。 */
+
 .blade-turn-nav-status {
   position: absolute;
   right: 100%;
@@ -554,8 +517,7 @@
 .blade-turn-nav-panel {
   position: absolute;
   right: 100%;
-  /* 与刻度轨同心：顶对齐会让一个接近上限高度的面板整条往下长，聊天区是 overflow: hidden，
-     视口矮一点下面的条目就被裁掉、连滚都滚不到（滚动容器以为自己有完整高度）。 */
+
   top: 50%;
   transform: translateY(-50%);
   padding-right: 0.5rem;
@@ -565,7 +527,7 @@
   display: flex;
   flex-direction: column;
   width: 20rem;
-  /* 高度上限同时受视口约束，短视口里面板整体缩进去而不是被裁掉。 */
+
   max-height: min(28rem, 60vh);
   overflow-y: auto;
   padding: 0.25rem 0;
@@ -595,14 +557,13 @@
   background: hsl(var(--accent));
 }
 
-/* 定位到某条发言后的短暂高亮。加到消息行本身（data-entry-id 那一层），
- * 到点由 hook 摘掉类名，不改变滚动位置。内置 Web 的 app.css 有同名镜像。 */
+
 .blade-turn-nav-flash {
   animation: blade-turn-nav-flash 1.6s ease-out both;
   border-radius: 0.5rem;
 }
 
-/* 减少动效：保留高亮但不动画，用户仍然看得见"定位到哪一条"。 */
+
 @media (prefers-reduced-motion: reduce) {
   .blade-turn-nav-flash {
     animation: none;