@dsh-workbench/shared 0.3.5 → 0.3.6

package/src/api/__tests__/long-task.test.ts

@@ -1,5 +1,14 @@
 import { describe, expect, it } from 'vitest';
-import { longTaskDot, longTaskPollMs, longTaskRunsOf, runsRouteOf } from '../long-task.js';
+import {
+  longTaskDot,
+  longTaskPollMs,
+  longTaskRunsOf,
+  longTaskStopPress,
+  longTaskStopStage,
+  LONG_TASK_STOP_ARM_MS,
+  runsRouteOf,
+  stopRouteOf,
+} from '../long-task.js';
 
 describe('runsRouteOf', () => {
   it('★ 事实名 = 路由名（三处同一个来源，改一处不可能漏另一处）', () => {
@@ -8,6 +17,14 @@ describe('runsRouteOf', () => {
   });
 });
 
+describe('stopRouteOf（停止那条写路由）', () => {
+  it('★ 就是读路由 + `/stop`（读口与写口同一个单元名，不另造一套命名）', () => {
+    expect(stopRouteOf('cmdb')).toBe('cmdb/runs/stop');
+    expect(stopRouteOf('issues')).toBe('issues/runs/stop');
+    expect(stopRouteOf('cmdb')).toBe(`${runsRouteOf('cmdb')}/stop`);
+  });
+});
+
 describe('longTaskDot', () => {
   it('★ 两个"还在等"的状态都转圈：等编排与等你登录是同一个信号', () => {
     expect(longTaskDot('running')).toBe('ongoing');
@@ -15,6 +32,29 @@ describe('longTaskDot', () => {
     expect(longTaskDot('ok')).toBe('done');
     expect(longTaskDot('failed')).toBe('error');
   });
+
+  it('★ 用户按停的那一趟是灰点：不是成功、不是出错，落进 idle', () => {
+    expect(longTaskDot('stopped')).toBe('idle');
+  });
+});
+
+describe('longTaskStopStage / longTaskStopPress（两按：第一次上膛，第二次才真发）', () => {
+  it('★ 三档：没上膛 / 上了膛 / 请求在飞；在飞压过一切', () => {
+    expect(longTaskStopStage({ armed: false, busy: false })).toBe('idle');
+    expect(longTaskStopStage({ armed: true, busy: false })).toBe('armed');
+    expect(longTaskStopStage({ armed: false, busy: true })).toBe('busy');
+    expect(longTaskStopStage({ armed: true, busy: true })).toBe('busy');
+  });
+
+  it('★ 按一下该干什么：idle → arm、armed → fire、busy → ignore（在飞时按不动）', () => {
+    expect(longTaskStopPress('idle')).toBe('arm');
+    expect(longTaskStopPress('armed')).toBe('fire');
+    expect(longTaskStopPress('busy')).toBe('ignore');
+  });
+
+  it('★ 上膛时限照 dsh：3 秒自己落膛', () => {
+    expect(LONG_TASK_STOP_ARM_MS).toBe(3000);
+  });
 });
 
 describe('longTaskRunsOf（这一读交回的"当前那些趟"）', () => {

package/src/api/long-task.ts

@@ -1,7 +1,7 @@
 /**
- * 一条长任务的四种态；needs-login 与 running 一样算还没结束。
+ * 一条长任务的五种态；needs-login 与 running 一样算还没结束，stopped 是用户自己按停的。
  */
-export type LongTaskStatus = 'running' | 'needs-login' | 'ok' | 'failed';
+export type LongTaskStatus = 'running' | 'needs-login' | 'stopped' | 'ok' | 'failed';
 
 /**
  * 长任务步骤流里的一行：kind 定样式，登录那一步带 loginUrl 给用户去点。
@@ -21,6 +21,15 @@ export function runsRouteOf(unit: string): string {
   return `${unit}/runs`;
 }
 
+/**
+ * 停止那条写路由（走 actions 通道的资源名）：`<单元>/runs/stop`。
+ * @param unit 单元 id。
+ * @returns <unit>/runs/stop。
+ */
+export function stopRouteOf(unit: string): string {
+  return `${unit}/runs/stop`;
+}
+
 /**
  * 长任务读口回的载荷：一串 run，形状由模块自己定，外壳只透传。
  */
@@ -63,8 +72,8 @@ export function longTaskRunsOf<T>(state: {
 
 /**
  * 把长任务态折成状态点的那一档。
- * @param status 长任务的四种态。
- * @returns ongoing / done / error / idle；needs-login 也算进行中。
+ * @param status 长任务的五种态。
+ * @returns ongoing / done / error / idle；needs-login 也算进行中；`stopped` 落进 idle —— 灰点：不是成功、不是出错，是用户自己按停的。
  */
 export function longTaskDot(status: LongTaskStatus): 'ongoing' | 'done' | 'error' | 'idle' {
   if (status === 'ok') return 'done';
@@ -72,3 +81,36 @@ export function longTaskDot(status: LongTaskStatus): 'ongoing' | 'done' | 'error
   if (status === 'running' || status === 'needs-login') return 'ongoing';
   return 'idle';
 }
+
+/**
+ * 停止钮的三档：没上膛 / 上了膛 / 请求在飞。
+ */
+export type LongTaskStopStage = 'idle' | 'armed' | 'busy';
+
+/**
+ * 算停止钮现在在哪一档。
+ * @param state armed = 已经按过第一下、在等第二下；busy = 停止请求已经在飞。
+ * @returns busy 优先（在飞时按不动），其次 armed，否则 idle。
+ */
+export function longTaskStopStage(state: {
+  readonly armed: boolean;
+  readonly busy: boolean;
+}): LongTaskStopStage {
+  if (state.busy) return 'busy';
+  return state.armed ? 'armed' : 'idle';
+}
+
+/**
+ * 按一下该干什么：第一次只上膛（'arm'），上了膛再按才真发（'fire'），在飞时按不动（'ignore'）。
+ * @param stage 现在这一档（先过 `longTaskStopStage`）。
+ * @returns 'arm' / 'fire' / 'ignore'，调用点照它上膛、落膛加发请求、或什么都不做。
+ */
+export function longTaskStopPress(stage: LongTaskStopStage): 'arm' | 'fire' | 'ignore' {
+  if (stage === 'busy') return 'ignore';
+  return stage === 'armed' ? 'fire' : 'arm';
+}
+
+/**
+ * 上膛后多久自己落膛（毫秒）。3 秒 = dsh 那行现在的取值。
+ */
+export const LONG_TASK_STOP_ARM_MS = 3000;

package/src/components/FormRows.css

@@ -24,6 +24,10 @@
   gap: var(--wb-len-6);
 }
 
+.wb-formRows > .wb-formRow[data-layout='stacked'] {
+  grid-template-columns: minmax(0, 1fr);
+}
+
 .wb-formLabel {
   min-width: 0;
   font-size: var(--dsw-font-xs-13-font-size);
@@ -36,12 +40,39 @@
   white-space: normal;
 }
 
+.wb-formRow[data-layout='stacked'] .wb-formHint,
+.wb-formRow[data-layout='stacked'] .wb-formProblem {
+  grid-column: 1 / -1;
+}
+
 .wb-formControl {
   display: flex;
   align-items: center;
   min-width: 0;
 }
 
+.wb-formControl
+  > :where(
+    .wb-selectAnchor,
+    .wb-choiceMenu,
+    input:not(
+      [type='checkbox'],
+      [type='radio'],
+      [type='button'],
+      [type='submit'],
+      [type='reset'],
+      [type='image'],
+      [type='color'],
+      [type='range']
+    ),
+    select,
+    textarea
+  ) {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+}
+
 .wb-formHint {
   grid-column: 2;
   font-size: var(--dsw-font-xxs-12-font-size);

package/src/components/FormRows.test.tsx

@@ -84,11 +84,37 @@ describe('FormRow', () => {
 
 const FORM_CSS = readFileSync(new URL('./FormRows.css', import.meta.url), 'utf8');
 
+function normalize(selector: string): string {
+  return selector
+    .replace(/\s+/g, ' ')
+    .replace(/\(\s+/g, '(')
+    .replace(/\s+\)/g, ')')
+    .trim();
+}
+
+function selectorParts(head: string): string[] {
+  const parts: string[] = [];
+  let depth = 0;
+  let current = '';
+  for (const char of head) {
+    if (char === '(') depth += 1;
+    if (char === ')') depth -= 1;
+    if (char === ',' && depth === 0) {
+      parts.push(normalize(current));
+      current = '';
+      continue;
+    }
+    current += char;
+  }
+  parts.push(normalize(current));
+  return parts;
+}
+
 function declarations(selector: string): string[] {
   for (const block of FORM_CSS.split('}')) {
     const [head, ...rest] = block.split('{');
     if (rest.length === 0 || head === undefined) continue;
-    if (head.trim() !== selector) continue;
+    if (!selectorParts(head).includes(normalize(selector))) continue;
     return rest
       .join('{')
       .split(';')
@@ -132,7 +158,51 @@ describe('标签列：同一个 FormRows 共用一列（ADR-0052 §11）', () =>
     );
   });
 
+  it('★ stacked 行在 FormRows 里也压得过 subgrid 与那条回退（同权重、靠后那条赢过的老坑）', () => {
+    expect(declarations(".wb-formRows > .wb-formRow[data-layout='stacked']")).toContain(
+      'grid-template-columns: minmax(0, 1fr)',
+    );
+  });
+
+  it('★ stacked 行里 hint / problem 通栏（它们的 grid-column: 2 会造出隐式第二列）', () => {
+    expect(declarations(".wb-formRow[data-layout='stacked'] .wb-formHint")).toContain(
+      'grid-column: 1 / -1',
+    );
+    expect(declarations(".wb-formRow[data-layout='stacked'] .wb-formProblem")).toContain(
+      'grid-column: 1 / -1',
+    );
+  });
+
   it('★ 不是 FormRow 的子项（分组标题那种）通栏，别被塞进标签那一列', () => {
     expect(declarations('.wb-formRows > :not(.wb-formRow)')).toContain('grid-column: 1 / -1');
   });
 });
+
+const EXCLUDED_INPUT_TYPES = [
+  'checkbox',
+  'radio',
+  'button',
+  'submit',
+  'reset',
+  'image',
+  'color',
+  'range',
+];
+const CONTROL_FILL_SELECTOR = `.wb-formControl > :where(.wb-selectAnchor, .wb-choiceMenu, input:not(${EXCLUDED_INPUT_TYPES.map((one) => `[type='${one}']`).join(', ')}), select, textarea)`;
+
+describe('控件槽那一格：字段控件铺满，宽度不归调用点写（ADR-0052 §13）', () => {
+  it('★ 那一格里的字段控件吃满控件槽：border-box + width 100% + min-width 0', () => {
+    const fill = declarations(CONTROL_FILL_SELECTOR);
+
+    expect(fill).toContain('box-sizing: border-box');
+    expect(fill).toContain('width: 100%');
+    expect(fill).toContain('min-width: 0');
+  });
+
+  it('★ 开关与按钮那一族不在名单里（拉宽一颗 switch、一颗 <input type=submit> 就是另一回事）', () => {
+    for (const type of EXCLUDED_INPUT_TYPES) {
+      expect(CONTROL_FILL_SELECTOR).toContain(`[type='${type}']`);
+    }
+    expect(FORM_CSS).not.toMatch(/\.wb-formControl\s*>\s*\*/);
+  });
+});

package/src/components/LongTaskRow.css

@@ -45,4 +45,56 @@
   margin: var(--wb-len-4) 0 0;
   max-height: var(--wb-len-220);
   overflow: auto;
+}
+
+.wb-longTaskStop {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+  width: var(--wb-len-20);
+  height: var(--wb-len-20);
+  padding: 0;
+  margin-left: auto;
+  border: 0.5px solid var(--dsw-alias-border-l2);
+  border-radius: var(--dsw-radius-sm);
+  background: var(--dsw-specific-menu);
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+}
+
+.wb-longTaskStop:hover:not(:disabled),
+.wb-longTaskStop:focus-visible {
+  border-color: color-mix(in srgb, var(--dsw-alias-state-error-primary) 45%, transparent);
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.wb-longTaskStop:disabled {
+  cursor: default;
+}
+
+.wb-longTaskStopArmed,
+.wb-longTaskStopArmed:hover:not(:disabled),
+.wb-longTaskStopArmed:focus-visible {
+  gap: var(--wb-len-4);
+  width: auto;
+  padding: 0 var(--wb-len-7);
+  border-color: color-mix(in srgb, var(--dsw-alias-state-error-primary) 45%, transparent);
+  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent);
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.wb-longTaskStopLabel {
+  white-space: nowrap;
+  font-size: var(--dsw-font-xxxs-11-font-size);
+  line-height: var(--wb-line-18);
+}
+
+.wb-longTaskStopWhy {
+  margin: 0;
+  font-size: var(--dsw-font-xxxs-11-font-size);
+  line-height: var(--wb-line-16);
+  color: var(--dsw-alias-state-error-primary);
+  overflow-wrap: anywhere;
 }

package/src/components/LongTaskRow.tsx

@@ -1,11 +1,12 @@
-import { longTaskDot, type LongTaskStatus } from '../api/long-task.js';
+import { longTaskDot, longTaskStopPress, longTaskStopStage, LONG_TASK_STOP_ARM_MS, type LongTaskStatus } from '../api/long-task.js';
 import { Link } from './Link.js';
-import { Fragment, h, useState } from '../lib/react.js';
+import { Fragment, h, useEffect, useState } from '../lib/react.js';
 import {
   CodeBlock,
   DisclosureRow,
   IconCodeOutlineRegular,
   IconFlatListOutlineRegular,
+  IconStopFillRegular,
   StateDot,
 } from '@deepseek-ai/dsh-client-ui-primitives';
 import './LongTaskRow.css';
@@ -19,7 +20,22 @@ export interface LongTaskRowLink {
 }
 
 /**
- * `LongTaskRow` 的契约：状态、标题、问题、链接，与两处可展开的原始输出。
+ * `LongTaskRow` 那颗两按停止钮的契约：确认之后真发的那一下、三句词、在飞与失败两态。
+ * `label` 是没上膛时那颗钮的 aria-label（dsh 的词：`停止任务 {label}`）；`askLabel` 是上膛时那颗钮上显示的字（`确认停止`）；
+ * `armedLabel` 是上膛时的 aria-label，不给就用 `askLabel`（`再次点击确认停止`）；`busy` = 这一趟正在被停、钮禁用；
+ * `failed` 给了才在问题那行后面再画一行。
+ */
+export interface LongTaskRowStop {
+  readonly onStop: () => void;
+  readonly label: string;
+  readonly askLabel: string;
+  readonly armedLabel?: string | undefined;
+  readonly busy?: boolean | undefined;
+  readonly failed?: string | null | undefined;
+}
+
+/**
+ * `LongTaskRow` 的契约：状态、标题、问题、链接，两处可展开的原始输出，与最右边那颗可选的停止钮。
  */
 export interface LongTaskRowProps {
   readonly status: LongTaskStatus;
@@ -32,6 +48,7 @@ export interface LongTaskRowProps {
   readonly rawTitle?: string | undefined;
   readonly copyLabel?: string | undefined;
   readonly copiedLabel?: string | undefined;
+  readonly stop?: LongTaskRowStop | undefined;
 }
 
 function RowLink({ href, text }: LongTaskRowLink) {
@@ -45,7 +62,7 @@ function RowLink({ href, text }: LongTaskRowLink) {
 /**
  * 长任务那一行：状态点 + 标题 + 链接，跑失败时把步骤与原始输出收在两处可展开里。
  * 发布、扫描、迁移这类跑得久的事都用它，别自己画进度。
- * @param props.status - `longTaskDot` 认的四态之一，决定状态点颜色与要不要画"失败"那两块。
+ * @param props.status - `longTaskDot` 认的五态之一，决定状态点颜色与要不要画"失败"那两块。
  * @param props.headline - 这一行在干什么（一句话）。
  * @param props.problem - 失败原因；不给不画。
  * @param props.links - 行尾的链接，通常指向产物或日志。
@@ -53,15 +70,38 @@ function RowLink({ href, text }: LongTaskRowLink) {
  * @param props.raw - 原始输出；只在失败时画，且要同时给 `rawTitle` 才成一块可展开。
  * @param props.stepsTitle - 步骤那块展开行的标题；`rawTitle` 同理是原始输出那块。
  * @param props.copyLabel - 复制钮文案：给了才画复制钮；`copiedLabel` 是复制成功后那句。
+ * @param props.stop - 给了才在最右边画那颗两按停止钮；**不给就一个像素都不变**。只在生产方认 `signal` 时给。
  * @returns 一行长任务。
  */
 export function LongTaskRow(props: LongTaskRowProps) {
   const [stepsOpen, setStepsOpen] = useState(false);
   const [rawOpen, setRawOpen] = useState(false);
+  const [armed, setArmed] = useState(false);
   const failed = props.status === 'failed';
   const problem = props.problem ?? '';
   const raw = (props.raw ?? '').trim();
   const steps = props.steps ?? [];
+  const stop = props.stop;
+  const busy = stop?.busy === true;
+  const stopWhy = stop?.failed ?? '';
+
+  useEffect(() => {
+    if (!armed) return undefined;
+    const timer = setTimeout(() => setArmed(false), LONG_TASK_STOP_ARM_MS);
+    return () => clearTimeout(timer);
+  }, [armed]);
+
+  const onStopPress = (): void => {
+    if (stop === undefined) return;
+    const press = longTaskStopPress(longTaskStopStage({ armed, busy }));
+    if (press === 'ignore') return;
+    if (press === 'arm') {
+      setArmed(true);
+      return;
+    }
+    setArmed(false);
+    stop.onStop();
+  };
 
   return (
     <div className="wb-longTask">
@@ -71,8 +111,23 @@ export function LongTaskRow(props: LongTaskRowProps) {
         {(props.links ?? []).map((link) => (
           <RowLink href={link.href} key={`${link.text}@${link.href}`} text={link.text} />
         ))}
+        {stop === undefined ? null : (
+          <button
+            type="button"
+            className={`wb-longTaskStop${armed ? ' wb-longTaskStopArmed' : ''}`}
+            data-stop-state={longTaskStopStage({ armed, busy })}
+            aria-label={armed ? stop.armedLabel ?? stop.askLabel : stop.label}
+            disabled={busy}
+            onClick={onStopPress}
+            onBlur={() => setArmed(false)}
+          >
+            <IconStopFillRegular size={12} />
+            {armed ? <span className="wb-longTaskStopLabel">{stop.askLabel}</span> : null}
+          </button>
+        )}
       </p>
       {problem === '' ? null : <p className="wb-longTaskProblem">{problem}</p>}
+      {stopWhy === '' ? null : <p className="wb-longTaskStopWhy">{stopWhy}</p>}
       {!failed ? null : (
         <Fragment>
           {steps.length === 0 || props.stepsTitle === undefined ? null : (

package/src/components/__tests__/long-task-row.test.ts

@@ -0,0 +1,115 @@
+import { readFileSync } from 'node:fs';
+import { describe, expect, it } from 'vitest';
+
+const HERE = new URL('../', import.meta.url);
+const read = (name: string): string => readFileSync(new URL(name, HERE), 'utf8');
+
+const ROW = read('LongTaskRow.tsx');
+const CSS = read('LongTaskRow.css');
+
+describe('两按停止钮：接线（这仓的组件测试是 node 环境，读源码断言）', () => {
+  it('★★ 不给 stop ⇒ 那颗钮整个不出现；文件里也再没有第二颗 button', () => {
+    const gate = ROW.indexOf('{stop === undefined ? null : (');
+    const button = ROW.indexOf('<button');
+
+    expect(ROW).toContain('const stop = props.stop;');
+    expect(gate).toBeGreaterThan(0);
+    expect(button).toBeGreaterThan(gate);
+    expect(ROW.indexOf('<button', button + 1)).toBe(-1);
+  });
+
+  it('★★ 住在 .wb-longTaskHead 里、最右边那颗（margin-left: auto）', () => {
+    const head = ROW.indexOf('className="wb-longTaskHead"');
+    const button = ROW.indexOf('<button');
+    const close = ROW.indexOf('</p>', button);
+
+    expect(head).toBeGreaterThan(0);
+    expect(button).toBeGreaterThan(head);
+    expect(close).toBeGreaterThan(button);
+    expect(CSS).toContain('margin-left: auto');
+  });
+
+  it('★★ 两按只走 longTaskStopPress(longTaskStopStage({ armed, busy }))：arm 上膛 / fire 落膛并 onStop / ignore 不动', () => {
+    expect(ROW).toContain('longTaskStopPress(longTaskStopStage({ armed, busy }))');
+    expect(ROW).toContain('onClick={onStopPress}');
+    expect(ROW).toContain("if (press === 'ignore') return;");
+    expect(ROW).toContain("if (press === 'arm') {");
+    expect(ROW).toContain('setArmed(true);');
+    expect(ROW).toMatch(/setArmed\(false\);\s*stop\.onStop\(\);/);
+  });
+
+  it('★★ onBlur 落膛（焦点一走就退回没上膛）', () => {
+    expect(ROW).toContain('onBlur={() => setArmed(false)}');
+  });
+
+  it('★★ 上膛后 3 秒自己落膛：用 LONG_TASK_STOP_ARM_MS，卸载 / 落膛都清掉计时器', () => {
+    expect(ROW).toContain("from '../api/long-task.js'");
+    expect(ROW).toContain('setTimeout(() => setArmed(false), LONG_TASK_STOP_ARM_MS)');
+    expect(ROW).toContain('clearTimeout(timer)');
+    expect(ROW).toContain('}, [armed]);');
+  });
+
+  it('★★ data-stop-state 交出那一档（照 dsh 的 data-kill-state）', () => {
+    expect(ROW).toContain('data-stop-state={longTaskStopStage({ armed, busy })}');
+  });
+
+  it('★★ busy 时 disabled；上膛时多一个 span 显示 askLabel；三句词全部由调用点给', () => {
+    expect(ROW).toContain('const busy = stop?.busy === true;');
+    expect(ROW).toContain('disabled={busy}');
+    expect(ROW).toContain('<span className="wb-longTaskStopLabel">{stop.askLabel}</span>');
+    expect(ROW).toContain('aria-label={armed ? stop.armedLabel ?? stop.askLabel : stop.label}');
+    expect(ROW).toContain('<IconStopFillRegular size={12} />');
+    expect(ROW).toContain('type="button"');
+    expect(ROW).not.toContain('Translate');
+  });
+
+  it('★★ failed 非空 ⇒ 在 problem 那行后面再画一行（wb-longTaskStopWhy）', () => {
+    const problem = ROW.indexOf('className="wb-longTaskProblem"');
+    const why = ROW.indexOf('className="wb-longTaskStopWhy"');
+
+    expect(ROW).toContain("const stopWhy = stop?.failed ?? '';");
+    expect(ROW).toContain('className="wb-longTaskStopWhy">{stopWhy}');
+    expect(problem).toBeGreaterThan(0);
+    expect(why).toBeGreaterThan(problem);
+  });
+
+  it('★★ 没有 stop 的行一个像素都不变：既要的规则一个字没动，新规则也只在带钮的行上起作用', () => {
+    expect(CSS).toContain('.wb-longTaskHeadline {\n  margin: 0;');
+    expect(CSS).toContain('.wb-longTaskLink {\n  flex: none;\n}');
+    expect(CSS).toContain('.wb-longTaskHead {');
+  });
+});
+
+describe('两按停止钮：样式跟 dsh 那颗钮同款（组件自带，同目录一份 .css）', () => {
+  it('★★ 四个类都在同目录那份 .css 里', () => {
+    for (const cls of [
+      '.wb-longTaskStop {',
+      '.wb-longTaskStopArmed,',
+      '.wb-longTaskStopLabel {',
+      '.wb-longTaskStopWhy {',
+    ]) {
+      expect(CSS).toContain(cls);
+    }
+  });
+
+  it('★★ 上膛变宽（width: auto），取值照 dsh：error 45% 边框 + 12% 底 + gap 4 + padding 0 7px', () => {
+    expect(CSS).toMatch(/\.wb-longTaskStopArmed[\s\S]*width: auto/);
+    expect(CSS).toContain('color-mix(in srgb, var(--dsw-alias-state-error-primary) 45%, transparent)');
+    expect(CSS).toContain('color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent)');
+    expect(CSS).toContain('gap: var(--wb-len-4)');
+    expect(CSS).toContain('padding: 0 var(--wb-len-7)');
+  });
+
+  it('★★ 上膛那颗字 11px / 18px；失败那行 error 色', () => {
+    expect(CSS).toContain('font-size: var(--dsw-font-xxxs-11-font-size)');
+    expect(CSS).toContain('line-height: var(--wb-line-18)');
+    expect(CSS).toMatch(/\.wb-longTaskStopWhy \{[\s\S]*--dsw-alias-state-error-primary/);
+  });
+
+  it('★ 一格注释都没有，颜色不写字面值（尺寸走 --wb-len-*）', () => {
+    expect(CSS).not.toContain('/*');
+    expect(CSS).not.toContain('#');
+    expect(CSS).toContain('var(--wb-len-20)');
+    expect(CSS).not.toMatch(/(^|[^a-z-])rgb\(/);
+  });
+});