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

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

@@ -2,6 +2,7 @@
 // 换成包内 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 树里没有这个变量），
@@ -50,7 +51,7 @@ export const styles = {
       cursor: "default",
     },
     "&:focus-visible": {
-      outline: `2px solid ${String(dsw.alias.brand.primary)}`,
+      outline: focusRing,
       outlineOffset: "1px",
     },
   },

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

@@ -2,6 +2,7 @@
 // 换成包内 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 树里没有这个变量），
@@ -64,7 +65,7 @@ export const styles = {
       color: dsw.alias.label.secondary,
     },
     "&:focus-visible": {
-      outline: `2px solid ${String(dsw.alias.brand.primary)}`,
+      outline: focusRing,
       outlineOffset: "1px",
     },
   },
@@ -132,7 +133,7 @@ export const styles = {
     color: dsw.alias.label.primary,
     "&:focus-visible": {
       outline: "none",
-      borderColor: dsw.alias.brand.primary,
+      borderColor: dsw.alias.state.business.primary,
     },
     "&:disabled": {
       color: dsw.alias.label.tertiary,

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

@@ -157,6 +157,7 @@ export function SettingsValueField(
  * 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.
  */
@@ -180,7 +181,7 @@ export function SettingsSecretField(
       <Input
         id={props.id}
         type="password"
-        autoComplete="off"
+        autoComplete="new-password"
         value={props.text}
         disabled={props.disabled}
         onChange={(event) => {

package/src/client/styling/focus.ts

@@ -0,0 +1,9 @@
+// 焦点环口径搬上游 ui-theme 的 `focus.css`：颜色读官方 `--dsw-focus-ring-color`
+// （主题把它按输入模态解析成蓝，指针模态下置 transparent 抑制环），变量缺失时回退业务蓝；
+// 宽度读官方的 `--dsw-focus-ring-width`。偏移与线宽的特例仍由各控件自己声明。
+import { dsw } from "../theme.ts";
+import { Token } from "./token.ts";
+
+export const focusRing = `${String(dsw.focus.ring.width)} solid ${Token.collect(
+  Token.fallbackVar(dsw.focus.ring.color, String(dsw.alias.state.business.primary)),
+)}`;

package/src/client/theme.generated.ts

@@ -1,5 +1,5 @@
 /**
- * 官方主题的 `--dsw-*` token 全集（373 个），由 packages/client/ui-primitives/scripts/gen-design-tokens.mts 生成，勿手改。
+ * 官方主题的 `--dsw-*` token 全集（395 个），由 packages/client/ui-primitives/scripts/gen-design-tokens.mts 生成，勿手改。
  *
  * 叶子是该变量的**默认值**（官方 light 主题里首次出现的定义）：既是类型推导的来源，也可作 fallback。
  * `"$"` 键出现在「自身也是 token 的分支」上（命名体系里有 40 个短名同时是长名前缀的 token）。
@@ -10,7 +10,7 @@ export const designTokens = {
     bg: {
       base: "var(--dsw-static-neutral-bluish-00)",
       document: {
-        preview: "var(--dsw-static-neutral-bluish-750)",
+        preview: "var(--dsw-static-neutral-bluish-100)",
       },
       layer: {
         "1": "var(--dsw-static-neutral-bluish-00)",
@@ -132,7 +132,7 @@ export const designTokens = {
       caption: "var(--dsw-static-neutral-bluish-400)",
       dimmed: "var(--dsw-static-neutral-bluish-200)",
       document: {
-        preview: "var(--dsw-static-neutral-bluish-200)",
+        preview: "var(--dsw-static-neutral-bluish-700)",
       },
       primary: {
         $: "var(--dsw-static-neutral-bluish-1000)",
@@ -163,6 +163,21 @@ export const designTokens = {
       placeholder: "var(--dsw-static-neutral-bluish-60)",
       tag: "var(--dsw-static-neutral-bluish-75)",
     },
+    menu: {
+      icon: "var(--dsw-static-neutral-bluish-800)",
+    },
+    onboarding: {
+      accent: "rgb(57, 100, 254)",
+      card: {
+        fill: "color-mix(in srgb, var(--dsw-static-neutral-bluish-00) 80%, transparent)",
+      },
+      checkbox: {
+        border: "color-mix(in srgb, var(--dsw-static-neutral-bluish-1000) 20%, transparent)",
+      },
+      secondary: {
+        fill: "var(--dsw-static-neutral-bluish-00)",
+      },
+    },
     scrollbar: {
       bg: {
         l1: "var(--dsw-static-neutral-200)",
@@ -173,6 +188,12 @@ export const designTokens = {
         l2: "var(--dsw-static-neutral-300)",
       },
     },
+    settings: {
+      card: {
+        fill: "var(--dsw-alias-bg-layer-2)",
+        stroke: "var(--dsw-alias-border-l4)",
+      },
+    },
     state: {
       business: {
         primary: "var(--dsw-static-deepseek-500)",
@@ -199,9 +220,13 @@ export const designTokens = {
     },
     toast: {
       bg: "var(--dsw-static-neutral-bluish-800)",
+      label: "var(--dsw-static-neutral-bluish-00)",
     },
     tooltip: {
       bg: "var(--dsw-static-neutral-bluish-850)",
+      key: {
+        bg: "color-mix(in srgb, var(--dsw-alias-tooltip-bg), white 18%)",
+      },
     },
   },
   corner: {
@@ -218,6 +243,12 @@ export const designTokens = {
       color: "var(--dsw-alias-border-l4)",
     },
   },
+  focus: {
+    ring: {
+      color: "transparent",
+      width: "2px",
+    },
+  },
   font: {
     base: {
       "16": {
@@ -247,8 +278,10 @@ export const designTokens = {
         },
       },
     },
-    family:
-      "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',\n    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+    family: {
+      $: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',\n    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+      brand: "'Montserrat', var(--dsw-font-family)",
+    },
     l: {
       "20": {
         $: "500 20px/28px var(--dsw-font-family)",
@@ -610,6 +643,19 @@ export const designTokens = {
       },
     },
   },
+  gradient: {
+    onboarding: {
+      blue: {
+        stops: "#3964fe 18.75%, #398efe 51.78%, #6dccff 86.252%, #3964fe",
+      },
+      cyan: {
+        stops: "#0293b4 21.154%, #2dc8eb 50.954%, #aff0ff 85.326%, #0293b4",
+      },
+      violet: {
+        stops: "#2a2fb6 33.102%, #8b76f6 50.954%, #c5c0ff 85.326%, #2a2fb6",
+      },
+    },
+  },
   linear: {
     gradient: {
       think: "linear-gradient(180deg, #fff 20.19%, rgba(255, 255, 255, 0) 100%)",
@@ -619,12 +665,23 @@ export const designTokens = {
     },
   },
   mask: {
-    blur: "blur(2px)",
+    blur: "none",
   },
   menu: {
     backdrop: {
       filter: "blur(40px) saturate(150%)",
     },
+    surface: {
+      fill: "rgba(248, 249, 250, 0.58)",
+    },
+  },
+  radius: {
+    lg: "16px",
+    md: "12px",
+    panel: "28px",
+    sm: "8px",
+    xl: "20px",
+    xs: "4px",
   },
   shadow: {
     lv1: {
@@ -645,7 +702,7 @@ export const designTokens = {
     login: {
       input: "var(--dsw-static-neutral-bluish-50)",
     },
-    menu: "rgba(248, 249, 250, 0.58)",
+    menu: "var(--dsw-menu-surface-fill)",
     selector: "var(--dsw-static-neutral-bluish-60)",
     sidebar: {
       fill: "var(--dsw-static-neutral-bluish-50)",

package/cordis.patch.yml

@@ -1,3 +0,0 @@
-- insert:
-    - id: ui-primitives-fork
-      name: "@morlay/dsh-client-ui-primitives"