@orbit-work/ui 0.1.0

package/src/components/composite/TitleBar/TitleBarSource.test.mjs

@@ -0,0 +1,140 @@
+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")
+
+test("TitleBar 高 48 走 --ow-titlebar-h，贴地无影", () => {
+  assert.match(source, /h-\[var\(--ow-titlebar-h\)\]/)
+  assert.match(source, /min-h-\[var\(--ow-titlebar-h\)\]/)
+  assert.match(source, /shadow-none/)
+  assert.doesNotMatch(source, /shadow-\[var\(--ow-shadow/)
+  assert.doesNotMatch(source, /\bh-12\b|48px/)
+})
+
+test("默认档＝与地同色、无分隔线（屏级判断表「窗口带」）；分隔线是 opt-in 变体", () => {
+  // 基类：地色，且不带底边
+  const base = source.slice(source.indexOf("const titleBarVariants"), source.indexOf("variants: {"))
+  assert.match(base, /bg-ow-bg/)
+  assert.doesNotMatch(base, /bg-ow-surface/)
+  assert.doesNotMatch(base, /border-b/)
+  // divided 变体存在、默认关
+  assert.match(source, /divided: \{\s*\n\s*true: "border-b border-\[color:var\(--ow-border\)\]"/)
+  assert.match(source, /defaultVariants: \{ platform: "web", transparent: false, divided: false \}/)
+  assert.match(source, /titleBarVariants\(\{ platform, transparent, divided \}\)/)
+})
+
+test("窗口带内距与间距全部 token 化（A10-B2：原型 657 padding 0 8 / gap 4）", () => {
+  const base = source.slice(source.indexOf("const titleBarVariants"), source.indexOf("variants: {"))
+  assert.match(base, /gap-\[var\(--ow-titlebar-gap\)\]/)
+  assert.match(base, /px-\[var\(--ow-titlebar-pad-x\)\]/)
+  // 不留任何硬编码内距/间距刻度类
+  assert.doesNotMatch(base, /(?<![-\w])(?:px|gap)-\d/)
+  // chrome 槽不再用负外边距外溢，右沿贴带内距
+  assert.doesNotMatch(source, /-mr-\d/)
+})
+
+test("mac 让位是 aria-hidden 让位块（不是 padding），全屏收 0", () => {
+  // platform 变体只切「带内有什么」，不再靠 padding 位移
+  assert.doesNotMatch(source, /mac: "pl-/)
+  assert.match(source, /const showTrafficInset = platform === "mac" && !fullscreen/)
+  assert.match(source, /data-slot="title-bar-traffic-inset"/)
+  assert.match(source, /aria-hidden="true"\n\s+data-slot="title-bar-traffic-inset"/)
+  assert.match(source, /w-\[var\(--ow-traffic-inset\)\] h-full flex-shrink-0/)
+  // 并轨掉了原先无定义的 --ow-titlebar-inset-mac
+  assert.doesNotMatch(source, /--ow-titlebar-inset-mac/)
+})
+
+test("平台是受控 prop，库侧不嗅探 userAgent", () => {
+  assert.match(source, /export type TitleBarPlatform = "mac" \| "windows" \| "linux" \| "web"/)
+  assert.match(source, /platform = "web"/)
+  assert.doesNotMatch(source, /navigator\.(?:userAgent|platform|userAgentData)/)
+})
+
+test("折叠钮预制件：28×28 / radius-xs / 透明底 / text-2，hover 地面档，图标 18 档", () => {
+  const btn = source.slice(
+    source.indexOf("export function SidebarToggle"),
+    source.indexOf("/* ---------------- WindowChrome"),
+  )
+  assert.match(btn, /w-7 h-7/)
+  assert.match(btn, /\[border-radius:var\(--ow-radius-xs\)\]/)
+  assert.match(btn, /bg-transparent text-\[color:var\(--ow-text-2\)\]/)
+  assert.match(btn, /hover:bg-\[var\(--ow-hover\)\] hover:text-\[color:var\(--ow-text\)\]/)
+  assert.match(btn, /active:bg-\[var\(--ow-press\)\]/)
+  assert.match(btn, /<PanelSidebar width=\{18\} height=\{18\} aria-hidden="true" \/>/)
+  // 立面不随折叠态变：无边、无影、无第二套尺寸
+  assert.match(btn, /border-0/)
+  assert.doesNotMatch(btn, /shadow-|border border-|w-8|h-8/)
+  // 文案照原型 661
+  assert.match(btn, /aria-label="收起或展开侧栏"/)
+  assert.match(btn, /title="收起 \/ 展开侧栏"/)
+  assert.match(btn, /aria-expanded=\{!collapsed\}/)
+})
+
+test("折叠钮由带承载：传 onToggle 即排在 leading 槽最前（裁决 11 的固定位机制）", () => {
+  assert.match(source, /\{onToggle && <SidebarToggle collapsed=\{collapsed\} onToggle=\{onToggle\} \/>\}/)
+  assert.match(source, /const hasLeading = onToggle != null \|\| leading != null/)
+})
+
+test("WindowBand 别名与 TitleBar 同件（导出名两留）", () => {
+  assert.match(source, /export const WindowBand = TitleBar/)
+  assert.match(source, /export type WindowBandProps = TitleBarProps/)
+  assert.match(source, /export type WindowBandPlatform = TitleBarPlatform/)
+})
+
+test("整条是拖拽区，可点区域反注 no-drag；中段 flex-1 留给拖拽", () => {
+  assert.match(source, /const DRAG = "\[-webkit-app-region:drag\]"/)
+  assert.match(source, /const NO_DRAG = "\[-webkit-app-region:no-drag\]"/)
+  // leading / actions / chrome 三个可点插槽 + 折叠钮 + WindowChrome 容器 + 控制键 = 6 处
+  assert.ok((source.match(/NO_DRAG/g) ?? []).length >= 7)
+  assert.match(source, /data-slot="title-bar-title" className="flex items-baseline gap-2 min-w-0 flex-1"/)
+})
+
+test("表面与交互底色按 §5：地色底 + 地面档 hover/press，非弹层档", () => {
+  assert.match(source, /bg-ow-bg/)
+  assert.match(source, /hover:bg-\[var\(--ow-hover\)\]/)
+  assert.match(source, /active:bg-\[var\(--ow-press\)\]/)
+  assert.doesNotMatch(source, /--ow-hover-pop|--ow-press-pop/)
+})
+
+test("WindowChrome 三键状态完整：hover/press/focus-visible/aria", () => {
+  assert.match(source, /ow-focus-ring/)
+  assert.match(source, /aria-label="最小化"/)
+  assert.match(source, /aria-label=\{maximized \? "还原窗口" : "最大化"\}/)
+  assert.match(source, /aria-label="关闭"/)
+  assert.match(source, /aria-pressed=\{maximized\}/)
+  assert.match(source, /data-slot="window-chrome-control"/)
+})
+
+test("窗口三键宽并轨 --ow-winctl-w（44，原型 667–669）、高满带", () => {
+  assert.match(source, /w-\[var\(--ow-winctl-w\)\] h-full/)
+  assert.doesNotMatch(source, /w-\[46px\]/)
+})
+
+test("关闭键用功能色族实色，不是 tooltip 反色", () => {
+  assert.match(source, /hover:bg-\[var\(--ow-error-fill\)\]/)
+  // 实色面前景走 --ow-on-fill：--ow-error-fg 在暗色下是 navy，压在同一支红上对比不足
+  assert.match(source, /hover:text-\[color:var\(--ow-on-fill\)\]/)
+  assert.doesNotMatch(source, /--ow-inverse|--ow-tooltip/)
+})
+
+test("动效只用 ease-beacon + 120ms 档；无位移/缩放 hover", () => {
+  assert.match(source, /duration-\[var\(--ow-dur-1\)\] ease-\[var\(--ow-ease-beacon\)\]/)
+  assert.doesNotMatch(source, new RegExp(["hover:", "(?:scale|translate)-"].join("")))
+  assert.doesNotMatch(source, /cubic-bezier/)
+})
+
+test("中性件：禁信标/荧黄（R3）", () => {
+  assert.doesNotMatch(source, /--ow-yellow|--ow-beacon|--ow-accent-dot/)
+})
+
+test("窗口控制字形按 §7 图标规范：24 网格 / 1.75 描边 / round", () => {
+  assert.match(source, /viewBox="0 0 24 24"/)
+  assert.ok((source.match(/strokeWidth="1\.75"/g) ?? []).length >= 4)
+  assert.doesNotMatch(source, /strokeWidth="1\.25"/)
+})
+
+test("Tailwind 任意值 var() 带类型标注（防 tailwind-merge 吞类）", () => {
+  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
+  assert.doesNotMatch(source, /font-\[var\(--ow-font-/)
+})

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

@@ -0,0 +1,350 @@
+"use client"
+
+import { cva } from "class-variance-authority"
+import type { ReactNode } from "react"
+import { cn } from "../../../lib/utils"
+import { Close, type IconProps, PanelSidebar } from "../Icons"
+
+/**
+ * TitleBar / WindowBand / WindowChrome — 跨平台窗口带（DS 2.0 模式层）
+ *
+ * 规格（COMPONENT-RULES §5/§7/§9 + 原型模板 655–672，裁决 11 / K1 · R2 改判）：
+ * - **通栏带只属 windows**（R2 · Terry 2026-09-03 第 1 条）：那边 `frame:false`、三键必须由
+ *   App 自绘，所以留一条 48 通栏带、折叠钮住在带里。mac 有系统红绿灯、linux 有系统边框、
+ *   web 没有窗口条 —— 三者不出带，折叠钮改住**侧栏顶行**（`Layout/SidebarShell` 的
+ *   `data-slot="sidebar-toprow"`，同高 48、同内距 8、同 gap 4、同让位块），两处共用本文件
+ *   下方的 `SidebarToggle` 预制件，坐标口径一字不差（mac 80 / windows·linux·web 8）。
+ *   本件仍保留 mac / linux / web 三档：页内详情头（`DetailScaffold`）与历史档 story 还在用。
+ * - 带的几何：高 `var(--ow-titlebar-h)`（48），`flex / items-center`，
+ *   间距 `var(--ow-titlebar-gap)`（4），内距 `0 var(--ow-titlebar-pad-x)`（8）。
+ * - 底色 `--ow-bg`，**与地同色、无分隔线**，贴地无影（§5 影子只属离地之物）。需要分隔线的
+ *   场景（详情页头与正文同面时）显式传 `divided`，坐在面板上时再叠 `transparent`。
+ * - **折叠钮的坐标恒定**是「钮的容器宽度与侧栏折叠无关」给的：windows 上容器是这条通栏带；
+ *   其余平台是侧栏顶行——顶行自身宽度随 rail 变，但左内距 ＋ 让位块 ＋ gap 三段不变，
+ *   钮的左沿因此照旧。传 `onToggle` 即在 leading 槽最前渲染预制折叠钮。
+ * - mac：最左一个 `aria-hidden` 让位块，宽 `var(--ow-traffic-inset)`（68），**是块不是 padding**
+ *   ——只有用块，带的 gap 才参与，钮才落在 8+68+4 = 80。全屏（`fullscreen`）红绿灯消失，
+ *   让位块收 0，钮回到 8。
+ * - windows：无让位块，折叠钮直接吃左内距落在 8；最右 `WindowChrome` 三键各
+ *   `var(--ow-winctl-w)`（44）× 满高，右沿贴 8 内距（不外溢到窗口边）。
+ *   linux 不再出三键（系统边框自带），`DesktopWorkbenchShell` / 整屏画框都只给 windows 挂 chrome。
+ * - **带内不放品牌 logo**：lockup 始终在侧栏首行（原型 682–684）。
+ * - 中段（title 槽）`flex-1` 即拖拽区（`-webkit-app-region: drag`），所有可点元素反注 no-drag。
+ * - 条内交互底色走地面档 `--ow-hover`/`--ow-press`（标题栏不是弹层）。
+ * - 中性件（§R3）：不引信标/荧黄，不做位移式 hover。
+ * - 平台是**受控 prop**（`platform`），权威值由主进程注入，库侧不嗅探 userAgent。
+ */
+
+/** 拖拽区/静区：Electron 的 -webkit-app-region 无 Tailwind 工具类，用任意属性写。 */
+const DRAG = "[-webkit-app-region:drag]"
+const NO_DRAG = "[-webkit-app-region:no-drag]"
+
+const titleBarVariants = cva(
+  [
+    "flex items-center w-full flex-shrink-0 select-none",
+    "gap-[var(--ow-titlebar-gap)] px-[var(--ow-titlebar-pad-x)]",
+    "h-[var(--ow-titlebar-h)] min-h-[var(--ow-titlebar-h)]",
+    "bg-ow-bg text-[color:var(--ow-text)]",
+    // 贴地 = 0 影（§5）；分隔线不是默认档，见 divided 变体
+    "shadow-none",
+    DRAG,
+  ].join(" "),
+  {
+    variants: {
+      /**
+       * 平台只切「带内有什么」：mac 出让位块、windows/linux 右端出 WindowChrome。
+       * 带本身两平台同形，不靠 padding 位移（让位块见 trafficInset）。
+       */
+      platform: {
+        mac: "",
+        windows: "",
+        linux: "",
+        web: "",
+      },
+      /** 透明标题栏：坐在内容自身底色上（详情页头部与正文同面时用）。 */
+      transparent: {
+        true: "bg-transparent",
+        false: "",
+      },
+      /** 分隔线（opt-in）：通栏 1px `--ow-border` 底边。窗口带默认无线，页内头部需要时才开。 */
+      divided: {
+        true: "border-b border-[color:var(--ow-border)]",
+        false: "",
+      },
+    },
+    defaultVariants: { platform: "web", transparent: false, divided: false },
+  },
+)
+
+export type TitleBarPlatform = "mac" | "windows" | "linux" | "web"
+
+export interface TitleBarProps {
+  /** 标题文字（居中偏左，单行截断）。传 children 时可省。 */
+  title?: ReactNode
+  /** 副标题 / 面包屑尾段，text-3 */
+  subtitle?: ReactNode
+  /** 标题左侧插槽：返回钮、图标；传 onToggle 时预制折叠钮排在本槽最前 */
+  leading?: ReactNode
+  /** 右侧动作区插槽 */
+  actions?: ReactNode
+  /** 窗口控制区插槽（一般传 <WindowChrome />，仅 windows/linux 用） */
+  chrome?: ReactNode
+  /** 平台（受控，权威值来自主进程），决定 mac 让位块与右端三键归属 */
+  platform?: TitleBarPlatform
+  /** mac 全屏：红绿灯隐藏，让位块收 0，折叠钮回到左内距 */
+  fullscreen?: boolean
+  /** 侧栏是否已折叠（受控）。仅改按钮的 aria/title 语义，不改其坐标。 */
+  collapsed?: boolean
+  /** 折叠钮回调；给出即在 leading 槽最前渲染预制折叠钮 */
+  onToggle?: () => void
+  /** 透明底（与正文同面时） */
+  transparent?: boolean
+  /** 开分隔线：通栏 1px 底边。默认关（窗口带与地同色、无线）。 */
+  divided?: boolean
+  /** 自定义中部内容，给出时覆盖 title/subtitle */
+  children?: ReactNode
+  className?: string
+}
+
+export function TitleBar({
+  title,
+  subtitle,
+  leading,
+  actions,
+  chrome,
+  platform = "web",
+  fullscreen = false,
+  collapsed = false,
+  onToggle,
+  transparent = false,
+  divided = false,
+  children,
+  className,
+}: TitleBarProps) {
+  /* mac 让位块：宽 --ow-traffic-inset 的空块（非 padding），全屏时收 0 —— 原型 658–660。 */
+  const showTrafficInset = platform === "mac" && !fullscreen
+  const hasLeading = onToggle != null || leading != null
+  return (
+    <header
+      data-slot="title-bar"
+      data-ow-platform={platform}
+      data-ow-fullscreen={fullscreen ? "" : undefined}
+      className={cn(titleBarVariants({ platform, transparent, divided }), className)}
+    >
+      {showTrafficInset && (
+        <div
+          aria-hidden="true"
+          data-slot="title-bar-traffic-inset"
+          className="w-[var(--ow-traffic-inset)] h-full flex-shrink-0"
+        />
+      )}
+      {hasLeading && (
+        <div
+          data-slot="title-bar-leading"
+          className={cn("flex items-center gap-[var(--ow-titlebar-gap)] flex-shrink-0", NO_DRAG)}
+        >
+          {onToggle && <SidebarToggle collapsed={collapsed} onToggle={onToggle} />}
+          {leading}
+        </div>
+      )}
+      {/* 中段即拖拽区：不注 no-drag，flex-1 吃掉带内余量 */}
+      <div data-slot="title-bar-title" className="flex items-baseline gap-2 min-w-0 flex-1">
+        {children ?? (
+          <>
+            {title != null && (
+              <span className="truncate text-ow-fs-ui font-medium text-[color:var(--ow-text)]">{title}</span>
+            )}
+            {subtitle != null && (
+              <span className="truncate text-ow-fs-ui text-[color:var(--ow-text-3)]">{subtitle}</span>
+            )}
+          </>
+        )}
+      </div>
+      {actions && (
+        <div
+          data-slot="title-bar-actions"
+          className={cn("flex items-center gap-[var(--ow-titlebar-gap)] flex-shrink-0", NO_DRAG)}
+        >
+          {actions}
+        </div>
+      )}
+      {chrome && (
+        <div data-slot="title-bar-chrome" className={cn("flex items-center flex-shrink-0 self-stretch", NO_DRAG)}>
+          {chrome}
+        </div>
+      )}
+    </header>
+  )
+}
+
+/** WindowBand — 跨平台窗口带的语义别名（同一件，原型口径的叫法）。 */
+export const WindowBand = TitleBar
+export type WindowBandProps = TitleBarProps
+export type WindowBandPlatform = TitleBarPlatform
+
+/* ---------------- SidebarToggle（折叠钮预制件） ---------------- */
+
+export interface SidebarToggleProps {
+  /** 侧栏是否已折叠（受控）。只改语义，不改坐标。 */
+  collapsed?: boolean
+  onToggle?: () => void
+  className?: string
+}
+
+/**
+ * SidebarToggle — 侧栏折叠钮预制件（原型 661–663）。**两处共用同一枚**：windows 在通栏带的
+ * leading 槽里，mac/linux/web 在 `Layout/SidebarShell` 的顶行里。不许复制第二份实现。
+ * 28×28 / `--ow-radius-xs` / 透明底 / `--ow-text-2`；hover 走地面档 `--ow-hover` + `--ow-text`，
+ * active `--ow-press`；图标 PanelSidebar 18 档（24 网格 1.75 描边，§7）。
+ * 折叠与展开是**同一个按钮同一处坐标**，不换件、不换尺寸、不换立面。
+ */
+export function SidebarToggle({ collapsed = false, onToggle, className }: SidebarToggleProps) {
+  return (
+    <button
+      type="button"
+      data-slot="sidebar-toggle"
+      data-ow-collapsed={collapsed ? "" : undefined}
+      aria-label="收起或展开侧栏"
+      aria-expanded={!collapsed}
+      title="收起 / 展开侧栏"
+      onClick={onToggle}
+      className={cn(
+        "inline-grid place-items-center flex-shrink-0 w-7 h-7 p-0 border-0 cursor-pointer",
+        "[border-radius:var(--ow-radius-xs)] bg-transparent text-[color:var(--ow-text-2)]",
+        "transition-colors duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+        "hover:bg-[var(--ow-hover)] hover:text-[color:var(--ow-text)]",
+        "active:bg-[var(--ow-press)]",
+        "ow-focus-ring",
+        NO_DRAG,
+        className,
+      )}
+    >
+      <PanelSidebar width={18} height={18} aria-hidden="true" />
+    </button>
+  )
+}
+
+/* ---------------- WindowChrome ---------------- */
+
+/** 窗口控制字形：24 网格 / 1.75 描边 / round 线端（§7），16px 档渲染。 */
+const WinMinimize = (p: IconProps) => (
+  <svg viewBox="0 0 24 24" fill="none" {...p}>
+    <path d="M5 12H19" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
+  </svg>
+)
+const WinMaximize = (p: IconProps) => (
+  <svg viewBox="0 0 24 24" fill="none" {...p}>
+    <rect x="5" y="5" width="14" height="14" rx="2" stroke="currentColor" strokeWidth="1.75" strokeLinejoin="round" />
+  </svg>
+)
+const WinRestore = (p: IconProps) => (
+  <svg viewBox="0 0 24 24" fill="none" {...p}>
+    <rect x="4" y="8" width="12" height="12" rx="2" stroke="currentColor" strokeWidth="1.75" strokeLinejoin="round" />
+    <path
+      d="M8 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V16"
+      stroke="currentColor"
+      strokeWidth="1.75"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+const chromeButtonVariants = cva(
+  [
+    "inline-flex items-center justify-center flex-shrink-0",
+    // 命中区铺满带高；宽走 --ow-winctl-w（44，原型 667–669）
+    "w-[var(--ow-winctl-w)] h-full p-0 border-0 bg-transparent cursor-default",
+    "text-[color:var(--ow-text-3)]",
+    "transition-colors duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+    "ow-focus-ring",
+    NO_DRAG,
+  ].join(" "),
+  {
+    variants: {
+      /*
+       * hover/press 两档整套落在 danger 变体里，不放基类：两套 hover:bg 同挂一个元素时
+       * 胜负由生成的 CSS 顺序决定（实测基类的 --ow-hover 压掉了关闭键的红底），
+       * 拆成互斥变体后才只剩一条规则。
+       */
+      danger: {
+        /* 关闭键沿用平台约定的实色告警底；字色走实色面通用前景 --ow-on-fill
+           （--ow-error-fg 在暗色下是 navy，压在同一支红上对比只有 2.7:1）。 */
+        true: "hover:bg-[var(--ow-error-fill)] hover:text-[color:var(--ow-on-fill)] active:bg-[var(--ow-error-hover)]",
+        /* 地面档递进（§5）：标题栏不是弹层 */
+        false: "hover:bg-[var(--ow-hover)] hover:text-[color:var(--ow-text)] active:bg-[var(--ow-press)]",
+      },
+    },
+    defaultVariants: { danger: false },
+  },
+)
+
+export interface WindowChromeProps {
+  onMinimize?: () => void
+  onToggleMaximize?: () => void
+  onClose?: () => void
+  /** 已最大化：最大化键换成还原字形 */
+  maximized?: boolean
+  /** 隐藏最小化 / 最大化（如固定尺寸窗口） */
+  hideMinimize?: boolean
+  hideMaximize?: boolean
+  className?: string
+}
+
+/**
+ * WindowChrome — Windows 侧窗口控制三键（最小化 / 最大化-还原 / 关闭）。
+ * 每键 `var(--ow-winctl-w)`（44）× 满带高；macOS 由系统红绿灯承担（`platform="mac"` 出让位块），
+ * linux 由系统边框承担 —— R2 起两者都不挂本件。
+ */
+export function WindowChrome({
+  onMinimize,
+  onToggleMaximize,
+  onClose,
+  maximized = false,
+  hideMinimize = false,
+  hideMaximize = false,
+  className,
+}: WindowChromeProps) {
+  return (
+    <div data-slot="window-chrome" className={cn("flex items-stretch h-[var(--ow-titlebar-h)]", NO_DRAG, className)}>
+      {!hideMinimize && (
+        <button
+          type="button"
+          data-slot="window-chrome-control"
+          data-ow-action="minimize"
+          aria-label="最小化"
+          className={chromeButtonVariants()}
+          onClick={onMinimize}
+        >
+          <WinMinimize width={16} height={16} aria-hidden="true" />
+        </button>
+      )}
+      {!hideMaximize && (
+        <button
+          type="button"
+          data-slot="window-chrome-control"
+          data-ow-action="maximize"
+          aria-label={maximized ? "还原窗口" : "最大化"}
+          aria-pressed={maximized}
+          className={chromeButtonVariants()}
+          onClick={onToggleMaximize}
+        >
+          {maximized ? (
+            <WinRestore width={16} height={16} aria-hidden="true" />
+          ) : (
+            <WinMaximize width={16} height={16} aria-hidden="true" />
+          )}
+        </button>
+      )}
+      <button
+        type="button"
+        data-slot="window-chrome-control"
+        data-ow-action="close"
+        aria-label="关闭"
+        className={chromeButtonVariants({ danger: true })}
+        onClick={onClose}
+      >
+        <Close width={16} height={16} aria-hidden="true" />
+      </button>
+    </div>
+  )
+}