@morlay/dsh-client-ui-primitives 0.0.6 → 0.0.8

package/locale/en.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "UI Primitives",
-    "description": "css-in-js styling layer, the shared reference parser and renderer for the forked conversation UI, and the settings-form primitives forked from upstream. It also carries the schema-driven row config pages (field-slot injection)."
+    "description": "The shared base for the conversation UI and the settings pages: the css-in-js styling layer, the reference parser and renderer (one source shared with the host), the staged settings-form primitives forked from upstream, and the schema-generated row config pages (field-slot injection). Inlined by the client rows that use it, not an assembly row."
   }
 }

package/locale/zh.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "UI 基础层",
-    "description": "css-in-js 样式层、被 fork 的对话 UI 共用的引用解析与渲染转换，以及从上游 fork 过来的设置表单原语。另含按行 schema 自动生成的行配置页（字段槽注入）。"
+    "description": "对话 UI 与设置页共用的基础面：css-in-js 样式层、host 与 client 共用一份源码的引用解析与渲染转换、上游 fork 过来的暂存式设置表单原语，以及按 schema 自动生成的行配置页（字段槽注入）。随用到它的 client 行内联，不是装配行。"
   }
 }

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@morlay/dsh-client-ui-primitives",
-  "version": "0.0.6",
-  "description": "css-in-js styling kit (styled / Token / Styling), the shared reference parser and renderer (findReferences / parseReferenceToken) for the forked conversation UI, and the settings-form primitives forked from upstream (SettingsFormModel / field controls / form shell): consumes the official --dsw-* design tokens, so no CSS Modules precompile step is needed.",
+  "version": "0.0.8",
+  "description": "client UI kit for this workspace: re-exports the official ui-primitives (Button / Menu / Input / Tag / Modal / Switch / SettingsForm …) plus our own layout primitives (Stack / Row / Text / Panel) and controls (TagInput / SearchSelect / ModelRouteList / Tabs / Spinner …), all styled with the same CSS Modules + `--dsw-*` tokens as upstream; also the shared reference parser/renderer (findReferences / parseReferenceToken) and the schema-generated row config page. Ships as an inlined client library (`dsh.client.inline`), not as an assembly row.",
   "keywords": [
     "client",
-    "css-in-js",
+    "css-modules",
     "design-tokens",
     "dsh",
     "dsh-plugin",
-    "styled"
+    "ui-kit"
   ],
   "license": "MIT",
   "repository": {
@@ -24,11 +24,8 @@
   "type": "module",
   "exports": {
     ".": "./dist/index.mjs",
+    "./client": "./dist/client.mjs",
     "./package.json": "./package.json",
-    "./client": {
-      "types": "./dist/client.d.cts",
-      "default": "./dist/client.cjs"
-    },
     "./locale/*.json": "./locale/*.json"
   },
   "dependencies": {
@@ -40,46 +37,38 @@
     "micromark-util-types": "^2.0.2"
   },
   "devDependencies": {
-    "@deepseek-ai/dsh-api-remotes": "0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-locale": "0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-store": "0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-plugin-manager": "0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-primitives": "0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-renderer": "0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-settings": "0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-slots": "0.2.0-rc.1",
-    "@deepseek-ai/dsh-util-values": "0.2.0-rc.1",
+    "@deepseek-ai/dsh-api-remotes": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-locale": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-store": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-plugin-manager": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-primitives": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-renderer": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-settings": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-slots": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-util-values": "0.2.0-rc.2",
     "@deepseek-ai/schemastery": "3.18.4",
     "@testing-library/react": "^16.3.0",
     "@types/mdast": "^4.0.4",
     "@types/react": "~18.3.1",
-    "csstype": "^3.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.4",
-    "@deepseek-ai/dsh-api-remotes": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-locale": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-store": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-plugin-manager": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-renderer": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-settings": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.2.0-rc.1"
+    "@deepseek-ai/dsh-api-remotes": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-locale": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-store": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-plugin-manager": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-renderer": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-settings": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.2.0-rc.2"
   },
   "dsh": {
     "client": {
-      "platform": "web",
-      "inject": [
-        "@deepseek-ai/dsh-client-locale",
-        "@deepseek-ai/dsh-client-ui-plugin-manager",
-        "@deepseek-ai/dsh-client-ui-settings",
-        "@deepseek-ai/dsh-client-ui-slots"
-      ]
+      "inline": true
     }
   },
   "scripts": {
-    "build": "pnpm exec tsdown",
-    "gen:tokens": "pnpm exec tsx scripts/gen-design-tokens.mts && pnpm exec oxfmt src/client/theme.generated.ts"
+    "build": "pnpm exec tsdown"
   }
 }

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,45 @@
+// 图标按钮：没有文字、没有边框的方形按钮（官方侧边栏那种几何）。`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/SearchInput.module.css

@@ -0,0 +1,11 @@
+/* 宽度档：搜索框那一档是固定宽（列表里的搜索行），`full` 撑满。 */
+.search {
+  width: 360px;
+  max-width: 100%;
+  flex: none;
+}
+
+.full {
+  width: 100%;
+  flex: none;
+}

package/src/client/controls/SearchInput.tsx

@@ -0,0 +1,22 @@
+// 搜索输入：官方 `Input` + 宽度档（列表与设置面的搜索框是固定一档宽）。
+
+import type { ComponentProps, ReactNode } from "react";
+import { Input } from "@deepseek-ai/dsh-client-ui-primitives";
+import { classes } from "./classes.ts";
+import css from "./SearchInput.module.css";
+
+export type SearchInputWidth = "search" | "full";
+
+export type SearchInputProps = ComponentProps<typeof Input> & {
+  // 宽度档：`search`（360px，列表的搜索行）或 `full`（撑满）。
+  width?: SearchInputWidth;
+};
+
+export function SearchInput({ width = "search", className, ...rest }: SearchInputProps): ReactNode {
+  return (
+    <Input
+      className={classes(className, width === "search" ? css.search : css.full)}
+      {...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);
+}