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

package/locale/en.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "UI Primitives",
-    "description": "css-in-js styling layer, the shared reference parser and renderer for the forked conversation UI, and the settings-form primitives forked from upstream. It also carries the schema-driven row config pages (field-slot injection)."
+    "description": "The shared base for the conversation UI and the settings pages: the css-in-js styling layer, the reference parser and renderer (one source shared with the host), the staged settings-form primitives forked from upstream, and the schema-generated row config pages (field-slot injection). Inlined by the client rows that use it, not an assembly row."
   }
 }

package/locale/zh.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "UI 基础层",
-    "description": "css-in-js 样式层、被 fork 的对话 UI 共用的引用解析与渲染转换，以及从上游 fork 过来的设置表单原语。另含按行 schema 自动生成的行配置页（字段槽注入）。"
+    "description": "对话 UI 与设置页共用的基础面：css-in-js 样式层、host 与 client 共用一份源码的引用解析与渲染转换、上游 fork 过来的暂存式设置表单原语，以及按 schema 自动生成的行配置页（字段槽注入）。随用到它的 client 行内联，不是装配行。"
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@morlay/dsh-client-ui-primitives",
-  "version": "0.0.6",
-  "description": "css-in-js styling kit (styled / Token / Styling), the shared reference parser and renderer (findReferences / parseReferenceToken) for the forked conversation UI, and the settings-form primitives forked from upstream (SettingsFormModel / field controls / form shell): consumes the official --dsw-* design tokens, so no CSS Modules precompile step is needed.",
+  "version": "0.0.7",
+  "description": "css-in-js styling kit (styled / Token / Styling), the shared reference parser and renderer (findReferences / parseReferenceToken), and the settings-form primitives forked from upstream (SettingsFormModel / field controls / form shell) plus the schema-generated row config page: consumes the official --dsw-* design tokens, so no CSS Modules precompile step is needed. Ships as an inlined client library (`dsh.client.inline`), not as an assembly row.",
   "keywords": [
     "client",
     "css-in-js",
@@ -24,11 +24,8 @@
   "type": "module",
   "exports": {
     ".": "./dist/index.mjs",
+    "./client": "./dist/client.mjs",
     "./package.json": "./package.json",
-    "./client": {
-      "types": "./dist/client.d.cts",
-      "default": "./dist/client.cjs"
-    },
     "./locale/*.json": "./locale/*.json"
   },
   "dependencies": {
@@ -40,15 +37,15 @@
     "micromark-util-types": "^2.0.2"
   },
   "devDependencies": {
-    "@deepseek-ai/dsh-api-remotes": "0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-locale": "0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-store": "0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-plugin-manager": "0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-primitives": "0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-renderer": "0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-settings": "0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-slots": "0.2.0-rc.1",
-    "@deepseek-ai/dsh-util-values": "0.2.0-rc.1",
+    "@deepseek-ai/dsh-api-remotes": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-locale": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-store": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-plugin-manager": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-primitives": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-renderer": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-settings": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-slots": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-util-values": "0.2.0-rc.2",
     "@deepseek-ai/schemastery": "3.18.4",
     "@testing-library/react": "^16.3.0",
     "@types/mdast": "^4.0.4",
@@ -59,23 +56,17 @@
   },
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.4",
-    "@deepseek-ai/dsh-api-remotes": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-locale": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-store": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-plugin-manager": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-renderer": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-settings": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.2.0-rc.1"
+    "@deepseek-ai/dsh-api-remotes": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-locale": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-store": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-plugin-manager": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-renderer": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-settings": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.2.0-rc.2"
   },
   "dsh": {
     "client": {
-      "platform": "web",
-      "inject": [
-        "@deepseek-ai/dsh-client-locale",
-        "@deepseek-ai/dsh-client-ui-plugin-manager",
-        "@deepseek-ai/dsh-client-ui-settings",
-        "@deepseek-ai/dsh-client-ui-slots"
-      ]
+      "inline": true
     }
   },
   "scripts": {

package/src/client/index.ts

@@ -44,15 +44,15 @@ export type { Reference, ReferenceSpan } from "../reference.ts";
 export { ReferenceMarkdown, referenceMentions } from "../reference-markdown.tsx";
 export type { ReferenceActions, ReferenceMarkdownProps } from "../reference-markdown.tsx";
 
-// 需要的**服务名**：样式与引用那半不要服务，schema 表单那半要槽位、字典与配置表单。
-//
-// 与包清单里的 `dsh.client.inject` 不是一回事：那份是**装配行 id**（谁先到），交给模块系统排 arrival 顺序；
-// 这里读的是 cordis 服务名（谁已 provide），Loader 拿它决定这一行何时才算 active。写错成包名，这一行就永远
-// pending（`web boot: ... waiting for services`）。
-//
-// 值直接取自 schema 表单那一面，不另抄一份清单。
+// `apply` 需要的**服务名**（cordis 服务，不是包名）：样式与引用那半不要服务，schema 表单那半要槽位、字典与
+// 配置表单。本包不是装配行，所以这份清单不再由 Loader 读；它由 `schemaForm.apply` 自己的 `ctx.inject` 用，
+// 调用方（内联本包的 client 行）因此不必自己排服务顺序。值直接取自 schema 表单那一面，不另抄一份。
 export const inject: readonly string[] = [...schemaForm.inject];
 
+// 装上基础面：字典、字段槽与按行配置页。
+//
+// 由**内联本包的 client 行**调用（本包不是装配行）：多份副本各带一份这份代码，`schemaForm.apply` 保证同一
+// 运行时只装配一次（服务已在场就返回）。见本包 `.agents/adrs/20261001-暂时内联而不是装配行.md`。
 export function apply(ctx: Context): void {
   schemaForm.apply(ctx);
 }

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

@@ -5,6 +5,8 @@
 // 与设置页其余部分同一套视觉与键盘行为。
 //
 // 字段槽仍然生效：命中时该字段**值**的位置换成注册方的组件，键名、注释、行号与行为按钮仍由这里画。
+//
+// 被 `ellipsis` 截断的文本（注释行、值）由官方 `Tooltip` 承载全文——**只有真的截断了才挂**（`TruncatedTooltip`）。
 
 import { useMemo, useState, type ReactNode } from "react";
 import {
@@ -29,6 +31,7 @@ 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 {
@@ -48,6 +51,7 @@ import {
   LineRow,
   LineToken,
   LineValue,
+  ValueSlot,
   ValueTrigger,
 } from "./styles.ts";
 
@@ -202,12 +206,15 @@ function Row({
     line.kind === "comment" ? (
       <>
         <LineFoldSpacer data-role="fold" />
-        {/* 这一行有问题时注释位装的就是那条消息：红字，别整行铺红。 */}
-        {line.invalid ? (
-          <LineInvalid title={line.text}>{`// ${line.text}`}</LineInvalid>
-        ) : (
-          <LineComment title={line.text}>{`// ${line.text}`}</LineComment>
-        )}
+        {/* 这一行有问题时注释位装的就是那条消息：红字，别整行铺红。
+            注释被 `ellipsis` 截断时全文交给官方 `Tooltip`——**只有真的截断才挂**，放得下就原样画。 */}
+        <TruncatedTooltip label={line.text}>
+          {line.invalid ? (
+            <LineInvalid data-role="comment">{`// ${line.text}`}</LineInvalid>
+          ) : (
+            <LineComment data-role="comment">{`// ${line.text}`}</LineComment>
+          )}
+        </TruncatedTooltip>
       </>
     ) : line.kind === "open" ? (
       <>
@@ -427,13 +434,14 @@ function FieldLine({
       ) : null}
       {/* 编辑态只留输入框：原值不再在它旁边画一遍。 */}
       {isEditing || line.variantsStandIn ? null : (
-        <span
+        <ValueSlot
+          data-role="value"
           onClick={() => {
             if (editable) onEdit(key);
           }}
         >
           {renderField(owner)}
-        </span>
+        </ValueSlot>
       )}
       <VariantSelect
         control={line.variants}
@@ -753,11 +761,11 @@ function AddLine({
         }
       />
       {invalid ? <LineInvalid>{t("unknownProperty")}</LineInvalid> : 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)}>
+          <LineComment>{resolveText(matched[0].description)}</LineComment>
+        </TruncatedTooltip>
       ) : null}
     </AddWrap>
   );

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

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

@@ -140,7 +140,11 @@ export const LineToken = styled("span")({
 });
 
 // 值（token）：字符串 / 数字 / 布尔各有语法色。
+//
+// **必须是块级盒**：`overflow` / `text-overflow` 对 inline 盒不生效，inline 的 token 无论多长都不会截断，
+// 只会把行撑宽（`min-width` / `overflow` 那两条声明在 inline 盒上是死代码）。
 export const LineValue = styled("span")({
+  display: "block",
   minWidth: 0,
   overflow: "hidden",
   textOverflow: "ellipsis",
@@ -151,6 +155,19 @@ export const LineValue = styled("span")({
   "&[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",
@@ -218,7 +235,8 @@ export const CompactTextField = styled("span")({
   },
 });
 
-// 行内注释（schema 说明与业务文案）：比配置值小一档，占满这一行剩下的宽度，长了就截断（hover 看全文）。
+// 行内注释（schema 说明与业务文案）：比配置值小一档、tertiary 色，占满这一行剩下的宽度，长了就截断——**真的被
+// 截断时**才由官方 `Tooltip` 给全文（`Editor.tsx` 里的 `TruncatedTooltip` 包着它），放得下就一个浮层也不挂。
 export const LineComment = styled("span")({
   flex: "1 1 auto",
   minWidth: 0,
@@ -229,9 +247,14 @@ export const LineComment = styled("span")({
   fontSize: "12px",
 });
 
-// 行内的校验消息（与注释放同一档字号）。
+// 行内的校验消息（与注释放同一档字号）：注释位装的也可能是整段校验或解析失败的长消息，所以与注释同一套约束
+// ——可收缩、自己截断、**截断了**才由官方 `Tooltip` 给全文。`flex: 0 1 auto`（不生长）：短消息别铺满整行，添加
+// 入口那一行里也不跟输入框抢剩下的宽度。红字先说清。
 export const LineInvalid = styled("span")({
-  flex: "none",
+  flex: "0 1 auto",
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
   color: dsw.alias.state.error.primary,
   fontFamily: "inherit",
   fontSize: "12px",

package/src/client/schema-form/testing/resize-observer-stub.ts

@@ -0,0 +1,63 @@
+// jsdom 里跑官方 `Tooltip`、以及靠 `scrollWidth` / `clientWidth` 判截断的行内文本的环境替身。
+//
+// 官方气泡的宽度/定位来自 `ResizeObserver` 回调（`visibility` 也只在那个回调里置为 visible），而 jsdom 没有这个
+// API：缺了它，hover 之后的 effect 会直接抛 `ReferenceError`。替身做两件事：注册时喂回一次 `borderBoxSize`
+// （让气泡进入可见态），并给用例一个 `notifyResize()`——真机上「盒子宽度变了」是浏览器通知的，jsdom 里没有那个
+// 事件，用例只能自己发一次。
+//
+// 它**不是**几何证据：真尺寸与定位只能在浏览器里量（本包 `.agents/standards/how-to-verify.md` 记了这条与探针的
+// 用法），所以用例的判据是「hover 出气泡、气泡里是全文」，不拿替身去断言气泡的实际尺寸。
+
+interface StubObserver {
+  readonly targets: Set<Element>;
+  readonly notify: ResizeObserverCallback;
+}
+
+const live = new Set<StubObserver>();
+
+export function stubResizeObserver(): void {
+  class ResizeObserverStub {
+    #notify: ResizeObserverCallback;
+    #targets = new Set<Element>();
+    #live: StubObserver;
+
+    constructor(notify: ResizeObserverCallback) {
+      this.#notify = notify;
+      this.#live = { targets: this.#targets, notify };
+      live.add(this.#live);
+    }
+
+    // 注册即回调一次（真实的 ResizeObserver 也会在首帧给一次初始尺寸）。
+    observe(target: Element): void {
+      this.#targets.add(target);
+      this.#notify([entry(target)], this as unknown as ResizeObserver);
+    }
+
+    unobserve(target: Element): void {
+      this.#targets.delete(target);
+    }
+
+    disconnect(): void {
+      this.#targets.clear();
+      live.delete(this.#live);
+    }
+  }
+  (globalThis as { ResizeObserver?: unknown }).ResizeObserver = ResizeObserverStub;
+}
+
+// 让还活着的替身观察者再收到一次尺寸通知：用例把元素的几何改掉之后调它，等价于浏览器通知「这个盒子变了」。
+export function notifyResize(): void {
+  for (const observer of live) {
+    const entries = [...observer.targets].map((target) => entry(target));
+    if (entries.length > 0) {
+      observer.notify(entries, undefined as unknown as ResizeObserver);
+    }
+  }
+}
+
+function entry(target: Element): ResizeObserverEntry {
+  return {
+    target,
+    borderBoxSize: [{ blockSize: 0, inlineSize: 0 }],
+  } as unknown as ResizeObserverEntry;
+}

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

@@ -8,6 +8,7 @@ import { IconChevronDownOutlineRegular, Menu } from "@deepseek-ai/dsh-client-ui-
 import type { SelectOption } from "./hints.ts";
 import type { SchemaFieldOwnerProps } from "./slot-contract.ts";
 import { ICON_SIZE, LineValue, ValueTrigger } from "./styles.ts";
+import { TruncatedTooltip } from "./TruncatedTooltip.tsx";
 
 // 编辑态文本：字符串就是原文（换行照旧），其余按 JSON 写。
 export function valueText(value: unknown): string {
@@ -42,21 +43,22 @@ export function tokenTone(value: unknown): "string" | "number" | "boolean" | "em
 export function InlineValue({ owner }: { owner: SchemaFieldOwnerProps }): ReactNode {
   if (owner.options !== undefined) return <OptionSelect owner={owner} options={owner.options} />;
   if (owner.node.meta.secret) {
-    // secret 不回显值：截断时不给全文，只给说明。
+    // secret 不回显值：这里显示的是「已配置」的 `••••••`，它不会截断，`owner.hint` 也不是「被截断文本的全文」
+    // ——按行内浮层的口径它不该弹气泡，所以回到非侵入的原行为：挂原生 `title`。
     return (
       <LineValue data-tone="empty" title={owner.hint}>
         {owner.secretConfigured ? "••••••" : ""}
       </LineValue>
     );
   }
+  // 值长了会在行里截断（值槽可收缩）：确实截断时整份内容由官方 `Tooltip` 承载，放得下就不挂。
+  const text = tokenText(owner.value);
   return (
-    <LineValue
-      data-tone={owner.node.readOnly === null ? tokenTone(owner.value) : "empty"}
-      // 值长了会截断：整份内容挂在 title 上，hover 就能看全。
-      title={tokenText(owner.value)}
-    >
-      {tokenText(owner.value)}
-    </LineValue>
+    <TruncatedTooltip label={text}>
+      <LineValue data-tone={owner.node.readOnly === null ? tokenTone(owner.value) : "empty"}>
+        {text}
+      </LineValue>
+    </TruncatedTooltip>
   );
 }
 

package/src/client/styling/styling.ts

@@ -134,4 +134,9 @@ function incrementalHash(value: string, previous = 0): number {
   return hash;
 }
 
-export const styling = Styling.create();
+// 全局单例：本包被 inline 进各消费方的产物后，同一个页面会有多份模块实例，而样式表与注入状态必须只有一份
+// ——否则同一份规则按各自的实例各注入一遍、同名的 global 规则互相顶替。`Styling.create()` 仍是独立实例工厂。
+const STYLING_SINGLETON = Symbol.for("@morlay/dsh-client-ui-primitives/styling");
+const globalScope = globalThis as unknown as { [key: symbol]: unknown };
+
+export const styling: Styling = (globalScope[STYLING_SINGLETON] ??= Styling.create()) as Styling;

package/src/client/theme.generated.ts

@@ -1,4 +1,4 @@
-// 官方主题的 `--dsw-*` token 全集（400 个），由 packages/client/ui-primitives/scripts/gen-design-tokens.mts 生成，勿手改。
+// 官方主题的 `--dsw-*` token 全集（403 个），由 packages/client/ui-primitives/scripts/gen-design-tokens.mts 生成，勿手改。
 //
 // 叶子是该变量的**默认值**（官方 light 主题里首次出现的定义）：既是类型推导的来源，也可作 fallback。
 // `"$"` 键出现在「自身也是 token 的分支」上（命名体系里有 40 个短名同时是长名前缀的 token）。
@@ -172,6 +172,11 @@ export const designTokens = {
       tag: "var(--dsw-static-neutral-bluish-75)",
     },
     menu: {
+      group: {
+        header: {
+          fill: "rgba(248, 249, 250, 0.94)",
+        },
+      },
       icon: "var(--dsw-static-neutral-bluish-800)",
     },
     onboarding: {
@@ -239,6 +244,14 @@ export const designTokens = {
         bg: "color-mix(in srgb, var(--dsw-alias-tooltip-bg), white 18%)",
       },
     },
+    turn: {
+      trigger: {
+        bg: {
+          $: "var(--dsw-alias-markdown-code-block)",
+          hover: "var(--dsw-alias-interactive-bg-hover)",
+        },
+      },
+    },
   },
   corner: {
     shape: "superellipse(1.5)",