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

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

@@ -1,321 +0,0 @@
-// 行式编辑器的样式：等宽、行号、语法色、悬停行为——全部消费官方 `--dsw-*` token。
-//
-// 几何只有一套：行高、行内间距、动作按钮尺寸都由下面几个常量给，行与行之间不各自决定。
-
-import { styled } from "../styling/index.ts";
-import { dsw } from "../theme.ts";
-
-// 等宽字体栈：配置值的观感与代码一致。
-const MONO = 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace';
-
-// 行高：行内容、行内输入、折叠箭头、按钮排都在这一档上对齐。
-const ROW = "22px";
-
-// 行内元素之间的间距。
-const GAP = "6px";
-
-// 动作按钮：方形图标键，尺寸与行高同一档的紧凑版。
-const ACTION = "20px";
-
-// 动作按钮之间的间距（比行内间距紧一档）。
-const ACTION_GAP = "4px";
-
-// 图标边长（行内图标与动作键同一档）。
-export const ICON_SIZE = 14;
-
-// 折叠列（chevron 与它的占位）宽度。
-const FOLD = "14px";
-
-// 行号列宽度。
-const NUMBER = "32px";
-
-// 行尾留白。
-const PAD = "8px";
-
-// 细线：theme 给的 0.5px 描边（`0 0 0 0.5px var(--dsw-elevation-stroke-color)`）。
-const HAIRLINE = dsw.elevation.stroke;
-
-// 描边色：theme 里给描边用的那一档（与官方 `Menu` 面板同源）。
-const LINE = dsw.elevation.stroke.color;
-
-// 行左侧那道「改过」的标记宽度。
-const EDGE = "2px";
-
-// 出错那一行的底色：theme 的红掺进透明里（半透明红），比整行实红轻、又比只有一道条明显。
-const ERROR_WASH = `color-mix(in srgb, ${String(dsw.alias.state.error.secondary)} 12%, transparent)`;
-
-// 编辑器的根：纵向排列的行。
-export const EditorRoot = styled("div")({
-  display: "flex",
-  flexDirection: "column",
-  width: "100%",
-  fontFamily: MONO,
-  fontSize: "14px",
-  lineHeight: ROW,
-  color: dsw.alias.label.primary,
-});
-
-// 一行：行号 + 折进 + 行内容。悬停给一层浅底。
-export const LineRow = styled("div")({
-  display: "flex",
-  // 顶部对齐：行里出现输入框或多行值时，内容不跟着上下跳。
-  alignItems: "flex-start",
-  gap: GAP,
-  minHeight: ROW,
-  paddingRight: PAD,
-  whiteSpace: "nowrap",
-  "&:hover": { background: dsw.alias.bg.layer["2"] },
-  // 选中一行（点行号）：整行留一层底色，便于对着行号找内容。
-  "&[data-selected='true']": { background: dsw.alias.bg.layer["3"] },
-  // 本页改过还没保存：左边一道强调色，和「已经存进用户层」的浅灰区分开。
-  "&[data-dirty='true']": { boxShadow: `inset ${EDGE} 0 0 ${String(dsw.alias.brand.primary)}` },
-  "&[data-overridden='true']": { boxShadow: `inset ${EDGE} 0 0 ${String(LINE)}` },
-  // 改过的字段名用强调色（存没存看左边那道条）；出错时红优先。
-  "&[data-dirty='true'] [data-role='key']": { color: dsw.alias.brand.primary },
-  "&[data-overridden='true'] [data-role='key']": { color: dsw.alias.brand.primary },
-  // 有问题的行：半透明红底 + 左侧一道实红条，字段名与注释位那句都是红字。
-  "&[data-invalid='true']": {
-    background: ERROR_WASH,
-    boxShadow: `inset ${EDGE} 0 0 ${String(dsw.alias.state.error.primary)}`,
-  },
-  "&[data-invalid='true'] [data-role='key']": { color: dsw.alias.state.error.primary },
-  // 行内的行为按钮（撤回 / 恢复默认 / 复制 / 移除）：平时透明，悬停这一行才显形。
-  "&:hover [data-role='actions']": { opacity: 1 },
-});
-
-// 一行的内容区：**缩进只作用在这里**——行号列固定在左边，缩进不推它。
-export const LineBody = styled("div")({
-  display: "flex",
-  alignItems: "center",
-  gap: GAP,
-  flex: 1,
-  minWidth: 0,
-  minHeight: ROW,
-});
-
-// 行号列：右对齐、不可选、淡色。
-export const LineNumber = styled("span")({
-  flex: "none",
-  width: NUMBER,
-  lineHeight: ROW,
-  textAlign: "right",
-  color: dsw.alias.label.caption,
-  userSelect: "none",
-  cursor: "pointer",
-});
-
-// 折叠 chevron（官方箭头图标，尺寸与别的行内图标同源）。
-export const LineFold = styled("button")({
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  flex: "none",
-  width: FOLD,
-  height: ROW,
-  padding: 0,
-  border: 0,
-  background: "none",
-  color: dsw.alias.label.caption,
-  cursor: "pointer",
-  "&:hover": { color: dsw.alias.label.secondary },
-});
-
-// 叶子行的折叠占位（保持列对齐）。
-export const LineFoldSpacer = styled("span")({
-  flex: "none",
-  width: FOLD,
-});
-
-// 键名（配置键原样；数组下标淡一些）。
-export const LineKey = styled("span")({
-  flex: "none",
-  color: dsw.alias.label.primary,
-  "&[data-index='true']": { color: dsw.alias.label.caption },
-});
-
-// 结构符与标点（`{` `}` `[` `]` `:`）。
-export const LineToken = styled("span")({
-  flex: "none",
-  color: dsw.alias.label.caption,
-});
-
-// 值（token）：字符串 / 数字 / 布尔各有语法色。
-//
-// **必须是块级盒**：`overflow` / `text-overflow` 对 inline 盒不生效，inline 的 token 无论多长都不会截断，
-// 只会把行撑宽（`min-width` / `overflow` 那两条声明在 inline 盒上是死代码）。
-export const LineValue = styled("span")({
-  display: "block",
-  minWidth: 0,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  cursor: "text",
-  color: dsw.alias.state.business.primary,
-  "&[data-tone='number']": { color: dsw.alias.state.warn.primary },
-  "&[data-tone='boolean']": { color: dsw.alias.state.success.primary },
-  "&[data-tone='empty']": { color: dsw.alias.label.caption },
-});
-
-// 值在行里的位置（字段槽的宿主）：键名与结构符都是 `flex: none`，它是行里**唯一可收缩**的那一项。
-//
-// 这里不能放一个裸 `<span>`：flex item 的自动最小尺寸（`min-width: auto`）加上行上的 `white-space: nowrap`，
-// 等于「整段值的宽度」——值长了它一步不让，直接把整行（进而整个表单壳）撑宽。给它 `min-width: 0` 之后，
-// 值要么按自然宽度摆着，要么收缩到行尾并自己截断，长值因此不再有上限之外的影响。
-export const ValueSlot = styled("span")({
-  display: "block",
-  // 不生长：短值保持自然宽度（不会被拉成一整行），长值才收缩。
-  flex: "0 1 auto",
-  minWidth: 0,
-  overflow: "hidden",
-});
-
-// 值上的下拉触发：**它自己就是值的呈现**（不再是「值 + 一个下拉」两遍），点开才出菜单。
-export const ValueTrigger = styled("button")({
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "2px",
-  minWidth: 0,
-  padding: 0,
-  border: 0,
-  background: "none",
-  font: "inherit",
-  textAlign: "left",
-  cursor: "pointer",
-  color: dsw.alias.label.caption,
-  "&:disabled": { cursor: "default" },
-  "&:focus-visible": { outline: "none" },
-});
-
-// 行内输入的外壳：官方 `Input` 压到与值同一行高，并**吃掉剩下的宽度**。
-//
-// 行内编辑与容器闭合行的添加输入共用它——两处的输入框因此长得一模一样。
-export const CompactInput = styled("span")({
-  display: "inline-flex",
-  flex: "1 1 auto",
-  minWidth: 0,
-  "& > span": {
-    width: "100%",
-    height: ROW,
-    padding: "0 6px",
-    borderRadius: "4px",
-  },
-  "& input": {
-    fontSize: "14px",
-    lineHeight: ROW,
-  },
-});
-
-// 多行值的行内输入：官方没有多行原子，所以这里用同一套观感的字段壳（同边框、同圆角、同焦点色），
-// 高度跟着内容长、宽度同样撑满剩下的位置。
-export const CompactTextField = styled("span")({
-  display: "inline-flex",
-  flex: "1 1 auto",
-  minWidth: 0,
-  padding: "0 6px",
-  borderRadius: "4px",
-  background: dsw.alias.bg.layer["1"],
-  // 细线走 theme 的描边（0.5px 与颜色都由 token 给）。
-  border: 0,
-  boxShadow: HAIRLINE,
-  "&:focus-within": { "--dsw-elevation-stroke-color": dsw.alias.brand.primary },
-  "& > textarea": {
-    flex: 1,
-    width: "100%",
-    minHeight: ACTION,
-    maxHeight: "240px",
-    padding: 0,
-    border: 0,
-    outline: "none",
-    background: "transparent",
-    resize: "none",
-    fieldSizing: "content",
-    fontFamily: "inherit",
-    fontSize: "14px",
-    lineHeight: ROW,
-    color: dsw.alias.label.primary,
-  },
-});
-
-// 行内注释（schema 说明与业务文案）：比配置值小一档、tertiary 色，占满这一行剩下的宽度，长了就截断——**真的被
-// 截断时**才由官方 `Tooltip` 给全文（`Editor.tsx` 里的 `TruncatedTooltip` 包着它），放得下就一个浮层也不挂。
-export const LineComment = styled("span")({
-  flex: "1 1 auto",
-  minWidth: 0,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  color: dsw.alias.label.tertiary,
-  fontFamily: "inherit",
-  fontSize: "12px",
-});
-
-// 行内的校验消息（与注释放同一档字号）：注释位装的也可能是整段校验或解析失败的长消息，所以与注释同一套约束
-// ——可收缩、自己截断、**截断了**才由官方 `Tooltip` 给全文。`flex: 0 1 auto`（不生长）：短消息别铺满整行，添加
-// 入口那一行里也不跟输入框抢剩下的宽度。红字先说清。
-export const LineInvalid = styled("span")({
-  flex: "0 1 auto",
-  minWidth: 0,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  color: dsw.alias.state.error.primary,
-  fontFamily: "inherit",
-  fontSize: "12px",
-});
-
-// 行尾的动作组：方形图标键（默认透明，悬停时显形）。
-export const LineActions = styled("span")({
-  display: "inline-flex",
-  alignItems: "center",
-  gap: ACTION_GAP,
-  flex: "none",
-  opacity: 0,
-  "& > button": {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: ACTION,
-    height: ACTION,
-    padding: 0,
-    border: 0,
-    borderRadius: "4px",
-    background: "none",
-    color: dsw.alias.label.secondary,
-    cursor: "pointer",
-    "&:hover": { background: dsw.alias.bg.layer["3"], color: dsw.alias.label.primary },
-    "&:disabled": { cursor: "not-allowed", color: dsw.alias.label.dimmed },
-  },
-});
-
-// 悬停行时才显示这一行的动作按钮：显形规则写在行上（`[data-role='actions']`），组件只需要带这个属性。
-export const HoverActions = styled(LineActions)({
-  // 编辑态的两个按钮常显，而且**要有底色与描边**：行底色上只有淡色图标是看不见的，
-  // 所以这里给实体按钮（theme 的描边 + 一层底），确认用成功档、取消用中性档。
-  "&[data-editing='true']": {
-    opacity: 1,
-    gap: GAP,
-    "& > button": {
-      boxShadow: HAIRLINE,
-      background: dsw.alias.bg.layer["1"],
-      color: dsw.alias.label.primary,
-      "&:first-of-type": { color: dsw.alias.state.success.primary },
-    },
-  },
-});
-
-// 添加输入：**跟在容器的闭合括号同一行**（菜单锚在它上面），宽度吃掉剩下的位置。
-export const AddWrap = styled("span")({
-  position: "relative",
-  display: "inline-flex",
-  alignItems: "center",
-  gap: GAP,
-  flex: "1 1 auto",
-  minWidth: 0,
-  marginLeft: GAP,
-  "&[data-invalid='true'] input": { borderColor: dsw.alias.state.error.primary },
-});
-
-// 一行说明（不可用 / 没有可生成项时用）。
-export const Hint = styled("p")({
-  margin: 0,
-  fontSize: "12px",
-  lineHeight: 1.5,
-  color: dsw.alias.label.tertiary,
-});

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

@@ -1,58 +0,0 @@
-// 样式搬自 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

@@ -1,68 +0,0 @@
-// 搬自 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.
-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

@@ -1,158 +0,0 @@
-// 样式搬自 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>;