@morlay/dsh-client-ui-primitives 0.0.7 → 0.0.9

package/src/client/controls/Bubble.module.css

@@ -0,0 +1,17 @@
+/* 对话气泡：照上游 `ui-chat/chat/MessageItem.module.css` 的 `.bubble` 逐字（含那两条决定换行行为的声明——
+   投影出来的用户文本是 inline runs，气泡自己负责折行，装饰过的单行消息因此仍是一行）。 */
+.bubble {
+  /* 上游以宽度轴的比例表达 Figma 那个 525px 上限（525/748 ≈ 0.702）：气泡跟着可拖拽/自适应的列一起变宽，
+     百分比让窄窗口仍然成立。 */
+  max-width: 100%;
+  background: var(--dsw-specific-bubble);
+  border-radius: var(--dsw-radius-xl);
+  /* 默认字号下单行气泡 42px：22 行高 + 上下各 10 内距；字号偏好经 body 发布的轴同时移动字号与行高。 */
+  padding: 10px 16px;
+  font-size: var(--dsh-content-font-size, 14px);
+  line-height: calc(22px + var(--dsh-content-font-delta, 0px));
+  color: var(--dsw-alias-label-primary);
+  /* 折行归气泡：不加这两条，投影出来的 runs 会按 `white-space: normal` 折叠空白，与上游对不上。 */
+  white-space: pre-wrap;
+  word-break: break-word;
+}

package/src/client/controls/Bubble.tsx

@@ -0,0 +1,17 @@
+// 对话气泡：一条消息的内容块（底色 + 大圆角 + 内距 + 自己的最大宽度）。
+//
+// 宽度上限（`min(525px, 82%)`）归它：消息列多宽是对话面的口径，不该让每个调用方各写一遍。
+
+import type { HTMLAttributes, ReactNode } from "react";
+import { classes } from "./classes.ts";
+import css from "./Bubble.module.css";
+
+export type BubbleProps = HTMLAttributes<HTMLDivElement>;
+
+export function Bubble({ className, children, ...rest }: BubbleProps): ReactNode {
+  return (
+    <div className={classes(css.bubble, className)} {...rest}>
+      {children}
+    </div>
+  );
+}

package/src/client/controls/Button.module.css

@@ -0,0 +1,10 @@
+/* 按钮宽度由内容定："添加"这类短词被折成两行只是没必要的换行。 */
+.label {
+  white-space: nowrap;
+}
+
+/* 危险动作的配色：把 primary 的填充换成错误色。危险感只出现在确认那一刻（确认弹窗的按钮），
+   卡片头那类入口保持中性。 */
+.danger {
+  --dsw-alias-button-primary-fill: var(--dsw-alias-state-error-primary);
+}

package/src/client/controls/Button.tsx

@@ -0,0 +1,29 @@
+// 按钮：官方 `Button` + 两条本包统一的修饰——**文字不换行**（按钮宽度由内容定，短词被折成两行只是没必要的
+// 换行）、`tone="danger"` 时把填充换成错误色（危险动作的配色只在这里出现，入口保持中性）。
+// 业务从本包取到的就是这个包装版（`../index.ts` 里显式导出它，覆盖官方同名的那份）。
+
+import { forwardRef, type ComponentProps, type ReactNode } from "react";
+import { Button as OfficialButton } from "@deepseek-ai/dsh-client-ui-primitives";
+import { classes } from "./classes.ts";
+import css from "./Button.module.css";
+
+export type ButtonTone = "danger";
+
+export type ButtonProps = ComponentProps<typeof OfficialButton> & {
+  // 配色档：缺省用官方那套；`danger` 换成错误色。
+  tone?: ButtonTone;
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { className, tone, ...rest },
+  ref,
+): ReactNode {
+  return (
+    <OfficialButton
+      ref={ref}
+      data-role="button"
+      className={classes(className, css.label, tone === "danger" ? css.danger : undefined)}
+      {...rest}
+    />
+  );
+});

package/src/client/controls/DisclosureRow.module.css

@@ -0,0 +1,22 @@
+/* 折叠行的两个覆盖类——官方 `DisclosureRow` 的 `contentClassName` / `contentLayoutClassName` 名字容易读错，
+   它们不是"内容区布局"，而是**标题那一块**的类：
+
+   - `contentClassName` 落在 `TextShimmer` 的 `.root` 上（上游是 `display: inline-grid; width: max-content;
+     max-width: 100%`）。这里只加 flex 属性把它撑开（`flex: 1 1 auto` 不会覆盖 `display`），让右侧那一组
+     （摘要 / 删除入口）能用 `margin-left: auto` 贴到行尾。
+   - `contentLayoutClassName` 落在内层 `.content` 上（上游默认就是 `display: flex; align-items: center;
+     min-width: 0`）：补上标题与右侧内容之间的间距，其余保持上游口径。
+
+   注意别往这两条里塞"卡片头布局"——它们只作用于标题文字那一层。 */
+.content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.contentLayout {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}

package/src/client/controls/DisclosureRow.tsx

@@ -0,0 +1,20 @@
+// 折叠行：官方 `DisclosureRow` + 两条本包固定的布局类（内容区撑开并允许收缩、标题行左右分列）。
+//
+// 官方那份把这两个类留成 `contentClassName` / `contentLayoutClassName` 供消费方覆盖——设置面上每次都要同样
+// 两条，所以在这里定下来：业务只传标题、摘要与展开状态，不再传类。
+
+import type { ComponentProps, ReactNode } from "react";
+import { DisclosureRow as OfficialDisclosureRow } from "@deepseek-ai/dsh-client-ui-primitives";
+import css from "./DisclosureRow.module.css";
+
+export type DisclosureRowProps = ComponentProps<typeof OfficialDisclosureRow>;
+
+export function DisclosureRow(props: DisclosureRowProps): ReactNode {
+  return (
+    <OfficialDisclosureRow
+      contentClassName={css.content}
+      contentLayoutClassName={css.contentLayout}
+      {...props}
+    />
+  );
+}

package/src/client/controls/IconButton.module.css

@@ -0,0 +1,50 @@
+/* 方形图标按钮：没有文字、没有边框，hover 才上底色（官方侧边栏那种 28×28 几何）。 */
+.iconButton {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  color: var(--dsw-alias-label-secondary);
+  background: transparent;
+  border: none;
+  border-radius: var(--dsw-radius-sm);
+  cursor: pointer;
+}
+
+.iconButton:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.iconButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.iconButton:focus-visible {
+  outline: var(--dsw-focus-ring-width) solid
+    var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: -2px;
+}
+
+/* 行内小档：24px 高的行（上游折叠行的 `.row`）里放 28px 会顶出这一行。 */
+.sm {
+  width: 20px;
+  height: 20px;
+  padding: 0;
+}
+
+/* 圆形那一档：对话动作行的 28×28 圆键（hover 才上底色，颜色走三级文本色）。 */
+.circle {
+  padding: 6px;
+  border-radius: 28px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.circle:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-secondary);
+}

package/src/client/controls/IconButton.tsx

@@ -0,0 +1,47 @@
+// 图标按钮：没有文字、没有边框的方形按钮（官方侧边栏那种几何）。`label` 是它唯一的无障碍名。
+
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import { classes } from "./classes.ts";
+import css from "./IconButton.module.css";
+
+export interface IconButtonProps extends Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "children" | "aria-label"
+> {
+  // 无障碍名（图标没有文字，这个名字是它唯一的标识）。
+  label: string;
+  // 图标。
+  children: ReactNode;
+  // 形状档：缺省是设置面那种方形圆角；`circle` 是对话动作行那种圆形。
+  shape?: "square" | "circle";
+  // 尺寸档：`md`（缺省）28×28 是独立控件的尺度；`sm` 20×20 放进 24px 高的行里
+  // （上游折叠行 `.row` 的高度就是 24px，放 28px 会被顶出来）。
+  size?: "md" | "sm";
+}
+
+export function IconButton({
+  label,
+  children,
+  type = "button",
+  shape = "square",
+  size = "md",
+  className,
+  ...rest
+}: IconButtonProps): ReactNode {
+  return (
+    <button
+      type={type}
+      data-role="icon-button"
+      aria-label={label}
+      className={classes(
+        css.iconButton,
+        size === "sm" ? css.sm : undefined,
+        shape === "circle" ? css.circle : undefined,
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}

package/src/client/controls/ModelRouteList.module.css

@@ -0,0 +1,100 @@
+/* 模型路由清单（`ModelRouteList`）：分组铺开、只选一条。数值照官方「子智能体」那张卡的模型清单。 */
+.list {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+  max-height: 280px;
+  margin: 0;
+  padding: 10px;
+  overflow: auto;
+  border: 0.5px solid var(--dsw-alias-border-l4);
+  border-radius: var(--dsw-radius-lg);
+}
+
+.group {
+  display: grid;
+  gap: 6px;
+}
+
+.group + .group {
+  margin-top: 4px;
+  padding-top: 10px;
+  border-top: 0.5px solid var(--dsw-alias-border-l3);
+}
+
+.provider {
+  padding: 0 6px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding: 6px;
+  border-radius: var(--dsw-radius-md);
+  cursor: pointer;
+}
+
+.item:hover {
+  /* 上游那张卡的 hover 底色引用了 `--dsw-alias-bg-layer-4`：它不在官方 token 集里，照抄引用而不是换一个近义 token。 */
+  background: var(--dsw-alias-bg-layer-4);
+}
+
+.item:focus-visible {
+  outline: var(--dsw-focus-ring-width) solid
+    var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: -2px;
+}
+
+.item[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+/* 选中的那一条：底色 + 勾（勾由组件画）。 */
+.picked {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.text {
+  min-width: 0;
+}
+
+.name {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  color: var(--dsw-alias-label-primary);
+}
+
+.id {
+  display: block;
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* 清单的状态行（读目录中 / 失败 / 一条都没有）。 */
+.notice {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.error {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-state-error-primary);
+}

package/src/client/controls/ModelRouteList.tsx

@@ -0,0 +1,118 @@
+// 模型路由清单（`ModelRouteList`）：把"已设置的模型"按 provider 分组铺开，**只选一条**——一条路由就是
+// provider + model 这一对，所以选它等于把两者一起定下来。
+//
+// 形态照官方"子智能体"那张卡的模型清单（分组标题 + 两行的项：模型名 / `provider · provider/model`），
+// 区别只在这里是单选。
+
+import type { ReactNode } from "react";
+import { IconCheckOutlineRegular } from "@deepseek-ai/dsh-client-ui-primitives";
+import { classes } from "./classes.ts";
+import css from "./ModelRouteList.module.css";
+
+// 一条可选路由：`key` 是稳定身份（调用方只用来比对，不解析它）。
+export interface ModelRouteCandidate {
+  readonly key: string;
+  readonly provider: string;
+  readonly providerName: string;
+  readonly model: string;
+  readonly modelName: string;
+}
+
+export interface ModelRouteListProps {
+  // 清单的无障碍名（`role="radiogroup"`）。
+  label: string;
+  candidates: readonly ModelRouteCandidate[];
+  // 当前选中的那条（没选 = `undefined`）。
+  selectedKey: string | undefined;
+  disabled?: boolean;
+  // 读目录的状态：读的时候说一句、失败的时候说另一句。
+  status: "loading" | "ready" | "error";
+  loadingLabel: string;
+  errorLabel: string;
+  emptyLabel: string;
+  onSelect: (candidate: ModelRouteCandidate) => void;
+}
+
+export function ModelRouteList({
+  label,
+  candidates,
+  selectedKey,
+  disabled = false,
+  status,
+  loadingLabel,
+  errorLabel,
+  emptyLabel,
+  onSelect,
+}: ModelRouteListProps): ReactNode {
+  if (status === "loading") {
+    return (
+      <p className={css.notice} role="status">
+        {loadingLabel}
+      </p>
+    );
+  }
+  if (status === "error") {
+    return (
+      <p className={css.error} role="alert">
+        {errorLabel}
+      </p>
+    );
+  }
+  if (candidates.length === 0) {
+    return <p className={css.notice}>{emptyLabel}</p>;
+  }
+  // 按 provider 分组，组的顺序就是候选来的顺序。
+  const groups = new Map<string, { name: string; items: ModelRouteCandidate[] }>();
+  for (const candidate of candidates) {
+    const group = groups.get(candidate.provider);
+    if (group === undefined) {
+      groups.set(candidate.provider, { name: candidate.providerName, items: [candidate] });
+    } else group.items.push(candidate);
+  }
+  return (
+    <div
+      className={css.list}
+      data-role="model-route-list"
+      role="radiogroup"
+      aria-label={label}
+      data-control="model-routes"
+    >
+      {[...groups].map(([provider, group]) => (
+        <div key={provider} className={css.group} data-route-group={provider}>
+          <span className={css.provider}>{group.name}</span>
+          {group.items.map((candidate) => {
+            const picked = candidate.key === selectedKey;
+            return (
+              <div
+                key={candidate.key}
+                className={classes(css.item, picked ? css.picked : undefined)}
+                role="radio"
+                aria-checked={picked}
+                aria-label={`${candidate.modelName} ${candidate.provider}/${candidate.model}`}
+                aria-disabled={disabled ? true : undefined}
+                tabIndex={disabled ? -1 : 0}
+                data-route={candidate.key}
+                onClick={() => {
+                  if (!disabled) onSelect(candidate);
+                }}
+                onKeyDown={(event) => {
+                  if (event.key !== "Enter" && event.key !== " ") return;
+                  event.preventDefault();
+                  if (!disabled) onSelect(candidate);
+                }}
+              >
+                {picked ? <IconCheckOutlineRegular /> : <span aria-hidden="true" />}
+                <span className={css.text}>
+                  <span className={css.name}>{candidate.modelName}</span>
+                  <span className={css.id}>
+                    {`${candidate.providerName} · ${candidate.provider}/${candidate.model}`}
+                  </span>
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/client/controls/MultilineField.module.css

@@ -0,0 +1,26 @@
+/* 多行文本：官方通用表单只有单行控件，这个按官方输入框的数值画（边框 / 圆角 / 字号 / 内距）。 */
+.multiline {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 64px;
+  padding: 6px 12px;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-layer-3);
+  border: 0.5px solid var(--dsw-alias-border-l4);
+  border-radius: var(--dsw-radius-md);
+  resize: vertical;
+}
+
+.multiline:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.multiline:focus-visible {
+  outline: var(--dsw-focus-ring-width) solid
+    var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: -2px;
+}

package/src/client/controls/MultilineField.tsx

@@ -0,0 +1,19 @@
+// 多行文本：官方通用表单只有单行控件，这个按官方输入框的数值画（边框 / 圆角 / 字号 / 内距），
+// 标签与说明由外面的字段行给（见 `settings-form` 的 `SettingsFieldRow`）。
+
+import type { TextareaHTMLAttributes } from "react";
+import { classes } from "./classes.ts";
+import css from "./MultilineField.module.css";
+
+export type MultilineFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export function MultilineField({ rows = 3, className, ...rest }: MultilineFieldProps) {
+  return (
+    <textarea
+      rows={rows}
+      data-role="multiline-field"
+      className={classes(css.multiline, className)}
+      {...rest}
+    />
+  );
+}

package/src/client/controls/SearchSelect.module.css

@@ -0,0 +1,34 @@
+/* 与官方输入框同高（`Input.module.css` 的 32px）：同行摆的控件高度必须一致。 */
+.trigger {
+  height: 32px;
+  white-space: nowrap;
+}
+
+/* 菜单顶部那一行搜索框：与候选行同一个内距尺度。 */
+.searchRow {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px 8px;
+  border-bottom: 0.5px solid var(--dsw-alias-border-l2);
+}
+
+.searchInput {
+  width: 100%;
+  padding: 2px 0;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+  background: transparent;
+  border: none;
+  outline: none;
+}
+
+/* 一个候选都没匹配上：在候选区里说一句，而不是给一张空菜单。 */
+.empty {
+  margin: 0;
+  padding: 8px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}

package/src/client/controls/SearchSelect.tsx

@@ -0,0 +1,138 @@
+// 可搜索选择器（searchable）：候选一多，"滚着找"就不够用了——打开后先给一行搜索框，按名字模糊过滤
+// （官方 `rankByName`：前缀命中优先，其次对齐分数，最后保持来源顺序）。
+//
+// 它与标签输入（multi-input）共用同一套"搜索 + 候选"交互：TagInput 的「从候选里选」就是它的单值形态。
+
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import {
+  Button,
+  IconCheckOutlineRegular,
+  Menu,
+  MenuItemButton,
+  rankByName,
+} from "@deepseek-ai/dsh-client-ui-primitives";
+import { classes } from "./classes.ts";
+import css from "./SearchSelect.module.css";
+
+// 一项候选：值是写进配置的那份，label 是给人看的（也是搜索的第二个键）。
+export interface SearchSelectOption {
+  readonly value: string;
+  readonly label?: string | undefined;
+}
+
+export interface SearchSelectProps {
+  // 无障碍名（触发按钮的名字）。
+  label: string;
+  // 当前值；空串表示这一项没写（触发按钮显示 `emptyLabel`）。
+  value: string;
+  // 没写时触发按钮显示的那句话（例如"不写"），它也是候选里的第一项（选它 = 清掉）。
+  emptyLabel: string;
+  options: readonly SearchSelectOption[];
+  disabled?: boolean;
+  // 搜索框的占位与无障碍名。
+  searchLabel: string;
+  // 一个候选都没匹配上时的那句话。
+  noMatchLabel: string;
+  // 选中一项；空串 = 清掉这一项。
+  onSelect: (next: string) => void;
+}
+
+export function SearchSelect({
+  label,
+  value,
+  emptyLabel,
+  options,
+  disabled = false,
+  searchLabel,
+  noMatchLabel,
+  onSelect,
+}: SearchSelectProps): ReactNode {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const searchRef = useRef<HTMLInputElement | null>(null);
+  // 打开就落到搜索框上：候选多的时候，键盘直接开始打字。
+  useEffect(() => {
+    if (open) searchRef.current?.focus();
+  }, [open]);
+  const matches = useMemo(
+    () =>
+      rankByName(
+        // 搜索键是显示名（`name`）与它本身（`label`，缺省时就是值）：`rankByName` 拿 name 与 label 双键匹配。
+        options.map((option) => ({
+          value: option.value,
+          name: option.label ?? option.value,
+          label: option.value,
+        })),
+        query,
+      ),
+    [options, query],
+  );
+  const current = options.find((option) => option.value === value);
+  const close = (): void => {
+    setOpen(false);
+    setQuery("");
+  };
+  const pick = (next: string): void => {
+    close();
+    onSelect(next);
+  };
+  return (
+    <Menu
+      open={open}
+      anchor={
+        <Button
+          variant="outline"
+          size="sm"
+          data-role="search-select"
+          className={classes(css.trigger)}
+          data-action="pick"
+          disabled={disabled}
+          aria-haspopup="menu"
+          aria-label={label}
+          onClick={() => {
+            if (open) close();
+            else setOpen(true);
+          }}
+        >
+          {value === "" ? emptyLabel : (current?.label ?? value)}
+        </Button>
+      }
+      selectedId={value}
+      onSelect={pick}
+      onClose={close}
+    >
+      <div className={css.searchRow}>
+        <input
+          className={css.searchInput}
+          ref={searchRef}
+          value={query}
+          aria-label={searchLabel}
+          placeholder={searchLabel}
+          onChange={(event) => {
+            setQuery(event.currentTarget.value);
+          }}
+        />
+      </div>
+      <MenuItemButton
+        icon={value === "" ? <IconCheckOutlineRegular /> : undefined}
+        onSelect={() => {
+          pick("");
+        }}
+      >
+        {emptyLabel}
+      </MenuItemButton>
+      {matches.map((option) => (
+        <MenuItemButton
+          key={option.value}
+          icon={option.value === value ? <IconCheckOutlineRegular /> : undefined}
+          onSelect={() => {
+            pick(option.value);
+          }}
+        >
+          {option.name}
+        </MenuItemButton>
+      ))}
+      {matches.length === 0 ? <p className={css.empty}>{noMatchLabel}</p> : null}
+    </Menu>
+  );
+}