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

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

@@ -1,43 +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")
-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

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

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

@@ -1,61 +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")
-
-// 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

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