@xihan-ui/styles 1.0.0 → 2.0.0

package/css/tool-call.css

@@ -0,0 +1,421 @@
+/*
+ * 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 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='tool-call'] {
+    --xh-tool-call-skin: 1;
+  }
+
+  /* 一张静态内容面：--xh-border-default 描边 + surface 底 + 无影（§5.3 边界只由描边承担）；
+     审批位与详情区的内部分隔线走另一支 --xh-tool-call-divider（subtle）。
+     卡片建出来时淡入并向上收一段，一屏若干张的错峰交给外层容器排 */
+  [data-scope='tool-call'][data-part='root'] {
+    /* 尺寸缺省档：不写 data-size 时的取值。三档都只写这三个私有槽，
+       公开槽留在读处当首选，作者在祖先上设的覆盖才赢得过档位声明 */
+    --xh-_tool-call-px: var(--xh-space-3);
+    --xh-_tool-call-py: var(--xh-space-2);
+    --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 档（§6.5），开关上另按家族档取值 */
+    --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);
+    animation: xh-tool-call-enter var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) both;
+  }
+
+  /* 上面声明的 display 会盖掉 UA 的 [hidden]{display:none}，这里补回 */
+  [data-scope='tool-call'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 形态 —— */
+  /* 缺省档即 outline，写在上面那条基础规则里 */
+  /* 底色分区：描边让位给底色，嵌在别人的面里时不再多一圈线；
+     淡底承载面向开关下发 hover 200 → pressed 300（§7.2） */
+  [data-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));
+  }
+
+  /* 无壳内联：卡中卡时不再自带一张面，跟着外层的底走 */
+  [data-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 的铺满一行），自己带圆角，悬停时才浮出一块底 */
+  [data-scope='tool-call'][data-part='root'][data-variant='ghost'] [data-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() 同样命中，两条并列，作者只渲根也照样变色 */
+  [data-scope='tool-call'][data-part='root'][data-errored],
+  [data-scope='tool-call'][data-part='root']:has([data-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，按下只换面不缩放，§9.2）；这里只把使用者槽映射到桥接槽：
+     圆角归零贴住卡边，内衬与字号沿用卡片的档位（不取 profile 的 md 档内衬，几何不变），
+     字形按开关自己的档位取 --xh-_action-profile-glyph-size */
+  [data-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;
+  }
+
+  [data-scope='tool-call'][data-part='trigger'][hidden] {
+    display: none;
+  }
+
+  /* 指示随开合转向，纯装饰 */
+  [data-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));
+    /* 与详情展开同时长同曲线：箭头先转完、内容后到位会像是两件事 */
+    transition: rotate var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 没写内容就由皮肤画；作者往部件里塞了自己的图形，这条规则即不命中 */
+  [data-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;
+  }
+
+  [data-scope='tool-call'][data-part='indicator'][hidden] {
+    display: none;
+  }
+
+  /* 收起时朝向行首、展开时转向下方，与逻辑书写方向一致：
+     rtl 下 inline-start 在右侧，箭头因此要反着转 */
+  [data-scope='tool-call'][data-part='indicator'][data-state='open'] {
+    rotate: 90deg;
+  }
+
+  [dir='rtl'] [data-scope='tool-call'][data-part='indicator'] {
+    rotate: 180deg;
+  }
+
+  [dir='rtl'] [data-scope='tool-call'][data-part='indicator'][data-state='open'] {
+    rotate: 90deg;
+  }
+
+  /* 工具名占满剩余宽度并单行截断：长名字不该把状态挤出去 */
+  [data-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));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-scope='tool-call'][data-part='label'][hidden] {
+    display: none;
+  }
+
+  /* 有摘要时把剩余宽度让给它：工具名只要放得下自己，摘要才是这一行里最想读到的东西 */
+  [data-scope='tool-call'][data-part='trigger']:has([data-part='summary']) [data-part='label'] {
+    flex: 0 1 auto;
+  }
+
+  /* 一行参数摘要：单行截断的浅底条，收起时也看得见这次查的是什么 */
+  [data-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;
+  }
+
+  [data-scope='tool-call'][data-part='summary'][hidden] {
+    display: none;
+  }
+
+  [data-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);
+  }
+
+  [data-scope='tool-call'][data-part='status'][hidden] {
+    display: none;
+  }
+
+  /* 三档落定的阶段收成药丸：淡底 + 同族深字。在跑的两档不带底，让扫光自己说话 */
+  [data-scope='tool-call'][data-part='status'][data-state='awaiting-approval'],
+  [data-scope='tool-call'][data-part='status'][data-state='output-available'],
+  [data-scope='tool-call'][data-part='status'][data-state='output-error'] {
+    padding-block: var(--xh-tool-call-status-py, var(--xh-space-0_5));
+    padding-inline: var(--xh-tool-call-status-px, var(--xh-space-2));
+    border-radius: var(--xh-tool-call-status-radius, var(--xh-shape-pill));
+  }
+
+  /* 各阶段的状态色：与语气轴分开走，语气是作者定的强调 */
+  [data-scope='tool-call'][data-part='status'][data-state='awaiting-approval'] {
+    background: var(--xh-tool-call-status-bg-approval, color-mix(in oklab, var(--xh-fg-warning) 12%, var(--xh-bg-surface)));
+    color: var(--xh-tool-call-status-fg-approval, color-mix(in oklab, var(--xh-fg-warning) 60%, var(--xh-fg-default)));
+  }
+
+  [data-scope='tool-call'][data-part='status'][data-state='output-available'] {
+    background: var(--xh-tool-call-status-bg-done, color-mix(in oklab, var(--xh-fg-success) 12%, var(--xh-bg-surface)));
+    color: var(--xh-tool-call-status-fg-done, color-mix(in oklab, var(--xh-fg-success) 60%, var(--xh-fg-default)));
+  }
+
+  [data-scope='tool-call'][data-part='status'][data-state='output-error'] {
+    background: var(--xh-tool-call-status-bg-error, color-mix(in oklab, var(--xh-fg-danger) 12%, var(--xh-bg-surface)));
+    color: var(--xh-tool-call-status-fg-error, color-mix(in oklab, var(--xh-fg-danger) 60%, var(--xh-fg-default)));
+  }
+
+  /* 在跑的时候状态文字自己扫一道光：data-loading 此前在皮肤里没有任何表达，
+     参数在传与参数齐了两档在屏幕上一模一样。
+     渐变画在背景上再裁进字形，前景与 WebKit 的字形填充色都要透明才透得出底下那道光 */
+  [data-scope='tool-call'][data-part='root'][data-loading] [data-part='status'] {
+    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-tool-call-shimmer var(--xh-tool-call-shimmer-duration, var(--xh-shimmer-duration)) var(--xh-motion-ease-loop) infinite;
+  }
+
+  /* 减少动效：整道光撤掉换回平色，"在跑"仍由状态文字本身表达——只停动画的话，
+     字形里会留着一段冻住的渐变。两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='tool-call'][data-part='root'][data-loading] [data-part='status'] {
+      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']) [data-scope='tool-call'][data-part='root'][data-loading] [data-part='status'] {
+    background-image: none;
+    color: var(--xh-tool-call-status-fg, var(--xh-fg-muted));
+    -webkit-text-fill-color: currentColor;
+    animation: none;
+  }
+
+  /* 耗时：等宽数位，秒数跳动时不左右挪 */
+  [data-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;
+  }
+
+  [data-scope='tool-call'][data-part='duration'][hidden] {
+    display: none;
+  }
+
+  /* 审批闸门常驻在开关与详情之间，不随折叠一起藏起来 */
+  [data-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));
+  }
+
+  [data-scope='tool-call'][data-part='approval'][hidden] {
+    display: none;
+  }
+
+  /* 这里刻意没有 [data-part='content'][hidden] { display: none }：补了退场一帧都播不出来。
+     收起由适配器在退场结束后写内联 display 落成，退场窗口内靠 connect 发的 inert 挡住焦点。
+     详情区按阶段取舍，参数、结果与错误同一时刻只排一格，收起时整格随行高归零 */
+  [data-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-state 一起消失，收起后不长期占着 */
+  [data-scope='tool-call'][data-part='content'][data-state='open'] {
+    will-change: grid-template-rows;
+    animation: xh-disclosure-expand var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 退场走 exit 档曲线（§9.4） */
+  [data-scope='tool-call'][data-part='content'][data-state='closed'] {
+    animation: xh-disclosure-collapse var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  [data-scope='tool-call'][data-part='input'],
+  [data-scope='tool-call'][data-part='output'] {
+    display: block;
+    min-inline-size: 0;
+  }
+
+  [data-scope='tool-call'][data-part='input'][hidden],
+  [data-scope='tool-call'][data-part='output'][hidden] {
+    display: none;
+  }
+
+  /* 出错时开关的 aria-describedby 指过来；流被中止时这里可能是空的 */
+  [data-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));
+  }
+
+  [data-scope='tool-call'][data-part='error'][hidden] {
+    display: none;
+  }
+
+  /* 尺寸档只改内衬与字号 */
+  [data-scope='tool-call'][data-part='root'][data-size='sm'] {
+    --xh-_tool-call-px: var(--xh-space-2);
+    --xh-_tool-call-py: var(--xh-space-1);
+    --xh-_tool-call-font-size: var(--xh-control-font-sm);
+  }
+
+  [data-scope='tool-call'][data-part='root'][data-size='md'] {
+    --xh-_tool-call-px: var(--xh-space-3);
+    --xh-_tool-call-py: var(--xh-space-2);
+    --xh-_tool-call-font-size: var(--xh-control-font-md);
+  }
+
+  [data-scope='tool-call'][data-part='root'][data-size='lg'] {
+    --xh-_tool-call-px: var(--xh-space-4);
+    --xh-_tool-call-py: var(--xh-space-3);
+    --xh-_tool-call-font-size: var(--xh-control-font-lg);
+  }
+
+  /* 语气只染左侧那一条色条，不夺走阶段色；海拔跟着一起写回来，
+     box-shadow 是整条替换的，只写色条会把上面那层投影抹掉 */
+  [data-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);
+  }
+}
+
+@layer xihan.motion {
+  /* 组件专属关键帧写在自己身上；共享的 disclosure 关键帧由 family/motion.css 提供。
+     幅度走令牌，减弱动效时由令牌层归零 */
+  @keyframes xh-tool-call-enter {
+    from {
+      opacity: 0;
+      translate: 0 var(--xh-motion-distance-md);
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
+  /* 一道比字色亮的窄带从右扫到左。背景图比自身宽一倍，靠移动背景位置扫过去，
+     不动布局也不动 transform */
+  @keyframes xh-tool-call-shimmer {
+    from {
+      background-position: 150% center;
+    }
+
+    to {
+      background-position: -50% center;
+    }
+  }
+
+  @media print {
+    /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
+       取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份
+       :where([data-motion='reduce']) 的钩子版本与它成对，打印没有对应的钩子可配，
+       并成一条之后这层配对关系在文本上就断了。 */
+    [data-scope='tool-call'][data-part='root'][data-loading] [data-part='status'] {
+      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) {
+    [data-scope='tool-call'][data-part='root'][data-loading] [data-part='status'] {
+      background-image: none;
+      -webkit-background-clip: border-box;
+      background-clip: border-box;
+      color: CanvasText;
+      -webkit-text-fill-color: currentColor;
+      animation: none;
+    }
+  }
+}