@orbit-work/ui 0.1.0

package/src/components/composite/DetailScaffold/index.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { cn } from "../../../lib/utils"
+import { BackButton } from "../BackButton"
+import { TitleBar, type TitleBarPlatform } from "../TitleBar"
+
+/**
+ * DetailScaffold — 详情页骨架（DS 2.0 模式层）
+ *
+ * 规格（COMPONENT-RULES §5/§6/§7）：
+ * - 头部复用 TitleBar（`transparent divided`）：高 `var(--ow-titlebar-h)`（48）、通栏 1px
+ *   `--ow-border` 分隔、贴地无影；底色继承面板 `--ow-surface`；
+ *   传 `onBack` 即在 leading 槽挂归口后的 BackButton。
+ * - 正文是唯一滚动区（`flex-1 min-h-0 overflow-auto`），头/脚固定。
+ * - 可选 `aside` 右栏，与正文之间仍是 1px 分隔（不加影）。
+ * - 中性件（R3）：不引信标/荧黄；空态/加载/错误由调用方传 EmptyState / Skeleton / InlineMessage。
+ */
+export interface DetailScaffoldProps {
+  /** 标题 */
+  title?: ReactNode
+  /** 副标题（面包屑尾段 / 读数），读数请自带 mono + tabular-nums */
+  subtitle?: ReactNode
+  /** 传入即在头部左侧挂 BackButton */
+  onBack?: () => void
+  /** 返回钮无障碍名，默认「返回」 */
+  backLabel?: string
+  /** 头部左侧额外插槽（在 BackButton 之后） */
+  leading?: ReactNode
+  /** 头部右侧动作区 */
+  actions?: ReactNode
+  /** 头部平台形态（mac 让出红绿灯净空） */
+  platform?: TitleBarPlatform
+  /** 右栏（属性 / 元信息） */
+  aside?: ReactNode
+  /** 右栏宽度，默认 280 */
+  asideWidth?: number | string
+  /** 底部固定条（操作栏等） */
+  footer?: ReactNode
+  /** 正文区不加内边距（自带铺满内容时用） */
+  flush?: boolean
+  children: ReactNode
+  className?: string
+  /** 正文滚动区额外 className */
+  bodyClassName?: string
+}
+
+export function DetailScaffold({
+  title,
+  subtitle,
+  onBack,
+  backLabel = "返回",
+  leading,
+  actions,
+  platform = "web",
+  aside,
+  asideWidth = 280,
+  footer,
+  flush = false,
+  children,
+  className,
+  bodyClassName,
+}: DetailScaffoldProps) {
+  return (
+    <section
+      data-slot="detail-scaffold"
+      className={cn("flex flex-col h-full min-h-0 w-full bg-ow-surface shadow-none", className)}
+    >
+      {/* 头部坐在 --ow-surface 面板上：transparent 继承面底色，divided 开通栏 1px 分隔线
+          （TitleBar 默认档是「与地同色、无线」的窗口带，页内详情头需要分隔线时显式开）。 */}
+      <TitleBar
+        transparent
+        divided
+        platform={platform}
+        title={title}
+        subtitle={subtitle}
+        actions={actions}
+        leading={
+          onBack || leading ? (
+            <>
+              {onBack && <BackButton size="sm" label={backLabel} onClick={onBack} />}
+              {leading}
+            </>
+          ) : undefined
+        }
+      />
+      <div data-slot="detail-scaffold-body" className="flex flex-1 min-h-0">
+        <div
+          data-slot="detail-scaffold-content"
+          className={cn("flex-1 min-w-0 min-h-0 overflow-auto", flush ? "p-0" : "p-4", bodyClassName)}
+        >
+          {children}
+        </div>
+        {aside && (
+          <aside
+            data-slot="detail-scaffold-aside"
+            className="flex-shrink-0 min-h-0 overflow-auto border-l border-[color:var(--ow-border)] shadow-none"
+            style={{ width: asideWidth, minWidth: asideWidth }}
+          >
+            {aside}
+          </aside>
+        )}
+      </div>
+      {footer && (
+        <div
+          data-slot="detail-scaffold-footer"
+          className="flex-shrink-0 flex items-center justify-end gap-2 px-4 py-3 border-t border-[color:var(--ow-border)]"
+        >
+          {footer}
+        </div>
+      )}
+    </section>
+  )
+}

package/src/components/composite/Dialog/Dialog.stories.tsx

@@ -0,0 +1,343 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { Button, Checkbox, Field } from "../../primitives"
+import { InfoCircle } from "../Icons"
+import { Dialog } from "./index"
+
+const meta = {
+  title: "Composite/Dialog",
+  component: Dialog,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Dialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 触发器外壳：模态永远 portal 到 body，故事页只需一个开合钮。 */
+function Launcher({ label, children }: { label: string; children: (close: () => void) => React.ReactNode }) {
+  const [open, setOpen] = useState(false)
+  return (
+    <div style={{ padding: 40 }}>
+      <Button variant="secondary" onClick={() => setOpen(true)}>
+        {label}
+      </Button>
+      {open && children(() => setOpen(false))}
+    </div>
+  )
+}
+
+/** 标准形：标题 + 正文 + 取消/确认。行动极只允许一处（primary 只出一枚）。 */
+export const Default: Story = {
+  render: () => (
+    <Launcher label="打开对话框">
+      {(close) => (
+        <Dialog
+          open
+          title="发布这个站点"
+          subtitle="发布后链接立即对协作者可见。"
+          onClose={close}
+          onConfirm={close}
+          confirmLabel="发布"
+        >
+          站点会以当前工作区的最新一次构建产物上线，你随时可以撤回。
+        </Dialog>
+      )}
+    </Launcher>
+  ),
+}
+
+/** 常驻 open 档：不套触发器外壳，模态立面直接进静态快照／autodocs／视觉回归。
+ *  其余档都包在 Launcher 里（需点击才出立面），快照里只拍得到一颗按钮。 */
+export const OpenDefault: Story = {
+  render: () => (
+    <Dialog
+      open
+      title="发布这个站点"
+      subtitle="发布后链接立即对协作者可见。"
+      onClose={() => {}}
+      onConfirm={() => {}}
+      confirmLabel="发布"
+    >
+      站点会以当前工作区的最新一次构建产物上线，你随时可以撤回。
+    </Dialog>
+  ),
+}
+
+/** danger 确认变体：error tint 图标徽章 ＋ error 主按钮（颜色之外另有图标与文案双编码，R1）。 */
+export const DangerConfirm: Story = {
+  render: () => (
+    <Launcher label="打开危险确认">
+      {(close) => (
+        <Dialog
+          open
+          variant="danger"
+          title="删除项目「竞品调研」"
+          subtitle="项目内的 12 个会话与全部文件会一起删除，无法恢复。"
+          onClose={close}
+          onConfirm={close}
+          confirmLabel="删除项目"
+        >
+          删除后同事将立刻失去访问权。如果只是想收起来，改用归档更稳妥。
+        </Dialog>
+      )}
+    </Launcher>
+  ),
+}
+
+/** 确认按钮 disabled：逐 token 禁用配色，不套统一透明度（§6）。 */
+export const ConfirmDisabled: Story = {
+  render: () => (
+    <Launcher label="打开待填写对话框">
+      {(close) => (
+        <Dialog open title="重命名工作区" onClose={close} onConfirm={close} confirmLabel="保存" confirmDisabled>
+          先填个名字再保存。
+        </Dialog>
+      )}
+    </Launcher>
+  ),
+}
+
+/** 确认按钮 loading：小转子即状态的形编码，配色保持 rest 档。 */
+export const ConfirmLoading: Story = {
+  render: () => (
+    <Launcher label="打开提交中对话框">
+      {(close) => (
+        <Dialog open title="正在保存设置" onClose={close} onConfirm={close} confirmLabel="保存中…" confirmLoading>
+          正在把改动写回本地配置，几秒钟就好。
+        </Dialog>
+      )}
+    </Launcher>
+  ),
+}
+
+/** 图标底档：功能色 tint 徽章（info/warning/error），仅状态语境用。 */
+export const IconTones: Story = {
+  render: () => (
+    <Launcher label="打开信息提示">
+      {(close) => (
+        <Dialog
+          open
+          title="有一份新版配置可用"
+          icon={<InfoCircle aria-hidden="true" />}
+          iconTone="info"
+          onClose={close}
+          onConfirm={close}
+          confirmLabel="立即更新"
+        >
+          更新会在下次启动时生效，当前会话不受影响。
+        </Dialog>
+      )}
+    </Launcher>
+  ),
+}
+
+/** 表单档：传 onSubmit 时立面渲染成 form，脚部提交钮可用 type="submit"。 */
+export const FormDialog: Story = {
+  render: () => (
+    <Launcher label="打开表单对话框">
+      {(close) => (
+        <Dialog
+          open
+          width={480}
+          title="邀请协作者"
+          onClose={close}
+          onSubmit={(event) => {
+            event.preventDefault()
+            close()
+          }}
+          actions={
+            <>
+              <Button variant="secondary" type="button" onClick={close}>
+                取消
+              </Button>
+              <Button variant="primary" type="submit">
+                发送邀请
+              </Button>
+            </>
+          }
+        >
+          <div className="flex flex-col gap-4">
+            <label className="flex flex-col gap-2">
+              <span className="text-[color:var(--ow-text-2)] font-medium text-ow-fs-ui leading-[1.4]">邮箱</span>
+              <Field autoFocus placeholder="name@example.com" />
+            </label>
+            <div className="flex items-start gap-2.5">
+              <Checkbox defaultChecked aria-label="附带一句邀请说明" />
+              <span className="flex-1 text-[color:var(--ow-text-2)] font-normal text-ow-fs-ui leading-[1.5]">
+                附带一句邀请说明，让对方知道是谁在找他。
+              </span>
+            </div>
+          </div>
+        </Dialog>
+      )}
+    </Launcher>
+  ),
+}
+
+/** 长内容：正文自滚，头/脚不动，整体不超过 85vh。 */
+export const ScrollingBody: Story = {
+  render: () => (
+    <Launcher label="打开长内容对话框">
+      {(close) => (
+        <Dialog open title="服务条款" onClose={close} onConfirm={close} confirmLabel="同意">
+          {Array.from({ length: 20 }, (_, i) => (
+            <p key={i} style={{ marginBottom: 12 }}>
+              第 {i + 1} 条：这是一段条款正文，用来验证正文区在超长内容下的滚动行为与头/脚固定。
+            </p>
+          ))}
+        </Dialog>
+      )}
+    </Launcher>
+  ),
+}
+
+/** 自管间距的面板内容：padded=false 时立面不带内边距。 */
+export const Unpadded: Story = {
+  render: () => (
+    <Launcher label="打开无内边距对话框">
+      {(close) => (
+        <Dialog open width={520} padded={false} title={undefined} closable={false} ariaLabel="图片预览" onClose={close}>
+          <div className="flex flex-col">
+            <div className="h-[220px] bg-[var(--ow-surface-2)]" />
+            <div className="flex items-center justify-end gap-3 p-4 border-t border-[color:var(--ow-border)]">
+              <Button variant="secondary" onClick={close}>
+                关闭
+              </Button>
+            </div>
+          </div>
+        </Dialog>
+      )}
+    </Launcher>
+  ),
+}
+
+/** 不可关闭：无关闭钮、点遮罩与 Escape 都不退出（迁移/必答场景）。 */
+export const NotClosable: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false)
+    return (
+      <div style={{ padding: 40 }}>
+        <Button variant="secondary" onClick={() => setOpen(true)}>
+          打开不可关闭对话框
+        </Button>
+        {open && (
+          <Dialog
+            open
+            title="正在迁移旧版配置"
+            closable={false}
+            closeOnEscape={false}
+            closeOnOverlayClick={false}
+            actions={
+              <Button variant="primary" onClick={() => setOpen(false)}>
+                完成
+              </Button>
+            }
+          >
+            迁移过程中请不要关闭窗口，完成后会自动回到工作区。
+          </Dialog>
+        )}
+      </div>
+    )
+  },
+}
+
+/** 裸壳档（bare）：只出遮罩＋立面，内容自带 chrome —— OrbitworkModal 兼容层走的就是这条。 */
+export const Bare: Story = {
+  render: () => (
+    <Launcher label="打开裸壳弹窗">
+      {(close) => (
+        <Dialog open bare ariaLabel="自带 chrome 的预览壳" onClose={close}>
+          <div className="w-[520px] max-w-[86vw] flex flex-col">
+            <div className="flex items-center justify-between gap-3 h-12 px-4 border-b border-[color:var(--ow-border)]">
+              <span className="text-[color:var(--ow-text)] font-semibold text-ow-fs-ui">自带标题栏</span>
+              <Button variant="ghost" size="sm" onClick={close}>
+                关闭
+              </Button>
+            </div>
+            <div className="p-4 text-[color:var(--ow-text-2)] text-ow-fs-ui leading-[1.6]">
+              裸壳只负责遮罩、立面与焦点闭环，内部结构完全交给内容。
+            </div>
+          </div>
+        </Dialog>
+      )}
+    </Launcher>
+  ),
+}
+
+/** 画框：模拟 storybook 整屏卡的 `ScreenFrame`——`overflow:hidden` ＋ `transform` 自成包含块，
+ *  让 `portal={false}` 的遮罩（`position: fixed`）被这一格裁住，而不是铺满整个视口。 */
+function InlineFrame({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ padding: 24 }}>
+      <div
+        style={{
+          width: 720,
+          height: 420,
+          position: "relative",
+          overflow: "hidden",
+          transform: "translateZ(0)",
+          border: "1px solid var(--ow-border-strong)",
+          borderRadius: "var(--ow-radius-lg)",
+          background: "var(--ow-bg)",
+        }}
+      >
+        <div className="p-6 text-[color:var(--ow-text-3)] font-normal text-ow-fs-ui">
+          这是画框内的底屏内容；弹窗压在它上面，遮罩不外溢。
+        </div>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+/** 就地渲染档（portal={false}）：遮罩树不进 body，留在调用处的层叠上下文里。
+ *  整屏 story 拿它把弹窗拍进画框（默认 portal 到 body 时画框外拍不到）。 */
+export const Inline: Story = {
+  render: () => (
+    <InlineFrame>
+      <Dialog
+        open
+        portal={false}
+        title="就地渲染的弹窗"
+        subtitle="portal={false}：遮罩与立面都留在画框里。"
+        onClose={() => {}}
+        onConfirm={() => {}}
+        confirmLabel="知道了"
+      >
+        画框自带 overflow:hidden 与 transform，fixed 遮罩因此被裁在画框内——整屏取证走的就是这一档。
+      </Dialog>
+    </InlineFrame>
+  ),
+}
+
+/** 定尺档（fitViewport={false}）：基座不写 90vw/85vh/overflow-auto，
+ *  尺寸与滚动全交给 className —— 设置弹窗那类「立面定尺、内部分栏各自滚」的形。 */
+export const FixedSize: Story = {
+  render: () => (
+    <InlineFrame>
+      <Dialog
+        open
+        bare
+        portal={false}
+        fitViewport={false}
+        ariaLabel="定尺弹窗"
+        className="w-[560px] h-[320px] overflow-hidden flex"
+        onClose={() => {}}
+      >
+        <div className="w-[168px] flex-[0_0_auto] p-3 border-r border-[color:var(--ow-border)] bg-[var(--ow-bg)]">
+          <div className="text-[color:var(--ow-text-3)] font-medium text-ow-fs-meta leading-[1.4]">左栏定宽</div>
+        </div>
+        <div className="flex-1 min-w-0 overflow-y-auto p-4 flex flex-col gap-3">
+          {Array.from({ length: 12 }, (_, i) => (
+            <p key={i} className="text-[color:var(--ow-text-2)] font-normal text-ow-fs-ui leading-[1.6]">
+              第 {i + 1} 行：只有右栏在滚，立面自己不滚，也不被 85vh 二次压低。
+            </p>
+          ))}
+        </div>
+      </Dialog>
+    </InlineFrame>
+  ),
+}

package/src/components/composite/Dialog/DialogSource.test.mjs

@@ -0,0 +1,130 @@
+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 modalCompat = await readFile(new URL("../OrbitworkModal/index.tsx", import.meta.url), "utf8")
+const createProject = await readFile(new URL("../CreateProjectDialog/index.tsx", import.meta.url), "utf8")
+const feedbackView = await readFile(new URL("../FeedbackDialogView/index.tsx", import.meta.url), "utf8")
+const messageFeedback = await readFile(new URL("../MessageFeedbackDialog/index.tsx", import.meta.url), "utf8")
+const focusTrap = await readFile(new URL("../../../lib/focusTrap.ts", import.meta.url), "utf8")
+
+test("Dialog 立面按 §5：scrim 遮罩 + shadow-modal + 1px 边 + z-modal", () => {
+  assert.match(source, /bg-\[var\(--ow-scrim\)\]/)
+  assert.match(source, /shadow-\[var\(--ow-shadow-modal\)\]/)
+  assert.match(source, /border border-\[color:var\(--ow-border\)\]/)
+  assert.match(source, /z-\[var\(--ow-z-modal\)\]/)
+  // 模态立面底＝popover-bg（ui-elevation.html .modal 规格），不是地色 --ow-bg。
+  assert.match(source, /bg-\[var\(--ow-popover-bg\)\]/)
+  assert.doesNotMatch(source, /bg-\[var\(--ow-bg\)\]/)
+  // 反色只属 tooltip：模态不得出现反色面。
+  assert.doesNotMatch(source, /--ow-inverse|--ow-tooltip-bg/)
+})
+
+test("Dialog 圆角走 §7 的 modal 档（16），不落死值", () => {
+  assert.match(source, /\[border-radius:var\(--ow-radius-modal\)\]/)
+  assert.doesNotMatch(source, /rounded-2xl|rounded-\[16px\]/)
+})
+
+test("Dialog 动效按 §9：ease-beacon + 200/320ms 纯淡入，reduced-motion 静态入场", () => {
+  assert.match(source, /animate-\[fade-in_var\(--ow-dur-2\)_var\(--ow-ease-beacon\)\]/)
+  assert.match(source, /animate-\[fade-in_var\(--ow-dur-3\)_var\(--ow-ease-beacon\)\]/)
+  assert.match(source, /"ow-motion fixed inset-0/)
+  // 禁缩放/位移式入场。
+  assert.doesNotMatch(source, /scale\(|translateY\(|zoom-in/)
+})
+
+test("Dialog 是唯一基座：缺省 portal 到 body，自带头/体/脚三槽与裸壳档", () => {
+  assert.match(source, /createPortal\(/)
+  assert.match(source, /data-slot="dialog-overlay"/)
+  assert.match(source, /data-slot="dialog-header"/)
+  assert.match(source, /data-slot="dialog-body"/)
+  assert.match(source, /data-slot="dialog-actions"/)
+  assert.match(source, /bare\?: boolean/)
+})
+
+// R2·P3：画框内取证要弹窗留在画框里（ScreenFrame 已加 transform 做包含块），
+// 定尺弹窗（设置 960×640 ＋ 右栏内滚）要基座别写死 90vw/85vh/overflow-auto。
+test("portal 档：缺省 true，portal={false} 就地出树不调 createPortal", () => {
+  assert.match(source, /portal\?: boolean/)
+  assert.match(source, /portal = true,/)
+  // 遮罩树先落成变量，再按 portal 二选一——就地档与 portal 档同一棵树。
+  assert.match(source, /const overlay = \(/)
+  assert.match(source, /return portal \? createPortal\(overlay, document\.body\) : overlay/)
+  // SSR 保护只拦 portal 档，就地档照常出树。
+  assert.match(source, /if \(portal && typeof document === "undefined"\) return null/)
+})
+
+test("fitViewport 档：缺省 true 钉进视口，false 时 90vw/85vh/overflow-auto 一概不写", () => {
+  assert.match(source, /fitViewport\?: boolean/)
+  assert.match(source, /fitViewport = true,/)
+  assert.match(source, /fitViewport && "max-w-\[90vw\] max-h-\[85vh\]"/)
+  assert.match(source, /bare \? fitViewport && "overflow-auto" : "flex flex-col overflow-hidden"/)
+  // 上限不得再无条件挂在基类串上。
+  assert.doesNotMatch(source, /"relative max-w-\[90vw\]/)
+})
+
+test("danger 变体 = error tint 图标徽章 + error 主按钮（R1 双编码：图标 + 文案）", () => {
+  assert.match(source, /export type DialogVariant = "default" \| "danger"/)
+  assert.match(source, /error: "bg-\[var\(--ow-error-tint\)\] text-\[color:var\(--ow-error-on-tint\)\]"/)
+  assert.match(source, /variant === "danger" \? <WarningTriangle/)
+  assert.match(source, /variant === "danger" \? "danger" : "primary"/)
+})
+
+test("Escape 与焦点圈闭环：keydown 捕获、Tab 回绕、关闭还焦", () => {
+  assert.match(source, /event\.key === "Escape"/)
+  assert.match(source, /event\.key !== "Tab"/)
+  assert.match(source, /addEventListener\("keydown", onKeyDown, true\)/)
+  assert.match(source, /restoreRef\.current\?\.focus\?\.\(\)/)
+  assert.match(source, /aria-modal/)
+  // 入场焦点的指定口：[autofocus] 之外还认 [data-autofocus]——React 的 autoFocus prop 不落 DOM 属性、
+  // 且在 commit 阶段就抢焦，会把还焦目标记成立面内的元素；消费方（如设置弹窗的当前段项）走 data-autofocus。
+  assert.match(source, /querySelector<HTMLElement>\("\[autofocus\],\[data-autofocus\]"\)/)
+  // 圈闭环的候选名单剔除 tabindex="-1"（roving-tabindex 组里的非选中项不是 Tab 停靠点，
+  // 否则组若是立面最后一个控件，Tab 会从真正的末位漏到 body）。
+  assert.match(focusTrap, /node\.tabIndex >= 0 && node\.offsetParent !== null/)
+})
+
+test("R3 中性件：模态基座不含信标/荧黄", () => {
+  assert.doesNotMatch(source, /--ow-beacon|--ow-yellow|--ow-accent-dot/)
+})
+
+test("任意值 var() 全部带类型标注（防 tailwind-merge 吞类）", () => {
+  for (const file of [source, modalCompat, createProject, feedbackView, messageFeedback]) {
+    assert.doesNotMatch(file, /(?:text|border)-\[var\(--ow-/)
+    assert.doesNotMatch(file, /font-\[var\(--ow-font-/)
+  }
+})
+
+test("OrbitworkModal 降为薄兼容导出，等价 <Dialog bare>", () => {
+  assert.match(modalCompat, /@deprecated/)
+  assert.match(modalCompat, /<Dialog bare/)
+  // 自建 overlay/scrim/z 逻辑必须已删干净。
+  assert.doesNotMatch(modalCompat, /createPortal|--ow-z-modal|fixed inset-0/)
+})
+
+test("三件自建 overlay 已换 Dialog 基座，overlay/scrim/z 逻辑删除", () => {
+  for (const file of [createProject, feedbackView, messageFeedback]) {
+    assert.match(file, /<Dialog/)
+    assert.doesNotMatch(file, /createPortal/)
+    assert.doesNotMatch(file, /--ow-z-modal|ow-modal-host|bg-ow-bg-overlay|--ow-scrim/)
+    assert.doesNotMatch(file, /fixed inset-0/)
+  }
+})
+
+test("MessageFeedbackDialog 选中态走无彩极色 control-on，不借行动极 primary", () => {
+  assert.match(messageFeedback, /bg-\[var\(--ow-control-on\)\]/)
+  assert.match(messageFeedback, /text-\[color:var\(--ow-control-on-glyph\)\]/)
+  // R1：颜色之外另有勾形。
+  assert.match(messageFeedback, /icon=\{on \? <Check/)
+  assert.match(messageFeedback, /aria-pressed=\{on\}/)
+})
+
+// W5 移交项①：§7 形状表里 999 只留给带状态点/计数的 chip 与真圆件。
+// 头部图标徽章原是 w-8 h-8 的 999 圆片，与页头图标钮同口径收到 8px 行动档。
+test("Dialog 头部件形状归 §7：图标徽章 8px，关闭钮走 Button 行动档，无 999 残留", () => {
+  assert.match(source, /w-8 h-8 \[border-radius:var\(--ow-radius-action\)\]/)
+  assert.doesNotMatch(source, /--ow-radius-pill|rounded-full/)
+  // 关闭钮不自绘度量：ghost + size="md" 由 Button 给 32 高 / 8 角 / 焦点环三件套。
+  assert.match(source, /data-ow-part="close"[\s\S]{0,120}?icon=\{<Close \/>\}/)
+})