@orbit-work/ui 0.1.0

package/src/components/domain/desktop/DesktopCatalogView/DesktopCatalogViewSource.test.mjs

@@ -0,0 +1,339 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+const styles = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+test("归属签「专家团」落在名称行里，不再是压住名字的绝对定位角标", () => {
+  // A4-B3 把形色归给 StatusTag；A4-B2 再把位置也收掉——竖排卡的右上角就是名称行，
+  // 一枚 absolute 角标会直接压在状态签与名字上（原型 1673：归属签在名称行、状态签之前）。
+  // R2·T2/Q4：归属签补 mine（原型 4646 `hasBadge = !!(x.team || x.mine)`，两者都在时「专家团」优先）。
+  assert.match(
+    source,
+    /badge=\{team \? <StatusTag status="team" \/> : mine \? <StatusTag status="mine" \/> : undefined\}/,
+  )
+  assert.match(source, /<span className="nt">\{name\}<\/span>\s*\n\s*\{badge\}/)
+  assert.doesNotMatch(source, /skcard__aside/)
+  assert.doesNotMatch(source, /agent-team-tag/)
+  assert.doesNotMatch(styles, /\.agent-team-tag \{/)
+  assert.doesNotMatch(styles, /clip-path: polygon\(0 0, 100% 0, 100% 100%\)/)
+  assert.doesNotMatch(styles, /transform: rotate\(45deg\)/)
+})
+
+test("team detail exposes a roster with distinct leader and member labels", () => {
+  assert.match(source, /agent\.role === ["']leader["'] \? ["']负责人["'] : ["']成员["']/)
+  assert.match(source, /team\s*&&\s*<DesktopAgentRosterView\s+agents=\{agents\}\s*\/>/)
+  assert.match(styles, /\.agent-roster__item \{[^}]*background: var\(--ow-bg\);/)
+  assert.doesNotMatch(styles, /\.agent-roster__item\.is-leader \{[^}]*background:/)
+})
+
+test("team member avatars share a foreground and distinguish roles by background color", () => {
+  assert.match(
+    styles,
+    /\.agent-roster__avatar \{[^}]*background: color-mix\(in srgb, var\(--ow-info\) 12%, var\(--ow-bg\)\);[^}]*color: var\(--ow-text-2\);/,
+  )
+  assert.match(
+    styles,
+    /\.agent-roster__item\.is-leader \.agent-roster__avatar \{ background: var\(--ow-info-tint\); \}/,
+  )
+  assert.doesNotMatch(styles, /\.agent-roster__item\.is-leader \.agent-roster__avatar \{[^}]*color:/)
+})
+
+test("agent detail shares its primary action and overflow menu contract", () => {
+  assert.match(source, /export function DesktopAgentDetailActions/)
+  assert.match(source, /primaryLabel=\{actionLabel\}/)
+  assert.match(source, /menuItems=\{\s*\[\s*\.\.\.overflowItems,/)
+  assert.match(source, /return\s*\(\s*<DesktopCatalogDetailActions\s+actions=\{actions\}/)
+  assert.match(source, /<DetailOverflowMenu\s+disabled=\{disabled\}/)
+})
+
+test("agents skills and connectors share the catalog card and detail contracts", () => {
+  assert.match(source, /export function DesktopCatalogCardView/)
+  assert.match(source, /export function DesktopCatalogDetailShell/)
+  assert.match(source, /export function DesktopCatalogDetailActions/)
+  assert.match(source, /return\s*\(\s*<DesktopCatalogCardView\s+avatar=\{avatar\}/)
+  assert.match(
+    source,
+    /return\s*\(\s*<DesktopCatalogCardView[\s\S]*avatar=\{<span\s+className=["']connector-logo["']\s*>\{logo\}<\/span\s*>\}[\s\S]*name=\{name\}[\s\S]*version=\{version\}/,
+  )
+  assert.match(source, /return\s*\(\s*<DesktopCatalogDetailShell\s+avatar=\{avatar\}/)
+  // A4-B4：版本号从 hero 的 `.ver` pill 胶囊并进 mono 元信息行（原型 2173
+  // 「v1.4.2 · Orbitwork Labs · 3 天前」）；不给 meta 就由 kind/version/author/updatedAt 拼。
+  assert.doesNotMatch(source, /className=["']ver["']/)
+  assert.match(
+    source,
+    /const metaLine = meta \?\? detailMetaLine\(\[kind, version \? `v\$\{version\}` : null, author, updatedAt\]\)/,
+  )
+  assert.match(source, /<div className="skd__meta-line">\{metaLine\}<\/div>/)
+  // A4-B2：卡脚是一条不换行的 mono 带（原来是一排会 wrap 的假胶囊）。
+  assert.match(styles, /\.skcard \.ft \{[^}]*white-space: nowrap;[^}]*var\(--ow-font-mono\)/s)
+  assert.doesNotMatch(styles, /\.skcard \.ft \{[^}]*flex-wrap: wrap;/s)
+})
+
+// ---- DS2 P6-3：目录壳定稿（卡网格语法 / 三态 / 工具条 / 读数 mono）----
+
+test("catalog shell settles on a card grid with all three container states", () => {
+  assert.match(source, /export function DesktopCatalogGridView/)
+  // 载＝呼吸骨架卡；空＝EmptyState 原语（信标 mono 母题）；错＝InlineMessage error + 重试
+  assert.match(source, /<CardGridSkeleton count=\{loadingCount\} \/>/)
+  assert.match(source, /<EmptyState message=\{emptyMessage\}/)
+  assert.match(source, /<InlineMessage\s+variant="error"\s+detail=\{errorDetail\}/)
+  // 三态槽横跨整幅网格
+  assert.match(styles, /\.plaza__state \{[^}]*grid-column: 1 \/ -1;/)
+})
+
+test("catalog toolbar sits on the FilterBar base and stays neutral", () => {
+  assert.match(source, /export function DesktopCatalogToolbarView/)
+  assert.match(source, /<FilterBar\s+flush/)
+  // R3 中性件：工具条与卡网格里不出现信标/荧黄 token
+  assert.doesNotMatch(source, /--ow-beacon|--ow-accent-dot|--ow-yellow/)
+})
+
+test("catalog card keeps readings mono and metadata in one footer band", () => {
+  // A4-B2：卡脚由「一排 Chip」收成「一条 mono 文字带」，段间只有一个 `·`；
+  // 版本号从名称行搬进这条带里领头（原型 1682「v1.4.2 · 3 天前」）。
+  assert.match(source, /function CatalogCardMetaLine\(/)
+  assert.match(source, /if \(version\) segments\.push\(\{ key: "__version", node: <>v\{version\}<\/> \}\)/)
+  assert.match(source, /\{index > 0 && <span aria-hidden="true"> · <\/span>\}/)
+  assert.doesNotMatch(source, /skcard__meta-chip/)
+  assert.doesNotMatch(source, /from "\.\.\/\.\.\/\.\.\/primitives\/Chip"/)
+  // 卡脚整条是读数带：mono + tabular-nums
+  assert.match(styles, /\.skcard \.ft \{[^}]*var\(--ow-font-mono\); font-variant-numeric: tabular-nums;/)
+  // 分节计数同理
+  assert.match(styles, /\.skd__section \.lbl \.cnt \{[^}]*var\(--ow-font-mono\); font-variant-numeric: tabular-nums;/)
+})
+
+test("catalog card is a ground-level surface: no shadow on hover, tokenised press and focus", () => {
+  // A4-B2（原型 1666）：卡面 --ow-surface，hover **只换边色**——底色递进是行/条的语汇，
+  // 一整张卡跟着指针变底会把网格搅成一片明暗；press 保留 --ow-press 作按下的瞬时反馈。
+  assert.match(styles, /\.skcard \{[^}]*background: var\(--ow-surface\);/)
+  assert.match(styles, /\.skcard:hover \{ border-color: var\(--ow-border-strong\); \}/)
+  assert.doesNotMatch(styles, /\.skcard:hover \{[^}]*background:/)
+  assert.doesNotMatch(styles, /\.skcard:hover \{[^}]*box-shadow/)
+  assert.match(styles, /\.skcard\[role="button"\]:active \{ background: var\(--ow-press\); \}/)
+  // W6-R2 焦点环三件套：裸 2px 归 var(--ow-focus-ring-w)。
+  assert.match(
+    styles,
+    /\.skcard:focus-visible \{ outline: var\(--ow-focus-ring-w\) solid var\(--ow-focus-ring\); outline-offset: var\(--ow-focus-ring-offset\);/,
+  )
+  // 禁用逐 token，不用统一透明度
+  assert.match(styles, /\.skcard \.inst:disabled \{[^}]*var\(--ow-disabled-bg\);[^}]*var\(--ow-disabled-text\);/)
+})
+
+test("catalog section eyebrows follow the CJK eyebrow spec, not english all-caps", () => {
+  assert.match(
+    styles,
+    // A4-B4：字面 0.08em 换成 --ow-ls-eyebrow-cjk（同值），眉标三属性全部走 token。
+    /\.skd__section \.lbl \{ font: 500 var\(--ow-fs-eyebrow-cjk\)\/1 var\(--ow-font-sans\); color: var\(--ow-eyebrow\); letter-spacing: var\(--ow-ls-eyebrow-cjk\);/,
+  )
+  assert.doesNotMatch(styles, /\.skd__section \.lbl \{[^}]*text-transform: uppercase/)
+})
+
+test("catalog status badges are one StatusTag, shared by card and detail", () => {
+  // A4-B3：三套写法（.connector-update-tag 裸 span / composite/Tag / primitives/Chip）收成一件。
+  assert.doesNotMatch(source, /className="connector-update-tag"/)
+  assert.doesNotMatch(styles, /\.connector-update-tag \{/)
+  assert.match(source, /import \{ StatusTag, type StatusTagPreset \} from "\.\.\/\.\.\/\.\.\/composite\/StatusTag"/)
+  // 卡与详情引同一个安装态→词表档的判定，不各判一遍。
+  assert.match(source, /export function catalogInstallStatus\(/)
+  assert.match(source, /const installStatus = catalogInstallStatus\(\{ installed, outdated, installing \}\)/)
+  assert.match(source, /\{installStatus && <StatusTag status=\{installStatus\} \/>\}/)
+})
+
+test("目录卡是竖排两段：上段 40 字形 + 名称行 + 两行描述，下段卡脚钉底", () => {
+  // 原型模板 1666–1684。横排三列（36 | 1fr | auto，align-items:center）整件退役。
+  assert.match(styles, /\.skcard \{[^}]*display: flex; flex-direction: column;/)
+  assert.doesNotMatch(styles, /\.skcard \{[^}]*grid-template-columns: 36px 1fr auto;/)
+  assert.match(source, /<div className="skcard__top">/)
+  assert.match(source, /<div className="skcard__foot">/)
+  assert.match(styles, /\.skcard__top \{[^}]*display: flex; align-items: flex-start; gap: 11px;/)
+  assert.match(styles, /\.skcard__foot \{ margin-top: auto;[^}]*gap: 10px;/)
+  // 字形 36 → 40，且回 sans 500（原型 1668 明写非 mono：徽标里的字是身份不是读数）
+  assert.match(
+    styles,
+    /\.skcard \.gly \{ width: 40px; height: 40px;[^}]*font: 500 var\(--ow-fs-ui\)\/1 var\(--ow-font-sans\);/,
+  )
+  // 描述两行 clamp + 3em 下限：同排等高靠它，不靠把卡拉伸
+  assert.match(styles, /\.skcard \.d \{[^}]*-webkit-line-clamp: 2;[^}]*min-height: 3em;/)
+  // 动作钮进卡脚，落 Button 的 sm（28）档
+  assert.match(source, /<Button\s+variant=\{actionVariant\}\s+size="sm"/)
+})
+
+test("目录网格列宽落原型的 340 一档", () => {
+  // 原 max(300px,(100%-56px)/5) 在 1440 下会挤到 5 列、卡宽掉到 262–300，比原型窄一档。
+  assert.match(styles, /\.plaza__grid \{[^}]*grid-template-columns: repeat\(auto-fill, minmax\(340px, 1fr\)\);/)
+  assert.match(styles, /\.plaza__grid \{[^}]*align-items: start;/)
+  assert.doesNotMatch(styles, /minmax\(max\(300px, \(100% - 56px\) \/ 5\), 1fr\)/)
+})
+
+test("catalog grid width stays stable across all and installed scopes", () => {
+  assert.match(
+    styles,
+    /\.plaza__grid \{[^}]*overflow-y: scroll;[^}]*scrollbar-gutter: stable;[^}]*scrollbar-width: thin;/s,
+  )
+})
+
+// L2-1-3：滚动槽宽是滚动条度量（classic thin 10px / overlay 0px），CSS 读不到——写死任何数
+// 都只在一档成立。网格右内距必须是干净的 28，槽由浏览器算；页头 / chip 行 / 分页三层各自
+// 成为「留槽但不滚」的容器吃同一套槽宽，四层右沿在两档下都齐平。
+test("plaza gutter is browser-measured, never a hard-coded number", () => {
+  assert.doesNotMatch(styles, /--ow-plaza-gutter/)
+  assert.doesNotMatch(styles, /\.plaza__grid \{[^}]*padding: [^;]*calc\(/s)
+  assert.match(styles, /\.plaza__grid \{[^}]*padding: 20px 28px 28px;/s)
+  // 三条缺一不可：不带 scrollbar-width: thin 时 hidden+stable 留 15px，与网格的 10px 对不上。
+  assert.match(
+    styles,
+    /\.page:has\(> \.plaza__grid\) > \[data-slot="page-head"\],\s*\.page:has\(> \.plaza__grid\) > \.plaza__filters,\s*\.page:has\(> \.plaza__grid\) > \.plaza__pagination \{ overflow: hidden; scrollbar-gutter: stable; scrollbar-width: thin; \}/,
+  )
+  // 裁剪盒会切掉 4px 聚焦环：下内距补 4，再从 chip 行上内距与网格上内距各扣回 4，画面零位移。
+  assert.match(styles, /\.page:has\(> \.plaza__grid\) > \[data-slot="page-head"\] \{ padding-bottom: 4px; \}/)
+  assert.match(styles, /\.page:has\(> \.plaza__grid\) > \.plaza__filters \{ padding-top: 10px; padding-bottom: 4px; \}/)
+  assert.match(styles, /\.page:has\(> \.plaza__grid\) > \.plaza__grid \{ padding-top: 16px; \}/)
+})
+
+test("authorization dialogs keep status, feedback, and actions evenly spaced", () => {
+  assert.match(
+    styles,
+    /\.plugin-authorization-dialog \.ow-dialog__body \{ display: flex; flex-direction: column; gap: var\(--ow-space-3\); \}/,
+  )
+  assert.match(styles, /\.plugin-authorization-dialog \.connector-alert \{ margin: 0; \}/)
+})
+
+test("catalog detail hero keeps the title and status tag on one line", () => {
+  // A4-B4：标题是 h1，不是 span——二级页的名字是这一屏的标题层级，不是一段加粗文字。
+  // 同一行里紧跟状态签（原型 2169），类型标下沉进 mono 元信息行，所以 .skill-detail__type
+  // 这一族的 hero 覆盖规则整条退役。
+  assert.match(source, /<h1 className="skd__title">\{name\}<\/h1>\s*\n\s*\{status\}\s*\n\s*\{badges\}/)
+  assert.match(styles, /\.skd__hero \.skd__title \{[^}]*text-overflow: ellipsis;[^}]*white-space: nowrap;/)
+  assert.doesNotMatch(styles, /\.skd__hero \.skill-detail__type \{/)
+})
+
+test("A4-B4：详情标题回到二级页字号档（22 display / --ow-lh-title / --ow-ls-title）", () => {
+  // 退化现场：13px/600 sans —— 与卡片标题同号，详情页读起来像一张放大的卡。
+  assert.match(
+    styles,
+    /\.skd__hero \.skd__title \{[^}]*font: 500 var\(--ow-fs-title\)\/var\(--ow-lh-title\) var\(--ow-font-display\); letter-spacing: var\(--ow-ls-title\);/,
+  )
+  // 字形块 52 · --ow-radius-md · 16/500 非 mono（原型 2164）
+  assert.match(
+    styles,
+    /\.skd__hero \.g \{ width: 52px; height: 52px; border-radius: var\(--ow-radius-md\);[^}]*font: 500 var\(--ow-fs-subtitle\)\/1 var\(--ow-font-sans\);/,
+  )
+  // hero 从居中改顶对齐，且与正文之间不再画分隔线（原型 2163：两块兄弟靠空隙分界）
+  assert.match(styles, /\.skd__hero \{ display: flex; align-items: flex-start; gap: 14px;/)
+  assert.doesNotMatch(styles, /\.skd__hero \{[^}]*border-bottom:/)
+})
+
+test("A4-B4：正文收在 720 列宽里，四体裁各一套排法", () => {
+  assert.match(styles, /\.skd__body \{ max-width: 720px; display: flex; flex-direction: column; gap: 22px; \}/)
+  assert.match(source, /<div className="skd__body">\{children\}<\/div>/)
+  for (const fn of [
+    "DesktopDetailSection",
+    "DesktopDetailText",
+    "DesktopDetailList",
+    "DesktopDetailChips",
+    "DesktopDetailRows",
+  ]) {
+    assert.match(source, new RegExp(`export function ${fn}`))
+  }
+  // list 的圆点由 ::before 出（5px · --ow-text-3），不占 DOM 也不进无障碍树
+  assert.match(styles, /\.skd__list-item::before \{ content: ""[^}]*width: 5px; height: 5px;/)
+  // chips 26 高直角片（原型 2209）；命令与工具名走 mono
+  assert.match(styles, /\.skd__chip \{[^}]*height: 26px;[^}]*border-radius: var\(--ow-radius-xs\);/)
+  assert.match(styles, /\.skd__chip--mono \{ font-family: var\(--ow-font-mono\)/)
+  // rows 是一张边框表，首行的分隔线透明（原型 2219），不与外框叠成两条
+  assert.match(styles, /\.skd__row:first-child \{ border-top-color: transparent; \}/)
+  assert.match(styles, /\.skd__row-name \{ flex: 0 0 auto; width: 150px;/)
+})
+
+test("A4-B4：详情页头右侧收敛成「一颗主钮 ＋ ⋯」，破坏性动作只在 ⋯ 里", () => {
+  // 收敛点在共享按钮组里：actions 的第一颗上台面，其余自动折进菜单并由本件转发 onAction。
+  assert.match(source, /const \[primary, \.\.\.folded\] = actions/)
+  assert.match(source, /const items = \[\.\.\.foldedItems, \.\.\.menuItems\]/)
+  assert.match(source, /danger: action\.variant === "danger"/)
+  assert.doesNotMatch(source, /\{actions\.map\(\(action\) => \(\s*\n\s*<Button/)
+})
+
+test("agent detail exposes only user-facing overview metadata and optional links", () => {
+  assert.match(source, /export function DesktopAgentOverviewView/)
+  assert.match(source, /<div\s+className=["']lbl["']\s*>基本信息<\/div>/)
+  assert.match(source, /link\.kind === ["']repository["'] \? ["']源码["'] : ["']主页["']/)
+  assert.doesNotMatch(source, />下载地址</)
+  assert.doesNotMatch(source, />内部 ID</)
+})
+
+test("connector cards expose controlled pending state for authorization checks", () => {
+  assert.match(source, /actionDisabled\?: boolean/)
+  assert.match(source, /actionDisabled=\{actionDisabled\}/)
+})
+
+// ── W5 终扫 ──────────────────────────────────────────────────────────────
+test("连接器徽标并轨到技能卡的中性字形章（R2·T2）", () => {
+  // 40 / 无边 / --ow-surface-2 / 500 —— 与 `.skcard .gly` 一字不差；36＋1px 边＋纸面＋700
+  // 是 V1 的第二套字形章形制，同一排卡里连接器比技能小一圈、多一道边、字重还不同。
+  assert.match(
+    styles,
+    /\.connector-logo \{ width: 40px; height: 40px;[^}]*background: var\(--ow-surface-2\); color: var\(--ow-text-2\); font: 500 var\(--ow-fs-ui\)\/1 var\(--ow-font-sans\);/,
+  )
+  assert.doesNotMatch(styles, /\.connector-logo \{[^}]*var\(--ow-success/)
+  assert.doesNotMatch(styles, /\.connector-logo \{[^}]*border: var\(--ow-border-width-thin/)
+  // 裸 <span class="gly"> 也得有中性底：章色的最终裁决权在 SkillAvatarView 的内联样式，
+  // 但漏传色档时不能白字浮在透明底上。
+  assert.match(styles, /\.skcard \.gly \{[^}]*background: var\(--ow-surface-2\); color: var\(--ow-text-2\);/)
+})
+
+test("字形章色档由卡决定：目录卡中性、专家卡墨面（R2·T2/Q1）", () => {
+  // 章色是 SkillAvatarView 写在元素上的内联样式，CSS 压不住；改默认又会把会话/命令面板
+  // 里的身份色一起抹平。所以由卡在外层钉一枚上下文，宿主一行不改就同时拿到两档。
+  assert.match(source, /import \{ GlyphToneProvider \} from "\.\.\/\.\.\/skills\/SkillAvatarView"/)
+  assert.match(source, /glyphTone\?: "neutral" \| "agent"/)
+  assert.match(source, /glyphTone = "neutral",/)
+  assert.match(source, /<GlyphToneProvider value=\{glyphTone\}>\{withGlyphClass\(avatar\)\}<\/GlyphToneProvider>/)
+  assert.match(source, /<DesktopCatalogCardView\s+avatar=\{avatar\}\s+glyphTone="agent"/)
+})
+
+test("卡壳的 Enter/空格只认自己：卡内动作钮的键盘路径不再被吃掉（L3-2-1）", () => {
+  // 没有这道守卫时，焦点在卡脚「使用/更新/安装」钮上按 Enter，冒泡到卡壳被 preventDefault
+  // 吃掉默认 click，按钮一次都没触发，反而打开了详情（鼠标路径有 stopPropagation 兜着）。
+  assert.match(
+    source,
+    /if \(event\.target !== event\.currentTarget\) return\s*\n\s*if \(onOpen && \(event\.key === "Enter"/,
+  )
+})
+
+test("「有更新」签与「更新」钮并存（R2·T2/Q3 撤去重条款）", () => {
+  // 原型 skills--market / skills--agents 两张渲染图里两者同时在：签说现状，钮说能做什么。
+  assert.match(source, /\{updateAvailable && <StatusTag status="update" \/>\}/)
+  assert.doesNotMatch(source, /updateAvailable && actionState !== "update"/)
+})
+
+test("连接器卡与技能/专家卡同槽：状态签、归属签、卡脚元信息（R2·T2）", () => {
+  assert.match(source, /export function DesktopConnectorCardView/)
+  assert.match(source, /actionLabel = "使用",/)
+  assert.doesNotMatch(source, /actionLabel = "查看",/)
+  assert.match(source, /badge=\{badge \?\? \(mine \? <StatusTag status="mine" \/> : undefined\)\}/)
+  assert.match(source, /metaItems=\{metaItems\}/)
+})
+
+// ── 原型对齐 B0-R1：详情壳返回钮归口 BackButton（巨大箭头回归的根因） ──────────────
+test("详情壳返回钮＝composite/BackButton，不再是 unstyled Button 套旋转箭头", () => {
+  // R2「死族清除」删掉 `.fs-back svg{width:16px;height:16px}` 后，unstyled Button + 无尺寸
+  // ArrowDown 让图标塌成 78×78。归口 BackButton 后尺寸/命中区/焦点环由 Button 原语出。
+  assert.match(source, /import \{ BackButton \} from "\.\.\/\.\.\/\.\.\/composite\/BackButton"/)
+  assert.match(source, /<BackButton\s+className="fs-back"\s+onClick=\{onBack\}>\s*\{backLabel\}\s*<\/BackButton>/)
+  assert.doesNotMatch(source, /transform: "rotate\(90deg\)"/)
+  assert.doesNotMatch(source, /<ArrowDown/)
+  assert.doesNotMatch(source, /import \{[^}]*ArrowDown/)
+  // `.fs-back` 只作 e2e 定位钩子留下，CSS 侧不得复活成形状规则
+  assert.doesNotMatch(styles, /^\s*\.fs-back[\s.:{,]/m)
+})
+
+test("详情页头内距对齐原型 20/28/0；hero 进页头，滚动区 20/28/28", () => {
+  assert.match(styles, /\.skd__head \{ position: relative; flex-shrink: 0; padding: 20px 28px 0; \}/)
+  // A4-B4：滚动区内距改 20/28/28（原型 2190）；返回条与 hero 的 12px 由 hero 自己的
+  // margin-top 给（原型 2163），因为 hero 已经和返回条同属固定页头，不再跟正文一起滚。
+  assert.match(styles, /\.skd__scroll \{[^}]*padding: 20px 28px var\(--ow-space-7, 28px\);/)
+  assert.match(styles, /\.skd__hero \{[^}]*margin-top: var\(--ow-space-3, 12px\); \}/)
+  assert.match(source, /<div className="skd__head">[\s\S]*<BackButton[\s\S]*<div className="skd__hero">/)
+})