@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/log.css

@@ -0,0 +1,306 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 log 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+/* 独立皮肤同时传递引入回底钮的动作控件配方；full bundle 递归去重。 */
+@import '../family/action-control.css';
+@import '../family/material.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-log {
+    --xh-log-skin: 1;
+  }
+
+  /* 行高是本组件的定尺基准：视口按行数定高、每行排版，都从这一个槽位来。
+     它的兜底值须与连接层内联高度里用的那份逐字一致，否则 rows 算出来的高度对不上行。 */
+  .xh-scope-log[data-part='root'] {
+    --xh-_log-line-h: var(--xh-log-line-height, var(--xh-text-code-leading));
+
+    /* 尺寸缺省档：不写 data-size 时的取值。三档只改这两个私有槽，
+       公开槽留在读处当首选，作者在祖先上设的覆盖才赢得过档位声明。
+       行高不在档内：视口按 rows 定高读的是同一个基准，三档同值才对得上整数行 */
+    --xh-_log-font-size: var(--xh-text-secondary-size);
+    --xh-_log-content-px: var(--xh-space-3);
+
+    /* 一张静态内容面：--xh-border-default 描边 + surface 底 + 无影（描边与淡底互斥），
+       与 code-view / diff-view / json-viewer 同走 solid */
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: var(--xh-stroke-thin) solid var(--xh-log-border, var(--xh-border-default));
+    border-radius: var(--xh-log-radius, var(--xh-shape-surface));
+    background: var(--xh-log-bg, var(--xh-bg-surface));
+    box-shadow: var(--xh-log-shadow, none);
+    color: var(--xh-log-fg, var(--xh-fg-default));
+  }
+
+  /* 上面声明的 display 会盖掉 UA 的 [hidden]{display:none}，这里补回 */
+  .xh-scope-log[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 滚动容器，粘底读的是它的 scrollTop / clientHeight / scrollHeight。
+     flex-basis 取 auto，连接层写的按行数高度才算数，同时外层给了高度时还能撑满；
+     min-block-size: 0 让它在弹性父级里能被压缩从而真的溢出；
+     两个轴都 auto：长行不折，横向也要能滚；
+     overscroll-behavior: contain 阻止滚动量传给页面。 */
+  .xh-scope-log[data-part='viewport'] {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    block-size: calc(var(--xh-_log-line-h) * var(--xh-log-rows, 16));
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  /* 还在用原生滚动条的视口留一条空道，滚动条出现与消失时不推动文字。
+     带 data-xh-scrollbar 的容器已经把原生条藏成零宽，这条空道对它没有布局作用，排除掉 */
+  .xh-scope-log[data-part='viewport']:not([data-xh-scrollbar]) {
+    scrollbar-gutter: stable;
+  }
+
+  /* 接了虚拟滚动：视口只定高、不滚动，里面那层 Virtualizer 视口铺满它、由它滚；
+     行放在 Virtualizer 的条目里没有 content 包裹层，等宽排版落在视口上由行继承 */
+  .xh-scope-log[data-part='viewport'][data-virtualized] {
+    display: grid;
+    grid-template-rows: minmax(0, 1fr);
+    overflow: hidden;
+    /* 不滚动的视口不留滚动条空道：空道由里面那层 Virtualizer 视口自己管 */
+    scrollbar-gutter: auto;
+    font-family: var(--xh-log-font, var(--xh-font-family-mono));
+    font-size: var(--xh-log-font-size, var(--xh-_log-font-size));
+  }
+
+  .xh-scope-log[data-part='viewport'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-log[data-part='viewport'][data-virtualized] .xh-scope-log[data-part='line'] {
+    padding-inline: var(--xh-log-line-px, var(--xh-log-content-px, var(--xh-_log-content-px)));
+  }
+
+  /* 取行期间指针给出忙的反馈 */
+  .xh-scope-log[data-part='root'][data-loading] .xh-scope-log[data-part='viewport'] {
+    cursor: progress;
+  }
+
+  /* 等宽排版落在包裹层上，各行继承；行与行之间不留空隙，视口高度才等于整数行 */
+  .xh-scope-log[data-part='content'] {
+    display: block;
+    padding-inline: var(--xh-log-content-px, var(--xh-_log-content-px));
+    font-family: var(--xh-log-font, var(--xh-font-family-mono));
+    font-size: var(--xh-log-font-size, var(--xh-_log-font-size));
+  }
+
+  .xh-scope-log[data-part='content'][hidden] {
+    display: none;
+  }
+
+  /* 一行不折行，超出的部分由视口横向滚动；行高与定高基准同源 */
+  .xh-scope-log[data-part='line'] {
+    line-height: var(--xh-_log-line-h);
+    white-space: pre;
+    tab-size: var(--xh-log-tab-size, 4);
+  }
+
+  /* 级别只染行文颜色，不动排版：一行的高度是定高基准，四档必须等高。
+     没写级别的行走内容层的前景色 */
+  .xh-scope-log[data-part='line'][data-level='debug'] {
+    color: var(--xh-log-level-debug-fg, var(--xh-fg-subtle));
+  }
+
+  .xh-scope-log[data-part='line'][data-level='info'] {
+    color: var(--xh-log-level-info-fg, var(--xh-fg-default));
+  }
+
+  .xh-scope-log[data-part='line'][data-level='warn'] {
+    color: var(--xh-log-level-warn-fg, var(--xh-fg-warning));
+  }
+
+  .xh-scope-log[data-part='line'][data-level='error'] {
+    color: var(--xh-log-level-error-fg, var(--xh-fg-danger));
+  }
+
+  /* ANSI 着色：八种颜色映射到语义令牌（红、绿、黄、蓝落在语气前景，品红、青借代码着色的关键字与字符串色，
+     黑与白落在正文与次要前景），高亮色（90–97）与基础色同一档，只由 data-bright 记下。
+     颜色盖过行的级别色；粗体、斜体、下划线与暗淡各自一个开关 */
+  .xh-scope-log[data-part='segment'][data-fg='black'] {
+    color: var(--xh-log-ansi-black, var(--xh-fg-default));
+  }
+
+  .xh-scope-log[data-part='segment'][data-fg='red'] {
+    color: var(--xh-log-ansi-red, var(--xh-fg-danger));
+  }
+
+  .xh-scope-log[data-part='segment'][data-fg='green'] {
+    color: var(--xh-log-ansi-green, var(--xh-fg-success));
+  }
+
+  .xh-scope-log[data-part='segment'][data-fg='yellow'] {
+    color: var(--xh-log-ansi-yellow, var(--xh-fg-warning));
+  }
+
+  .xh-scope-log[data-part='segment'][data-fg='blue'] {
+    color: var(--xh-log-ansi-blue, var(--xh-fg-info));
+  }
+
+  .xh-scope-log[data-part='segment'][data-fg='magenta'] {
+    color: var(--xh-log-ansi-magenta, var(--xh-syntax-keyword));
+  }
+
+  .xh-scope-log[data-part='segment'][data-fg='cyan'] {
+    color: var(--xh-log-ansi-cyan, var(--xh-syntax-string));
+  }
+
+  .xh-scope-log[data-part='segment'][data-fg='white'] {
+    color: var(--xh-log-ansi-white, var(--xh-fg-muted));
+  }
+
+  .xh-scope-log[data-part='segment'][data-bold] {
+    font-weight: var(--xh-log-ansi-bold-weight, var(--xh-font-weight-semibold));
+  }
+
+  /* 暗淡只在没指定颜色时换成次要前景：指定了颜色的那一段保留自己的颜色 */
+  .xh-scope-log[data-part='segment'][data-dim]:not([data-fg]) {
+    color: var(--xh-log-ansi-dim-fg, var(--xh-fg-subtle));
+  }
+
+  .xh-scope-log[data-part='segment'][data-italic] {
+    font-style: italic;
+  }
+
+  .xh-scope-log[data-part='segment'][data-underline] {
+    text-decoration: underline;
+  }
+
+  /* 回到底部：浮在视口右下角，收起时不卸载只隐藏。盒型、悬停 / 按下面与缩放由 Action Control 的
+     floating 档给（circle 正方盒、ghost 形态：白底承载 hover 100 → pressed 200）；材质随角落浮钮族走
+     frosted 四件套（底 + 边 + 影 + 磨砂），这里只把使用者槽映射到桥接槽：
+     字形按 xs 档取 --xh-_action-profile-glyph-size（16px），与 back-top 同一把尺 */
+  .xh-scope-log[data-part='scroll-to-end-trigger'] {
+    /* 面走材质家族配方（family/material.css）：frosted 档的底、交互阶梯、描边、投影、1px 顶光与背景滤镜，
+       liquid 档由配方换成液态面；这里把使用者槽接到 Action Control 的桥接槽 */
+    --xh-action-bg-rest: var(--xh-log-scroll-to-end-trigger-bg, var(--xh-_material-bg));
+    --xh-action-bg-hover: var(--xh-log-scroll-to-end-trigger-bg-hover, var(--xh-_material-bg-hover));
+    --xh-action-bg-pressed: var(--xh-_material-bg-pressed);
+    --xh-action-bg-focus-visible: var(--xh-log-scroll-to-end-trigger-bg, var(--xh-_material-bg-focus));
+    --xh-action-bg-disabled: var(--xh-log-scroll-to-end-trigger-bg, var(--xh-_material-bg));
+    --xh-action-fg-rest: var(--xh-log-scroll-to-end-trigger-fg, var(--xh-_material-fg));
+    --xh-action-fg-hover: var(--xh-log-scroll-to-end-trigger-fg, var(--xh-_material-fg));
+    --xh-action-fg-pressed: var(--xh-log-scroll-to-end-trigger-fg, var(--xh-_material-fg));
+    --xh-action-fg-focus-visible: var(--xh-log-scroll-to-end-trigger-fg, var(--xh-_material-fg));
+    --xh-action-border-rest: var(--xh-log-scroll-to-end-trigger-border, var(--xh-_material-border));
+    --xh-action-border-hover: var(--xh-log-scroll-to-end-trigger-border, var(--xh-_material-border));
+    --xh-action-border-pressed: var(--xh-log-scroll-to-end-trigger-border, var(--xh-_material-border));
+    --xh-action-border-focus-visible: var(--xh-log-scroll-to-end-trigger-border, var(--xh-_material-border));
+    --xh-action-border-disabled: var(--xh-log-scroll-to-end-trigger-border, var(--xh-_material-border));
+    --xh-action-shadow-rest: var(--xh-log-scroll-to-end-trigger-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-hover: var(--xh-log-scroll-to-end-trigger-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-pressed: var(--xh-log-scroll-to-end-trigger-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-focus-visible: var(--xh-log-scroll-to-end-trigger-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-disabled: var(--xh-log-scroll-to-end-trigger-shadow, var(--xh-_material-shadow));
+    --xh-action-highlight-rest: var(--xh-_material-highlight);
+    --xh-action-highlight-hover: var(--xh-_material-highlight);
+    --xh-action-highlight-pressed: var(--xh-_material-highlight);
+    --xh-action-highlight-focus-visible: var(--xh-_material-highlight);
+    --xh-action-highlight-disabled: var(--xh-_material-highlight);
+    --xh-action-visual-size: var(--xh-log-scroll-to-end-trigger-size, var(--xh-_action-profile-visual-size));
+    --xh-action-radius: var(--xh-log-scroll-to-end-trigger-radius, var(--xh-shape-circle));
+    --xh-icon-size: var(--xh-log-icon-size, var(--xh-_action-profile-glyph-size));
+
+    position: absolute;
+    inset-block-end: var(--xh-log-scroll-to-end-trigger-inset, var(--xh-space-3));
+    inset-inline-end: var(--xh-log-scroll-to-end-trigger-inset, var(--xh-space-3));
+  }
+
+  /* 连接层收起按钮时写 hidden 属性，上面的 display 会盖掉 UA 规则，这里补回 */
+  .xh-scope-log[data-part='scroll-to-end-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 收起不卸载：离底时冒出来播进场，回底时先播完退场、连接层才写 hidden 藏起。
+     不写 display，可见性归上面那条 [hidden] 管；退场途中不再接指针 */
+  .xh-scope-log[data-part='scroll-to-end-trigger'][data-state='visible'] {
+    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  .xh-scope-log[data-part='scroll-to-end-trigger'][data-state='hidden']:not([hidden]) {
+    pointer-events: none;
+    animation: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* 没写内容就由皮肤画一枚向下的字形；作者往按钮里塞了自己的图形，这条规则即不命中。
+     不画的话这颗按钮就是一枚空盒，看不出它是干什么的——名字只在 aria-label 上 */
+  .xh-scope-log[data-part='scroll-to-end-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-chevron-down) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-down) center / contain no-repeat;
+  }
+
+  /* 尺寸档只改行文字号与内衬 */
+  .xh-scope-log[data-part='root'][data-size='sm'] {
+    --xh-_log-font-size: var(--xh-text-caption-size);
+    --xh-_log-content-px: var(--xh-space-2);
+  }
+
+  .xh-scope-log[data-part='root'][data-size='md'] {
+    --xh-_log-font-size: var(--xh-text-secondary-size);
+    --xh-_log-content-px: var(--xh-space-3);
+  }
+
+  .xh-scope-log[data-part='root'][data-size='lg'] {
+    --xh-_log-font-size: var(--xh-text-body-size);
+    --xh-_log-content-px: var(--xh-space-4);
+  }
+
+  /* 视觉隐藏但仍参与播报：用 clip-path 裁到不可见，不能用 display:none 或 visibility:hidden；
+     white-space: nowrap 防止 1px 宽把文本挤成竖排。 */
+  .xh-scope-log[data-part='live-region'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @media print {
+    /* 打印：回到底部这颗钮只有在能滚的地方才成立，落到纸上是一颗按不动的按钮。 */
+    .xh-scope-log[data-part='scroll-to-end-trigger'] {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    .xh-scope-log[data-part='scroll-to-end-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    .xh-scope-log[data-part='scroll-to-end-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-log[data-part='scroll-to-end-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
+}

package/dist/css/markdown-stream.css

@@ -0,0 +1,149 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 markdown stream 样式。 */
+
+@layer xihan.motion {
+  /* 光标的两段动效都定义在本文件里。皮肤可以按需单独引入，
+     引用别处文件里的动画名时那份文件不一定在场，动画会静默地整个不跑 */
+  @keyframes xh-markdown-stream-caret {
+    50% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes xh-markdown-stream-caret-in {
+    from {
+      opacity: 0;
+    }
+  }
+}
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-markdown-stream {
+    --xh-markdown-stream-skin: 1;
+  }
+
+  .xh-scope-markdown-stream[data-part='root'] {
+    /* 尺寸缺省档：不写 data-size 时的取值。三档都只写这两个私有槽，
+       公开槽留在读处当首选，作者在祖先上设的覆盖才赢得过档位声明 */
+    --xh-_markdown-stream-font-size: var(--xh-text-body-size);
+    --xh-_markdown-stream-gap: var(--xh-space-3);
+
+    color: var(--xh-markdown-stream-fg, var(--xh-fg-default));
+    font-size: var(--xh-markdown-stream-font-size, var(--xh-_markdown-stream-font-size));
+    line-height: var(--xh-markdown-stream-leading, var(--xh-text-prose-leading));
+  }
+
+  /* 块之间的距离由这一层给，块内部的排版归作者的正文样式 */
+  .xh-scope-markdown-stream[data-part='content'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-markdown-stream-gap, var(--xh-_markdown-stream-gap));
+  }
+
+  .xh-scope-markdown-stream[data-part='content'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-markdown-stream[data-part='block'] {
+    display: block;
+    min-inline-size: 0;
+    /* 块里铺的是渲染好的 Markdown，宽表格与不断行的长串由内容自己带；
+       行内一轴可横滚，这类块自己滚，不把整篇正文顶宽 */
+    overflow-x: auto;
+  }
+
+  .xh-scope-markdown-stream[data-part='block'][hidden] {
+    display: none;
+  }
+
+  /* 代码块与公式块没人接管时铺的是原文，保住换行与缩进 */
+  .xh-scope-markdown-stream[data-part='block'][data-kind='code'],
+  .xh-scope-markdown-stream[data-part='block'][data-kind='math'] {
+    font-family: var(--xh-markdown-stream-mono, var(--xh-font-family-mono));
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  /* 流式光标落在带 data-caret 的那一格上：正文在长的时候是生长块的末尾，
+     一个字都还没到的时候是外壳，所以「请求已经发出去」这件事第一帧就看得见。
+     它落在块的最后一个顶层元素之后，不是最后一句话的末尾——要贴进段落里就得往已消毒的
+     html 注入节点，那会打穿「原生 HTML 一律不透传」这条约束 */
+  .xh-scope-markdown-stream[data-part='root'][data-caret]::after,
+  .xh-scope-markdown-stream[data-part='block'][data-caret]::after {
+    display: inline-block;
+    background: var(--xh-markdown-stream-caret-bg, var(--xh-fg-default));
+    border-radius: var(--xh-markdown-stream-caret-radius, var(--xh-shape-inset));
+    content: '';
+    inline-size: var(--xh-markdown-stream-caret-w, var(--xh-stroke-thick));
+    block-size: var(--xh-markdown-stream-caret-h, 1.05em);
+    margin-inline-start: var(--xh-markdown-stream-caret-gap, 0.1em);
+    vertical-align: text-bottom;
+    translate: 0 var(--xh-markdown-stream-caret-shift, -0.5px);
+  }
+
+  /* 正文在长的时候光标只淡入一次然后停在实心：旁边的字每帧都在变，再闪一下只是噪声 */
+  .xh-scope-markdown-stream[data-part='block'][data-caret]::after {
+    animation: xh-markdown-stream-caret-in var(--xh-markdown-stream-caret-enter-duration, var(--xh-motion-duration-enter)) var(--xh-motion-ease-enter-strong) both;
+  }
+
+  /* 还没出字的那一段页面上只有这一竖，让它闪着，等的人才分得清是在等还是卡住了 */
+  .xh-scope-markdown-stream[data-part='root'][data-caret]::after {
+    animation: xh-markdown-stream-caret var(--xh-markdown-stream-caret-duration, var(--xh-motion-loop-caret)) steps(1, end) infinite;
+  }
+
+  /* 减少动效：等待时的光标停在实心不闪，「还在等」这件事仍然看得出来。
+     两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    .xh-scope-markdown-stream[data-part='root'][data-caret]::after {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) .xh-scope-markdown-stream[data-part='root'][data-caret]::after {
+    animation: none;
+  }
+
+  /* 尺寸档只改正文字号与块间距 */
+  .xh-scope-markdown-stream[data-part='root'][data-size='sm'] {
+    --xh-_markdown-stream-font-size: var(--xh-control-font-sm);
+    --xh-_markdown-stream-gap: var(--xh-space-2);
+  }
+
+  .xh-scope-markdown-stream[data-part='root'][data-size='md'] {
+    --xh-_markdown-stream-font-size: var(--xh-control-font-md);
+    --xh-_markdown-stream-gap: var(--xh-space-3);
+  }
+
+  .xh-scope-markdown-stream[data-part='root'][data-size='lg'] {
+    --xh-_markdown-stream-font-size: var(--xh-control-font-lg);
+    --xh-_markdown-stream-gap: var(--xh-space-4);
+  }
+
+  /* 视觉隐藏的原子播报区：不能 display:none，那样读屏就取不到它了 */
+  .xh-scope-markdown-stream[data-part='live-region'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  @media print {
+    /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
+       取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份
+       :where([data-motion='reduce']) 的钩子版本与它成对，打印没有对应的钩子可配，
+       并成一条之后这层配对关系在文本上就断了。 */
+    .xh-scope-markdown-stream[data-part='root'][data-caret]::after {
+      animation: none;
+    }
+  }
+}