@orbit-work/ui 0.1.0

package/src/components/domain/browser/WebPreviewNav/WebPreviewNavSource.test.mjs

@@ -0,0 +1,353 @@
+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")
+const stories = await readFile(new URL("./WebPreviewNav.stories.tsx", import.meta.url), "utf8")
+
+test("preview tabs expose a portalled right-click menu for closing tabs", () => {
+  assert.match(source, /onContextMenu=\{\(event\) => \{[\s\S]*?event\.preventDefault\(\)/)
+  assert.match(source, /createPortal\(/)
+  assert.match(source, /aria-label="标签页操作"/)
+  assert.match(source, /role="menuitem"[^>]*onClick=\{\(\) => onSelect\(["']close["']\)\}/)
+  assert.match(
+    source,
+    /role="menuitem"[\s\S]*?disabled=\{!canCloseOthers\}[\s\S]*?onClick=\{\(\) => onSelect\(["']close-others["']\)\}/,
+  )
+  assert.match(source, /props\.onCloseOtherTabs\(tabId\)/)
+})
+
+test("preview tab context menu stays in the viewport and dismisses consistently", () => {
+  assert.match(source, /Math\.min\(point\.x, window\.innerWidth - rect\.width - 8\)/)
+  assert.match(source, /Math\.min\(point\.y, window\.innerHeight - rect\.height - 8\)/)
+  assert.match(source, /document\.addEventListener\(["']pointerdown["'], closeOnOutsidePointer, true\)/)
+  assert.match(source, /event\.key === ["']Escape["']/)
+  assert.match(source, /window\.addEventListener\(["']scroll["'], onClose, true\)/)
+  // z 走 §5 popover 档（原来写死 9999，会盖过模态与 toast）；立面（面/边/影/圆角）
+  // 全部继承 .cpop 基座，这里只该覆定位与尺寸。
+  assert.match(
+    styles,
+    /\.browser-tab-context-menu\s*\{[^}]*position:\s*fixed;[^}]*right:\s*auto;[^}]*bottom:\s*auto;[^}]*width:\s*164px;[^}]*z-index:\s*var\(--ow-z-popover\);/s,
+  )
+})
+
+test("preview tabs vertically center content and compress before scrolling", () => {
+  assert.match(
+    styles,
+    /\.browser-tab\s*\{[^}]*align-items:\s*center;[^}]*flex:\s*1 1 0;[^}]*min-width:\s*22px;[^}]*max-width:\s*180px;/s,
+  )
+  assert.match(
+    styles,
+    /\.browser-tab__favicon\s*\{[^}]*display:\s*inline-flex;[^}]*align-items:\s*center;[^}]*justify-content:\s*center;[^}]*width:\s*16px;[^}]*height:\s*16px;[^}]*flex:\s*0 0 16px;/s,
+  )
+  assert.match(source, /<span[\s\S]*?className=\{`browser-tab__favicon/)
+  assert.match(
+    styles,
+    // §7 图标档位 16/20/24：14 不在档上，归 16（容器本就是 16×16）。
+    /\.browser-tab__favicon > svg,\s*\.browser-tab__favicon > img \{[^}]*display:\s*block;[^}]*width:\s*16px;[^}]*height:\s*16px;/s,
+  )
+  assert.match(
+    styles,
+    /\.browser-tab__title\s*\{[^}]*display:\s*block;[^}]*flex:\s*1 1 auto;[^}]*overflow:\s*hidden;[^}]*white-space:\s*nowrap;[^}]*font:\s*400[^/]*\/16px/s,
+  )
+  // R2：缺了 text-overflow 标题就在字中间被硬切（「Stack Overf」「MDN Web D」），
+  // overflow:hidden 只裁不省略——同文件 .artifact-sidebar__name 是正确写法。
+  assert.match(styles, /\.browser-tab__title\s*\{[^}]*text-overflow:\s*ellipsis;/s)
+  assert.match(
+    styles,
+    // §7 控件高：图标钮 ≥28×28（原 20 出表），字形仍 14px。
+    /\.browser-tab__close\s*\{[^}]*width:\s*28px;[^}]*height:\s*28px;[^}]*padding:\s*0;[^}]*flex:\s*0 0 28px;[^}]*align-items:\s*center;[^}]*justify-content:\s*center;/s,
+  )
+  assert.match(styles, /\.browser-tabbar__tabs\s*\{[^}]*overflow-x:\s*auto;/s)
+  assert.match(source, /className="browser-tabbar__actions"/)
+  assert.match(
+    styles,
+    /\.browser-tabbar__actions\s*\{[^}]*display:\s*flex;[^}]*flex:\s*0 0 auto;[^}]*min-width:\s*88px;/s,
+  )
+})
+
+test("preview tabs keep close actions on the right and reveal hovered tabs", () => {
+  assert.match(styles, /\.browser-tab__close:hover \{[^}]*background:\s*transparent;[^}]*\}/)
+  assert.match(source, /current \? tabWidth < 60 : tabWidth < 54/)
+  assert.match(source, /firstTab\?\.getBoundingClientRect\(\)\.width/)
+  assert.match(source, /new ResizeObserver\(measure\)/)
+  assert.match(source, /browser-tabbar__tabs\$\{iconOnly \? ["'] is-icon-only["'] : [""]["']\}/)
+  assert.match(styles, /\.browser-tab\s*\{[^}]*flex:\s*1 1 0;[^}]*min-width:\s*22px;[^}]*max-width:\s*180px;/s)
+  assert.match(styles, /\.browser-tab__close\s*\{[^}]*margin-left:\s*auto;/s)
+  assert.doesNotMatch(styles, /\.browser-tab:not\(\.is-active\) \.browser-tab__close\s*\{[^}]*display:\s*none;/s)
+  assert.doesNotMatch(styles, /\.browser-tab\.is-active \.browser-tab__favicon \{ display:\s*none; \}/)
+  assert.doesNotMatch(styles, /\.browser-tab\.is-active \.browser-tab__close\s*\{[^}]*order:\s*-1;/s)
+  assert.match(
+    styles,
+    /\.browser-tab\.is-active \.browser-tab__close\s*\{[^}]*opacity:\s*1;[^}]*pointer-events:\s*auto;/s,
+  )
+  assert.match(
+    styles,
+    /\.browser-tab:not\(\.is-active\):hover \.browser-tab__close,[\s\S]*\.browser-tab:not\(\.is-active\)\.is-hovered \.browser-tab__close,[\s\S]*\.browser-tab:not\(\.is-active\):focus-within \.browser-tab__close\s*\{[^}]*opacity:\s*1;[^}]*pointer-events:\s*auto;/s,
+  )
+  assert.match(source, /onMouseEnter=\{\(\) => setHoveredTabId\(tab\.id\)\}/)
+  assert.match(source, /onMouseLeave=\{\(\) => setHoveredTabId\(null\)\}/)
+  assert.doesNotMatch(styles, /\.browser-tabbar__tabs\.is-compact/)
+  assert.match(styles, /\.browser-tabbar__tabs\.is-icon-only \.browser-tab\s*\{[^}]*padding-inline:\s*0;/s)
+  assert.doesNotMatch(
+    styles,
+    /\.browser-tabbar__tabs\.is-icon-only \.browser-tab\s*\{[^}]*(?:flex|width|min-width|max-width):/s,
+  )
+  assert.match(styles, /\.browser-tabbar__tabs\.is-icon-only \.browser-tab__title \{ display:\s*none; \}/)
+  assert.match(
+    styles,
+    /\.browser-tabbar__tabs\.is-icon-only \.browser-tab__favicon \{[^}]*position:\s*absolute;[^}]*left:\s*50%;[^}]*transform:\s*translateX\(-50%\);[^}]*\}/,
+  )
+  assert.match(
+    styles,
+    /\.browser-tabbar__tabs\.is-icon-only \.browser-tab__close\s*\{[^}]*position:\s*absolute;[^}]*left:\s*50%;[^}]*display:\s*inline-flex;[^}]*transform:\s*translateX\(-50%\);[^}]*opacity:\s*0;[^}]*pointer-events:\s*none;[^}]*background:\s*transparent;/s,
+  )
+  assert.match(
+    styles,
+    /\.browser-tabbar__tabs\.is-icon-only \.browser-tab\.is-active \.browser-tab__close\s*\{[^}]*opacity:\s*0;[^}]*pointer-events:\s*none;/s,
+  )
+  assert.match(
+    styles,
+    /\.browser-tabbar__tabs\.is-icon-only \.browser-tab:not\(\.is-active\) \.browser-tab__close\s*\{[^}]*opacity:\s*0;[^}]*pointer-events:\s*none;/s,
+  )
+  assert.match(
+    styles,
+    /\.browser-tabbar__tabs\.is-icon-only \.browser-tab\.is-active:hover \.browser-tab__favicon,[\s\S]*\.browser-tabbar__tabs\.is-icon-only \.browser-tab\.is-active\.is-hovered \.browser-tab__favicon,[\s\S]*opacity:\s*0;/,
+  )
+  assert.match(
+    styles,
+    /\.browser-tabbar__tabs\.is-icon-only \.browser-tab\.is-active:hover \.browser-tab__close,[\s\S]*\.browser-tabbar__tabs\.is-icon-only \.browser-tab\.is-active\.is-hovered \.browser-tab__close,[\s\S]*display:\s*inline-flex;[\s\S]*opacity:\s*1;[\s\S]*pointer-events:\s*auto;/,
+  )
+  assert.match(source, /<Tooltip content=\{tabTitle\} followCursor delay=\{400\} showArrow=\{false\}/)
+  assert.match(source, /role="tab"[\s\S]*?aria-label=\{tabTitle\}/)
+  assert.match(source, /onContextMenu=\{\(event\) =>/)
+})
+
+// ── P5 批次④：7 件 → Shell / Nav / Console 三件的归口断言 ──
+
+test("旧名 BrowserTabBarView 只留薄兼容导出，实现已在 WebPreviewNav", async () => {
+  const legacy = await readFile(new URL("../BrowserTabBarView/index.tsx", import.meta.url), "utf8")
+  assert.match(legacy, /@deprecated[\s\S]*?WebPreviewNav/)
+  assert.match(legacy, /WebPreviewNav as BrowserTabBarView/)
+  assert.match(legacy, /WebPreviewTab as BrowserTabView/)
+  assert.doesNotMatch(legacy, /export function/)
+  assert.match(source, /export function WebPreviewNav/)
+})
+
+test("R3 中性件：tab 条无信标/荧黄，也不借 --ow-primary 假冒极色", () => {
+  /** 只在「代码」上验禁令：注释里点名 token 是文档，不是用法。 */
+  const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+  assert.doesNotMatch(code, /--ow-beacon|--ow-accent-dot|--ow-yellow|--ow-data-today/)
+  assert.doesNotMatch(code, /--ow-primary\b/)
+})
+
+test("标签右键菜单坐在 .cpop 弹层基座上，立面走 §5 popover 档", () => {
+  // 基座是 chat/Composer 与 browser 共用的单点：面比地面高一档、影是 pop 档、
+  // 边永远留 1px、圆角菜单档、z 走 popover 档。任何一项退回 --ow-bg/--ow-shadow-3
+  // 都会让这两个域一起走样。
+  const base = styles.match(/^\.cpop \{[^}]*\}/ms)?.[0] ?? ""
+  assert.match(base, /background: var\(--ow-popover-bg\);/)
+  assert.match(base, /border: var\(--ow-border-width-thin, 1px\) solid var\(--ow-border\);/)
+  assert.match(base, /border-radius: var\(--ow-radius-menu\);/)
+  assert.match(base, /box-shadow: var\(--ow-shadow-pop\);/)
+  assert.match(base, /z-index: var\(--ow-z-popover\);/)
+
+  // 行坐在 popover 面上，交互底色跟着表面递进（§5），不是地面那一套 hover/press。
+  assert.match(styles, /\.cpop \.mi:hover \{ background: var\(--ow-hover-pop\); \}/)
+  assert.match(styles, /\.cpop \.mi:active:not\(:disabled\) \{ background: var\(--ow-press-pop\); \}/)
+  assert.match(styles, /\.cpop \.mi:focus-visible \{ outline: var\(--ow-focus-ring-w\)/)
+  assert.match(styles, /\.cpop \.mi:disabled \{ color: var\(--ow-disabled-text\);/)
+
+  // 右键菜单本体只覆定位与尺寸，不自带面/边/影。
+  const menu = styles.match(/^\.browser-tab-context-menu \{[^}]*\}/ms)?.[0] ?? ""
+  assert.ok(!/background:/.test(menu), "右键菜单不该自己再刷一层面，立面归基座")
+  assert.ok(!/box-shadow:/.test(menu), "右键菜单不该自己再刷一层影，立面归基座")
+})
+
+// ── W2 任务 9：判断表「页签：一套（底线式）」——Chrome 曲边融合页签退场 ──
+
+test("Chrome 式曲边融合页签整套退场：凹角、渐变、曲线变量都不许回流", () => {
+  assert.doesNotMatch(styles, /--browser-tab-curve/)
+  assert.doesNotMatch(styles, /\.browser-tab\.is-active::(before|after)/)
+  // 那两处 radial-gradient 是「几何性渐变豁免」，形状没了豁免也一并作废。
+  // 注释里点名旧写法是文档不是用法，先剥注释再验。
+  const bar = styles
+    .slice(styles.indexOf(".browser-tabbar {"), styles.indexOf(".browser-tab__favicon {"))
+    .replace(/\/\*[\s\S]*?\*\//g, "")
+  assert.doesNotMatch(bar, /radial-gradient/)
+  // 选中不再靠换面色 —— 只管**默认档**那条规则（行首锚定）。
+  // A8-B2 起 panel 档（.browser-tabbar--panel .browser-tab.is-active）恰恰**要**换面色：
+  // 右栏页签是文档标签，选中＝换成面板体同色与体连成一片。两档各一条规则，互不相干；
+  // 不锚行首的话，那条 panel 规则的选择器尾部就会被这条正则当成默认档命中。
+  assert.doesNotMatch(styles, /^\.browser-tab\.is-active \{[^}]*background:/ms)
+})
+
+test("页签条＝底线式：条与地同色 ＋ 条底 1px 基线 ＋ §7 高 40", () => {
+  assert.match(
+    styles,
+    /\.browser-tabbar \{[^}]*align-items:\s*center;[^}]*height:\s*40px;[^}]*background:\s*var\(--ow-bg\);/s,
+  )
+  assert.match(
+    styles,
+    /\.browser-tabbar::after \{[^}]*bottom:\s*0;[^}]*height:\s*var\(--ow-border-width-thin, 1px\);[^}]*background:\s*var\(--ow-border\);/s,
+  )
+  // 条已坐地面，钮的 hover/press 跟着走地面档（§5 交互底色相对所在表面递进）。
+  assert.match(styles, /\.browser-tabbar__add:hover \{ background: var\(--ow-hover\);/)
+  assert.match(styles, /\.browser-tabbar__add:active \{ background: var\(--ow-press\); \}/)
+  assert.match(styles, /\.browser-tabbar__add:focus-visible \{[^}]*outline: var\(--ow-focus-ring-w\)/s)
+  assert.doesNotMatch(styles, /\.browser-tabbar__add:hover \{ background: var\(--ow-surface-2\)/)
+})
+
+test("选中态＝R1 双编码：2px --ow-text 底线 ＋ 文字色 ＋500 字重，形状表 8px 圆角", () => {
+  assert.match(styles, /\.browser-tab \{[^}]*border-bottom:\s*2px solid transparent;/s)
+  // 底线式页签零圆角（同 primitives/Tabs 的 rounded-none）：8px 圆顶是第二套「托盘形」
+  // 页签的残件，hover 上底色时就会现形。§7 页签只有底线式一套。
+  assert.match(styles, /\.browser-tab \{[^}]*border-radius:\s*0;/s)
+  assert.match(styles, /\.browser-tab\.is-active \{[^}]*border-bottom-color:\s*var\(--ow-text\);/s)
+  assert.match(
+    styles,
+    /\.browser-tab\.is-active \.browser-tab__title \{[^}]*color:\s*var\(--ow-text\);[^}]*font-weight:\s*500;/s,
+  )
+  // hover 只换底不升海拔，且走地面档。
+  assert.match(styles, /\.browser-tab:not\(\.is-active\):hover \{ background: var\(--ow-hover\); \}/)
+  assert.match(styles, /\.browser-tab:not\(\.is-active\):active \{ background: var\(--ow-press\); \}/)
+})
+
+test("§9 动效：页签与关闭钮的过渡只用 dur-1 ＋ ease-beacon，裸 120ms 清干净", () => {
+  const tab = styles.match(/^\.browser-tab \{[^}]*\}/ms)?.[0] ?? ""
+  const close = styles.match(/^\.browser-tab__close \{[^}]*\}/ms)?.[0] ?? ""
+  for (const [name, block] of [
+    ["browser-tab", tab],
+    ["browser-tab__close", close],
+  ]) {
+    assert.match(block, /var\(--ow-dur-1\) var\(--ow-ease-beacon\)/, `${name} 的过渡要走 token`)
+    assert.doesNotMatch(block, /\b120ms\b/, `${name} 里不许留裸 120ms`)
+  }
+})
+
+// ── W5 残留清扫：一件里两套图标语系 ＋ 弹层入场的 pop-in ──
+
+test("§7 图标语系单一：页签类型/关闭/新建三处并入 composite/Icons 族", () => {
+  // 原来这三处是文件内手绘的 16 网格 svg，而同文件工具组与右键菜单走的是 I2.*。
+  assert.match(source, /function TabKindIcon[\s\S]*?<I2\.Terminal/)
+  assert.match(source, /function TabKindIcon[\s\S]*?<I2\.Globe/)
+  assert.match(source, /function TabKindIcon[\s\S]*?<I2\.Folder/)
+  assert.match(source, /className="browser-tab__close"[\s\S]*?<I2\.Close/)
+  assert.match(source, /className="browser-tabbar__add"[\s\S]*?<I2\.Plus/)
+  // 手绘 path 全部退场
+  assert.doesNotMatch(source, /M4 4l8 8M12 4l-8 8/)
+  assert.doesNotMatch(source, /M8 3v10M3 8h10/)
+  assert.doesNotMatch(source, /M2 3h12v10H2V3z/)
+  assert.doesNotMatch(source, /viewBox="0 0 16 16"/)
+})
+
+test("§9 右键菜单入场只留淡入：pop-in 的缩放＋位移与裸 ease-out 退场", () => {
+  const menu = styles.match(/^\.browser-tab-context-menu \{[\s\S]*?\}/m)?.[0] ?? ""
+  assert.match(menu, /animation: fade var\(--ow-dur-1\) var\(--ow-ease-beacon\);/)
+  assert.doesNotMatch(menu, /animation: pop-in/)
+  assert.match(
+    styles,
+    /@media \(prefers-reduced-motion: reduce\) \{ \.browser-tab-context-menu \{ animation: none; \} \}/,
+  )
+})
+
+// ── R2 修补 ──
+
+// role="tab" 必须坐在 role="tablist" 里，否则整组 tab 语义处在无效父上下文。
+test('a11y：页签容器带 role="tablist"', () => {
+  assert.match(source, /role="tablist"/)
+  assert.match(source, /role="tab"/)
+})
+
+// favicon 取不到时 <img> 只渲成空盒，placeholder 分支因为 tab.favicon 非空不触发。
+test("favicon 加载失败回落类别图标（不留空图标位）", () => {
+  assert.match(source, /const \[brokenFavicons, setBrokenFavicons\]/)
+  assert.match(source, /const hasFavicon = tab\.kind === "web" && !!tab\.favicon && !brokenFavicons\.has\(tab\.id\)/)
+  assert.match(source, /onError=\{\(\) =>/)
+})
+
+// 槽/内距归 --ow-space-* 刻度：5 不在 2/4/6/8 阶上。
+test("§7 间距刻度：.browser-tab 的槽与右内距不再是裸 5px", () => {
+  assert.doesNotMatch(styles, /\.browser-tab \{[^}]*gap:\s*5px;/s)
+  assert.match(styles, /\.browser-tab \{[^}]*gap:\s*var\(--ow-space-15, 6px\);/s)
+  assert.doesNotMatch(styles, /\.browser-tab__tooltip \{[^}]*gap:\s*5px;/s)
+})
+
+// 文件头注释曾停在「曲边 8px 贴合」，CSS 早已改成底线式条——注释与实现不符。
+test("文件头注释与实现同步：底线式条，曲边说法退场", () => {
+  assert.doesNotMatch(source, /曲边 8px 贴合/)
+  assert.match(source, /底线式条/)
+})
+
+// story fixture：favicon 走公网外链，离线/CI 下一律取不到。
+test("story fixture 不出网：favicon 走内联 data URI 字母兜底", () => {
+  assert.doesNotMatch(stories, /favicon: "https?:/)
+  assert.match(stories, /const letterFavicon = \(letter: string\) =>/)
+  assert.match(stories, /data:image\/svg\+xml/)
+})
+
+// ── A8-B2（裁决 9 · 原型模板 2251–2271）· 页签条 panel 档 ──
+// 右栏页签＝**文档标签**（可关、可新建、与面板体连成一片），与内容区那种分段页签不是
+// 一回事，为它破 §7「页签只有底线式一套」；例外条文另批写进 COMPONENT-RULES §7。
+// 默认档必须逐字不动 —— 上面那批断言就是它的看门人。
+
+test("panel 档：条 36、页签 26 圆角胶囊、选中换 --ow-surface 面色 ＋500 字重", () => {
+  assert.match(source, /density\?: "default" \| "panel"/)
+  assert.match(source, /const panel = props\.density === "panel"/)
+  assert.match(source, /className=\{`browser-tabbar\$\{panel \? " browser-tabbar--panel" : ""\}`\}/)
+  assert.match(styles, /\.browser-tabbar--panel \{ height: 36px; \}/)
+  assert.match(
+    styles,
+    /\.browser-tabbar--panel \.browser-tab \{[^}]*flex: 0 0 auto;[^}]*height: 26px;[^}]*border-bottom: 0;[^}]*border-radius: var\(--ow-radius-xs\);/s,
+  )
+  assert.match(styles, /\.browser-tabbar--panel \.browser-tab\.is-active \{ background: var\(--ow-surface\); \}/)
+  assert.match(styles, /\.browser-tabbar--panel \.browser-tab\.is-active \.browser-tab__title \{ font-weight: 500; \}/)
+  assert.match(styles, /\.browser-tabbar--panel \.browser-tab__title \{[^}]*font-size: var\(--ow-fs-caption\);/s)
+  // 立面只换面色与字重，不许在胶囊上加影/渐变（§5 贴地）
+  const pill = styles.match(/\.browser-tabbar--panel \.browser-tab \{[^}]*\}/s)?.[0] ?? ""
+  assert.doesNotMatch(pill, /box-shadow|gradient|#[0-9a-f]{3,8}/i)
+})
+
+test("panel 档：无图标位、关闭钮 16 常显、新建钮 24 在滚动行内且直连开网页页签", () => {
+  // favicon / 类别图标整块不渲染（原型 2254-2259 的页签上只有标题 ＋ 关闭）
+  assert.match(source, /\{!panel && \(\s*<span className=\{`browser-tab__favicon/)
+  // 新建钮：panel 在滚动行尾，默认档仍在 actions 组里
+  assert.match(source, /\{panel && addTabButton\}\s*<\/div>/)
+  assert.match(source, /className="browser-tabbar__actions">\s*\{!panel && addTabButton\}/)
+  // 点了直接开网页页签，不弹三项菜单
+  assert.match(source, /onClick=\{panel \? props\.onAddBrowser : \(\) => setAddMenuOpen/)
+  // R2 · L3-2-8：快捷键字形按 platform 渲，不再写死 ⌘T（windows/linux 上出 Ctrl+T）
+  assert.match(
+    source,
+    /title=\{panel \? `新建浏览器标签 \$\{formatShortcut\(ADD_BROWSER_KEYS, props\.platform \?\? "mac"\)\}` : "新建标签"\}/,
+  )
+  assert.match(source, /const ADD_BROWSER_KEYS = \["Mod", "T"\] as const/)
+  // 换行不敏感：biome 的 lineWidth 会按上下文把这段折成多行（R2 title 变长后即已折过一次）
+  assert.match(source, /\{!panel && addMenuOpen && \(?\s*<MenuSurface/)
+  assert.match(
+    styles,
+    /\.browser-tabbar--panel \.browser-tabbar__tabs \.browser-tabbar__add \{[^}]*width: 24px; height: 24px;[^}]*border-radius: var\(--ow-radius-2xs\);/s,
+  )
+  // 关闭钮 16 方常显（窄条上没有「hover 才现」的余地）
+  assert.match(
+    styles,
+    /\.browser-tabbar--panel \.browser-tab__close,\s*\.browser-tabbar--panel \.browser-tab:not\(\.is-active\) \.browser-tab__close \{[^}]*width: 16px; height: 16px;[^}]*opacity: 1;[^}]*pointer-events: auto;/s,
+  )
+  assert.match(styles, /\.browser-tabbar--panel \.browser-tab__close:hover \{ background: var\(--ow-press\);/)
+  // panel 档不走「压到只剩图标」那条路（那一档本就没有图标位）
+  assert.match(source, /if \(!tabs \|\| panel \|\| props\.tabs\.length === 0\)/)
+})
+
+test("panel 档右端两钮：26 方 · 最大化 / 还原 ＋ 收起右栏（右向 chevron）", () => {
+  assert.match(styles, /\.browser-tabbar--panel \.browser-tabbar__actions \{ min-width: 0; \}/)
+  assert.match(
+    styles,
+    /\.browser-tabbar--panel \.browser-tabbar__actions \.browser-tabbar__add \{[^}]*width: 26px; height: 26px;[^}]*border-radius: var\(--ow-radius-xs\);[^}]*color: var\(--ow-text-2\);/s,
+  )
+  assert.match(source, /title=\{panel \? "最大化 \/ 还原" :/)
+  assert.match(source, /title=\{panel \? "收起右栏" : "折叠预览面板"\}/)
+  assert.match(source, /\{panel \? <I2\.ChevRight width=\{16\} height=\{16\} \/> : <I2\.PanelSidebar/)
+  // 默认档那颗 14 字形逐字保留
+  assert.match(source, /<I2\.Maximize width=\{panel \? 16 : 14\} height=\{panel \? 16 : 14\} \/>/)
+})