@morlay/dsh-client-ui-primitives 0.0.2-alpha.7 → 0.0.2-alpha.9

package/src/client/schema-form/value.tsx

@@ -0,0 +1,146 @@
+/**
+ * 行内值的呈现与编辑文本规则，以及字段槽注册方复用的默认值组件。
+ *
+ * 值本身仍走草稿：这个文件只决定"怎么显示"（语法色 token、下拉触发的呈现）与"怎么编辑"（一行输入框里的文本
+ * 形状——字符串把换行写成 `\n`，与一行的输入框相配）。
+ */
+
+import { useState, type ReactNode } from "react";
+import { IconChevronDownOutlineRegular, Menu } from "@deepseek-ai/dsh-client-ui-primitives";
+import type { SelectOption } from "./hints.ts";
+import type { SchemaFieldOwnerProps } from "./slot-contract.ts";
+import { ICON_SIZE, LineValue, ValueTrigger } from "./styles.ts";
+
+/** 编辑态文本：字符串就是原文（换行照旧），其余按 JSON 写。 */
+export function valueText(value: unknown): string {
+  if (value === undefined || value === null) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  return JSON.stringify(value);
+}
+
+/** 这个值要在多行输入里编辑吗（字符串带换行）。 */
+export function isMultiline(value: unknown): boolean {
+  return typeof value === "string" && /[\r\n]/.test(value);
+}
+
+/** 显示态文本：字符串带引号；多行与特殊字符都按 JSON 的写法收在一行里。 */
+export function tokenText(value: unknown): string {
+  if (value === undefined || value === null) return "null";
+  if (typeof value === "string") return JSON.stringify(value);
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  return JSON.stringify(value);
+}
+
+/** 值的语法色分组。 */
+export function tokenTone(value: unknown): "string" | "number" | "boolean" | "empty" {
+  if (value === undefined || value === null) return "empty";
+  if (typeof value === "number") return "number";
+  if (typeof value === "boolean") return "boolean";
+  return "string";
+}
+
+/**
+ * 行内值的默认呈现（显示态 token）。
+ * @param props.owner - 字段上下文（值、是否 secret、只读原因）。
+ * @returns 一行里的值节点。
+ */
+export function InlineValue({ owner }: { owner: SchemaFieldOwnerProps }): ReactNode {
+  if (owner.options !== undefined) return <OptionSelect owner={owner} options={owner.options} />;
+  if (owner.node.meta.secret) {
+    // secret 不回显值：截断时不给全文，只给说明。
+    return (
+      <LineValue data-tone="empty" title={owner.hint}>
+        {owner.secretConfigured ? "••••••" : ""}
+      </LineValue>
+    );
+  }
+  return (
+    <LineValue
+      data-tone={owner.node.readOnly === null ? tokenTone(owner.value) : "empty"}
+      // 值长了会截断：整份内容挂在 title 上，hover 就能看全。
+      title={tokenText(owner.value)}
+    >
+      {tokenText(owner.value)}
+    </LineValue>
+  );
+}
+
+/**
+ * 选择器：**值本身**就是下拉的触发（不再另画一个 `select` 与它并列），点开是官方菜单。
+ *
+ * 当前值不在候选里时（例如目录里已经没有那个服务商）照原样显示，选中才换成新值。
+ */
+function OptionSelect({
+  owner,
+  options,
+}: {
+  owner: SchemaFieldOwnerProps;
+  options: readonly SelectOption[];
+}): ReactNode {
+  const [open, setOpen] = useState(false);
+  const selected = options.findIndex((option) => sameValue(option.value, owner.value));
+  const current = selected < 0 ? undefined : options[selected];
+  const label =
+    current?.label ??
+    (owner.value === undefined
+      ? owner.t("unconfigured")
+      : tokenText(current?.value ?? owner.value));
+  return (
+    <Menu
+      open={open}
+      dense
+      compact
+      // 浮层挂到 body：行容器与表单壳的裁剪/层级都挡不住它。
+      portal
+      align="start"
+      items={options.map((option, index) => ({
+        id: String(index),
+        label: option.label ?? tokenText(option.value),
+      }))}
+      selectedId={selected < 0 ? undefined : String(selected)}
+      onSelect={(id) => {
+        setOpen(false);
+        const option = options[Number(id)];
+        if (option !== undefined) owner.onChange(option.value);
+      }}
+      onClose={() => {
+        setOpen(false);
+      }}
+      anchor={
+        <ValueTrigger
+          type="button"
+          disabled={owner.disabled}
+          aria-label={owner.label}
+          onClick={() => {
+            setOpen(true);
+          }}
+        >
+          <LineValue
+            data-tone={current === undefined ? tokenTone(owner.value) : tokenTone(current.value)}
+          >
+            {label}
+          </LineValue>
+          <IconChevronDownOutlineRegular size={ICON_SIZE} />
+        </ValueTrigger>
+      }
+    />
+  );
+}
+
+/** 值是否就是这一项（菜单的高亮判据）。 */
+function sameValue(left: unknown, right: unknown): boolean {
+  if (Object.is(left, right)) return true;
+  if (typeof left !== "object" || typeof right !== "object" || left === null || right === null)
+    return false;
+  return JSON.stringify(left) === JSON.stringify(right);
+}
+
+/**
+ * 字段槽注册方复用的默认值：只改文案时拿它包一层即可（`owner` 上覆盖 `label`/`hint`）。
+ *
+ * 注意行式视图里键名来自配置键本身、注释来自 `hint`，所以 `label` 只在业务自写控件时才需要。
+ */
+export function SchemaFieldDefault({ owner }: { owner: SchemaFieldOwnerProps }): ReactNode {
+  return <InlineValue owner={owner} />;
+}

package/src/client/settings-form/SettingsForm.styles.ts

@@ -0,0 +1,58 @@
+// 样式搬自 vendor/deepseek-harness/packages/client/ui-primitives/src/settings-form/SettingsForm.module.css，
+// 换成包内 css-in-js（CSSProps + dsw）；上游那份是 CSS Modules，本包不做预编译。
+
+import type { CSSProps } from "../styling/css.ts";
+import { focusRing } from "../styling/focus.ts";
+import { dsw } from "../theme.ts";
+
+// 上游引用的 --dsw-alias-label-error 不在官方主题定义集内（token 树里没有这个变量），
+// 照抄引用而不是换一个近义 token——官方主题哪天定义它，这里自动跟着生效。
+const failedColor = "var(--dsw-alias-label-error)";
+
+export const styles = {
+  form: {
+    display: "flex",
+    flexDirection: "column",
+  },
+  // 上游 readOnly 与 unavailable 同一条规则：两处用同一个样式对象。
+  notice: {
+    margin: "0 0 12px",
+    fontSize: "12px",
+    lineHeight: 1.5,
+    color: dsw.alias.label.tertiary,
+  },
+  footer: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    paddingTop: "16px",
+  },
+  failed: {
+    flex: 1,
+    minWidth: 0,
+    margin: 0,
+    fontSize: "12px",
+    lineHeight: 1.5,
+    color: failedColor,
+  },
+  save: {
+    appearance: "none",
+    border: "1px solid transparent",
+    borderRadius: "8px",
+    padding: "5px 14px",
+    font: "inherit",
+    fontSize: "13px",
+    lineHeight: 1.5,
+    cursor: "pointer",
+    background: dsw.alias.label.primary,
+    color: dsw.alias.bg.layer["3"],
+    "&:disabled": {
+      opacity: 0.4,
+      cursor: "default",
+    },
+    "&:focus-visible": {
+      outline: focusRing,
+      outlineOffset: "1px",
+    },
+  },
+} satisfies Record<string, CSSProps>;

package/src/client/settings-form/SettingsForm.tsx

@@ -0,0 +1,72 @@
+// 搬自 vendor/deepseek-harness/packages/client/ui-primitives/src/settings-form/SettingsForm.tsx
+// （上游 `@deepseek-ai/dsh-client-ui-primitives`）：行为同形，样式从 CSS Modules 换成包内 css-in-js。
+
+import { useEffect, useRef, type ReactNode } from "react";
+import { styled } from "../styling/styled.tsx";
+import type { SettingsFormShell } from "./form-model.ts";
+import { styles } from "./SettingsForm.styles.ts";
+
+const Form = styled("div")(styles.form);
+const Notice = styled("p")(styles.notice);
+const Footer = styled("div")(styles.footer);
+const Failed = styled("p")(styles.failed);
+const Save = styled("button")(styles.save);
+
+/** The copy the form frame renders, from the owning plugin's dictionary. */
+export interface SettingsFormLabels {
+  /** Shown in place of the controls while the namespace is not served. */
+  unavailable: string;
+  /** Shown over the controls while the document is read-only. */
+  readOnly: string;
+  /** Shown beside the save after a save the Host did not accept. */
+  saveFailed: string;
+  /** The save control. */
+  save: string;
+  /** The save control while a save is crossing the wire. */
+  saving: string;
+}
+
+/** Form chrome shared by every settings page. */
+export interface SettingsFormProps {
+  /** The frame's copy. */
+  labels: SettingsFormLabels;
+  /** The form state: availability, writability, and what a save would do. */
+  state: SettingsFormShell;
+  /** Write every staged edit. */
+  onSave: () => void;
+  /** Drop every staged edit; the form calls it when it leaves the page. */
+  onDiscard: () => void;
+  /** The plugin's controls. */
+  children: ReactNode;
+}
+
+/**
+ * Render one plugin's settings form.
+ * @param props - the form's copy and state, its controls, and the save and discard actions.
+ * @returns the form, or the unavailable line while the namespace is not served.
+ */
+export function SettingsForm(props: SettingsFormProps) {
+  const { state, labels } = props;
+  const discard = useRef(props.onDiscard);
+  discard.current = props.onDiscard;
+  useEffect(
+    () => () => {
+      discard.current();
+    },
+    [],
+  );
+  if (!state.available) return <Notice role="status">{labels.unavailable}</Notice>;
+  const blocked = !state.dirty || state.invalid || state.saving;
+  return (
+    <Form>
+      {!state.writable ? <Notice role="status">{labels.readOnly}</Notice> : null}
+      {props.children}
+      <Footer>
+        {state.failed ? <Failed role="status">{labels.saveFailed}</Failed> : null}
+        <Save type="button" disabled={blocked} onClick={props.onSave}>
+          {state.saving ? labels.saving : labels.save}
+        </Save>
+      </Footer>
+    </Form>
+  );
+}

package/src/client/settings-form/fields.styles.ts

@@ -0,0 +1,158 @@
+// 样式搬自 vendor/deepseek-harness/packages/client/ui-primitives/src/settings-form/fields.module.css，
+// 换成包内 css-in-js（CSSProps + dsw）；上游那份是 CSS Modules，本包不做预编译。
+
+import type { CSSProps } from "../styling/css.ts";
+import { focusRing } from "../styling/focus.ts";
+import { dsw } from "../theme.ts";
+
+// 上游引用的 --dsw-alias-bg-layer-4 不在官方主题定义集内（token 树里没有这个变量），
+// 照抄引用而不是换一个近义 token——官方主题哪天定义它，这里自动跟着生效。
+const helpButtonHoverBackground = "var(--dsw-alias-bg-layer-4)";
+
+export const styles = {
+  field: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px",
+    padding: "12px 0",
+    "& + &": {
+      borderTop: `0.5px solid ${String(dsw.alias.border.l2)}`,
+    },
+  },
+  head: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+  },
+  label: {
+    flex: 1,
+    minWidth: 0,
+    fontSize: "13px",
+    fontWeight: 500,
+    lineHeight: 1.5,
+    color: dsw.alias.label.primary,
+  },
+  // 标签进 labelGroup 后由外层承担伸缩，自己不再抢空间（上游的 `.labelGroup > .label`）。
+  groupLabel: {
+    flex: "0 1 auto",
+  },
+  labelGroup: {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+    flex: 1,
+    minWidth: 0,
+  },
+  helpButton: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: "none",
+    width: "24px",
+    height: "24px",
+    padding: 0,
+    border: 0,
+    borderRadius: "6px",
+    background: "none",
+    color: dsw.alias.label.tertiary,
+    cursor: "pointer",
+    "&:hover": {
+      background: helpButtonHoverBackground,
+      color: dsw.alias.label.secondary,
+    },
+    "&[aria-expanded='true']": {
+      background: helpButtonHoverBackground,
+      color: dsw.alias.label.secondary,
+    },
+    "&:focus-visible": {
+      outline: focusRing,
+      outlineOffset: "1px",
+    },
+  },
+  help: {
+    padding: "10px 0 0",
+    fontSize: "12px",
+    lineHeight: 1.6,
+    color: dsw.alias.label.secondary,
+    "& > p": {
+      margin: 0,
+    },
+    "& > p + p": {
+      marginTop: "8px",
+    },
+  },
+  badges: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "8px",
+  },
+  // 上游用 Tag（tone="neutral" | "quiet"）：这里按变体拆两个 styled，形态与颜色照抄 Tag.module.css。
+  badge: {
+    display: "inline-flex",
+    alignItems: "center",
+    borderRadius: "999px",
+    cornerShape: "round",
+    padding: "1px 8px",
+    fontSize: "11px",
+    lineHeight: "17px",
+    fontWeight: 500,
+    whiteSpace: "nowrap",
+  },
+  badgeNeutral: {
+    background: dsw.alias.bg.module.platform,
+    color: dsw.alias.label.secondary,
+  },
+  badgeQuiet: {
+    color: dsw.alias.label.tertiary,
+  },
+  reset: {
+    border: "none",
+    background: "none",
+    padding: 0,
+    font: "inherit",
+    fontSize: "12px",
+    lineHeight: 1.5,
+    color: dsw.alias.label.secondary,
+    cursor: "pointer",
+    "&:hover:not(:disabled)": {
+      color: dsw.alias.label.primary,
+    },
+    "&:disabled": {
+      cursor: "default",
+    },
+  },
+  input: {
+    height: "34px",
+    padding: "0 12px",
+    border: `0.5px solid ${String(dsw.alias.border.l4)}`,
+    borderRadius: "8px",
+    background: dsw.alias.bg.layer["3"],
+    font: "inherit",
+    fontSize: "13px",
+    lineHeight: 1.5,
+    color: dsw.alias.label.primary,
+    "&:focus-visible": {
+      outline: "none",
+      borderColor: dsw.alias.state.business.primary,
+    },
+    "&:disabled": {
+      color: dsw.alias.label.tertiary,
+      cursor: "default",
+    },
+    "&[aria-invalid='true']": {
+      borderColor: dsw.alias.state.error.primary,
+    },
+  },
+  invalid: {
+    margin: 0,
+    fontSize: "12px",
+    lineHeight: 1.5,
+    color: dsw.alias.state.error.primary,
+  },
+  hint: {
+    margin: 0,
+    fontSize: "12px",
+    lineHeight: 1.5,
+    color: dsw.alias.label.tertiary,
+  },
+} satisfies Record<string, CSSProps>;

package/src/client/settings-form/fields.tsx

@@ -0,0 +1,194 @@
+// 搬自 vendor/deepseek-harness/packages/client/ui-primitives/src/settings-form/fields.tsx
+// （上游 `@deepseek-ai/dsh-client-ui-primitives`）：结构与行为同形，样式从 CSS Modules 换成包内 css-in-js。
+// 上游用的 Tag 与 IconInfoOutlineRegular 没有一起搬——本包不依赖上游 primitives，用等价的本地徽标与图标。
+
+import { useState, type ReactNode } from "react";
+import { styled } from "../styling/styled.tsx";
+import { styles } from "./fields.styles.ts";
+
+const Field = styled("div")(styles.field);
+const Head = styled("div")(styles.head);
+const LabelGroup = styled("div")(styles.labelGroup);
+const GroupLabel = styled("label")(styles.label, styles.groupLabel);
+const HeadLabel = styled("label")(styles.label);
+const HelpButton = styled("button")(styles.helpButton);
+const Help = styled("div")(styles.help);
+const Badges = styled("span")(styles.badges);
+const NeutralBadge = styled("span")(styles.badge, styles.badgeNeutral);
+const QuietBadge = styled("span")(styles.badge, styles.badgeQuiet);
+const Reset = styled("button")(styles.reset);
+const Input = styled("input")(styles.input);
+const Invalid = styled("p")(styles.invalid);
+const Hint = styled("p")(styles.hint);
+
+/** 上游 icons 里的 IconInfoOutlineRegular（fill-only 几何，整份图标表不搬）。 */
+function InfoGlyph({ size }: { size: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        d="M12.5757 7.00012C12.5757 3.92085 10.0794 1.42463 7.00012 1.42456C3.9208 1.42456 1.42456 3.9208 1.42456 7.00012C1.42463 10.0794 3.92085 12.5757 7.00012 12.5757C10.0793 12.5756 12.5756 10.0793 12.5757 7.00012ZM13.8002 7.00012C13.8001 10.7559 10.7559 13.8001 7.00012 13.8002C3.2443 13.8002 0.199291 10.7559 0.199219 7.00012C0.199219 3.24426 3.24426 0.199219 7.00012 0.199219C10.7559 0.199291 13.8002 3.2443 13.8002 7.00012Z"
+        fill="currentColor"
+      />
+      <path d="M7.6127 3.18921V4.55986H6.38735V3.18921H7.6127Z" fill="currentColor" />
+      <path d="M7.6127 5.68921V10.8109H6.38735V5.68921H7.6127Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+/** What every settings field control needs regardless of its value type. */
+export interface SettingsFieldProps {
+  /** Stable id associating the label with its control. */
+  id: string;
+  /** Visible label. */
+  label: string;
+  /** One-line explanation rendered under the control. */
+  hint: string;
+  /** Draft text this control renders. */
+  text: string;
+  /** True when saving would leave a user-layer entry for this field. */
+  overridden: boolean;
+  /** True when the draft is not a value this field accepts. */
+  invalid: boolean;
+  /** Copy for the overridden badge. */
+  overriddenLabel: string;
+  /** Copy for the reset control. */
+  resetLabel: string;
+  /** Copy shown in place of the hint while the draft is invalid. */
+  invalidLabel: string;
+  /** Disables every control (read-only document, or an unavailable namespace). */
+  disabled: boolean;
+  /** Stage draft text. */
+  onEdit: (text: string) => void;
+  /** Stage a clear so the field re-inherits the composition layer. */
+  onReset: () => void;
+}
+
+/**
+ * A staged value field. `numeric` only hints the keypad: which drafts a field
+ * accepts is decided by its spec, so the control never silently rewrites what
+ * the user typed.
+ * @param props - the field's copy, its staged text, and the edit actions.
+ * @returns the labelled control.
+ */
+export function SettingsValueField(
+  props: Omit<SettingsFieldProps, "hint"> & {
+    /** Optional explanation shown below the input. */
+    hint?: string;
+    /** Rules disclosed by the information button beside the label. */
+    help?: { label: string; content: ReactNode };
+    /** Hints a numeric keypad without narrowing what the control accepts. */
+    numeric?: boolean;
+    /** Placeholder shown while the draft is empty. */
+    placeholder?: string;
+  },
+) {
+  const [helpOpen, setHelpOpen] = useState(false);
+  const helpId = `${props.id}-help`;
+  const messageId = `${props.id}-message`;
+  const hasMessage = props.invalid || Boolean(props.hint);
+  const description = [hasMessage ? messageId : "", helpOpen ? helpId : ""]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <Field>
+      <Head>
+        <LabelGroup>
+          <GroupLabel htmlFor={props.id}>{props.label}</GroupLabel>
+          {props.help !== undefined ? (
+            <HelpButton
+              type="button"
+              aria-label={props.help.label}
+              aria-expanded={helpOpen}
+              aria-controls={helpId}
+              onClick={() => {
+                setHelpOpen(!helpOpen);
+              }}
+            >
+              <InfoGlyph size={12} />
+            </HelpButton>
+          ) : null}
+        </LabelGroup>
+        {props.overridden ? (
+          <Badges>
+            <NeutralBadge>{props.overriddenLabel}</NeutralBadge>
+            <Reset type="button" disabled={props.disabled} onClick={props.onReset}>
+              {props.resetLabel}
+            </Reset>
+          </Badges>
+        ) : null}
+      </Head>
+      <Input
+        id={props.id}
+        type="text"
+        {...(props.numeric === true ? { inputMode: "numeric" as const } : {})}
+        {...(props.invalid ? { "aria-invalid": true } : {})}
+        aria-describedby={description || undefined}
+        value={props.text}
+        placeholder={props.placeholder ?? ""}
+        disabled={props.disabled}
+        onChange={(event) => {
+          props.onEdit(event.target.value);
+        }}
+      />
+      {hasMessage ? (
+        props.invalid ? (
+          <Invalid id={messageId}>{props.invalidLabel}</Invalid>
+        ) : (
+          <Hint id={messageId}>{props.hint}</Hint>
+        )
+      ) : null}
+      {props.help !== undefined && helpOpen ? (
+        <Help id={helpId} role="region" aria-label={props.help.label}>
+          {props.help.content}
+        </Help>
+      ) : null}
+    </Field>
+  );
+}
+
+/**
+ * A write-only credential control. The value never rides a response, so the
+ * control reports only whether one is configured and starts blank; a blank
+ * draft writes nothing, which keeps the stored key rather than clearing it.
+ * 控件要求浏览器不要把已存的登录密码自动填进来（上游 11c0511271）。
+ * @param props - the field's copy, its staged text, and the configured state.
+ * @returns the labelled control.
+ */
+export function SettingsSecretField(
+  props: Pick<SettingsFieldProps, "id" | "label" | "hint" | "text" | "disabled" | "onEdit"> & {
+    /** Whether the Host reports a configured credential for this reference. */
+    configured: boolean;
+    /** Copy describing the configured state. */
+    stateLabel: string;
+  },
+) {
+  const Badge = props.configured ? NeutralBadge : QuietBadge;
+  return (
+    <Field>
+      <Head>
+        <HeadLabel htmlFor={props.id}>{props.label}</HeadLabel>
+        <Badges>
+          <Badge>{props.stateLabel}</Badge>
+        </Badges>
+      </Head>
+      <Input
+        id={props.id}
+        type="password"
+        autoComplete="new-password"
+        value={props.text}
+        disabled={props.disabled}
+        onChange={(event) => {
+          props.onEdit(event.target.value);
+        }}
+      />
+      <Hint>{props.hint}</Hint>
+    </Field>
+  );
+}