@orbit-work/ui 0.1.0

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

@@ -0,0 +1,155 @@
+"use client"
+
+import { useCallback, useRef, useState } from "react"
+import { useImeAwareEnter } from "../../../hooks/useImeAwareEnter"
+import { cn } from "../../../lib/utils"
+import { Button, Field, Select } from "../../primitives"
+import type { SelectOption } from "../../primitives/Select"
+import { Plus } from "../Icons"
+
+export type ProjectSelectProps = {
+  value: string
+  options: SelectOption[]
+  onChange: (projectId: string) => void
+  onCreate?: (name: string) => Promise<string>
+  placeholder?: string
+  disabled?: boolean
+  /** 触发器高度档：md=32（默认）· lg=40（大表单，如创建定时任务弹窗） */
+  size?: "md" | "lg"
+  className?: string
+}
+
+/**
+ * Project-only select with an inline create action pinned below the option list.
+ * DS 2.0 preset recipe on top of the primitives/Select base (footer slot).
+ */
+export function ProjectSelect({
+  value,
+  options,
+  onChange,
+  onCreate,
+  placeholder = "选择项目",
+  disabled = false,
+  size = "md",
+  className = "",
+}: ProjectSelectProps): React.ReactElement {
+  const [creating, setCreating] = useState(false)
+  const [createName, setCreateName] = useState("")
+  const [createPending, setCreatePending] = useState(false)
+  const [createError, setCreateError] = useState<string | null>(null)
+  const { isImeEnter, onCompositionEnd, onCompositionStart } = useImeAwareEnter()
+  const canCreate = createName.trim() !== "" && !createPending
+
+  const resetCreate = useCallback(() => {
+    setCreating(false)
+    setCreateName("")
+    setCreateError(null)
+  }, [])
+
+  const createProject = async () => {
+    const name = createName.trim()
+    if (!name || !onCreate || createPending) return
+
+    setCreatePending(true)
+    setCreateError(null)
+    try {
+      const projectId = await onCreate(name)
+      onChange(projectId)
+      resetCreate()
+    } catch (cause) {
+      setCreateError(cause instanceof Error ? cause.message : "创建项目失败，请重试")
+    } finally {
+      setCreatePending(false)
+    }
+  }
+
+  const footer = onCreate && (
+    <div data-ow-part="footer" className="flex-[0_0_auto] mt-1.5 pt-1.5 border-t border-[color:var(--ow-border)]">
+      {creating ? (
+        <div data-ow-part="create" className="p-0.5">
+          <div data-ow-part="create-row" className="flex items-center gap-1.5">
+            <Field
+              autoFocus
+              value={createName}
+              placeholder="输入项目名称"
+              aria-label="项目名称"
+              invalid={Boolean(createError)}
+              disabled={createPending}
+              onChange={setCreateName}
+              onCompositionStart={onCompositionStart}
+              onCompositionEnd={onCompositionEnd}
+              onKeyDown={(event) => {
+                if (isImeEnter(event)) return
+                if (event.key === "Enter") {
+                  event.preventDefault()
+                  void createProject()
+                }
+              }}
+            />
+            <Button
+              variant="primary"
+              size="sm"
+              type="button"
+              className="flex-[0_0_auto] min-w-14"
+              disabled={!canCreate}
+              onClick={() => {
+                void createProject()
+              }}
+            >
+              {createPending ? "创建中…" : "创建"}
+            </Button>
+          </div>
+          <div
+            data-ow-part={createError ? "error" : "hint"}
+            className={cn(
+              "pt-1.5 px-0.5 pb-0.5 font-normal text-ow-fs-eyebrow leading-[1.25]",
+              createError ? "text-[color:var(--ow-error)]" : "text-[color:var(--ow-text-3)]",
+            )}
+            role={createError ? "alert" : undefined}
+          >
+            {createError ?? "按 Enter 创建，Esc 取消"}
+          </div>
+        </div>
+      ) : (
+        <Button
+          variant="ghost"
+          size="sm"
+          type="button"
+          data-ow-part="add"
+          icon={<Plus className="w-4 h-4" />}
+          className="w-full h-auto justify-start py-1.5 px-2 [white-space:normal]"
+          onClick={() => setCreating(true)}
+        >
+          <span data-ow-part="add-meta" className="flex-1 min-w-0 flex flex-col gap-0.5">
+            <span
+              data-ow-part="add-name"
+              className="text-[color:var(--ow-text)] font-medium text-ow-fs-ui leading-[1.25] overflow-hidden text-ellipsis whitespace-nowrap"
+            >
+              新增项目
+            </span>
+            <span
+              data-ow-part="add-sub"
+              className="text-[color:var(--ow-text-3)] font-normal text-ow-fs-eyebrow leading-[1.25] overflow-hidden text-ellipsis whitespace-nowrap"
+            >
+              输入名称后立即创建
+            </span>
+          </span>
+        </Button>
+      )}
+    </div>
+  )
+
+  return (
+    <div data-slot="project-select" className={cn("relative", className)}>
+      <Select
+        value={value}
+        options={options}
+        onChange={onChange}
+        placeholder={placeholder}
+        disabled={disabled || createPending}
+        size={size}
+        footer={footer}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,130 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { RadioCardGroup, type RadioCardOption } from "./index"
+
+/**
+ * 件级状态矩阵（R2 · L3-1-2 补）：在这之前 RadioCardGroup 只在 `Screens/SettingsSections`
+ * 的整屏里露过一次脸，disabled 项与 roving tabindex 的键盘态从没出过图。
+ */
+const meta = {
+  title: "Composite/RadioCard",
+  component: RadioCardGroup,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof RadioCardGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 设置面里的宽度：段内容上限 720，卡列常在 560 左右，story 一律按这个量取景。 */
+function Frame({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ maxWidth: 560, background: "var(--ow-bg-panel)", color: "var(--ow-text)", padding: 20 }}>
+      {children}
+    </div>
+  )
+}
+
+const MODEL_OPTIONS: RadioCardOption[] = [
+  { value: "auto", label: "自动", description: "按任务难度在快模型与强模型之间切换，日常够用。" },
+  { value: "fast", label: "快速", description: "优先响应速度，适合短问答与格式转换。" },
+  { value: "deep", label: "深度", description: "优先推理质量，适合长文档分析与多步任务。" },
+]
+
+const AUTH_OPTIONS: RadioCardOption[] = [
+  { value: "ask", label: "每次询问", description: "任何读写与命令执行都先问过你。" },
+  { value: "auto-read", label: "读操作自动放行", description: "读文件、查资料不再打断；写入与命令仍要确认。" },
+  { value: "full", label: "全自动", description: "全部放行。仅建议在隔离环境里开。", disabled: true },
+]
+
+function Controlled({ options, initial }: { options: RadioCardOption[]; initial: string | null }) {
+  const [value, setValue] = useState<string | null>(initial)
+  return <RadioCardGroup options={options} value={value} onChange={setValue} aria-label="示例单选组" />
+}
+
+/** 默认：三选一，第一项选中。圆点承担选中编码，卡边始终 `--ow-border`。 */
+export const Default: Story = {
+  render: () => (
+    <Frame>
+      <Controlled options={MODEL_OPTIONS} initial="auto" />
+    </Frame>
+  ),
+}
+
+/**
+ * 禁用项：第三项 `disabled`。边落 `--ow-disabled-border`、文字落 `--ow-disabled-text`，
+ * 且被 roving tabindex 跳过（←→↑↓ 只在可用项之间循环）。
+ */
+export const WithDisabled: Story = {
+  render: () => (
+    <Frame>
+      <Controlled options={AUTH_OPTIONS} initial="auto-read" />
+    </Frame>
+  ),
+}
+
+/**
+ * 未选态：`value=null`。此时 tabStop 落在第一个可用项上（组仍可 Tab 进来），
+ * 但没有任何一项 `aria-checked=true`。
+ */
+export const NoSelection: Story = {
+  render: () => (
+    <Frame>
+      <Controlled options={MODEL_OPTIONS} initial={null} />
+    </Frame>
+  ),
+}
+
+/** 无说明句：只有主文时卡自然收成一行高，gap 0.5 不留空档。 */
+export const LabelOnly: Story = {
+  render: () => (
+    <Frame>
+      <Controlled
+        options={[
+          { value: "light", label: "浅色" },
+          { value: "dark", label: "深色" },
+          { value: "system", label: "自动" },
+        ]}
+        initial="system"
+      />
+    </Frame>
+  ),
+}
+
+/** 长文本：说明句折行后主文与圆点仍顶对齐（`items-start` ＋ 圆点 `mt-px`）。 */
+export const LongText: Story = {
+  render: () => (
+    <Frame>
+      <Controlled
+        options={[
+          {
+            value: "strict",
+            label: "严格沙箱",
+            description:
+              "所有文件读写限制在当前项目目录内，网络访问需要逐条授权，命令执行走白名单。适合处理客户数据或未知来源的仓库；代价是很多工具会在第一次调用时被拦下来，需要你手动放行。",
+          },
+          {
+            value: "loose",
+            label: "宽松沙箱",
+            description: "允许访问工作区之外的常用目录与公网，命令执行仍需确认。",
+          },
+        ]}
+        initial="strict"
+      />
+    </Frame>
+  ),
+}
+
+/** 全禁用：整组不可选，tabStop 落空（组内没有 tabIndex=0 的项）。 */
+export const AllDisabled: Story = {
+  render: () => (
+    <Frame>
+      <RadioCardGroup
+        options={MODEL_OPTIONS.map((option) => ({ ...option, disabled: true }))}
+        value="auto"
+        onChange={() => {}}
+        aria-label="全部禁用"
+      />
+    </Frame>
+  ),
+}

package/src/components/composite/RadioCard/RadioCardSource.test.mjs

@@ -0,0 +1,42 @@
+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 code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+
+test("单选卡照原型 2506–2514：flex-start ＋ gap 10 ＋ 内距 12/14 ＋ 1px 边 ＋ radius-lg ＋ surface", () => {
+  assert.match(code, /items-start gap-2\.5/)
+  assert.match(code, /px-3\.5 py-3 \[border-radius:var\(--ow-radius-lg\)\]/)
+  assert.match(code, /border border-\[color:var\(--ow-border\)\] bg-\[var\(--ow-surface\)\]/)
+})
+
+test("圆圈 16 ＋ 1.5px 边 ＋ 内点 8，选中走无彩极色（禁信标荧黄）", () => {
+  assert.match(code, /w-4 h-4 rounded-full border-\[1\.5px\]/)
+  assert.match(code, /block w-2 h-2 rounded-full/)
+  assert.match(code, /border-\[color:var\(--ow-control-on\)\]/)
+  assert.match(code, /border-\[color:var\(--ow-control-off\)\]/)
+  assert.match(code, /bg-\[var\(--ow-control-on\)\]/)
+  assert.doesNotMatch(code, /--ow-beacon|--ow-yellow|--ow-accent-dot|--ow-current-bg/)
+})
+
+test("§5 贴地零影 · §9 只过渡色 · §6 焦点环与逐 token 禁用", () => {
+  assert.doesNotMatch(code, /shadow|backdrop-filter/)
+  assert.match(
+    code,
+    /transition-\[background-color,border-color\] duration-\[var\(--ow-dur-1\)\] ease-\[var\(--ow-ease-beacon\)\]/,
+  )
+  assert.match(code, /ow-focus-ring/)
+  assert.match(code, /border-\[color:var\(--ow-disabled-border\)\]/)
+  assert.match(code, /text-\[color:var\(--ow-disabled-text\)\]/)
+  assert.doesNotMatch(code, /opacity-\d/)
+})
+
+test("radiogroup 语义与键盘换选（roving tabindex，同 SegmentedControl 口径）", () => {
+  assert.match(code, /role="radiogroup"/)
+  assert.match(code, /role="radio"/)
+  assert.match(code, /aria-checked=\{selected\}/)
+  assert.match(code, /"ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp", "Home", "End"/)
+  assert.match(code, /tabIndex=\{index === tabStop \? 0 : -1\}/)
+})

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

@@ -0,0 +1,171 @@
+"use client"
+
+import { type KeyboardEvent, type ReactNode, useCallback, useRef } from "react"
+import { cn } from "../../../lib/utils"
+
+/**
+ * RadioCard / RadioCardGroup — 单选卡（DS 2.0 组合件，A2-B3 · 原型 2506–2514 与 2534–2542）
+ *
+ * 设置面里「一组互斥选项，每项都带一句说明」的定式：模型配置的默认模型、授权模式的三档，
+ * 都是这一枚。与 `DesktopSelectionCard`（皮肤/选择网格，勾＋边框＋徽标的四重编码）分工不同——
+ * 这里选中由 **radio 圆点** 承担（形编码，不靠色单独说话，R1），卡边始终 `--ow-border`。
+ *
+ * 度量（原型逐条）：卡 `flex-start` ＋ gap 10 ＋ 内距 12/14 ＋ 1px `--ow-border`
+ * ＋ `--ow-radius-lg`(12) ＋ `--ow-surface`；圆圈 16×16、1.5px 边、`margin-top:1`，
+ * 内点 8×8；标题 `--ow-fs-ui`/500，说明 `--ow-fs-caption`/`--ow-text-2`。
+ * 圆圈边：选中 `--ow-control-on`、未选 `--ow-control-off`；内点选中 `--ow-control-on`，
+ * 未选透明（§4 无彩极色，禁信标荧黄）。
+ * 立面（§5）：贴地零影，hover 只换底 `--ow-hover`。动效（§9）：仅底色/边色 120ms。
+ * 键盘：radiogroup 的 ←→↑↓ 换选（roving tabindex），与 `SegmentedControl` 同一套口径。
+ */
+export interface RadioCardOption {
+  value: string
+  /** 主文，fs-ui 500 */
+  label: ReactNode
+  /** 一句说明，fs-caption text-2 */
+  description?: ReactNode
+  disabled?: boolean
+}
+
+export interface RadioCardGroupProps {
+  options: RadioCardOption[]
+  value: string | null
+  onChange: (value: string) => void
+  /** 组的无障碍名 */
+  "aria-label"?: string
+  className?: string
+  /**
+   * 形制：`row`（缺省，R3 · 2026-09-04 Terry 意见 5「设置里不要卡」）＝分隔线行——贴边零内距、
+   * 上下 12、行间 1px `--ow-border`、无底无圆角；`card`＝原型 2534–2542 的卡形（1px 边 ＋
+   * radius-lg ＋ surface ＋ 内距 12/14），留给设置面之外的场景。
+   */
+  variant?: "row" | "card"
+}
+
+export function RadioCardGroup({
+  options,
+  value,
+  onChange,
+  "aria-label": ariaLabel,
+  className,
+  variant = "row",
+}: RadioCardGroupProps) {
+  const rootRef = useRef<HTMLDivElement>(null)
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      const keys = ["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp", "Home", "End"]
+      if (!keys.includes(event.key)) return
+      const root = rootRef.current
+      if (!root) return
+      const cards = Array.from(root.querySelectorAll<HTMLButtonElement>('[role="radio"]:not(:disabled)'))
+      if (cards.length === 0) return
+      const currentIdx = cards.indexOf(event.target as HTMLButtonElement)
+      let next: number
+      if (event.key === "Home") next = 0
+      else if (event.key === "End") next = cards.length - 1
+      else if (event.key === "ArrowRight" || event.key === "ArrowDown")
+        next = currentIdx < 0 ? 0 : (currentIdx + 1) % cards.length
+      else next = currentIdx < 0 ? 0 : (currentIdx - 1 + cards.length) % cards.length
+      event.preventDefault()
+      const target = cards[next]
+      if (!target) return
+      target.focus()
+      const v = target.getAttribute("data-ow-value")
+      if (v !== null) onChange(v)
+    },
+    [onChange],
+  )
+
+  const selectedIdx = options.findIndex((option) => option.value === value && !option.disabled)
+  const tabStop = selectedIdx >= 0 ? selectedIdx : options.findIndex((option) => !option.disabled)
+
+  return (
+    <div
+      ref={rootRef}
+      role="radiogroup"
+      aria-label={ariaLabel}
+      data-slot="radio-card-group"
+      onKeyDown={handleKeyDown}
+      data-ow-variant={variant}
+      className={cn("flex flex-col min-w-0", variant === "card" ? "gap-2" : "gap-0", className)}
+    >
+      {options.map((option, index) => {
+        const selected = option.value === value
+        return (
+          <button
+            key={option.value}
+            type="button"
+            role="radio"
+            aria-checked={selected}
+            disabled={option.disabled}
+            tabIndex={index === tabStop ? 0 : -1}
+            data-slot="radio-card"
+            data-ow-part="surface"
+            data-ow-value={option.value}
+            data-ow-state={cn(selected && "selected", option.disabled && "disabled").trim() || undefined}
+            onClick={() => !option.disabled && onChange(option.value)}
+            className={cn(
+              "flex items-start gap-2.5 w-full min-w-0 text-left",
+              variant === "card"
+                ? "px-3.5 py-3 [border-radius:var(--ow-radius-lg)] border border-[color:var(--ow-border)] bg-[var(--ow-surface)]"
+                : // 行式：贴边、上下 12、行间 1px 分隔线（上一个兄弟也是行才画），无底无圆角
+                  "px-0 py-3 border-0 border-[color:var(--ow-border)] [[data-slot=radio-card]+&]:border-t bg-transparent",
+              "transition-[background-color,border-color] duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+              "ow-focus-ring",
+              option.disabled
+                ? cn("cursor-not-allowed", variant === "card" && "border-[color:var(--ow-disabled-border)]")
+                : "cursor-pointer hover:bg-[var(--ow-hover)] active:bg-[var(--ow-press)]",
+            )}
+          >
+            <span
+              aria-hidden="true"
+              data-ow-part="dot"
+              className={cn(
+                "shrink-0 mt-px grid place-items-center w-4 h-4 rounded-full border-[1.5px]",
+                option.disabled
+                  ? "border-[color:var(--ow-disabled-border)]"
+                  : selected
+                    ? "border-[color:var(--ow-control-on)]"
+                    : "border-[color:var(--ow-control-off)]",
+              )}
+            >
+              <span
+                className={cn(
+                  "block w-2 h-2 rounded-full",
+                  selected
+                    ? option.disabled
+                      ? "bg-[var(--ow-disabled-text)]"
+                      : "bg-[var(--ow-control-on)]"
+                    : "bg-transparent",
+                )}
+              />
+            </span>
+            <span className="flex-1 min-w-0 flex flex-col gap-0.5">
+              <span
+                data-ow-part="title"
+                className={cn(
+                  "text-ow-fs-ui font-medium leading-[1.3]",
+                  option.disabled ? "text-[color:var(--ow-disabled-text)]" : "text-[color:var(--ow-text)]",
+                )}
+              >
+                {option.label}
+              </span>
+              {option.description != null && option.description !== false && (
+                <span
+                  data-ow-part="description"
+                  className={cn(
+                    "text-[length:var(--ow-fs-caption,12px)] font-normal leading-[1.4]",
+                    option.disabled ? "text-[color:var(--ow-disabled-text)]" : "text-[color:var(--ow-text-2)]",
+                  )}
+                >
+                  {option.description}
+                </span>
+              )}
+            </span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}

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

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Copy, Edit, Search as Eye, Share, Trash } from "../Icons"
+import { RowOverflowMenu } from "./index"
+
+const meta = {
+  title: "Composite/RowOverflowMenu",
+  component: RowOverflowMenu,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof RowOverflowMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    items: [
+      { key: "view", label: "查看", icon: <Eye /> },
+      { key: "edit", label: "编辑", icon: <Edit /> },
+      { key: "share", label: "分享", icon: <Share /> },
+      { key: "delete", label: "删除", icon: <Trash />, danger: true },
+    ],
+    onSelect: (key) => console.log("selected:", key),
+  },
+}
+
+export const WithCopyConfirmation: Story = {
+  args: {
+    items: [
+      { key: "copy", label: "复制链接", icon: <Copy />, confirmsInPlace: true },
+      { key: "edit", label: "编辑", icon: <Edit /> },
+      { key: "delete", label: "删除", icon: <Trash />, danger: true },
+    ],
+    onSelect: (key) => console.log("selected:", key),
+  },
+}
+
+export const DangerActions: Story = {
+  args: {
+    items: [
+      { key: "edit", label: "编辑", icon: <Edit /> },
+      { key: "archive", label: "归档", icon: <Trash /> },
+      { key: "delete", label: "永久删除", icon: <Trash />, danger: true },
+    ],
+    onSelect: (key) => console.log("selected:", key),
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    items: [
+      { key: "view", label: "查看", icon: <Eye /> },
+      { key: "edit", label: "编辑", icon: <Edit /> },
+    ],
+    disabled: true,
+    onSelect: (key) => console.log("selected:", key),
+  },
+}
+
+export const CustomWidth: Story = {
+  args: {
+    items: [
+      { key: "copy", label: "复制到剪贴板", icon: <Copy /> },
+      { key: "share", label: "分享给团队成员", icon: <Share /> },
+      { key: "edit", label: "编辑内容", icon: <Edit /> },
+    ],
+    width: 220,
+    onSelect: (key) => console.log("selected:", key),
+  },
+}
+
+export const InTableRow: Story = {
+  render: (args) => (
+    <div style={{ padding: 20, border: "1px solid var(--ow-border-strong)", borderRadius: 8 }}>
+      <table style={{ width: "100%", borderCollapse: "collapse" }}>
+        <thead>
+          <tr style={{ borderBottom: "1px solid var(--ow-border)" }}>
+            <th style={{ padding: 12, textAlign: "left" }}>名称</th>
+            <th style={{ padding: 12, textAlign: "left" }}>状态</th>
+            <th style={{ padding: 12, textAlign: "right", width: 50 }}>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr style={{ borderBottom: "1px solid var(--ow-border)" }}>
+            <td style={{ padding: 12 }}>项目文档.pdf</td>
+            <td style={{ padding: 12 }}>已发布</td>
+            <td style={{ padding: 12, textAlign: "right" }}>
+              <RowOverflowMenu {...args} />
+            </td>
+          </tr>
+          <tr>
+            <td style={{ padding: 12 }}>设计稿.fig</td>
+            <td style={{ padding: 12 }}>草稿</td>
+            <td style={{ padding: 12, textAlign: "right" }}>
+              <RowOverflowMenu {...args} />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  ),
+  args: {
+    items: [
+      { key: "view", label: "查看", icon: <Eye /> },
+      { key: "copy", label: "复制链接", icon: <Copy />, confirmsInPlace: true },
+      { key: "edit", label: "编辑", icon: <Edit /> },
+      { key: "delete", label: "删除", icon: <Trash />, danger: true },
+    ],
+    onSelect: (key) => console.log("selected:", key),
+  },
+}

package/src/components/composite/RowOverflowMenu/RowOverflowMenuSource.test.mjs

@@ -0,0 +1,59 @@
+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 menuSource = await readFile(new URL("../../primitives/Menu/index.tsx", import.meta.url), "utf8")
+
+// DS 2.0 蓝图批次②：行菜单已成为 primitives/Menu 的配方。原来锁在这里的三条
+// 「组件存在的理由」搬进了 Menu 本体 —— 保障没弱，只是换了主人，所以这里连
+// menuSource 一起断言，防止谁把 Menu 那侧改回去。
+
+test("row overflow menu is a recipe on the shared Menu, not a second menu implementation", () => {
+  assert.match(source, /import \{ Menu \} from "\.\.\/\.\.\/primitives\/Menu"/)
+  assert.match(source, /<Menu\b/)
+  // 自己再造弹层就是合并没做成：portal、外点、定位一律由 Menu 承担。
+  assert.doesNotMatch(source, /createPortal|getBoundingClientRect|addEventListener\("scroll"/)
+})
+
+// 行菜单常住在带 overflow 的滚动容器里（设置页 .settings__content 是 overflow-y: auto），
+// absolute 定位的弹层会被祖先裁掉，而裁剪不是抬 z-index 能解决的。
+test("the shared menu still escapes clipping ancestors via a fixed-position portal", () => {
+  assert.match(menuSource, /createPortal\(menuContent, document\.body\)/, "菜单必须 portal 出去")
+  assert.match(menuSource, /position: "fixed"/, "菜单必须 fixed 定位")
+  // 层级走 token 梯度（dropdown=1000），盖得过设置弹窗的 .overlay（z-index: 100）
+  // 和 .ow-modal-host（300）。
+  assert.match(menuSource, /zIndex: "var\(--ow-z-dropdown\)"/)
+  // 行末「…」的菜单贴触发器右缘，不然会从行的左边探出去。
+  assert.match(source, /align="end"/)
+})
+
+// portal 之后菜单不在触发器子树里，只判断触发器会让「点菜单项」先关掉菜单，
+// click 永远来不及触发 —— 那正是这个菜单最初「点了没反应」的形态。
+test("outside-click ignores both the trigger and the portalled menu", () => {
+  assert.match(menuSource, /anchorRef\.current\?\.contains\(target\) \|\| surfaceRef\.current\?\.contains\(target\)/)
+})
+
+// E2E 用 getByRole('menuitem', { name: ... }) 点菜单项，语义丢了测试就瞎了。
+test("menu items keep their menu semantics", () => {
+  assert.match(menuSource, /role=\{semantics === "menu" \? "menu" : undefined\}/)
+  assert.match(menuSource, /"menuitem"/)
+  // 配方没关掉语义档（不传 role 即默认 menu）。
+  assert.doesNotMatch(source, /role="none"/)
+})
+
+// 复制到剪贴板在界面上不留痕迹，而全局 toast 落在窗口顶部 —— 这个菜单可能开在一个
+// 居中弹窗的下半部分，那段距离足以让人完全没注意到提示。所以回执要落在刚点过的位置。
+test("in-place confirmation echoes on the trigger and clears itself", () => {
+  assert.match(source, /confirmsInPlace/, "菜单项要能声明「就地回执」")
+  assert.match(source, /doneItem \? <Check \/> : <More \/>/, "回执期间触发器换成勾")
+  // DS 2.0 P5：.msg-action 随消息操作行归口 MessageActions 而退役，回执改走
+  // Button ghost·sm ＋ --ow-success（与 MessageActions 的 done 态同口径）。
+  assert.match(source, /data-state=\{doneItem \? "done"/, "回执态要能被样式与测试认出")
+  assert.match(source, /text-\[color:var\(--ow-success\)\]/, "复用 MessageActions 的成功色，别另造一套")
+  assert.doesNotMatch(source, /className=\{`msg-action/, "不再借用已退役的 .msg-action BEM 类")
+  assert.match(source, /setTimeout\(\(\) => setDone\(null\), DONE_ECHO_MS\)/, "回执必须自己消失")
+  // 读屏那一路由全局 toast 承担（Toast 自带 role="status"），这里不该再挂一个
+  // aria-live 属性，否则同一句话会被念两遍。只禁属性写法，注释里可以提它。
+  assert.doesNotMatch(source, /aria-live=/)
+})