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

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

@@ -0,0 +1,53 @@
+/* 座位按钮：胶囊形（16px 圆角、28px 高、8px 内距），标签以省略号收窄，图标与箭头贴住剩余文本。 */
+.seat {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  max-width: min(100%, 240px);
+  min-height: 28px;
+  padding: 0 8px;
+  border: none;
+  border-radius: var(--dsw-radius-sm);
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.seat:not(:disabled):hover,
+.seat[aria-expanded="true"],
+.expanded {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.seat:disabled {
+  cursor: default;
+  color: var(--dsw-alias-label-quaternary);
+}
+
+/* 图标直接是 flex item（上游给图标自己挂类，不再套一层）：套一层会让它在 inline-flex 里按基线对齐，视觉上偏。 */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  color: var(--dsw-alias-label-primary);
+}
+
+.label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chevron {
+  /* inline-flex 而不是 inline：inline 的座位会在 svg 下面预留 baseline descent，把箭头顶得不在 28px 的
+     座位里居中（上游 `PermissionSelect.module.css` 的 `.chevron` 记着同一条）。 */
+  display: inline-flex;
+  flex: 0 0 auto;
+  color: var(--dsw-alias-label-caption);
+}

package/src/client/controls/SeatButton.tsx

@@ -0,0 +1,39 @@
+// 座位按钮：工具行里的一个"座位"——图标 + 文本（+ 可展开的箭头），胶囊形，展开时保持底色。
+// composer 里的模式座位、以及任何"点开是一份清单"的行内入口都用它。
+
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import { classes } from "./classes.ts";
+import css from "./SeatButton.module.css";
+
+export interface SeatButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  // 座位上的图标（16px 那一档）。
+  icon: ReactNode;
+  // 座位上的文本；放不下就以省略号收窄。
+  label: string;
+  // 展开态：菜单开着时保持底色（与 `aria-expanded` 同一件事，这里只管观感）。
+  expanded?: boolean;
+  // 尾部箭头（可展开的座位给）。
+  chevron?: ReactNode;
+}
+
+export function SeatButton({
+  icon,
+  label,
+  expanded = false,
+  chevron,
+  type = "button",
+  className,
+  ...rest
+}: SeatButtonProps): ReactNode {
+  return (
+    <button
+      type={type}
+      className={classes(css.seat, expanded ? css.expanded : undefined, className)}
+      {...rest}
+    >
+      <span className={css.icon}>{icon}</span>
+      <span className={css.label}>{label}</span>
+      {chevron === undefined ? null : <span className={css.chevron}>{chevron}</span>}
+    </button>
+  );
+}

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

@@ -0,0 +1,18 @@
+/* 加载指示：一圈细描边 + 一段主色弧，转起来。 */
+.spinner {
+  width: 28px;
+  height: 28px;
+  border: 2px solid var(--dsw-alias-border-l2);
+  border-top-color: var(--dsw-alias-label-primary);
+  border-radius: 50%;
+  animation: spin 900ms linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/client/controls/Spinner.tsx

@@ -0,0 +1,14 @@
+// 加载指示：官方那套没有这个原子（`StateDot` 是状态点、`TextShimmer` 是文字微光），
+// 列表与设置面的「正在读」都用它。
+
+import type { ReactNode } from "react";
+import css from "./Spinner.module.css";
+
+export interface SpinnerProps {
+  // 无障碍名（转圈本身没有文字）。
+  label: string;
+}
+
+export function Spinner({ label }: SpinnerProps): ReactNode {
+  return <span className={css.spinner} role="status" aria-label={label} />;
+}

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

@@ -0,0 +1,105 @@
+/* 标签输入与它右边的候选菜单：一行，顶部对齐（框会随标签换行变高）。 */
+.row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+}
+
+/* 候选菜单包锚点的那层 wrapper：官方 `Menu.module.css` 的 `.root` 是 `display: inline-flex`（宽度按内容收缩），
+   框因此只有内容那么宽。这一条把它撑满——框的宽度归外面那行，不归锚点自己的内容。 */
+.anchor {
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+}
+
+/* 框：与官方输入框同一种边框 / 背景 / 高度，标签与内联输入都在框里，放不下就换行。 */
+.box {
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  gap: 4px 6px;
+  width: 100%;
+  min-height: 32px;
+  padding: 4px 8px;
+  background: var(--dsw-alias-bg-layer-3);
+  border: 0.5px solid var(--dsw-alias-border-l4);
+  border-radius: var(--dsw-radius-md);
+}
+
+/* 框内的裸输入：边框、背景与焦点环都交给外面那个框。 */
+.input {
+  flex: 1 1 120px;
+  min-width: 120px;
+  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;
+}
+
+/* 可移除的胶囊：几何与配色照官方 `Tag` 的 neutral（999px 圆角、11px/17px、wt500、`bg-module-platform`
+   + 二级文本色），只是里面多一个「移除」按钮——官方 `Tag` 是只读的，嵌不进按钮。 */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 1px 4px 1px 8px;
+  border-radius: 999px;
+  corner-shape: round;
+  font-size: 11px;
+  line-height: 17px;
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--dsw-alias-label-secondary);
+  background: var(--dsw-alias-bg-module-platform);
+}
+
+/* 胶囊里的移除按钮：图标本身很小，给它一块贴着字号的点击区，不给可见的边框与背景。 */
+.chipRemove {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  color: var(--dsw-alias-label-tertiary);
+  background: transparent;
+  border: none;
+  border-radius: 999px;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.chipRemove:hover:not(:disabled) {
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.chipRemove:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.chipRemove:focus-visible {
+  outline: var(--dsw-focus-ring-width) solid
+    var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 0;
+}
+
+/* 一个候选都没匹配上：在候选区里说一句，而不是给一张空菜单。 */
+.empty {
+  margin: 0;
+  padding: 8px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}

package/src/client/controls/TagInput.tsx

@@ -0,0 +1,152 @@
+// 标签输入（multi-input 的 searchable 形态）：一个框包住所有标签与那一个内联输入框，**聚焦即整体下拉候选**，
+// 输入同时过滤候选；回车确认一个（可以是候选里没有的自定义值），点候选也加一个。
+//
+// 已经在名单里的值不再出现在候选里（见 `remaining`）；粘贴一串会拆成多个（见 `./tags.ts` 的分隔符口径）。
+
+import { useMemo, useState, type ReactNode } from "react";
+import {
+  IconCloseOutlineRegular,
+  Menu,
+  MenuItemButton,
+  rankByName,
+} from "@deepseek-ai/dsh-client-ui-primitives";
+import { type SearchSelectOption } from "./SearchSelect.tsx";
+import { mergeTags, parseTagList } from "./tags.ts";
+import css from "./TagInput.module.css";
+
+export interface TagInputProps {
+  // 当前名单。
+  value: readonly string[];
+  // 整段替换（一次粘贴 / 回车 / 点候选 / 移除就是一次编辑动作）。
+  onChange: (next: string[]) => void;
+  // 候选（可空）：不空时聚焦就下拉；已经在名单里的项不再列出。
+  options?: readonly SearchSelectOption[] | undefined;
+  // 空框时的提示。
+  placeholder: string;
+  // 框内输入框的无障碍名。
+  label: string;
+  disabled?: boolean;
+  // 候选都没匹配上时的那句话。
+  noMatchLabel?: string;
+  // 一个标签的移除按钮名（文案归调用方：它要带标签名）。
+  removeLabel: (name: string) => string;
+}
+
+export function TagInput({
+  value,
+  onChange,
+  options,
+  placeholder,
+  label,
+  disabled = false,
+  noMatchLabel = "",
+  removeLabel,
+}: TagInputProps): ReactNode {
+  const [draft, setDraft] = useState("");
+  const [open, setOpen] = useState(false);
+  const commit = (text: string): void => {
+    const names = parseTagList(text);
+    if (names.length === 0) return;
+    onChange(mergeTags(value, names));
+    setDraft("");
+  };
+  // 没加进去的那些才出现在候选里（加过的、以及手输过的自定义值都不再重复出现）。
+  const remaining = useMemo(
+    () =>
+      (options ?? [])
+        .filter((option) => !value.includes(option.value))
+        .map((option) => ({
+          value: option.value,
+          name: option.label ?? option.value,
+          label: option.value,
+        })),
+    [options, value],
+  );
+  const matches = useMemo(() => rankByName(remaining, draft), [remaining, draft]);
+  return (
+    <div className={css.row} data-role="tag-input" data-control="tags">
+      <Menu
+        open={open && remaining.length > 0}
+        // 官方那份 wrapper 是 `inline-flex`：不撑满的话框只有内容那么宽（见 `TagInput.module.css` 的 `.anchor`）。
+        className={css.anchor}
+        anchor={
+          <div className={css.box}>
+            {value.map((name) => (
+              // 标签与里面的移除按钮是同一个整体：× 在框内，点它才移除。
+              <span key={name} className={css.chip} data-tag={name}>
+                {name}
+                <button
+                  type="button"
+                  className={css.chipRemove}
+                  data-action="remove-tag"
+                  disabled={disabled}
+                  aria-label={removeLabel(name)}
+                  onClick={() => {
+                    onChange(value.filter((candidate) => candidate !== name));
+                  }}
+                >
+                  <IconCloseOutlineRegular size={10} />
+                </button>
+              </span>
+            ))}
+            {/* 裸输入：边框与背景归外面那个框，标签与它一起换行。 */}
+            <input
+              className={css.input}
+              value={draft}
+              placeholder={value.length === 0 ? placeholder : ""}
+              aria-label={label}
+              disabled={disabled}
+              onFocus={() => {
+                setOpen(true);
+              }}
+              onBlur={() => {
+                setOpen(false);
+              }}
+              onChange={(event) => {
+                setDraft(event.currentTarget.value);
+              }}
+              onKeyDown={(event) => {
+                if (event.key !== "Enter") return;
+                event.preventDefault();
+                commit(draft);
+              }}
+              onPaste={(event) => {
+                // 只有真的一串才拦：单个名字照旧走普通输入（粘进去还能接着改）。
+                const text = event.clipboardData.getData("text");
+                if (parseTagList(text).length < 2) return;
+                event.preventDefault();
+                commit(text);
+              }}
+            />
+          </div>
+        }
+        onClose={() => {
+          setOpen(false);
+        }}
+      >
+        {matches.map((candidate) => (
+          // 按下就保持输入框焦点（否则 blur 先把下拉收起来，点不到这一行），选中后继续留在框里加下一个。
+          <span
+            key={candidate.value}
+            onMouseDown={(event) => {
+              event.preventDefault();
+            }}
+          >
+            <MenuItemButton
+              onSelect={() => {
+                commit(candidate.value);
+              }}
+            >
+              {candidate.name}
+            </MenuItemButton>
+          </span>
+        ))}
+        {matches.length === 0 ? (
+          <p className={css.empty} data-role="tag-input-empty">
+            {noMatchLabel}
+          </p>
+        ) : null}
+      </Menu>
+    </div>
+  );
+}

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

@@ -0,0 +1,16 @@
+/* 悬停显形：所在行带 `data-time-hover-root` 时，指针悬停或焦点落在行内都露出来。
+   `:global()` 是因为这个选择器要读到行上的属性——它不属于本组件自己。 */
+.label {
+  padding: 0;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-tertiary);
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 80ms ease;
+}
+
+:global([data-time-hover-root]:hover) .label,
+:global([data-time-hover-root]:focus-within) .label {
+  opacity: 1;
+}

package/src/client/controls/TimeLabel.tsx

@@ -0,0 +1,15 @@
+// 对话里的时间标签：平时透明，指针悬停或用键盘进入所在那一行（`[data-time-hover-root]`）才显形。
+
+import type { HTMLAttributes, ReactNode } from "react";
+import { classes } from "./classes.ts";
+import css from "./TimeLabel.module.css";
+
+export type TimeLabelProps = HTMLAttributes<HTMLSpanElement>;
+
+export function TimeLabel({ className, children, ...rest }: TimeLabelProps): ReactNode {
+  return (
+    <span className={classes(css.label, className)} {...rest}>
+      {children}
+    </span>
+  );
+}

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

@@ -0,0 +1,9 @@
+/* 视觉隐藏但仍可被辅助技术读到（不是 `display: none`，那会连读屏一起藏掉）。 */
+.hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/src/client/controls/VisuallyHidden.tsx

@@ -0,0 +1,16 @@
+// 无障碍隐藏文本：给屏幕阅读器的一句话，视觉上不占位（图标按钮旁边的状态说明就用它）。
+
+import type { HTMLAttributes, ReactNode } from "react";
+import css from "./VisuallyHidden.module.css";
+
+export interface VisuallyHiddenProps extends HTMLAttributes<HTMLSpanElement> {
+  children: ReactNode;
+}
+
+export function VisuallyHidden({ children, ...rest }: VisuallyHiddenProps): ReactNode {
+  return (
+    <span className={css.hidden} {...rest}>
+      {children}
+    </span>
+  );
+}

package/src/client/controls/classes.ts

@@ -0,0 +1,5 @@
+// 拼 class 名：CSS Modules 的映射查表给 `string | undefined`（`exactOptionalPropertyTypes` 下没命中的键是
+// undefined），一个没命中的类名不该在 DOM 上留一个空串。
+export function classes(...names: readonly (string | false | null | undefined)[]): string {
+  return names.filter((name): name is string => typeof name === "string" && name !== "").join(" ");
+}

package/src/client/controls/index.ts

@@ -0,0 +1,24 @@
+// 设置面通用控件：按钮、图标按钮、选择器、标签输入、多行文本。
+//
+// 官方那套基础组件（`Menu` / `Modal` / `Switch` / …）由本包统一 re-export（见 `../index.ts`），业务包只从这里取控件。
+// 两类"带候选"的控件共用同一套「搜索 + 候选」交互：
+// - **multi-input**（`TagInput`）：多值 + 自由输入，聚焦即整体下拉候选、输入即过滤，候选只是加速；
+// - **searchable**（`SearchSelect`）：单值，从候选里搜着选。
+
+export { Bubble, type BubbleProps } from "./Bubble.tsx";
+export { Button, type ButtonProps, type ButtonTone } from "./Button.tsx";
+export { DisclosureRow, type DisclosureRowProps } from "./DisclosureRow.tsx";
+export { SeatButton, type SeatButtonProps } from "./SeatButton.tsx";
+export { Spinner, type SpinnerProps } from "./Spinner.tsx";
+export { TimeLabel, type TimeLabelProps } from "./TimeLabel.tsx";
+export { VisuallyHidden, type VisuallyHiddenProps } from "./VisuallyHidden.tsx";
+export { IconButton, type IconButtonProps } from "./IconButton.tsx";
+export {
+  ModelRouteList,
+  type ModelRouteCandidate,
+  type ModelRouteListProps,
+} from "./ModelRouteList.tsx";
+export { MultilineField, type MultilineFieldProps } from "./MultilineField.tsx";
+export { SearchSelect, type SearchSelectOption, type SearchSelectProps } from "./SearchSelect.tsx";
+export { TagInput, type TagInputProps } from "./TagInput.tsx";
+export { mergeTags, parseTagList } from "./tags.ts";

package/src/client/controls/tags.ts

@@ -0,0 +1,24 @@
+// 名单类字段的文本解析：把粘贴或输入的一串名字折成标签列表。
+
+// 分隔符：中英逗号、分号、制表符与换行；去空白、去重、保序。
+export function parseTagList(text: string): string[] {
+  const seen = new Set<string>();
+  const names: string[] = [];
+  for (const raw of text.split(/[,，;；\t\n\r]+/u)) {
+    const name = raw.trim();
+    if (name === "" || seen.has(name)) continue;
+    seen.add(name);
+    names.push(name);
+  }
+  return names;
+}
+
+// 把新名字并进现有名单：去重、保序（现有的在前），返回新数组（一次替换就是一次编辑动作）。
+export function mergeTags(current: readonly string[], incoming: readonly string[]): string[] {
+  const merged = [...current];
+  for (const name of incoming) {
+    if (name === "" || merged.includes(name)) continue;
+    merged.push(name);
+  }
+  return merged;
+}

package/src/client/index.ts

@@ -1,10 +1,24 @@
 import type { Context } from "@deepseek-ai/cordis";
 import * as schemaForm from "./schema-form/index.ts";
 
-export * from "./styling/index.ts";
-export * from "./theme.ts";
+// 官方那套基础组件（`Button` / `Menu` / `Input` / `Tag` / `Modal` / `Switch` / `SegmentedControl` /
+// `SettingsForm` 与两个字段控件 / `DisclosureRow` / 图标 …）统一从这里转出：业务包只向本包取控件，不必各自去认
+// 官方包名。官方那份**直接用**（同形同名、样式本来就是上游的 CSS Modules），本包只补官方没有的那几件。
+export * from "@deepseek-ai/dsh-client-ui-primitives";
+
 export * from "./markdown-labels.ts";
+export * from "./layout/index.ts";
 export * from "./settings-form/index.ts";
+export * from "./controls/index.ts";
+// `Button` 与 `DisclosureRow` 是本包包装版（官方那份 + 文字不换行 / 危险档 / 两条固定的布局类）：
+// 两个星号导出之间必须显式点名，否则判成歧义。
+export {
+  Button,
+  DisclosureRow,
+  type ButtonProps,
+  type ButtonTone,
+  type DisclosureRowProps,
+} from "./controls/index.ts";
 // 按行 schema 自动生成的行配置页（原 `@morlay/dsh-client-ui-schema-form/client`，2026-09-28 合并进来）：
 // 两者都是"对话 UI / 设置页的基础面"，拆成两行会各自注册一遍、还要求每个 bundle 都插齐两行。
 // 只**具名导出**它那一面的门面：`export *` 会与 settings-form 的样式 / token 重名。

package/src/client/layout/Row.tsx

@@ -0,0 +1,89 @@
+// `Row`：横向行 + 间距档。标题行的「左列文本 + 右侧控件」（`justify="between"`）、按钮排、标签排都用它。
+
+import { forwardRef, type ElementType, type HTMLAttributes, type ReactNode } from "react";
+import { classes } from "../controls/classes.ts";
+import css from "./layout.module.css";
+import {
+  alignClass,
+  gapClass,
+  justifyClass,
+  padClass,
+  type LayoutAlign,
+  type LayoutGap,
+  type LayoutJustify,
+  type LayoutPad,
+} from "./scales.ts";
+
+export interface RowProps extends HTMLAttributes<HTMLDivElement> {
+  // 渲染成哪个元素（行内摘要用 `span`）。
+  as?: ElementType;
+  // 子项之间的横向间距。
+  gap?: LayoutGap;
+  // 交叉轴对齐；缺省 `stretch`。
+  align?: LayoutAlign;
+  // 主轴分布；缺省从起点排。
+  justify?: LayoutJustify;
+  // 放不下就换行。
+  wrap?: boolean;
+  // 撑开：吃掉剩下的宽度并允许收缩。
+  grow?: boolean;
+  // 卡片底座（边框 + 圆角 + 底色）。
+  boxed?: boolean;
+  // 不被压缩（页头、动作排这类固定项）。
+  fixed?: boolean;
+  // 窄列宽度（对话消息那一列）。
+  narrow?: boolean;
+  // 贴右：把这一项推到行尾。
+  push?: boolean;
+  // 列表（配 `as="ul"`）：去掉列表标记与内距。
+  plain?: boolean;
+  // 内距档；缺省不留内距。
+  pad?: LayoutPad;
+}
+
+export const Row = forwardRef<HTMLElement, RowProps>(function Row(
+  {
+    as: Element = "div",
+    gap,
+    align,
+    justify,
+    wrap = false,
+    grow = false,
+    boxed = false,
+    fixed = false,
+    narrow = false,
+    push = false,
+    plain = false,
+    pad,
+    className,
+    children,
+    ...rest
+  },
+  ref,
+): ReactNode {
+  return (
+    <Element
+      ref={ref}
+      className={classes(
+        css.row,
+        gapClass(css, gap),
+        alignClass(css, align),
+        justifyClass(css, justify),
+        padClass(css, pad),
+        wrap ? css.wrap : undefined,
+        grow ? css.grow : undefined,
+        boxed ? css.boxed : undefined,
+        fixed ? css.fixed : undefined,
+        narrow ? css.narrow : undefined,
+        push ? css.push : undefined,
+        boxed ? css.boxed : undefined,
+        fixed ? css.fixed : undefined,
+        plain ? css.plain : undefined,
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </Element>
+  );
+});