@orbit-work/ui 0.1.0

package/src/components/composite/CodePreview/CodePreviewSource.test.mjs

@@ -0,0 +1,43 @@
+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/components.css", import.meta.url), "utf8")
+const codeBlock = await readFile(new URL("../CodeBlock/index.tsx", import.meta.url), "utf8")
+const codeDiff = await readFile(new URL("../CodeDiff/index.tsx", import.meta.url), "utf8")
+
+test("code preview fills a growing parent without clipping long code", () => {
+  // 滚动轨：flex-1 + min-h-0 才能在 flex 列里真收缩；代码块自身 flex:1 0 auto 保持自然高度。
+  assert.match(source, /const CODE_AREA_CLASS = "flex-1 min-h-0 flex flex-col overflow-auto"/)
+  assert.match(source, /const DIFF_AREA_CLASS = "flex-1 min-h-0 overflow-auto"/)
+  assert.match(styles, /\[data-slot="code-preview"\] \[data-ow-part="code"\] \{[^}]*flex: 1 0 auto;[^}]*\}/s)
+  assert.doesNotMatch(styles, /\[data-slot="code-preview"\] \[data-ow-part="code"\] \{[^}]*height:\s*100%;/s)
+})
+
+test("code preview shell carries the grounded face, not inline style constants", () => {
+  // 内联 CSSProperties 常量壳已退役，全部走 token 类。
+  assert.doesNotMatch(source, /CSSProperties/)
+  assert.doesNotMatch(source, /style=\{/)
+  // §5 贴地：1px --ow-border + 代码井底，零影；§7 圆角落 --ow-radius-sm（表内 8）。
+  assert.match(source, /border border-ow-border/)
+  assert.match(source, /bg-\[color:var\(--ow-code-bg\)\]/)
+  assert.match(source, /\[border-radius:var\(--ow-radius-sm\)\]/)
+  assert.doesNotMatch(source, /shadow/)
+})
+
+test("nested code faces give up their own edge to the preview shell", () => {
+  assert.match(
+    styles,
+    /\[data-slot="code-preview"\] \[data-slot="code-block"\],\s*\[data-slot="code-preview"\] \[data-slot="code-diff"\] \{[^}]*border-radius: 0;[^}]*border: 0;[^}]*\}/s,
+  )
+  assert.match(styles, /\[data-slot="code-preview"\] \[data-slot="code-diff"\] \{ margin: 0; \}/)
+})
+
+// R2 终扫：读数 tabular-nums 是两张代码面自己的责任，不能由预览壳代劳——
+// 否则独立用的 CodeBlock（Markdown 里、聊天里）行号就没有 tabular-nums。
+test("readouts are mono + tabular in the code faces themselves, not patched by the shell", () => {
+  assert.doesNotMatch(styles, /\[data-slot="code-preview"\][^\n]*pre \{ font-variant-numeric/)
+  assert.match(codeBlock, /fontVariantNumeric: "tabular-nums"/)
+  assert.match(codeDiff, /tabular-nums/)
+})

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

@@ -0,0 +1,98 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { cn } from "../../../lib/utils"
+import { CodeBlock } from "../CodeBlock"
+import { CodeDiff } from "../CodeDiff"
+
+// ── Types ────────────────────────────────────────────────────────────
+
+export type CodePreviewProps = {
+  /** 编程语言 */
+  language?: string
+  /** 源码内容 */
+  code?: string
+  /** Unified diff 字符串 */
+  diff?: string
+  /** 是否显示行号 */
+  showLineNumbers?: boolean
+  /** 自定义类名 */
+  className?: string
+  /** 子内容（覆盖 code/diff，支持自定义布局） */
+  children?: ReactNode
+}
+
+// ── Recipe classes ───────────────────────────────────────────────────
+
+/**
+ * 预览壳立面（§5 贴地档）：0 影 ＋ 1px `--ow-border` ＋ 代码井底 `--ow-code-bg`；
+ * §7 圆角 8（`--ow-radius-sm`，与 CodeBlock/CodeDiff 同档，表内）。
+ * 内嵌 CodeBlock / CodeDiff 的边与角由 styles/components.css 在 code-preview 作用域内清零
+ * ——「一件事只有一层边」，边归外壳。
+ * 宿主框（.artifact-sidebar--normal / .browser-file-preview__content）继续用非 layer 规则
+ * 把这层边角清掉做满幅内嵌，Tailwind utilities 在 layer 内，不会反压宿主。
+ */
+const SHELL_CLASS =
+  "flex flex-col h-full min-w-0 overflow-hidden bg-[color:var(--ow-code-bg)] border border-ow-border [border-radius:var(--ow-radius-sm)]"
+
+/** 源码区＝可滚纵向轨；min-h-0 让它在 flex 列里真正收缩而不是把壳撑高。 */
+const CODE_AREA_CLASS = "flex-1 min-h-0 flex flex-col overflow-auto"
+
+/** diff 区同轨；diff 自带横向溢出条，纵向交给这层。 */
+const DIFF_AREA_CLASS = "flex-1 min-h-0 overflow-auto"
+
+// ── Component ────────────────────────────────────────────────────────
+
+/**
+ * Code file preview with source display and diff changes.
+ * Renders pure code and diff content without decorative chrome.
+ *
+ * @example
+ * ```tsx
+ * <CodePreview
+ *   language="typescript"
+ *   code={sourceCode}
+ *   diff={unifiedDiff}
+ * />
+ * ```
+ */
+export function CodePreview({
+  language = "text",
+  code,
+  diff,
+  showLineNumbers = true,
+  className = "",
+  children,
+}: CodePreviewProps) {
+  // 如果传了 children，直接渲染自定义内容
+  if (children) {
+    return (
+      <div data-slot="code-preview" data-ow-part="surface" className={cn(SHELL_CLASS, className)}>
+        {children}
+      </div>
+    )
+  }
+
+  return (
+    <div data-slot="code-preview" data-ow-part="surface" className={cn(SHELL_CLASS, className)}>
+      {/* Source code section */}
+      {code && (
+        <div data-ow-part="code-area" className={CODE_AREA_CLASS}>
+          <CodeBlock language={language} showLineNumbers={showLineNumbers} data-ow-part="code">
+            {code}
+          </CodeBlock>
+        </div>
+      )}
+
+      {/* Diff section —— CodeDiff 自带 data-ow-part="surface"（在 rest 之后），壳层透传进不去，
+          所以 diff 的钩子挂在轨道层，CSS 用 [data-slot="code-diff"] 定位。 */}
+      {diff && (
+        <div data-ow-part="diff-area" className={DIFF_AREA_CLASS}>
+          <CodeDiff language={language} showLineNumbers={showLineNumbers}>
+            {diff}
+          </CodeDiff>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Bolt, Clock, Doc, Plus, Settings, Share } from "../Icons"
+import { CommandPalette, type CommandPaletteGroup } from "./index"
+
+const meta = {
+  title: "Composite/CommandPalette",
+  component: CommandPalette,
+  parameters: { layout: "fullscreen" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof CommandPalette>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const groups: CommandPaletteGroup[] = [
+  {
+    id: "session",
+    title: "会话",
+    items: [
+      { id: "new", label: "新建会话", icon: <Plus />, keys: ["Ctrl", "N"], keywords: ["new", "chat"] },
+      { id: "share", label: "分享当前会话", icon: <Share />, description: "生成只读链接" },
+      { id: "artifact", label: "打开最近的产物", icon: <Doc />, description: "季度复盘.md" },
+    ],
+  },
+  {
+    id: "agent",
+    title: "智能体",
+    items: [
+      { id: "run", label: "运行代码审查", icon: <Bolt />, keys: ["Ctrl", "R"] },
+      { id: "schedule", label: "新建定时任务", icon: <Clock /> },
+      { id: "mcp", label: "连接 MCP 服务", icon: <Bolt />, description: "需要先登录", disabled: true },
+    ],
+  },
+  {
+    id: "app",
+    title: "应用",
+    items: [{ id: "settings", label: "打开设置", icon: <Settings />, keys: ["Ctrl", ","] }],
+  },
+]
+
+export const Default: Story = {
+  args: { open: true, groups },
+}
+
+export const WithQuery: Story = {
+  name: "有搜索词",
+  args: { open: true, groups, query: "会话" },
+}
+
+export const NoResult: Story = {
+  name: "无结果",
+  args: { open: true, groups, query: "不存在的命令" },
+}
+
+export const Flat: Story = {
+  name: "不分组",
+  args: {
+    open: true,
+    groups: [{ id: "all", items: groups.flatMap((group) => group.items) }],
+  },
+}
+
+export const WithFooter: Story = {
+  name: "带底栏附注",
+  args: { open: true, groups, footer: "共 7 条命令" },
+}
+
+export const Closed: Story = {
+  name: "关闭态（不渲染）",
+  args: { open: false, groups },
+}
+
+export const DualTheme: Story = {
+  name: "双主题对照",
+  render: () => (
+    <div style={{ display: "flex" }}>
+      {(["light", "dark"] as const).map((theme) => (
+        // transform 让内部 fixed 覆盖层以本格为包含块，两档才能并排看
+        <div
+          key={theme}
+          data-theme={theme}
+          style={{ position: "relative", flex: 1, minHeight: 520, transform: "translateZ(0)" }}
+        >
+          <CommandPalette open groups={groups} width={420} />
+        </div>
+      ))}
+    </div>
+  ),
+}

package/src/components/composite/CommandPalette/CommandPaletteSource.test.mjs

@@ -0,0 +1,61 @@
+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")
+
+// check-ds2 也扫测试文件，违规写法拼接构造，免得守卫把断言本身当成违规。
+const NO_UNIFORM_DISABLED = new RegExp(`disabled:${"opacity"}-`)
+
+test("Dialog 承载 + Field 搜索 + Keycap 提示，全部复用既有件", () => {
+  assert.match(source, /import \{ Dialog \} from "\.\.\/Dialog"/)
+  assert.match(source, /import \{ Field \} from "\.\.\/\.\.\/primitives\/Field"/)
+  assert.match(source, /import \{ Keycap \} from "\.\.\/\.\.\/primitives\/Keycap"/)
+  assert.match(source, /<Field\s+standalone=\{false\}/)
+})
+
+test("面板是弹层：底改 popover-bg，行 hover/press 一律 pop 档（§5、§14 已知坑）", () => {
+  assert.match(source, /className=\{cn\("bg-\[var\(--ow-popover-bg\)\]"/)
+  assert.match(source, /hover:bg-\[var\(--ow-hover-pop\)\] active:bg-\[var\(--ow-press-pop\)\]/)
+  assert.match(source, /active && "bg-\[var\(--ow-hover-pop\)\]"/)
+  assert.doesNotMatch(source, /hover:bg-\[var\(--ow-hover\)\]/)
+})
+
+test("弹层里的键帽抬一档：底 hover-pop + 边 border-strong（§14 暗档已知坑）", () => {
+  assert.match(
+    source,
+    /const POP_KEYCAP_CLASS = "bg-\[var\(--ow-hover-pop\)\] border-\[color:var\(--ow-border-strong\)\]"/,
+  )
+  // 面板里出现的每一顶键帽都戴上这档，不留裸 <Keycap>
+  assert.doesNotMatch(source, /<Keycap>/)
+})
+
+test("行高 40、底栏 32（§7 控件高 {28,32,40}）、圆角 token、禁用逐 token", () => {
+  assert.match(source, /h-10 px-2/)
+  assert.match(source, /data-ow-part="footer"[\s\S]{0,240}px-3 h-8 /)
+  assert.doesNotMatch(source, /px-3 h-9 /)
+  assert.match(source, /\[border-radius:var\(--ow-radius-sm\)\]/)
+  assert.match(source, /cursor-not-allowed text-\[color:var\(--ow-disabled-text\)\]/)
+  assert.doesNotMatch(source, NO_UNIFORM_DISABLED)
+})
+
+test("键盘契约：↑↓ 选择 / Enter 打开 / Esc 关闭，activedescendant 指向高亮行", () => {
+  assert.match(source, /e\.key === "ArrowDown"/)
+  assert.match(source, /e\.key === "ArrowUp"/)
+  assert.match(source, /e\.key === "Enter"/)
+  assert.match(source, /e\.key === "Escape"/)
+  assert.match(source, /aria-activedescendant=\{activeIndex >= 0 \? `ow-command-palette-opt-\$\{activeIndex\}`/)
+  assert.match(source, /role="listbox"/)
+  assert.match(source, /role="option"/)
+})
+
+test("无结果走 EmptyState 原语", () => {
+  assert.match(source, /import \{ EmptyState \} from "\.\.\/\.\.\/primitives\/EmptyState"/)
+  assert.match(source, /<EmptyState message=\{emptyMessage\}/)
+})
+
+test("R3 中性件：不带信标/荧黄；任意值 var() 带类型标注", () => {
+  assert.doesNotMatch(source, /var\(--ow-beacon|var\(--ow-accent-dot|var\(--ow-yellow/)
+  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
+  assert.doesNotMatch(source, /font-\[var\(--ow-font-/)
+})

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

@@ -0,0 +1,310 @@
+"use client"
+
+import { type KeyboardEvent, type ReactNode, useEffect, useMemo, useRef, useState } from "react"
+import { cn } from "../../../lib/utils"
+import { EmptyState } from "../../primitives/EmptyState"
+import { Field } from "../../primitives/Field"
+import { Keycap } from "../../primitives/Keycap"
+import { Dialog } from "../Dialog"
+import { Search } from "../Icons"
+
+/**
+ * 键帽坐在 --ow-popover-bg 上时的档位修正（§5 交互底色相对所在表面递进 / §14 已知坑）：
+ * Keycap 原语的默认皮肤是 surface-2 底 + --ow-border 边（面板档），暗档里这三个值与
+ * popover-bg 几乎同亮，键帽整片消失成裸文字。弹层内一律抬一档：底 --ow-hover-pop、
+ * 边 --ow-border-strong。原语默认值不动（它的规格卡口径是面板档）。
+ */
+const POP_KEYCAP_CLASS = "bg-[var(--ow-hover-pop)] border-[color:var(--ow-border-strong)]"
+
+/**
+ * CommandPalette — 命令面板（DS 2.0 模式件，蓝图批次② 新造件，R3 中性件无信标）。
+ *
+ * Dialog 承载（模态档：--ow-scrim ＋ --ow-shadow-modal ＋ 圆角 16 由 Dialog 提供），
+ * 面板底改 --ow-popover-bg——它是弹层，所以**行的交互底色一律 pop 档**
+ * （§5：坐在 popover-bg 上的行 hover=--ow-hover-pop → press=--ow-press-pop；
+ * §14 已知坑：暗档弹层用全局 hover 档对比≈1.0）。
+ * 搜索用 Field 裸控件形态（standalone={false}），分隔靠 1px 边框不靠第三档表面；
+ * 底栏 Keycap 提示（高 32，§7 控件高 {28,32,40}）；无结果走 EmptyState 原语；
+ * 键盘 ↑↓ 选择 / Enter 打开 / Esc 关闭。
+ */
+export interface CommandPaletteItem {
+  id: string
+  /** 行主文案 */
+  label: string
+  /** 副说明，text-3 一行 */
+  description?: string
+  /** 前置图标（16px 档） */
+  icon?: ReactNode
+  /** 行尾快捷键提示，如 ["Ctrl", "N"] */
+  keys?: string[]
+  disabled?: boolean
+  /** 参与匹配的额外关键词 */
+  keywords?: string[]
+}
+
+export interface CommandPaletteGroup {
+  id: string
+  /** 分组眉标，如「会话」「设置」 */
+  title?: string
+  items: CommandPaletteItem[]
+}
+
+export interface CommandPaletteProps {
+  open: boolean
+  onClose?: () => void
+  groups: CommandPaletteGroup[]
+  onSelect?: (item: CommandPaletteItem) => void
+  /** 受控搜索词；不传则组件自持 */
+  query?: string
+  onQueryChange?: (value: string) => void
+  /** 由组件按 label/description/keywords 过滤；调用方自己过滤时传 false */
+  filter?: boolean
+  placeholder?: string
+  /** 无结果一句话 */
+  emptyMessage?: string
+  /** 底栏右侧附加提示 */
+  footer?: ReactNode
+  width?: number | string
+  className?: string
+}
+
+const groupTitleClass = [
+  "font-medium leading-none",
+  "text-[length:var(--ow-fs-eyebrow-cjk,12px)]",
+  "tracking-[var(--ow-ls-eyebrow-cjk,0.08em)]",
+  "text-[color:var(--ow-eyebrow)]",
+].join(" ")
+
+function matches(item: CommandPaletteItem, q: string) {
+  const needle = q.trim().toLowerCase()
+  if (!needle) return true
+  const haystack = [item.label, item.description ?? "", ...(item.keywords ?? [])].join(" ").toLowerCase()
+  return haystack.includes(needle)
+}
+
+export function CommandPalette({
+  open,
+  onClose,
+  groups,
+  onSelect,
+  query,
+  onQueryChange,
+  filter = true,
+  placeholder = "搜索命令…",
+  emptyMessage = "没有匹配的命令。换个词试试。",
+  footer,
+  width = 560,
+  className,
+}: CommandPaletteProps) {
+  const [innerQuery, setInnerQuery] = useState("")
+  const q = query ?? innerQuery
+  const [activeIndex, setActiveIndex] = useState(0)
+  const listRef = useRef<HTMLDivElement>(null)
+
+  const visibleGroups = useMemo(() => {
+    if (!filter) return groups
+    return groups
+      .map((group) => ({ ...group, items: group.items.filter((item) => matches(item, q)) }))
+      .filter((group) => group.items.length > 0)
+  }, [groups, q, filter])
+
+  const flatItems = useMemo(() => visibleGroups.flatMap((group) => group.items), [visibleGroups])
+  const selectableCount = flatItems.filter((item) => !item.disabled).length
+
+  // 搜索词或开合变化后，高亮回到第一条可选行
+  useEffect(() => {
+    const first = flatItems.findIndex((item) => !item.disabled)
+    setActiveIndex(first < 0 ? -1 : first)
+  }, [flatItems])
+
+  useEffect(() => {
+    if (!open) {
+      if (query === undefined) setInnerQuery("")
+    }
+  }, [open, query])
+
+  useEffect(() => {
+    if (activeIndex < 0) return
+    listRef.current?.querySelector(`[data-index="${activeIndex}"]`)?.scrollIntoView({ block: "nearest" })
+  }, [activeIndex])
+
+  const step = (delta: number) => {
+    if (selectableCount === 0) return
+    let next = activeIndex
+    for (let i = 0; i < flatItems.length; i++) {
+      next = (next + delta + flatItems.length) % flatItems.length
+      if (!flatItems[next]?.disabled) break
+    }
+    setActiveIndex(next)
+  }
+
+  const pick = (item?: CommandPaletteItem) => {
+    if (!item || item.disabled) return
+    onSelect?.(item)
+  }
+
+  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault()
+      step(1)
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault()
+      step(-1)
+    } else if (e.key === "Enter") {
+      e.preventDefault()
+      pick(flatItems[activeIndex])
+    } else if (e.key === "Escape") {
+      e.preventDefault()
+      onClose?.()
+    }
+  }
+
+  const setQuery = (value: string) => {
+    if (query === undefined) setInnerQuery(value)
+    onQueryChange?.(value)
+  }
+
+  let index = -1
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      closable={false}
+      padded={false}
+      width={width}
+      className={cn("bg-[var(--ow-popover-bg)]", className)}
+    >
+      <div data-slot="command-palette" data-ow-part="panel" onKeyDown={onKeyDown} className="flex min-h-0 flex-col">
+        <div
+          data-ow-part="search"
+          className="flex items-center gap-2 border-b border-[color:var(--ow-border)] px-3 h-12 shrink-0"
+        >
+          <Search
+            aria-hidden="true"
+            style={{ width: 16, height: 16 }}
+            className="shrink-0 text-[color:var(--ow-text-3)]"
+          />
+          <Field
+            standalone={false}
+            value={q}
+            onChange={setQuery}
+            placeholder={placeholder}
+            aria-label="搜索命令"
+            aria-autocomplete="list"
+            aria-expanded
+            aria-controls="ow-command-palette-list"
+            aria-activedescendant={activeIndex >= 0 ? `ow-command-palette-opt-${activeIndex}` : undefined}
+            role="combobox"
+            autoFocus
+            className="h-8"
+          />
+        </div>
+
+        <div
+          ref={listRef}
+          id="ow-command-palette-list"
+          role="listbox"
+          aria-label="命令"
+          data-ow-part="list"
+          className="min-h-0 max-h-[min(60vh,420px)] overflow-y-auto p-2"
+        >
+          {flatItems.length === 0 ? (
+            /* A5-B4：命令面板是弹层，空态走 `variant="text"`——原型 L3018 就是一行
+               `padding:16px 10px` 的 --ow-fs-ui 灰字，无母题无钮。 */
+            <EmptyState message={emptyMessage} variant="text" />
+          ) : (
+            visibleGroups.map((group) => (
+              <div key={group.id} data-ow-part="group" className="mb-1 last:mb-0">
+                {group.title && (
+                  <div data-ow-part="group-title" className={cn(groupTitleClass, "px-2 pb-1.5 pt-2")}>
+                    {group.title}
+                  </div>
+                )}
+                {group.items.map((item) => {
+                  index += 1
+                  const i = index
+                  const active = i === activeIndex
+                  return (
+                    // 焦点留在搜索框，行不抢焦点：键盘由面板 onKeyDown 统一代理
+                    // （listbox + aria-activedescendant 模式）
+                    <div
+                      key={item.id}
+                      id={`ow-command-palette-opt-${i}`}
+                      data-ow-part="row"
+                      data-index={i}
+                      data-ow-state={cn(active && "active", item.disabled && "disabled") || undefined}
+                      role="option"
+                      aria-selected={active}
+                      aria-disabled={item.disabled || undefined}
+                      onMouseMove={() => !item.disabled && setActiveIndex(i)}
+                      onClick={() => pick(item)}
+                      className={cn(
+                        "flex w-full items-center gap-2.5 h-10 px-2 box-border text-left",
+                        "[border-radius:var(--ow-radius-sm)] select-none",
+                        "text-[length:var(--ow-fs-ui)]",
+                        "transition-[background-color,color] duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+                        item.disabled
+                          ? "cursor-not-allowed text-[color:var(--ow-disabled-text)]"
+                          : cn(
+                              // 弹层内行：pop 档 hover/press（§5）
+                              "cursor-pointer text-[color:var(--ow-text)]",
+                              "hover:bg-[var(--ow-hover-pop)] active:bg-[var(--ow-press-pop)]",
+                              active && "bg-[var(--ow-hover-pop)]",
+                            ),
+                      )}
+                    >
+                      {item.icon && (
+                        <span
+                          aria-hidden="true"
+                          className="inline-flex h-4 w-4 shrink-0 items-center justify-center text-[color:var(--ow-text-2)] [&>svg]:h-4 [&>svg]:w-4"
+                        >
+                          {item.icon}
+                        </span>
+                      )}
+                      <span className="min-w-0 flex-1 truncate">{item.label}</span>
+                      {item.description && (
+                        <span className="min-w-0 max-w-[45%] shrink-0 truncate text-[color:var(--ow-text-3)]">
+                          {item.description}
+                        </span>
+                      )}
+                      {item.keys && item.keys.length > 0 && (
+                        <span className="inline-flex shrink-0 items-center gap-[3px]">
+                          {item.keys.map((key, ki) => (
+                            <Keycap key={`${item.id}-${key}-${ki}`} className={POP_KEYCAP_CLASS}>
+                              {key}
+                            </Keycap>
+                          ))}
+                        </span>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+            ))
+          )}
+        </div>
+
+        <div
+          data-ow-part="footer"
+          className="flex shrink-0 items-center gap-4 border-t border-[color:var(--ow-border)] px-3 h-8 text-[length:var(--ow-fs-ui)] text-[color:var(--ow-text-3)]"
+        >
+          <span className="inline-flex items-center gap-1.5">
+            <Keycap className={POP_KEYCAP_CLASS}>↑</Keycap>
+            <Keycap className={POP_KEYCAP_CLASS}>↓</Keycap>
+            选择
+          </span>
+          <span className="inline-flex items-center gap-1.5">
+            <Keycap className={POP_KEYCAP_CLASS}>Enter</Keycap>
+            打开
+          </span>
+          <span className="inline-flex items-center gap-1.5">
+            <Keycap className={POP_KEYCAP_CLASS}>Esc</Keycap>
+            关闭
+          </span>
+          {footer && <span className="ml-auto min-w-0 truncate">{footer}</span>}
+        </div>
+      </div>
+    </Dialog>
+  )
+}