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

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

@@ -5,6 +5,8 @@
 // 与设置页其余部分同一套视觉与键盘行为。
 //
 // 字段槽仍然生效：命中时该字段**值**的位置换成注册方的组件，键名、注释、行号与行为按钮仍由这里画。
+//
+// 被 `ellipsis` 截断的文本（注释行、值）由官方 `Tooltip` 承载全文——**只有真的截断了才挂**（`TruncatedTooltip`）。
 
 import { useMemo, useState, type ReactNode } from "react";
 import {
@@ -29,27 +31,12 @@ import {
 } from "./lines.ts";
 import { parseFor } from "./fields.tsx";
 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,
-  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 {
@@ -81,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)}`}
@@ -120,7 +107,7 @@ export function Editor(props: EditorProps): ReactNode {
           renderField={renderField}
         />
       ))}
-    </EditorRoot>
+    </div>
   );
 }
 
@@ -201,17 +188,20 @@ function Row({
   const body =
     line.kind === "comment" ? (
       <>
-        <LineFoldSpacer data-role="fold" />
-        {/* 这一行有问题时注释位装的就是那条消息：红字，别整行铺红。 */}
-        {line.invalid ? (
-          <LineInvalid title={line.text}>{`// ${line.text}`}</LineInvalid>
-        ) : (
-          <LineComment title={line.text}>{`// ${line.text}`}</LineComment>
-        )}
+        <span className={css.lineFoldSpacer} data-role="fold" />
+        {/* 这一行有问题时注释位装的就是那条消息：红字，别整行铺红。
+            注释被 `ellipsis` 截断时全文交给官方 `Tooltip`——**只有真的截断才挂**，放得下就原样画。 */}
+        <TruncatedTooltip label={line.text}>
+          {line.invalid ? (
+            <span className={css.lineInvalid} data-role="comment">{`// ${line.text}`}</span>
+          ) : (
+            <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}
@@ -225,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}
@@ -240,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}
@@ -268,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}
@@ -282,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>
   );
 }
 
@@ -371,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}
@@ -399,9 +389,9 @@ function FieldLine({
                 }
               }}
             />
-          </CompactTextField>
+          </span>
         ) : (
-          <CompactInput>
+          <span className={css.compactInput}>
             <Input
               autoFocus={!missing}
               type="text"
@@ -422,12 +412,13 @@ function FieldLine({
                 }
               }}
             />
-          </CompactInput>
+          </span>
         )
       ) : null}
       {/* 编辑态只留输入框：原值不再在它旁边画一遍。 */}
       {isEditing || line.variantsStandIn ? null : (
-        <span
+        <span className={css.valueSlot}
+          data-role="value"
           onClick={() => {
             if (editable) onEdit(key);
           }}
@@ -444,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")}
@@ -468,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"
@@ -510,7 +501,7 @@ function FieldLine({
         {member === undefined ? null : (
           <RemoveLineButton member={member} face={face} t={t} disabled={disabled} />
         )}
-      </HoverActions>
+      </span>
     </>
   );
 }
@@ -558,7 +549,7 @@ function VariantSelect({
         setOpen(false);
       }}
       anchor={
-        <ValueTrigger
+        <button className={css.valueTrigger}
           type="button"
           data-role="variant"
           disabled={disabled}
@@ -567,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>
       }
     />
   );
@@ -594,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>
       )}
     </>
   );
@@ -705,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
@@ -720,7 +711,7 @@ function AddLine({
           setOpen(false);
         }}
         anchor={
-          <CompactInput>
+          <span className={css.compactInput}>
             <Input
               value={text}
               placeholder={label}
@@ -749,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 ? (
-        <LineComment title={resolveText(matched[0].description)}>
-          {resolveText(matched[0].description)}
-        </LineComment>
+        <TruncatedTooltip label={resolveText(matched[0].description)}>
+          <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/TruncatedTooltip.tsx

@@ -0,0 +1,60 @@
+// 行内文本的全文浮层：**只有确实被截断**时才给官方 `Tooltip`，放得下就一个浮层也不挂。
+//
+// 判据是元素自己的几何——`scrollWidth > clientWidth` 就是「这一格正被 `ellipsis` 截断」，不用字符数之类的估计。
+// 宽度变化（窗口、面板、字段槽）由 `ResizeObserver` 盯着这个元素重测；盒子没变、只是换了内容（值改了、注释换
+// 了）不会被它通知，所以每次提交再重量一次。
+
+import {
+  cloneElement,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from "react";
+import { Tooltip } from "@deepseek-ai/dsh-client-ui-primitives";
+
+export function TruncatedTooltip({
+  label,
+  children,
+}: {
+  label: string;
+  children: ReactElement<{ ref?: Ref<HTMLElement> }>;
+}): ReactNode {
+  const node = useRef<HTMLElement | null>(null);
+  const watch = useRef<ResizeObserver | null>(null);
+  const [truncated, setTruncated] = useState(false);
+
+  const measure = useCallback(() => {
+    const el = node.current;
+    if (el === null) return;
+    setTruncated(el.scrollWidth > el.clientWidth);
+  }, []);
+
+  // ref 一直挂在子元素上（没截断时也挂着）：挂上就盯着它的宽度，卸载时退订。
+  const anchor = useCallback(
+    (el: HTMLElement | null) => {
+      watch.current?.disconnect();
+      watch.current = null;
+      node.current = el;
+      if (el === null) return;
+      const observer = new ResizeObserver(measure);
+      observer.observe(el);
+      watch.current = observer;
+    },
+    [measure],
+  );
+
+  // 每次提交都重量一次：`ResizeObserver` 只对盒子尺寸发通知，换了文本的同尺寸盒子要靠这里。
+  useLayoutEffect(measure);
+
+  // 没截断时走 `Tooltip` 自己的 `disabled`：气泡不渲染、hover 也不弹，锚元素同时不重挂
+  //（换成「有截断才包 `Tooltip`」会在截断状态翻转时把锚换掉，白丢一次 DOM）。
+  return (
+    <Tooltip label={label} side="bottom" portal disabled={!truncated}>
+      {cloneElement(children, { ref: anchor })}
+    </Tooltip>
+  );
+}

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/index.ts

@@ -74,7 +74,18 @@ export type { SuggestedKeys } from "./schema-node.ts";
 type RowConfigEntryProps = PropsRuntime<"plugins.row.config"> & PropsRenderFactories;
 
 // 装上本包：字典、Factory（字段槽的声明者）与按行自动注册。
+//
+// 调用方是**内联了本包的 client 行**（本包不再是装配行）：inline 后每个消费行的产物里各带一份这份代码、
+// 都会调到这里，所以先等依赖服务到齐（调用方不必自己排顺序），并保证同一运行时只装一次。
 export function apply(ctx: Context): void {
+  ctx.inject([...inject], (scope) => {
+    // 提示面已在场 = 另一份副本装过了：字典 / 槽 / 行入口都不再重复注册。
+    if (scope.get("schemaFormHints") !== undefined) return;
+    install(scope);
+  });
+}
+
+function install(ctx: Context): void {
   ctx.effect(() => ctx.locale.register(NS, { zh, en }), "ui-schema-form: dictionaries");
   // 提示面（dict 的候选键）：同一次 apply 里提供，业务插件注册读数，本包的行投影读它。
   const hints = new SchemaFormHints(ctx);