@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/tone.css

@@ -0,0 +1,189 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/*
+ * 语气层：与组件无关，全库共用一份。
+ *
+ * 三个视觉轴各管一件事，互不干涉：
+ *   data-variant  形态  solid / subtle / outline / ghost —— 颜色怎么用
+ *   data-tone     语气  brand / neutral / success / warning / danger / info —— 用哪族颜色
+ *   data-size     尺寸  sm / md / lg
+ *
+ * 这里只声明私有槽，各组件的形态规则去消费。所以加一个语气是改这一处 6 条规则，
+ * 而不是逐个组件写 6 遍。
+ *
+ * --xh-_tone-on 是实心底上的前景色，--xh-_tone-shift 是交互态要往哪个方向挪
+ * （永远背离前景色走，悬停与按下才不会反过来压低对比度）。两者都由 --xh-_tone 现推：
+ * 按 WCAG 的权重算出语气色的相对亮度，低于 0.179 配白字、高于配深字，shift 取反面。
+ * 0.179 是白字与黑字对比度相等的那一点，解析解。
+ *
+ * --xh-_tone-on 还有第二个消费者：实心面上的聚焦环取的是这块面配对的前景色（见 focus.css），
+ * 部件没写 color 的那几档直接把这一支写进环色槽。所以它同时管着字与环两件事。
+ * 环本身不接语气：语气只决定面是哪一族色，不决定环是什么色。
+ *
+ * 现推是因为语气色可换肤：写死的分派只对本仓这套 600 档成立，使用者换一套调色板
+ * 配对就不再成立，而门禁只验本仓的色，换肤后的失配一路绿灯。
+ *
+ * 够不到相对颜色语法的引擎退回逐族写死的那一份，取值是本仓这套色的实测结果：
+ * 600 档上白字对 brand 5.08、neutral 7.80、danger 4.83 达标，而 success 3.04、
+ * warning 2.70、info 3.47 都不到 4.5，这三族配深字。兜底那一份用的是固定原语而不是
+ * --xh-fg-default：实心底本身是原语色、不随主题翻，配色若跟着主题翻，暗色下就会变成
+ * 白字压在浅黄底上（实测对比度 2.70）。
+ *
+ * brand 是例外：那一族的色相归使用者，所以它的底与前景走 --xh-bg-brand / --xh-fg-on-brand
+ * 这两个语义令牌。缺省主题下它们就解析成 brand-600 与 neutral-0，与其余五族同值；
+ * 改写过品牌色的使用者只改这两个令牌，实心底与它上面的字就一起跟着走。
+ * 底与前景既然随主题翻，brand 的 shift 也必须随主题翻——现推那一档自动跟着底色走，
+ * 文件末尾那条深色覆盖是给兜底那一档用的。
+ */
+@layer xihan.components {
+  [data-tone] {
+    /* 先给一份中性缺省：写了 data-tone 却拼错取值时退成中性，
+       而不是让 --xh-_tone 悬空——悬空会让下面每条 color-mix 变成计算期无效，
+       用它的声明会整条失效，且 var() 兜底也救不回来（槽位是「已声明但无效」）。 */
+    --xh-_tone: var(--xh-color-neutral-600);
+    --xh-_tone-on: var(--xh-color-neutral-0);
+    --xh-_tone-shift: var(--xh-color-neutral-950);
+
+    /* 交互态与淡底都从主色兑出来，兑的对象是主题色，深浅两态自动跟随 */
+    --xh-_tone-hover: color-mix(in oklab, var(--xh-_tone) 88%, var(--xh-_tone-shift));
+    --xh-_tone-active: color-mix(in oklab, var(--xh-_tone) 78%, var(--xh-_tone-shift));
+    --xh-_tone-subtle: color-mix(in oklab, var(--xh-_tone) 12%, var(--xh-bg-surface));
+    --xh-_tone-subtle-hover: color-mix(in oklab, var(--xh-_tone) 20%, var(--xh-bg-surface));
+    --xh-_tone-subtle-active: color-mix(in oklab, var(--xh-_tone) 28%, var(--xh-bg-surface));
+    --xh-_tone-border: color-mix(in oklab, var(--xh-_tone) 40%, var(--xh-bg-surface));
+    /* 控件的可操作区边界要 3:1，兑了底色的 --xh-_tone-border 六族全在 1.44–2.18，够不着。
+       这一支直接取主色本体；两族在各自的底上仍不够，在下面按主题单独兜 */
+    --xh-_tone-border-control: var(--xh-_tone);
+    /* 装饰性强调（色条、指示条、锚点高亮这类）是非文字图形，同样要 3:1，
+       要求与可操作区边界一模一样，就直接跟着那一支走，连它按主题兜的两族一并继承。
+       要读得清的状态文字不在此列，那些走 --xh-_tone-fg */
+    --xh-_tone-soft: var(--xh-_tone-border-control);
+    /* 在普通背景上表达该语气的文字色：往前景色兑，浅色态变深、深色态变浅。
+       兑到 60% 是实测出来的：这一档要同时压得住淡底的静态/悬停/按下三态、面与抬起的面
+       共五种底，72% 时六族里有三族够不到 4.5（最低 3.66），60% 全部达标且留有余量 */
+    --xh-_tone-fg: color-mix(in oklab, var(--xh-_tone) 60%, var(--xh-fg-default));
+  }
+
+  [data-tone='brand'] {
+    --xh-_tone: var(--xh-bg-brand);
+    --xh-_tone-on: var(--xh-fg-on-brand);
+    --xh-_tone-shift: var(--xh-color-neutral-950);
+  }
+
+  [data-tone='neutral'] {
+    --xh-_tone: var(--xh-color-neutral-600);
+    --xh-_tone-on: var(--xh-color-neutral-0);
+    --xh-_tone-shift: var(--xh-color-neutral-950);
+  }
+
+  [data-tone='danger'] {
+    --xh-_tone: var(--xh-color-danger-600);
+    --xh-_tone-on: var(--xh-color-neutral-0);
+    --xh-_tone-shift: var(--xh-color-neutral-950);
+  }
+
+  [data-tone='success'] {
+    --xh-_tone: var(--xh-color-success-600);
+    --xh-_tone-on: var(--xh-color-neutral-950);
+    --xh-_tone-shift: var(--xh-color-neutral-0);
+  }
+
+  [data-tone='warning'] {
+    --xh-_tone: var(--xh-color-warning-600);
+    --xh-_tone-on: var(--xh-color-neutral-950);
+    --xh-_tone-shift: var(--xh-color-neutral-0);
+  }
+
+  [data-tone='info'] {
+    --xh-_tone: var(--xh-color-info-600);
+    --xh-_tone-on: var(--xh-color-neutral-950);
+    --xh-_tone-shift: var(--xh-color-neutral-0);
+  }
+
+  /* 主色本体在各自的底上有两族够不到 3:1：黄在白底上只有 2.70，中性在深色底上只有 2.54。
+     语气色是固定原语、不随主题翻，所以这两族只能按主题各兜一次。
+     浅色是缺省态（不写 data-theme 也算浅色），深色靠属性选择器压过它。
+     data-theme 写在语气容器自己身上还是写在祖先上都算，两种用法都成立 */
+  [data-tone='warning'] {
+    --xh-_tone-border-control: var(--xh-color-warning-700);
+  }
+
+  :is([data-theme='dark'] *, [data-theme='dark'])[data-tone='warning'] {
+    --xh-_tone-border-control: var(--xh-color-warning-600);
+  }
+
+  [data-tone='neutral'] {
+    --xh-_tone-border-control: var(--xh-color-neutral-600);
+  }
+
+  :is([data-theme='dark'] *, [data-theme='dark'])[data-tone='neutral'] {
+    --xh-_tone-border-control: var(--xh-color-neutral-550);
+  }
+
+  /* 把语气色转成线性 sRGB 分量、按 WCAG 的权重算出相对亮度：低于 0.179 前景取白、
+     高于取黑，挪动方向取前景的反面。三个通道写同一个式子，算出来的是纯白或纯黑；
+     alpha 显式写 1，不然会连语气色的透明度一起继承过来。
+     探针按这里实际用到的整个形态测，只测得起 color(from …) 的引擎不会落进半截支持。
+     上面各族写死的那一份是兜底：引擎不认这条语法时整块丢弃，退回那一份 */
+  @supports (color: color(from red srgb-linear clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * infinity, 1) 0 0 / 1)) {
+    [data-tone] {
+      --xh-_tone-on: color(from var(--xh-_tone) srgb-linear
+        clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * infinity, 1)
+        clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * infinity, 1)
+        clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * infinity, 1) / 1);
+      --xh-_tone-shift: color(from var(--xh-_tone) srgb-linear
+        clamp(0, ((0.2126 * r + 0.7152 * g + 0.0722 * b) - 0.179) * infinity, 1)
+        clamp(0, ((0.2126 * r + 0.7152 * g + 0.0722 * b) - 0.179) * infinity, 1)
+        clamp(0, ((0.2126 * r + 0.7152 * g + 0.0722 * b) - 0.179) * infinity, 1) / 1);
+    }
+  }
+
+  /* brand 的底与前景走语义令牌、随主题翻，所以它的 shift 也必须跟着翻，
+     否则深色下前景是深字而 shift 仍往深处挪，悬停与按下反而压低对比度
+     （实测 5.29 → 4.25 → 3.49，而不写 tone 的品牌链是 5.29 → 7.33 → 10.85）。
+     其余五族的底是固定原语、不随主题翻，shift 也就不必翻 */
+  :is([data-theme='dark'] *, [data-theme='dark'])[data-tone='brand'] {
+    --xh-_tone-shift: var(--xh-color-neutral-0);
+  }
+
+  /* 语气轴对外的那一族：上面每支私有槽一对一指过来，取值恒等。
+     使用者在自己的节点上写 data-tone，就能在那个节点里取到整族颜色，
+     六族与深浅两态都跟着上面的推导走。
+     --xh-_tone-shift 是兑色的方向、不是一档颜色，不出公开令牌。
+     声明在 [data-tone] 上而不是 :root 上：值里带 var()，自定义属性的 var()
+     在「声明它的那个元素」上就替换掉了，落在 :root 上会把语气冻死在根元素。 */
+  [data-tone] {
+    --xh-tone-solid: var(--xh-_tone);
+    --xh-tone-solid-hover: var(--xh-_tone-hover);
+    --xh-tone-solid-active: var(--xh-_tone-active);
+    --xh-tone-on: var(--xh-_tone-on);
+    --xh-tone-subtle: var(--xh-_tone-subtle);
+    --xh-tone-subtle-hover: var(--xh-_tone-subtle-hover);
+    --xh-tone-subtle-active: var(--xh-_tone-subtle-active);
+    --xh-tone-fg: var(--xh-_tone-fg);
+    --xh-tone-border: var(--xh-_tone-border);
+    --xh-tone-border-control: var(--xh-_tone-border-control);
+    --xh-tone-soft: var(--xh-_tone-soft);
+  }
+
+  /* 实心面顶边的内高光：一条极浅的内阴影，把一块实心底衬出厚度。
+     全库十六处实心档共用这两条，别再逐个组件把式子抄一遍。
+
+     两条的差别只在取哪个前景色：--xh-_highlight-tone 跟着语气走（实心底上的前景色，
+     没写语气时退回品牌那一档），--xh-_highlight-brand 恒取品牌色——底色本身不跟语气走的
+     那几处（表单提交、引导主按钮、不带语气的实心标签）用它。
+
+     声明在 :where([data-scope]) 上而不是 :root 上：它俩的值里带 var()，而自定义属性的
+     var() 在「声明它的那个元素」上就替换掉了。落在 :root 上，--xh-_tone-on 与
+     --xh-fg-on-brand 就都按根元素解析，语气与嵌套主题一并冻死；逐元素声明才是现取。
+     同理它也不能收成 tokens 那边的一支令牌。 */
+  :where([data-scope]) {
+    --xh-_highlight-tone: inset 0 var(--xh-stroke-thin) 0 0
+      color-mix(in oklab, var(--xh-_tone-on, var(--xh-fg-on-brand)) 14%, transparent);
+    --xh-_highlight-brand: inset 0 var(--xh-stroke-thin) 0 0
+      color-mix(in oklab, var(--xh-fg-on-brand) 14%, transparent);
+  }
+}

package/dist/css/tool-call.css

@@ -0,0 +1,429 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 tool call 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立；
+   独立皮肤同时传递引入开关的动作控件配方，full bundle 递归去重。 */
+@import '../family/motion.css';
+@import '../family/action-control.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-tool-call {
+    --xh-tool-call-skin: 1;
+  }
+
+  /* 一张静态内容面：--xh-border-default 描边 + surface 底 + 无影（边界只由描边承担）；
+     审批位与详情区的内部分隔线走另一支 --xh-tool-call-divider（subtle）。
+     卡片建出来时淡入并向上收一段，一屏若干张的错峰交给外层容器排 */
+  .xh-scope-tool-call[data-part='root'] {
+    /* 尺寸缺省档：不写 data-size 时的取值。三档都只写这三个私有槽，
+       公开槽留在读处当首选，作者在祖先上设的覆盖才赢得过档位声明 */
+    --xh-_tool-call-px: var(--xh-space-4);
+    --xh-_tool-call-py: var(--xh-space-4);
+    --xh-_tool-call-font-size: var(--xh-control-font-md);
+
+    /* 影另落一份进私有槽给语气档：它要把影与左侧色条叠成一条 box-shadow，缺省无影写成零影占位 */
+    --xh-_tool-call-shadow: var(--xh-tool-call-shadow, 0 0 0 transparent);
+
+    /* 作者塞进指示符里的图标与皮肤画的兜底字形同一把尺：md 档，开关上另按家族档取值 */
+    --xh-icon-size: var(--xh-tool-call-icon-size, var(--xh-glyph-size-md));
+
+    display: block;
+    overflow: hidden;
+    border: var(--xh-stroke-thin) solid var(--xh-tool-call-border, var(--xh-border-default));
+    border-radius: var(--xh-tool-call-radius, var(--xh-shape-surface));
+    background: var(--xh-tool-call-bg, var(--xh-bg-surface));
+    box-shadow: var(--xh-tool-call-shadow, none);
+  }
+
+  /* 卡片出现时滑入；落在首帧就在的列表条目里（历史消息）时直接呈现，不跟着整屏一起入场 */
+  .xh-scope-tool-call[data-part='root']:not([data-scope][data-part='item'][data-instant] :where(.xh-scope-tool-call)) {
+    animation: xh-item-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) both;
+  }
+
+  /* 上面声明的 display 会盖掉 UA 的 [hidden]{display:none}，这里补回 */
+  .xh-scope-tool-call[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 形态 —— */
+  /* 缺省档即 outline，写在上面那条基础规则里 */
+  /* 底色分区：描边让位给底色，嵌在别人的面里时不再多一圈线；
+     淡底承载面向开关下发 hover 200 → pressed 300 */
+  .xh-scope-tool-call[data-part='root'][data-variant='subtle'] {
+    --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
+
+    border-color: transparent;
+    background: var(--xh-tool-call-bg, var(--xh-bg-subtle));
+  }
+
+  /* 无壳内联：卡中卡时不再自带一张面，跟着外层的底走 */
+  .xh-scope-tool-call[data-part='root'][data-variant='ghost'] {
+    --xh-_tool-call-shadow: 0 0 0 transparent;
+
+    overflow: visible;
+    border-color: transparent;
+    background: none;
+    box-shadow: none;
+  }
+
+  /* 无壳档的开关只占文字宽度（盖掉 profile 的铺满一行），自己带圆角，悬停时才浮出一块底 */
+  .xh-scope-tool-call[data-part='root'][data-variant='ghost'] .xh-scope-tool-call[data-part='trigger'] {
+    --xh-action-radius: var(--xh-tool-call-trigger-radius, var(--xh-shape-control));
+
+    inline-size: auto;
+  }
+
+  /* 出错态换描边色，与语气轴各管各的：语气是作者定的强调，出错是组件自己的阶段。
+     根上的 data-state 已经被开合占着，阶段落成 data-errored 这一位；八个承载阶段的部件
+     渲出任何一个时那条 :has() 同样命中，两条并列，作者只渲根也照样变色 */
+  .xh-scope-tool-call[data-part='root'][data-errored],
+  .xh-scope-tool-call[data-part='root']:has(.xh-scope-tool-call[data-state='output-error']) {
+    border-color: var(--xh-tool-call-border-error, var(--xh-border-invalid));
+  }
+
+  /* 开关铺满一行，盒型、悬停 / 按下 / 禁用面由 Action Control 的 disclosure-trigger 档给（ghost 形态：
+     白底承载 hover 100 → pressed 200，按下只换面不缩放）；这里只把使用者槽映射到桥接槽：
+     圆角归零贴住卡边，内衬与字号沿用卡片的档位（不取 profile 的 md 档内衬，几何不变），
+     字形按开关自己的档位取 --xh-_action-profile-glyph-size */
+  .xh-scope-tool-call[data-part='trigger'] {
+    --xh-action-radius: 0;
+    --xh-action-gap: var(--xh-tool-call-trigger-gap, var(--xh-space-2));
+    --xh-action-padding-inline: var(--xh-tool-call-px, var(--xh-_tool-call-px));
+    --xh-action-padding-block: var(--xh-tool-call-py, var(--xh-_tool-call-py));
+    --xh-action-font-size: var(--xh-tool-call-font-size, var(--xh-_tool-call-font-size));
+    --xh-action-fg-rest: var(--xh-tool-call-trigger-fg, var(--xh-fg-default));
+    --xh-action-bg-hover: var(--xh-tool-call-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-icon-size: var(--xh-tool-call-icon-size, var(--xh-_action-profile-glyph-size));
+
+    border-width: 0;
+  }
+
+  .xh-scope-tool-call[data-part='trigger'][hidden] {
+    display: none;
+  }
+
+  /* 指示随开合转向，纯装饰 */
+  .xh-scope-tool-call[data-part='indicator'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    color: var(--xh-tool-call-indicator-fg, var(--xh-fg-subtle));
+  }
+
+  /* 与详情开合同时长：箭头先转完、内容后到位会像是两件事。收起取 collapse 档，展开（下面的打开态）取 expand 档。
+     首帧就在的朝向直接呈现（data-instant），第一次开合起才转 */
+  .xh-scope-tool-call[data-part='indicator']:not([data-instant]) {
+    transition: rotate var(--xh-motion-duration-collapse) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 没写内容就由皮肤画；作者往部件里塞了自己的图形，这条规则即不命中 */
+  .xh-scope-tool-call[data-part='indicator']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+  }
+
+  .xh-scope-tool-call[data-part='indicator'][hidden] {
+    display: none;
+  }
+
+  /* 收起时朝向行首、展开时转向下方，与逻辑书写方向一致：
+     rtl 下 inline-start 在右侧，箭头因此要反着转 */
+  .xh-scope-tool-call[data-part='indicator'][data-state='open'] {
+    rotate: 90deg;
+  }
+
+  .xh-scope-tool-call[data-part='indicator'][data-state='open']:not([data-instant]) {
+    transition: rotate var(--xh-motion-duration-expand) var(--xh-motion-ease-enter-strong);
+  }
+
+  [dir='rtl'] .xh-scope-tool-call[data-part='indicator'] {
+    rotate: 180deg;
+  }
+
+  [dir='rtl'] .xh-scope-tool-call[data-part='indicator'][data-state='open'] {
+    rotate: 90deg;
+  }
+
+  /* 工具名占满剩余宽度并单行截断：长名字不该把状态挤出去 */
+  .xh-scope-tool-call[data-part='label'] {
+    display: block;
+    overflow: hidden;
+    flex: 1 1 auto;
+    font-family: var(--xh-tool-call-label-font, var(--xh-font-family-mono));
+    /* 面级披露的触发条文字取标签角色，与 Accordion、Collapsible、Reasoning 同一档字重 */
+    font-weight: var(--xh-tool-call-label-font-weight, var(--xh-text-label-weight));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .xh-scope-tool-call[data-part='label'][hidden] {
+    display: none;
+  }
+
+  /* 有摘要时把剩余宽度让给它：工具名只要放得下自己，摘要才是这一行里最想读到的东西 */
+  .xh-scope-tool-call[data-part='trigger']:has([data-part='summary']) [data-part='label']:where(.xh-scope-tool-call) {
+    flex: 0 1 auto;
+  }
+
+  /* 一行参数摘要：单行截断的浅底条，收起时也看得见这次查的是什么 */
+  .xh-scope-tool-call[data-part='summary'] {
+    display: block;
+    overflow: hidden;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    padding-inline: var(--xh-tool-call-summary-px, var(--xh-space-1_5));
+    border-radius: var(--xh-tool-call-summary-radius, var(--xh-shape-control));
+    background: var(--xh-tool-call-summary-bg, var(--xh-bg-subtle));
+    color: var(--xh-tool-call-summary-fg, var(--xh-fg-muted));
+    font-family: var(--xh-tool-call-label-font, var(--xh-font-family-mono));
+    font-size: var(--xh-tool-call-summary-font-size, var(--xh-text-caption-size));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .xh-scope-tool-call[data-part='summary'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-tool-call[data-part='status'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    color: var(--xh-tool-call-status-fg, var(--xh-fg-muted));
+    font-size: var(--xh-tool-call-status-font-size, var(--xh-text-caption-size));
+    line-height: var(--xh-leading-none);
+  }
+
+  .xh-scope-tool-call[data-part='status'][hidden] {
+    display: none;
+  }
+
+  /* 三档落定的阶段收成状态 chip：几何与 Tag 的 sm 档同一把尺，淡底 + 同族可读字取连接层投影的语气。
+     在跑的两档不带底，让扫光自己说话 */
+  .xh-scope-tool-call[data-part='status'][data-tone] {
+    padding-block: var(--xh-tool-call-status-py, var(--xh-space-0_5));
+    padding-inline: var(--xh-tool-call-status-px, var(--xh-space-1_5));
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-tool-call-status-radius, var(--xh-shape-pill));
+    font-weight: var(--xh-font-weight-medium);
+    line-height: var(--xh-control-indicator-md);
+  }
+
+  /* 各阶段的覆盖槽仍按阶段给：作者可以单独改某一档 */
+  .xh-scope-tool-call[data-part='status'][data-state='awaiting-approval'] {
+    background: var(--xh-tool-call-status-bg-approval, var(--xh-_tone-subtle));
+    color: var(--xh-tool-call-status-fg-approval, var(--xh-_tone-fg));
+  }
+
+  .xh-scope-tool-call[data-part='status'][data-state='output-available'] {
+    background: var(--xh-tool-call-status-bg-done, var(--xh-_tone-subtle));
+    color: var(--xh-tool-call-status-fg-done, var(--xh-_tone-fg));
+  }
+
+  .xh-scope-tool-call[data-part='status'][data-state='output-error'] {
+    background: var(--xh-tool-call-status-bg-error, var(--xh-_tone-subtle));
+    color: var(--xh-tool-call-status-fg-error, var(--xh-_tone-fg));
+  }
+
+  /* 在跑的时候状态文字自己扫一道光：data-loading 此前在皮肤里没有任何表达，
+     参数在传与参数齐了两档在屏幕上一模一样。
+     渐变画在背景上再裁进字形，前景与 WebKit 的字形填充色都要透明才透得出底下那道光 */
+  .xh-scope-tool-call[data-part='root'][data-loading] [data-part='status']:where(.xh-scope-tool-call) {
+    background-image: linear-gradient(
+      90deg,
+      var(--xh-tool-call-status-shimmer-base, var(--xh-fg-subtle)) 35%,
+      var(--xh-tool-call-status-shimmer-sheen, var(--xh-fg-default)) 50%,
+      var(--xh-tool-call-status-shimmer-base, var(--xh-fg-subtle)) 65%
+    );
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    animation: xh-shimmer var(--xh-tool-call-shimmer-duration, var(--xh-motion-loop-shimmer)) var(--xh-motion-ease-loop) infinite;
+  }
+
+  /* 减少动效：整道光撤掉换回平色，"在跑"仍由状态文字本身表达——只停动画的话，
+     字形里会留着一段冻住的渐变。两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    .xh-scope-tool-call[data-part='root'][data-loading] [data-part='status']:where(.xh-scope-tool-call) {
+      background-image: none;
+      color: var(--xh-tool-call-status-fg, var(--xh-fg-muted));
+      -webkit-text-fill-color: currentColor;
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) .xh-scope-tool-call[data-part='root'][data-loading] [data-part='status']:where(.xh-scope-tool-call) {
+    background-image: none;
+    color: var(--xh-tool-call-status-fg, var(--xh-fg-muted));
+    -webkit-text-fill-color: currentColor;
+    animation: none;
+  }
+
+  /* 耗时：等宽数位，秒数跳动时不左右挪 */
+  .xh-scope-tool-call[data-part='duration'] {
+    display: block;
+    flex: none;
+    color: var(--xh-tool-call-duration-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-tool-call-status-font-size, var(--xh-text-caption-size));
+    font-variant-numeric: tabular-nums;
+  }
+
+  .xh-scope-tool-call[data-part='duration'][hidden] {
+    display: none;
+  }
+
+  /* 审批闸门常驻在开关与详情之间，不随折叠一起藏起来 */
+  .xh-scope-tool-call[data-part='approval'] {
+    display: block;
+    padding-inline: var(--xh-tool-call-px, var(--xh-_tool-call-px));
+    padding-block: var(--xh-tool-call-py, var(--xh-_tool-call-py));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-tool-call-divider, var(--xh-border-subtle));
+  }
+
+  .xh-scope-tool-call[data-part='approval'][hidden] {
+    display: none;
+  }
+
+  /* 这里刻意没有 [data-part='content'][hidden] { display: none }：补了退场一帧都播不出来。
+     收起由适配器在退场结束后写内联 display 落成，退场窗口内靠 connect 发的 inert 挡住焦点。
+     详情区按阶段取舍，参数、结果与错误同一时刻只排一格，收起时整格随行高归零 */
+  .xh-scope-tool-call[data-part='content'] {
+    /* 行高与内缩同帧动的共享关键帧读这两条槽：两端内缩同值 */
+    --xh-_disclosure-pt: var(--xh-tool-call-py, var(--xh-_tool-call-py));
+    --xh-_disclosure-pb: var(--xh-tool-call-py, var(--xh-_tool-call-py));
+
+    display: grid;
+    grid-template-rows: 1fr;
+    /* 块轴照旧裁掉：收起靠行高归零，多出来的那一截不能露在外面。
+       行内一轴改成可横滚，宽过卡片的参数与结果推得回来看，不再被裁掉且取不回 */
+    overflow-x: auto;
+    overflow-y: clip;
+    gap: var(--xh-tool-call-content-gap, var(--xh-space-2));
+    padding-inline: var(--xh-tool-call-px, var(--xh-_tool-call-px));
+    padding-block: var(--xh-tool-call-py, var(--xh-_tool-call-py));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-tool-call-divider, var(--xh-border-subtle));
+  }
+
+  /* 展开与收起只在开合时播：首帧就在的展开 / 收起直接呈现（data-instant） */
+  .xh-scope-tool-call[data-part='content'][data-state='open']:not([data-instant]) {
+    animation: xh-disclosure-expand var(--xh-motion-duration-expand) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 退场走 exit 档曲线 */
+  .xh-scope-tool-call[data-part='content'][data-state='closed']:not([data-instant]) {
+    animation: xh-disclosure-collapse var(--xh-motion-duration-collapse) var(--xh-motion-ease-exit) forwards;
+  }
+
+  .xh-scope-tool-call[data-part='input'],
+  .xh-scope-tool-call[data-part='output'] {
+    display: block;
+    min-inline-size: 0;
+  }
+
+  .xh-scope-tool-call[data-part='input'][hidden],
+  .xh-scope-tool-call[data-part='output'][hidden] {
+    display: none;
+  }
+
+  /* 出错时开关的 aria-describedby 指过来；流被中止时这里可能是空的 */
+  .xh-scope-tool-call[data-part='error'] {
+    display: block;
+    color: var(--xh-tool-call-error-fg, var(--xh-fg-danger));
+    font-size: var(--xh-tool-call-status-font-size, var(--xh-text-caption-size));
+  }
+
+  .xh-scope-tool-call[data-part='error'][hidden] {
+    display: none;
+  }
+
+  /* 尺寸档只改内衬与字号 */
+  .xh-scope-tool-call[data-part='root'][data-size='sm'] {
+    --xh-_tool-call-px: var(--xh-space-3);
+    --xh-_tool-call-py: var(--xh-space-3);
+    --xh-_tool-call-font-size: var(--xh-control-font-sm);
+  }
+
+  .xh-scope-tool-call[data-part='root'][data-size='md'] {
+    --xh-_tool-call-px: var(--xh-space-4);
+    --xh-_tool-call-py: var(--xh-space-4);
+    --xh-_tool-call-font-size: var(--xh-control-font-md);
+  }
+
+  .xh-scope-tool-call[data-part='root'][data-size='lg'] {
+    --xh-_tool-call-px: var(--xh-space-5);
+    --xh-_tool-call-py: var(--xh-space-5);
+    --xh-_tool-call-font-size: var(--xh-control-font-lg);
+  }
+
+  /* 语气只染左侧那一条色条，不夺走阶段色；海拔跟着一起写回来，
+     box-shadow 是整条替换的，只写色条会把上面那层投影抹掉 */
+  .xh-scope-tool-call[data-part='root'][data-tone] {
+    box-shadow:
+      inset var(--xh-tool-call-tone-bar, var(--xh-stroke-thick)) 0 0 0 var(--xh-tool-call-tone-fg, var(--xh-_tone-soft, var(--xh-bg-brand))),
+      var(--xh-_tool-call-shadow);
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    .xh-scope-tool-call[data-part='indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    .xh-scope-tool-call[data-part='trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]) .xh-scope-tool-call[data-part='indicator']:empty::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-tool-call[data-part='trigger'][data-disabled] .xh-scope-tool-call[data-part='indicator']:empty::before {
+      background-color: GrayText;
+    }
+  }
+}
+
+@layer xihan.motion {
+  @media print {
+    /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
+       取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份
+       :where([data-motion='reduce']) 的钩子版本与它成对，打印没有对应的钩子可配，
+       并成一条之后这层配对关系在文本上就断了。 */
+    .xh-scope-tool-call[data-part='root'][data-loading] [data-part='status']:where(.xh-scope-tool-call) {
+      background-image: none;
+      color: var(--xh-tool-call-status-fg, var(--xh-fg-muted));
+      -webkit-text-fill-color: currentColor;
+      animation: none;
+    }
+  }
+
+  /*
+   * 高对比档：扫光那层渐变被丢弃，只剩被裁成透明的字形填充，状态文字整段消失。
+   * 把两处填充都还回去，在跑这件事仍由状态文字本身表出。
+   */
+  @media (forced-colors: active) {
+    .xh-scope-tool-call[data-part='root'][data-loading] [data-part='status']:where(.xh-scope-tool-call) {
+      background-image: none;
+      -webkit-background-clip: border-box;
+      background-clip: border-box;
+      color: CanvasText;
+      -webkit-text-fill-color: currentColor;
+      animation: none;
+    }
+  }
+}