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

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

@@ -34,26 +34,9 @@ import type { ResolveText } from "./labels.ts";
 import { TruncatedTooltip } from "./TruncatedTooltip.tsx";
 import { isMultiline, valueText } from "./value.tsx";
 import type { SchemaFieldOwnerProps, SchemaFormTranslate } from "./slot-contract.ts";
-import {
-  AddWrap,
-  CompactInput,
-  CompactTextField,
-  EditorRoot,
-  HoverActions,
-  ICON_SIZE,
-  LineBody,
-  LineComment,
-  LineFold,
-  LineFoldSpacer,
-  LineInvalid,
-  LineKey,
-  LineNumber,
-  LineRow,
-  LineToken,
-  LineValue,
-  ValueSlot,
-  ValueTrigger,
-} from "./styles.ts";
+import { classes } from "../controls/classes.ts";
+import { ICON_SIZE } from "./geometry.ts";
+import css from "./schema-form.module.css";
 
 // 编辑器要的一切。
 export interface EditorProps {
@@ -85,7 +68,7 @@ export function Editor(props: EditorProps): ReactNode {
   );
   const disabled = !state.writable || !state.available;
   return (
-    <EditorRoot data-editor="schema-form">
+    <div className={css.editorRoot} data-editor="schema-form">
       {lines.map((line, index) => (
         <Row
           key={`${line.kind}:${fieldKey(line.path)}:${String(index)}`}
@@ -124,7 +107,7 @@ export function Editor(props: EditorProps): ReactNode {
           renderField={renderField}
         />
       ))}
-    </EditorRoot>
+    </div>
   );
 }
 
@@ -205,20 +188,20 @@ function Row({
   const body =
     line.kind === "comment" ? (
       <>
-        <LineFoldSpacer data-role="fold" />
+        <span className={css.lineFoldSpacer} data-role="fold" />
         {/* 这一行有问题时注释位装的就是那条消息：红字，别整行铺红。
             注释被 `ellipsis` 截断时全文交给官方 `Tooltip`——**只有真的截断才挂**，放得下就原样画。 */}
         <TruncatedTooltip label={line.text}>
           {line.invalid ? (
-            <LineInvalid data-role="comment">{`// ${line.text}`}</LineInvalid>
+            <span className={css.lineInvalid} data-role="comment">{`// ${line.text}`}</span>
           ) : (
-            <LineComment data-role="comment">{`// ${line.text}`}</LineComment>
+            <span className={css.lineComment} data-role="comment">{`// ${line.text}`}</span>
           )}
         </TruncatedTooltip>
       </>
     ) : line.kind === "open" ? (
       <>
-        <LineFold
+        <button className={css.lineFold}
           data-role="fold"
           type="button"
           aria-expanded={!line.collapsed}
@@ -232,11 +215,11 @@ function Row({
           ) : (
             <IconChevronDownOutlineRegular size={ICON_SIZE} />
           )}
-        </LineFold>
+        </button>
         <LinePrefix line={line} face={face} t={t} disabled={disabled} />
-        <LineToken>
+        <span className={css.lineToken}>
           {line.shape === "object" ? (line.collapsed ? "{…}" : "{") : line.collapsed ? "[…]" : "["}
-        </LineToken>
+        </span>
         <VariantSelect
           control={line.variants}
           path={line.path}
@@ -247,8 +230,8 @@ function Row({
       </>
     ) : line.kind === "close" ? (
       <>
-        <LineFoldSpacer data-role="fold" />
-        <LineToken>{line.shape === "object" ? "}" : "]"}</LineToken>
+        <span className={css.lineFoldSpacer} data-role="fold" />
+        <span className={css.lineToken}>{line.shape === "object" ? "}" : "]"}</span>
         <AddLine
           line={line}
           state={state}
@@ -275,7 +258,7 @@ function Row({
       />
     );
   return (
-    <LineRow
+    <div className={css.lineRow}
       data-line={line.kind}
       data-field-path={line.path.join(".")}
       data-selected={selected === key ? "true" : undefined}
@@ -289,18 +272,18 @@ function Row({
           : undefined
       }
     >
-      <LineNumber
+      <span className={css.lineNumber}
         data-role="number"
         onClick={() => {
           onSelect(line.path);
         }}
       >
         {n}
-      </LineNumber>
-      <LineBody data-role="body" style={indent}>
+      </span>
+      <div className={css.lineBody} data-role="body" style={indent}>
         {body}
-      </LineBody>
-    </LineRow>
+      </div>
+    </div>
   );
 }
 
@@ -378,19 +361,19 @@ function FieldLine({
   const multiline = isMultiline(line.field.value) || /[\r\n]/.test(text);
   return (
     <>
-      <LineFoldSpacer data-role="fold" />
-      <LineKey
+      <span className={css.lineFoldSpacer} data-role="fold" />
+      <span className={css.lineKey}
         data-role="key"
         data-index={member?.index === undefined ? undefined : "true"}
         title={member?.key ?? line.node.key}
       >
         {member?.key ?? line.node.key}
-      </LineKey>
-      <LineToken>{member?.index === undefined ? ": " : "  "}</LineToken>
+      </span>
+      <span className={css.lineToken}>{member?.index === undefined ? ": " : "  "}</span>
       {isEditing ? (
         // 带换行的值给多行输入（Enter 换行、Esc 撤销），其余是一行的官方输入框。
         multiline ? (
-          <CompactTextField>
+          <span className={css.compactTextField}>
             <textarea
               autoFocus={!missing}
               rows={1}
@@ -406,9 +389,9 @@ function FieldLine({
                 }
               }}
             />
-          </CompactTextField>
+          </span>
         ) : (
-          <CompactInput>
+          <span className={css.compactInput}>
             <Input
               autoFocus={!missing}
               type="text"
@@ -429,19 +412,19 @@ function FieldLine({
                 }
               }}
             />
-          </CompactInput>
+          </span>
         )
       ) : null}
       {/* 编辑态只留输入框：原值不再在它旁边画一遍。 */}
       {isEditing || line.variantsStandIn ? null : (
-        <ValueSlot
+        <span className={css.valueSlot}
           data-role="value"
           onClick={() => {
             if (editable) onEdit(key);
           }}
         >
           {renderField(owner)}
-        </ValueSlot>
+        </span>
       )}
       <VariantSelect
         control={line.variants}
@@ -452,7 +435,7 @@ function FieldLine({
       />
       {isEditing ? (
         // 编辑态：确认收起这一格的编辑、取消把值退回去——都在输入框旁边，不用记快捷键。
-        <HoverActions data-role="actions" data-editing="true">
+        <span className={classes(css.lineActions, css.hoverActions)} data-role="actions" data-editing="true">
           <button
             type="button"
             aria-label={t("confirmEdit")}
@@ -476,9 +459,9 @@ function FieldLine({
           >
             <IconCloseOutlineRegular size={ICON_SIZE} />
           </button>
-        </HoverActions>
+        </span>
       ) : null}
-      <HoverActions data-role="actions">
+      <span className={classes(css.lineActions, css.hoverActions)} data-role="actions">
         {line.field.staged && !disabled ? (
           <button
             type="button"
@@ -518,7 +501,7 @@ function FieldLine({
         {member === undefined ? null : (
           <RemoveLineButton member={member} face={face} t={t} disabled={disabled} />
         )}
-      </HoverActions>
+      </span>
     </>
   );
 }
@@ -566,7 +549,7 @@ function VariantSelect({
         setOpen(false);
       }}
       anchor={
-        <ValueTrigger
+        <button className={css.valueTrigger}
           type="button"
           data-role="variant"
           disabled={disabled}
@@ -575,9 +558,9 @@ function VariantSelect({
             setOpen(true);
           }}
         >
-          <LineValue data-tone="empty">{current?.label ?? ""}</LineValue>
+          <span className={css.lineValue} data-tone="empty">{current?.label ?? ""}</span>
           <IconChevronDownOutlineRegular size={ICON_SIZE} />
-        </ValueTrigger>
+        </button>
       }
     />
   );
@@ -602,15 +585,15 @@ function LinePrefix({
   const indexed = member !== undefined && member.index !== undefined;
   return (
     <>
-      <LineKey data-role="key" data-index={indexed ? "true" : undefined} title={key}>
+      <span className={css.lineKey} data-role="key" data-index={indexed ? "true" : undefined} title={key}>
         {key}
-      </LineKey>
-      <LineToken>{indexed ? "  " : ": "}</LineToken>
+      </span>
+      <span className={css.lineToken}>{indexed ? "  " : ": "}</span>
       {/* 值本身是容器（对象/数组）的成员：它也要能移除，否则这一项删不掉。 */}
       {member === undefined ? null : (
-        <HoverActions data-role="actions">
+        <span className={classes(css.lineActions, css.hoverActions)} data-role="actions">
           <RemoveLineButton member={member} face={face} t={t} disabled={disabled} />
-        </HoverActions>
+        </span>
       )}
     </>
   );
@@ -713,7 +696,7 @@ function AddLine({
     setOpen(false);
   };
   return (
-    <AddWrap data-add={spec.kind} data-invalid={invalid ? "true" : undefined}>
+    <span className={css.addWrap} data-add={spec.kind} data-invalid={invalid ? "true" : undefined}>
       <Menu
         open={open && spec.kind !== "item" && matched.length > 0}
         dense
@@ -728,7 +711,7 @@ function AddLine({
           setOpen(false);
         }}
         anchor={
-          <CompactInput>
+          <span className={css.compactInput}>
             <Input
               value={text}
               placeholder={label}
@@ -757,16 +740,16 @@ function AddLine({
                 }
               }}
             />
-          </CompactInput>
+          </span>
         }
       />
-      {invalid ? <LineInvalid>{t("unknownProperty")}</LineInvalid> : null}
+      {invalid ? <span className={css.lineInvalid}>{t("unknownProperty")}</span> : null}
       {/* 候选的说明：选中之前先看清"要加的是什么"（长了同样由 `Tooltip` 给全文，只有截断时才挂）。 */}
       {!invalid && matched.length === 1 && matched[0]?.description !== undefined ? (
         <TruncatedTooltip label={resolveText(matched[0].description)}>
-          <LineComment>{resolveText(matched[0].description)}</LineComment>
+          <span className={css.lineComment}>{resolveText(matched[0].description)}</span>
         </TruncatedTooltip>
       ) : null}
-    </AddWrap>
+    </span>
   );
 }

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

@@ -8,7 +8,7 @@ import { SettingsForm, type SettingsFormLabels } from "@deepseek-ai/dsh-client-u
 import { Editor } from "./Editor.tsx";
 import { parseFor } from "./fields.tsx";
 import type { SchemaFieldOwnerProps, SchemaFormComponentProps } from "./slot-contract.ts";
-import { Hint } from "./styles.ts";
+import css from "./schema-form.module.css";
 import { SchemaFieldDefault } from "./value.tsx";
 
 // 渲染一行的配置页。
@@ -26,7 +26,7 @@ export function SchemaForm(props: SchemaFormComponentProps): ReactNode {
     save: t("save"),
     saving: t("saving"),
   };
-  if (!state.configured) return <Hint role="status">{t("noSchema")}</Hint>;
+  if (!state.configured) return <p className={css.hint} role="status">{t("noSchema")}</p>;
   return (
     <SettingsForm
       labels={labels}
@@ -52,9 +52,9 @@ export function SchemaForm(props: SchemaFormComponentProps): ReactNode {
       />
       {/* 本地整段校验挡下的保存要说出来：否则点保存"没有反应"看起来像按钮坏了。 */}
       {state.violation === undefined ? null : (
-        <Hint role="alert" data-violation="true">
+        <p className={css.hint} role="alert" data-violation="true">
           {t("notSaved", { message: state.violation.message })}
-        </Hint>
+        </p>
       )}
     </SettingsForm>
   );

package/src/client/schema-form/controller.ts

@@ -304,9 +304,12 @@ export class SchemaFormController {
     return this.#ns;
   }
 
-  // 外部提示（候选键这类）变了：重新投影一次，字段树与草稿都不动。
+  // 外部读数变了（提示面的候选、或 describe 里的 schema 本身）：**重读一次 describe** 再投影。
+  //
+  // 只重投影是不够的：行页在 describe 变化时会重建控制器，而"这一行常驻、只订阅 describe"的消费方（bundle 配置页）
+  // 依赖这次重读——否则视图晚到、通知没落上时，字段树会停在"还没有"的那一次投影上。
   refresh(): void {
-    this.#store.set(this.#project());
+    this.#sync();
   }
 
   // 释放订阅。

package/src/client/schema-form/geometry.ts

@@ -0,0 +1,3 @@
+// 行内图标的边长：与 `schema-form.module.css` 里行高 / 折叠列同一档（14px）。组件用 `size={ICON_SIZE}`，
+// 样式表用像素——两处同源，改就一起改。
+export const ICON_SIZE = 14;

package/src/client/schema-form/schema-form.module.css

@@ -0,0 +1,335 @@
+/* 行式编辑器的样式：等宽、行号、语法色、悬停行为——全部消费官方 `--dsw-*` token。
+   几何只有一套：行高 22px、行内间距 6px、动作键 20px、折叠列 14px、行号列 32px，行与行之间不各自决定。 */
+
+.editorRoot {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--dsw-alias-label-primary);
+}
+
+/* 一行：行号 + 折进 + 行内容。悬停给一层浅底。 */
+.lineRow {
+  display: flex;
+  /* 顶部对齐：行里出现输入框或多行值时，内容不跟着上下跳。 */
+  align-items: flex-start;
+  gap: 6px;
+  min-height: 22px;
+  padding-right: 8px;
+  white-space: nowrap;
+}
+
+.lineRow:hover {
+  background: var(--dsw-alias-bg-layer-2);
+}
+
+/* 选中一行（点行号）：整行留一层底色，便于对着行号找内容。 */
+.lineRow[data-selected='true'] {
+  background: var(--dsw-alias-bg-layer-3);
+}
+
+/* 本页改过还没保存：左边一道强调色，和「已经存进用户层」的浅灰区分开。 */
+.lineRow[data-dirty='true'] {
+  box-shadow: inset 2px 0 0 var(--dsw-alias-brand-primary);
+}
+
+.lineRow[data-overridden='true'] {
+  box-shadow: inset 2px 0 0 var(--dsw-elevation-stroke-color);
+}
+
+/* 改过的字段名用强调色（存没存看左边那道条）；出错时红优先。 */
+.lineRow[data-dirty='true'] [data-role='key'] {
+  color: var(--dsw-alias-brand-primary);
+}
+
+.lineRow[data-overridden='true'] [data-role='key'] {
+  color: var(--dsw-alias-brand-primary);
+}
+
+/* 有问题的行：半透明红底 + 左侧一道实红条，字段名与注释位那句都是红字。 */
+.lineRow[data-invalid='true'] {
+  background: color-mix(in srgb, var(--dsw-alias-state-error-secondary) 12%, transparent);
+  box-shadow: inset 2px 0 0 var(--dsw-alias-state-error-primary);
+}
+
+.lineRow[data-invalid='true'] [data-role='key'] {
+  color: var(--dsw-alias-state-error-primary);
+}
+
+/* 行内的行为按钮（撤回 / 恢复默认 / 复制 / 移除）：平时透明，悬停这一行才显形。 */
+.lineRow:hover [data-role='actions'] {
+  opacity: 1;
+}
+
+/* 一行的内容区：**缩进只作用在这里**——行号列固定在左边，缩进不推它。 */
+.lineBody {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+  min-height: 22px;
+}
+
+/* 行号列：右对齐、不可选、淡色。 */
+.lineNumber {
+  flex: none;
+  width: 32px;
+  line-height: 22px;
+  text-align: right;
+  color: var(--dsw-alias-label-caption);
+  user-select: none;
+  cursor: pointer;
+}
+
+/* 折叠 chevron（官方箭头图标，尺寸与别的行内图标同源）。 */
+.lineFold {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 14px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--dsw-alias-label-caption);
+  cursor: pointer;
+}
+
+.lineFold:hover {
+  color: var(--dsw-alias-label-secondary);
+}
+
+/* 叶子行的折叠占位（保持列对齐）。 */
+.lineFoldSpacer {
+  flex: none;
+  width: 14px;
+}
+
+/* 键名（配置键原样；数组下标淡一些）。 */
+.lineKey {
+  flex: none;
+  color: var(--dsw-alias-label-primary);
+}
+
+.lineKey[data-index='true'] {
+  color: var(--dsw-alias-label-caption);
+}
+
+/* 结构符与标点（`{` `}` `[` `]` `:`）。 */
+.lineToken {
+  flex: none;
+  color: var(--dsw-alias-label-caption);
+}
+
+/* 值（token）：字符串 / 数字 / 布尔各有语法色。
+   **必须是块级盒**：`overflow` / `text-overflow` 对 inline 盒不生效，inline 的 token 无论多长都不会截断，
+   只会把行撑宽。 */
+.lineValue {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: text;
+  color: var(--dsw-alias-state-business-primary);
+}
+
+.lineValue[data-tone='number'] {
+  color: var(--dsw-alias-state-warn-primary);
+}
+
+.lineValue[data-tone='boolean'] {
+  color: var(--dsw-alias-state-success-primary);
+}
+
+.lineValue[data-tone='empty'] {
+  color: var(--dsw-alias-label-caption);
+}
+
+/* 值在行里的位置（字段槽的宿主）：键名与结构符都是 `flex: none`，它是行里**唯一可收缩**的那一项。
+   不生长：短值保持自然宽度，长值才收缩到行尾并自己截断。 */
+.valueSlot {
+  display: block;
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* 值上的下拉触发：**它自己就是值的呈现**（不再是「值 + 一个下拉」两遍），点开才出菜单。 */
+.valueTrigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  color: var(--dsw-alias-label-caption);
+}
+
+.valueTrigger:disabled {
+  cursor: default;
+}
+
+.valueTrigger:focus-visible {
+  outline: none;
+}
+
+/* 行内输入的外壳：官方 `Input` 压到与值同一行高，并**吃掉剩下的宽度**。
+   行内编辑与容器闭合行的添加输入共用它——两处的输入框因此长得一模一样。 */
+.compactInput {
+  display: inline-flex;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.compactInput > span {
+  width: 100%;
+  height: 22px;
+  padding: 0 6px;
+  border-radius: 4px;
+}
+
+.compactInput input {
+  font-size: 14px;
+  line-height: 22px;
+}
+
+/* 多行值的行内输入：官方没有多行原子，所以这里用同一套观感的字段壳（同边框、同圆角、同焦点色），
+   高度跟着内容长、宽度同样撑满剩下的位置。 */
+.compactTextField {
+  display: inline-flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0 6px;
+  border-radius: 4px;
+  background: var(--dsw-alias-bg-layer-1);
+  /* 细线走 theme 的描边（0.5px 与颜色都由 token 给）。 */
+  border: 0;
+  box-shadow: 0 0 0 0.5px var(--dsw-elevation-stroke-color);
+}
+
+.compactTextField:focus-within {
+  --dsw-elevation-stroke-color: var(--dsw-alias-brand-primary);
+}
+
+.compactTextField > textarea {
+  flex: 1;
+  width: 100%;
+  min-height: 20px;
+  max-height: 240px;
+  padding: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  resize: none;
+  field-sizing: content;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--dsw-alias-label-primary);
+}
+
+/* 行内注释（schema 说明与业务文案）：比配置值小一档、tertiary 色，占满这一行剩下的宽度，长了就截断——
+   **真的被截断时**才由官方 `Tooltip` 给全文。 */
+.lineComment {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--dsw-alias-label-tertiary);
+  font-family: inherit;
+  font-size: 12px;
+}
+
+/* 行内的校验消息（与注释放同一档字号）：可收缩、自己截断、**截断了**才由官方 `Tooltip` 给全文。
+   `flex: 0 1 auto`（不生长）：短消息别铺满整行，添加入口那一行里也不跟输入框抢剩下的宽度。 */
+.lineInvalid {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--dsw-alias-state-error-primary);
+  font-family: inherit;
+  font-size: 12px;
+}
+
+/* 行尾的动作组：方形图标键（默认透明，悬停时显形，显形规则写在行上）。 */
+.lineActions {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex: none;
+  opacity: 0;
+}
+
+.lineActions > button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+}
+
+.lineActions > button:hover {
+  background: var(--dsw-alias-bg-layer-3);
+  color: var(--dsw-alias-label-primary);
+}
+
+.lineActions > button:disabled {
+  cursor: not-allowed;
+  color: var(--dsw-alias-label-dimmed);
+}
+
+/* 编辑态的两个按钮常显，而且**要有底色与描边**：行底色上只有淡色图标是看不见的，
+   所以这里给实体按钮（theme 的描边 + 一层底），确认用成功档、取消用中性档。 */
+.hoverActions[data-editing='true'] {
+  opacity: 1;
+  gap: 6px;
+}
+
+.hoverActions[data-editing='true'] > button {
+  box-shadow: 0 0 0 0.5px var(--dsw-elevation-stroke-color);
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-primary);
+}
+
+.hoverActions[data-editing='true'] > button:first-of-type {
+  color: var(--dsw-alias-state-success-primary);
+}
+
+/* 添加输入：**跟在容器的闭合括号同一行**（菜单锚在它上面），宽度吃掉剩下的位置。 */
+.addWrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1 1 auto;
+  min-width: 0;
+  margin-left: 6px;
+}
+
+.addWrap[data-invalid='true'] input {
+  border-color: var(--dsw-alias-state-error-primary);
+}
+
+/* 一行说明（不可用 / 没有可生成项时用）。 */
+.hint {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}