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

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

@@ -7,7 +7,8 @@ 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";
+import { ICON_SIZE } from "./geometry.ts";
+import css from "./schema-form.module.css";
 import { TruncatedTooltip } from "./TruncatedTooltip.tsx";
 
 // 编辑态文本：字符串就是原文（换行照旧），其余按 JSON 写。
@@ -46,18 +47,18 @@ export function InlineValue({ owner }: { owner: SchemaFieldOwnerProps }): ReactN
     // secret 不回显值：这里显示的是「已配置」的 `••••••`，它不会截断，`owner.hint` 也不是「被截断文本的全文」
     // ——按行内浮层的口径它不该弹气泡，所以回到非侵入的原行为：挂原生 `title`。
     return (
-      <LineValue data-tone="empty" title={owner.hint}>
+      <span className={css.lineValue} data-tone="empty" title={owner.hint}>
         {owner.secretConfigured ? "••••••" : ""}
-      </LineValue>
+      </span>
     );
   }
   // 值长了会在行里截断（值槽可收缩）：确实截断时整份内容由官方 `Tooltip` 承载，放得下就不挂。
   const text = tokenText(owner.value);
   return (
     <TruncatedTooltip label={text}>
-      <LineValue data-tone={owner.node.readOnly === null ? tokenTone(owner.value) : "empty"}>
+      <span className={css.lineValue} data-tone={owner.node.readOnly === null ? tokenTone(owner.value) : "empty"}>
         {text}
-      </LineValue>
+      </span>
     </TruncatedTooltip>
   );
 }
@@ -101,7 +102,7 @@ function OptionSelect({
         setOpen(false);
       }}
       anchor={
-        <ValueTrigger
+        <button className={css.valueTrigger}
           type="button"
           disabled={owner.disabled}
           aria-label={owner.label}
@@ -109,13 +110,13 @@ function OptionSelect({
             setOpen(true);
           }}
         >
-          <LineValue
+          <span className={css.lineValue}
             data-tone={current === undefined ? tokenTone(owner.value) : tokenTone(current.value)}
           >
             {label}
-          </LineValue>
+          </span>
           <IconChevronDownOutlineRegular size={ICON_SIZE} />
-        </ValueTrigger>
+        </button>
       }
     />
   );

package/src/client/settings-form/SettingsFieldRow.module.css

@@ -0,0 +1,93 @@
+/* 字段行（`SettingsFieldRow`）：官方 `SettingsValueField` 的留白口径（上下各 12px），分隔线由调用方按
+   「不是这一组的第一个字段」显式声明——两种排法与官方控件的留白因此完全一致。 */
+.row {
+  display: flex;
+  flex-direction: column;
+}
+
+.row[data-divider='true'] {
+  border-top: 0.5px solid var(--dsw-alias-border-l2);
+}
+
+/* 上下排（输入类）：标签 / 控件 / 说明同列。 */
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 0;
+}
+
+/* 右置排（切换类）：左列标签与说明，控件贴最右。 */
+.inline {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 0;
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+}
+
+/* 覆盖标记（「已覆盖」）：照官方 badge 的 neutral 那一档。 */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 8px;
+  border-radius: 999px;
+  corner-shape: round;
+  font-size: 11px;
+  line-height: 17px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-secondary);
+  background: var(--dsw-alias-bg-module-platform);
+}
+
+/* 恢复默认的入口：文字按钮，没有边框与底色。 */
+.reset {
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+}
+
+.reset:hover:not(:disabled) {
+  color: var(--dsw-alias-label-primary);
+}
+
+.reset:disabled {
+  cursor: default;
+}
+
+.hint {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.invalid {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-state-error-primary);
+}

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

@@ -0,0 +1,103 @@
+// 字段行：设置面上"一个字段"的容器——标签、控件、说明、非法提示与"已覆盖"徽标都由它摆位置。
+// 两种排法按控件的宽度选：输入类（stack）是标签 / 控件 / 说明同列，切换类（inline）把控件贴最右。
+// 留白与分隔线的口径与官方 `SettingsValueField` 一致（上下各 12px、相邻 0.5px 细线）。
+
+import type { HTMLAttributes, ReactNode } from "react";
+import { classes } from "../controls/classes.ts";
+import css from "./SettingsFieldRow.module.css";
+
+export interface SettingsFieldRowProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "color"> {
+  // 字段名。
+  label: string;
+  // 字段下面那句说明（"这一项到底管什么"）。
+  hint: string;
+  // 控件的摆法：`stack`（同列，输入类，缺省）或 `inline`（控件贴右，切换类）。
+  layout?: "stack" | "inline";
+  // 与上一个字段之间画一条细分隔线（这一组里不是第一个字段时为 true）。
+  divider?: boolean;
+  // 字段被用户层覆盖时的徽标文案；不给就不显示。
+  overriddenLabel?: string;
+  // 恢复默认的入口：给了它与 `resetLabel` 才显示（覆盖用户层那一项）。
+  resetLabel?: string;
+  onReset?: () => void;
+  // 非法提示；不给就只说合法的那些。
+  invalid?: string;
+  children: ReactNode;
+}
+
+export function SettingsFieldRow({
+  label,
+  hint,
+  layout = "stack",
+  divider = false,
+  overriddenLabel,
+  resetLabel,
+  onReset,
+  invalid,
+  children,
+  className,
+  ...rest
+}: SettingsFieldRowProps): ReactNode {
+  const labelNode = (
+    <span className={css.label}>
+      {label}
+      {overriddenLabel === undefined ? null : (
+        <>
+          <span className={css.badge}>{overriddenLabel}</span>
+          {resetLabel === undefined || onReset === undefined ? null : (
+            <button
+              type="button"
+              className={css.reset}
+              onClick={() => {
+                onReset();
+              }}
+            >
+              {resetLabel}
+            </button>
+          )}
+        </>
+      )}
+    </span>
+  );
+  const invalidNode =
+    invalid === undefined ? null : (
+      <p className={css.invalid} role="alert">
+        {invalid}
+      </p>
+    );
+  if (layout === "inline") {
+    return (
+      <div
+        className={classes(css.row, className)}
+        data-role="field-row"
+        data-divider={divider ? "true" : "false"}
+        {...rest}
+      >
+        <div className={css.inline}>
+          <div className={css.text}>
+            {labelNode}
+            <p className={css.hint}>{hint}</p>
+          </div>
+          {children}
+        </div>
+        {invalidNode}
+      </div>
+    );
+  }
+  return (
+    <div
+      className={classes(css.row, className)}
+      data-role="field-row"
+      data-divider={divider ? "true" : "false"}
+      {...rest}
+    >
+      <div className={css.body}>
+        {labelNode}
+        {children}
+        <p className={css.hint}>{hint}</p>
+      </div>
+      {invalidNode}
+    </div>
+  );
+}

package/src/client/settings-form/index.ts

@@ -1,19 +1,6 @@
-// 设置表单原语的 client 出口：模型 + 控件 + 表单框，命名与上游
-// `@deepseek-ai/dsh-client-ui-primitives` 同形（搬迁记录见本包 .agents/adrs/）。
+// 设置表单原语的 client 出口：**直接用上游那份**（同名同形的 `SettingsForm` / 两个字段控件 / 表单模型，样式
+// 本来就是上游的 `.module.css`），这里只留本包自造的那一个字段行——上游的 `SettingsValueField` 摆不下
+// 「标签 + 控件 + 说明 + 覆盖标记」这一整行。
 
-export { SettingsFormModel, settingsNumberField, settingsTextField } from "./form-model.ts";
-export type {
-  SettingsFieldSpec,
-  SettingsFieldState,
-  SettingsFieldWrite,
-  SettingsFormActions,
-  SettingsFormPathOp,
-  SettingsFormScope,
-  SettingsFormScopeSnapshot,
-  SettingsFormShell,
-  SettingsSecretSpec,
-} from "./form-model.ts";
-export { SettingsSecretField, SettingsValueField } from "./fields.tsx";
-export type { SettingsFieldProps } from "./fields.tsx";
-export { SettingsForm } from "./SettingsForm.tsx";
-export type { SettingsFormLabels, SettingsFormProps } from "./SettingsForm.tsx";
+export { SettingsFieldRow } from "./SettingsFieldRow.tsx";
+export type { SettingsFieldRowProps } from "./SettingsFieldRow.tsx";

package/src/css-modules.d.ts

@@ -0,0 +1,6 @@
+// 本包 client 半的组件样式是上游那套 CSS Modules（`*.module.css`，lightningcss 在构建期编译并内联）：
+// bundler 解析得动，TS 需要这份 ambient 声明把它定成「有一个 class 映射的模块」。
+declare module "*.module.css" {
+  const classes: Readonly<Record<string, string | undefined>>;
+  export default classes;
+}

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>;