@orbit-work/ui 0.1.2-preview.0 → 0.1.3

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

@@ -1,140 +0,0 @@
-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

@@ -1,350 +0,0 @@
-"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>
-  )
-}