@orbit-work/ui 0.1.0

package/src/components/primitives/Chip/Chip.stories.tsx

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Doc, Folder } from "../../composite/Icons"
+import { Chip } from "./index"
+
+const meta = {
+  title: "Primitives/Chip",
+  component: Chip,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Chip>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Basic: Story = {
+  args: { label: "构建产物" },
+}
+
+export const WithDot: Story = {
+  args: { label: "生产环境", dot: "success" },
+}
+
+export const WithCount: Story = {
+  args: { label: "未读通知", count: 12 },
+}
+
+export const DotAndCount: Story = {
+  args: { label: "运行中任务", dot: "info", count: 3 },
+}
+
+export const Removable: Story = {
+  args: { label: "README.md", icon: <Doc />, onRemove: () => console.log("remove") },
+}
+
+export const RemoveOnHover: Story = {
+  args: {
+    label: "composer 上下文",
+    icon: <Folder />,
+    removeMode: "hover",
+    onRemove: () => console.log("remove"),
+  },
+}
+
+/**
+ * 筛选档（A3-B4，原型 template.dc.html L1651）：分类/归属这类「选没选中」的 chip。
+ * 传了 `selected` 即进筛选档 —— 未选＝透明面 ＋ **常驻 1px `--ow-border`** ＋ 400，
+ * 选中＝`--ow-current-bg` ＋ 500（R1 双编码：底色 ＋ 字重）。
+ * 未选中也带边是原型明写的：一排分类的命中区边界要始终可见，不是 hover 才长出来。
+ */
+export const FilterRow: Story = {
+  args: { label: "全部" },
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      {["全部", "办公", "研发", "内容", "数据"].map((label, index) => (
+        <Chip
+          key={label}
+          shape="square"
+          label={label}
+          selected={index === 0}
+          aria-pressed={index === 0}
+          onClick={() => console.log(label)}
+        />
+      ))}
+    </div>
+  ),
+}
+
+export const Clickable: Story = {
+  args: { label: "筛选：本周", dot: "neutral", onClick: () => console.log("click") },
+}
+
+export const ClickableRemovable: Story = {
+  args: {
+    label: "点击或删除",
+    dot: "warning",
+    onClick: () => console.log("click"),
+    onRemove: () => console.log("remove"),
+  },
+}
+
+export const Disabled: Story = {
+  args: { label: "禁用挂载", dot: "pending", onRemove: () => console.log("remove"), disabled: true },
+}
+
+export const WithTooltip: Story = {
+  args: { label: "config.ts", icon: <Doc />, tooltip: "应用配置文件", onRemove: () => console.log("remove") },
+}
+
+export const DotTones: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
+      <Chip label="中性" dot="neutral" />
+      <Chip label="成功" dot="success" />
+      <Chip label="警告" dot="warning" />
+      <Chip label="错误" dot="error" />
+      <Chip label="信息" dot="info" />
+      <Chip label="待命" dot="pending" />
+    </div>
+  ),
+}
+
+export const StateMatrix: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12, alignItems: "flex-start" }}>
+      <div style={{ display: "flex", gap: 8 }}>
+        <Chip label="静态" />
+        <Chip label="可点击" onClick={() => console.log("click")} />
+        <Chip label="可删除" onRemove={() => console.log("remove")} />
+        <Chip label="两者皆可" onClick={() => console.log("click")} onRemove={() => console.log("remove")} />
+      </div>
+      <div style={{ display: "flex", gap: 8 }}>
+        <Chip label="带点计数" dot="success" count={8} onRemove={() => console.log("remove")} />
+        <Chip label="hover 显删" removeMode="hover" onRemove={() => console.log("remove")} />
+        <Chip label="禁用" disabled onRemove={() => console.log("remove")} />
+        <Chip label="禁用带点" disabled dot="error" count={2} />
+      </div>
+    </div>
+  ),
+}
+
+export const LongLabel: Story = {
+  args: {
+    label: "very-long-mounted-context-name-that-should-truncate.tsx",
+    icon: <Doc />,
+    onRemove: () => console.log("remove"),
+  },
+}
+
+/**
+ * 挂载 / 上下文芯片的样板：前两枚是既定态口径 —— `tone="mention"` 的 info tint
+ * 三件套 ＋ 类别图标 ＋ 6 直角（无点无计数）；后两枚是带状态点/计数的中性胶囊，
+ * 用来对照两种形。R2 前这条故事四枚全渲中性面，示范的是不合既定态的配方。
+ */
+export const MountedContexts: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, flexWrap: "wrap", maxWidth: 420 }}>
+      <Chip tone="mention" icon={<Doc />} label="App.tsx" removeMode="hover" onRemove={() => console.log("remove")} />
+      <Chip
+        tone="mention"
+        icon={<Folder />}
+        label="components/"
+        removeMode="hover"
+        onRemove={() => console.log("remove")}
+      />
+      <Chip label="数据库连接" dot="success" count="3/3" />
+      <Chip label="索引构建" dot="pending" count="42%" />
+    </div>
+  ),
+}

package/src/components/primitives/Chip/ChipSource.test.mjs

@@ -0,0 +1,73 @@
+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("chip is the pill-999 home for dot/count/removable capsules", () => {
+  assert.match(source, /\[border-radius:var\(--ow-radius-chip\)\]/)
+  assert.match(source, /export type ChipDotTone/)
+  assert.match(source, /count\?: ReactNode/)
+  assert.match(source, /removeMode\?: "always" \| "hover"/)
+  // 高度走控件档 28
+  assert.match(source, /h-7 /)
+})
+
+// W5 终扫：§7 形状表「带点/计数＝胶囊 999，纯分类/筛选＝6 直角」。根类原来无条件挂
+// --ow-radius-chip，纯 label 的 chip 渲成满圆胶囊，是 999 滥用。解析口径与 composite/Tag 同表。
+test("chip shape follows §7: dot/count → pill 999, otherwise the 6px tag radius", () => {
+  assert.match(source, /export type ChipShape = "square" \| "pill"/)
+  assert.match(source, /shape\?: ChipShape/)
+  assert.match(
+    source,
+    /const resolvedShape: ChipShape = shape \?\? \(dotTone \|\| count != null \? "pill" : "square"\)/,
+  )
+  assert.match(source, /\[border-radius:var\(--ow-radius-tag\)\]/)
+  // 形状不再硬挂在根类字符串里，改由 shapeRadiusClass 注入（可被调用方 className 覆盖）
+  assert.doesNotMatch(source, /max-w-\[220px\] h-7 px-2\.5 border \[border-radius/)
+  assert.match(source, /data-shape=\{resolvedShape\}/)
+})
+
+// 字号走 --ow-fs-* 阶，不留裸 Tailwind 档
+test("chip type scale is token-backed", () => {
+  assert.match(source, /text-ow-fs-caption/)
+  assert.doesNotMatch(source, /\btext-xs\b/)
+})
+
+// R2 裁决：功能色状态点一律 --ow-{v}-on-tint，与 Badge 的 bg-current(=--ow-badge-{v}-fg
+// =同一个 -on-tint) 同一口径——tint 面与地面同一个点色。原来走 --ow-{v}-fill：暗档 fill 是
+// 深底色，坐在 --ow-surface 上几乎看不见，且与 Badge 的同语义点对不上颜色。
+test("chip dot colors come from the on-tint scale (same as Badge), with neutral/pending fallbacks", () => {
+  assert.match(source, /neutral: "var\(--ow-progress-fill\)"/)
+  for (const tone of ["success", "warning", "error", "info"]) {
+    assert.match(source, new RegExp(`${tone}: "var\\(--ow-${tone}-on-tint\\)"`))
+    assert.doesNotMatch(source, new RegExp(`${tone}: "var\\(--ow-${tone}-fill\\)"`))
+  }
+  assert.match(source, /pending: "var\(--ow-pending\)"/)
+  // R2：默认样式无荧黄/信标极色
+  assert.doesNotMatch(source, /--ow-beacon|--ow-accent-dot|--ow-yellow/)
+})
+
+test("chip states are token-complete: hover/press relative to surface, focus ring, per-token disabled", () => {
+  assert.match(source, /hover:bg-\[var\(--ow-hover\)\]/)
+  assert.match(source, /active:bg-\[var\(--ow-press\)\]/)
+  assert.match(source, /ow-focus-ring/)
+  assert.match(
+    source,
+    /bg-\[var\(--ow-disabled-bg\)\] border-\[color:var\(--ow-disabled-border\)\] text-\[color:var\(--ow-disabled-text\)\]/,
+  )
+  assert.match(source, /duration-\[var\(--ow-dur-1\)\] ease-\[var\(--ow-ease-beacon\)\]/)
+})
+
+test("chip remove button keeps a >=24px hit area and avoids nested buttons", () => {
+  // 视觉 16px + 四向 4px 外扩热区 = 24
+  assert.match(source, /data-ow-part="remove"/)
+  assert.match(source, /after:absolute after:content-\[''\] after:-inset-1/)
+  // onClick 与 onRemove 共存时根为 span、主体自成按钮
+  assert.match(source, /interactive && !onRemove \? "button" : "span"/)
+  assert.match(source, /data-ow-part="body-action"/)
+})
+
+test("chip count readout is mono with tabular figures", () => {
+  assert.match(source, /data-ow-part="count"[\s\S]*?font-\[family-name:var\(--ow-font-mono\)\] tabular-nums/)
+})

package/src/components/primitives/Chip/index.tsx

@@ -0,0 +1,252 @@
+"use client"
+
+import type { HTMLAttributes, MouseEvent, ReactNode } from "react"
+import { cn } from "../../../lib/utils"
+import { Close } from "../../composite/Icons"
+import { Tooltip } from "../../composite/Tooltip"
+
+/**
+ * 状态点色族。R2 裁决：功能色点一律 `--ow-{v}-on-tint`，与 Badge 的 `bg-current`
+ * （＝`--ow-badge-{v}-fg` ＝同一个 `-on-tint`）同一口径——**tint 面与地面同一个点色**，
+ * 不再用 `--ow-{v}-fill` 做点色（暗档 fill 是深底色，坐在 --ow-surface 上几乎看不见：
+ * success fill #27775A vs on-tint #7ED2A4）。
+ * neutral/pending 没有功能色 tint 族，保留各自的中性档。
+ */
+export type ChipDotTone = "neutral" | "success" | "warning" | "error" | "info" | "pending"
+
+const DOT_COLOR: Record<ChipDotTone, string> = {
+  neutral: "var(--ow-progress-fill)",
+  success: "var(--ow-success-on-tint)",
+  warning: "var(--ow-warning-on-tint)",
+  error: "var(--ow-error-on-tint)",
+  info: "var(--ow-info-on-tint)",
+  pending: "var(--ow-pending)",
+}
+
+/** square=直角 6（纯分类/筛选）；pill=胶囊 999（带状态点/计数时自动切换）。口径与 composite/Tag 同表。 */
+export type ChipShape = "square" | "pill"
+
+/**
+ * 语气档。
+ * - `neutral`（默认）：中性面 —— --ow-surface 底 ＋ border-strong 边。
+ * - `mention`：挂载 / 提及 / 上下文芯片 —— 既定态的 info tint 三件套
+ *   （`--ow-mention-bg` 底 · `--ow-info-tint-border` 边 · `--ow-mention-text` 字），
+ *   tint 面上的子件（前置图标、删除钮）一并收 on-tint 字色，hover 走 `--ow-info-tint-hover`。
+ *   分类不占功能色极，类别只由**前置图标**区分（R1 双编码）。
+ *   收编原先散在 Composer / DesktopComposer / Home 三处的 `MOUNT_CHIP_CLASS` 手抄配方。
+ */
+export type ChipTone = "neutral" | "mention"
+
+const TONE_CLASS: Record<ChipTone, { rest: string; hover: string }> = {
+  neutral: {
+    rest: "bg-ow-surface border-ow-border-strong text-ow-text",
+    hover: "hover:bg-[var(--ow-hover)] focus-within:bg-[var(--ow-hover)]",
+  },
+  mention: {
+    rest: [
+      "bg-[var(--ow-mention-bg)] border-[color:var(--ow-info-tint-border)] text-[color:var(--ow-mention-text)]",
+      "[&_[data-ow-part=icon]]:text-[color:var(--ow-mention-text)]",
+      "[&_[data-ow-part=remove]]:text-[color:var(--ow-mention-text)]",
+    ].join(" "),
+    hover: "hover:bg-[var(--ow-info-tint-hover)] focus-within:bg-[var(--ow-info-tint-hover)]",
+  },
+}
+
+export interface ChipProps extends Omit<HTMLAttributes<HTMLElement>, "onClick"> {
+  /** 前置图标（16px 档）。 */
+  icon?: ReactNode
+  /** 前置头像；与 icon 同给时头像优先。 */
+  avatar?: ReactNode
+  label: ReactNode
+  /** 状态点：true=neutral；R1 双编码——点色永远伴随可读 label 文字。 */
+  dot?: ChipDotTone | boolean
+  /** 计数读数：mono + tabular-nums。 */
+  count?: ReactNode
+  /** 形状；默认按 §7 自动判：带 dot/count＝胶囊 999，否则直角 6。 */
+  shape?: ChipShape
+  /** 语气；默认 neutral。挂载/提及/上下文位传 `tone="mention"` 取 info tint 三件套。 */
+  tone?: ChipTone
+  /**
+   * 筛选档（A3-B4，原型 template.dc.html L1651 ＋ 逻辑 L4620–4625）。
+   * **传了这个属性即进筛选档**——分类/归属这类「选没选中」的 chip，与承载对象的 chip 不是一件事：
+   * - 未选：透明面 ＋ **常驻 1px --ow-border** ＋ 400。原型明写未选中也带边——一排 chip 的
+   *   命中区边界要始终可见，不是 hover 才长出来（我们原来用 `Button ghost`，未选没有边）。
+   * - 选中：`--ow-current-bg` 面 ＋ **500**。R1 双编码（底色 ＋ 字重），与侧栏 current、
+   *   `SegmentedControl variant="outline"` 的选中同一枚**位置极**语汇：不占状态极、不引功能色。
+   * 不传＝保持既有中性/提及面（承载对象的 chip 没有「选中」这回事）。
+   */
+  selected?: boolean
+  onRemove?: () => void
+  /** 删除钮出现时机：always（默认）或 hover/focus 才显（composer 上下文位用）。 */
+  removeMode?: "always" | "hover"
+  removeLabel?: string
+  onClick?: (event: MouseEvent<HTMLElement>) => void
+  disabled?: boolean
+  /** 无 tooltip 时作悬浮说明。 */
+  description?: string
+  tooltip?: ReactNode
+  className?: string
+}
+
+/**
+ * Chip — 选中上下文/挂载对象/筛选值小件（可带状态点、计数、删除钮）。
+ *
+ * 形状按 §7 形状表自动判：**带状态点或计数＝胶囊 999，其余＝直角 6**（--ow-radius-tag），
+ * 与 composite/Tag 的 `shape ?? (dot || count != null ? "pill" : "square")` 同一条口径。
+ * W5 终扫：根类原来无条件挂 --ow-radius-chip(999)，不看有没有 dot/count——
+ * 纯 label 的 chip 渲出来是一枚满圆胶囊，正是 §7 要收的 999 滥用。
+ * 需要强制某一形时传 `shape`。
+ */
+export function Chip({
+  icon,
+  avatar,
+  label,
+  dot,
+  count,
+  shape,
+  tone = "neutral",
+  selected,
+  onRemove,
+  removeMode = "always",
+  removeLabel = "移除",
+  onClick,
+  disabled = false,
+  description,
+  tooltip,
+  className = "",
+  ...rest
+}: ChipProps) {
+  const interactive = !!onClick && !disabled
+  // 与内嵌删除钮共存时根元素保持 span，主体区自成按钮，避免 button 嵌套。
+  const Root = interactive && !onRemove ? "button" : "span"
+  const dotTone: ChipDotTone | null = dot === true ? "neutral" : dot || null
+  // §7：带点/计数＝胶囊，纯分类/筛选＝6 直角（与 Tag 同解析）。
+  const resolvedShape: ChipShape = shape ?? (dotTone || count != null ? "pill" : "square")
+  const shapeRadiusClass =
+    resolvedShape === "pill" ? "[border-radius:var(--ow-radius-chip)]" : "[border-radius:var(--ow-radius-tag)]"
+  /* 筛选档只换「面 ＋ 边 ＋ 字重」三件，形/高/字号仍归本件（28 高 · 直角 6 · caption）。 */
+  const filterMode = selected !== undefined
+  const filterClass = selected
+    ? "bg-[var(--ow-current-bg)] border-[color:var(--ow-border)] text-ow-text font-medium"
+    : "bg-transparent border-[color:var(--ow-border)] text-ow-text font-normal"
+
+  const leading = avatar || icon
+  const body = (
+    <>
+      {dotTone && (
+        <span
+          data-ow-part="dot"
+          data-tone={dotTone}
+          className="w-1.5 h-1.5 shrink-0 [border-radius:var(--ow-radius-pill)]"
+          style={{ background: disabled ? "var(--ow-disabled-text)" : DOT_COLOR[dotTone] }}
+          aria-hidden="true"
+        />
+      )}
+      {leading && (
+        <span
+          data-ow-part="icon"
+          className="w-4 h-4 inline-flex items-center justify-center shrink-0 overflow-hidden text-ow-text-2"
+          aria-hidden="true"
+        >
+          {leading}
+        </span>
+      )}
+      <span data-ow-part="label" className="min-w-0 overflow-hidden text-ellipsis">
+        {label}
+      </span>
+      {count != null && (
+        <span
+          data-ow-part="count"
+          className="shrink-0 font-[family-name:var(--ow-font-mono)] tabular-nums text-ow-text-2"
+        >
+          {count}
+        </span>
+      )}
+    </>
+  )
+
+  const chip = (
+    <Root
+      type={Root === "button" ? "button" : undefined}
+      data-slot="chip"
+      data-ow-part="surface"
+      data-shape={resolvedShape}
+      data-tone={tone}
+      data-ow-role={filterMode ? (selected ? "on" : "off") : undefined}
+      aria-disabled={disabled || undefined}
+      {...rest}
+      className={cn(
+        "group inline-flex items-center gap-1.5 max-w-[220px] h-7 px-2.5 border",
+        shapeRadiusClass,
+        "font-medium text-ow-fs-caption leading-none whitespace-nowrap",
+        "transition-[background-color,border-color,color] duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+        disabled
+          ? "cursor-not-allowed bg-[var(--ow-disabled-bg)] border-[color:var(--ow-disabled-border)] text-[color:var(--ow-disabled-text)]"
+          : filterMode
+            ? filterClass
+            : TONE_CLASS[tone].rest,
+        /* 筛选档的 hover 只落在未选项上：选中项已经坐在 --ow-current-bg 上，
+           再叠一层 --ow-hover 会把选中面在指针下抹掉一次。 */
+        !disabled &&
+          (interactive || onRemove) &&
+          (filterMode ? !selected && "hover:bg-[var(--ow-hover)]" : TONE_CLASS[tone].hover),
+        interactive && !onRemove && "cursor-pointer active:bg-[var(--ow-press)] ow-focus-ring",
+        className,
+      )}
+      onClick={interactive && !onRemove ? onClick : undefined}
+    >
+      {interactive && onRemove ? (
+        <button
+          type="button"
+          data-ow-part="body-action"
+          className={cn(
+            "inline-flex items-center gap-1.5 min-w-0 cursor-pointer bg-transparent border-0 p-0 m-0 [font:inherit] text-inherit ow-focus-ring",
+            shapeRadiusClass,
+          )}
+          onClick={onClick}
+        >
+          {body}
+        </button>
+      ) : (
+        body
+      )}
+      {onRemove && (
+        <button
+          type="button"
+          data-ow-part="remove"
+          className={cn(
+            // §7：删除钮与根同形——胶囊 chip 里是 999，6 直角 chip 里收到 4（16px 图标钮档），
+            // 不再无条件圆形（原写法在直角 chip 上冒出一枚圆形图标钮，正是 §7 要收的 999 滥用）。
+            "relative w-4 h-4 -mr-1 p-0 shrink-0 items-center justify-center",
+            resolvedShape === "pill" ? "[border-radius:var(--ow-radius-pill)]" : "[border-radius:var(--ow-radius-2xs)]",
+            // §6 hover→press 递进：hover 只换字色（底色递进由根 chip 承担），press 才落底色，
+            // 不再 hover/active 同取 --ow-press 把两档塌成一档。
+            "text-[color:var(--ow-text-3)] hover:text-[color:var(--ow-text)] active:bg-[var(--ow-press)]",
+            "ow-focus-ring disabled:cursor-not-allowed disabled:text-[color:var(--ow-disabled-text)]",
+            // 命中区 ≥24：视觉 16px + 四向外扩 4px 热区
+            "after:absolute after:content-[''] after:-inset-1",
+            removeMode === "hover" ? "hidden group-hover:inline-flex group-focus-within:inline-flex" : "inline-flex",
+          )}
+          disabled={disabled}
+          onClick={(event) => {
+            event.stopPropagation()
+            onRemove()
+          }}
+          aria-label={removeLabel}
+          title={removeLabel}
+        >
+          <Close className="w-3 h-3" aria-hidden="true" />
+        </button>
+      )}
+    </Root>
+  )
+
+  const tooltipContent = tooltip ?? description
+  return tooltipContent ? (
+    <Tooltip content={tooltipContent} side="top" delay={250} className="ow-context-chip-tooltip">
+      {chip}
+    </Tooltip>
+  ) : (
+    chip
+  )
+}

package/src/components/primitives/Divider/Divider.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Divider } from "./index"
+
+const meta = {
+  title: "Primitives/Divider",
+  component: Divider,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Divider>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Horizontal: Story = {
+  render: () => (
+    <div style={{ width: 320 }}>
+      <p style={{ margin: "0 0 12px", fontSize: 13, color: "var(--ow-text)" }}>上文内容</p>
+      <Divider />
+      <p style={{ margin: "12px 0 0", fontSize: 13, color: "var(--ow-text)" }}>下文内容</p>
+    </div>
+  ),
+}
+
+/** 带文字形态：两侧 1px 线 + 眉标样式标签（拉丁文案请自行大写）。 */
+export const WithLabel: Story = {
+  render: () => (
+    <div style={{ width: 320, display: "flex", flexDirection: "column", gap: 16 }}>
+      <Divider>今天</Divider>
+      <Divider>MORE</Divider>
+    </div>
+  ),
+}
+
+export const Vertical: Story = {
+  render: () => (
+    <div style={{ display: "flex", alignItems: "stretch", gap: 12, height: 24 }}>
+      <span style={{ fontSize: 13, color: "var(--ow-text-2)", alignSelf: "center" }}>已保存</span>
+      <Divider orientation="vertical" />
+      <span style={{ fontSize: 13, color: "var(--ow-text-2)", alignSelf: "center" }}>
+        <span className="ow-font-mono">3</span> 处修改
+      </span>
+      <Divider orientation="vertical" />
+      <span style={{ fontSize: 13, color: "var(--ow-text-2)", alignSelf: "center" }}>只读</span>
+    </div>
+  ),
+}
+
+export const InList: Story = {
+  render: () => (
+    <div
+      style={{
+        width: 320,
+        background: "var(--ow-surface)",
+        border: "1px solid var(--ow-border)",
+        borderRadius: "var(--ow-radius-card, 12px)",
+        padding: 12,
+      }}
+    >
+      <div style={{ padding: "8px 4px", fontSize: 13, color: "var(--ow-text)" }}>周报草稿</div>
+      <Divider />
+      <div style={{ padding: "8px 4px", fontSize: 13, color: "var(--ow-text)" }}>数据核对记录</div>
+      <Divider>已归档</Divider>
+      <div style={{ padding: "8px 4px", fontSize: 13, color: "var(--ow-text-3)" }}>旧版调研摘要</div>
+    </div>
+  ),
+}

package/src/components/primitives/Divider/DividerSource.test.mjs

@@ -0,0 +1,26 @@
+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("Divider draws a 1px --ow-border line in both orientations with separator semantics", () => {
+  assert.match(source, /bg-\[var\(--ow-border\)\]/)
+  assert.match(source, /"horizontal" \| "vertical"/)
+  assert.match(source, /role="separator"/)
+  assert.match(source, /aria-orientation="vertical"/)
+  assert.match(source, /w-px self-stretch/)
+  assert.match(source, /h-px w-full/)
+})
+
+test("Divider label form uses eyebrow styling tokens", () => {
+  assert.match(source, /--ow-fs-eyebrow-cjk/)
+  assert.match(source, /--ow-ls-eyebrow-cjk/)
+  assert.match(source, /--ow-eyebrow/)
+  assert.match(source, /font-medium/)
+})
+
+test("Divider is a neutral primitive: no beacon tokens, no shadows", () => {
+  assert.doesNotMatch(source, /--ow-beacon|--ow-accent-dot|--ow-yellow/)
+  assert.doesNotMatch(source, /shadow/)
+})

package/src/components/primitives/Divider/index.tsx

@@ -0,0 +1,65 @@
+import type { HTMLAttributes, ReactNode } from "react"
+import { cn } from "../../../lib/utils"
+
+/**
+ * Divider — 分隔线（DS 2.0 原语，R3 中性件）
+ *
+ * 1px --ow-border；水平 / 垂直两向；带文字形态＝两侧线 + 眉标样式标签
+ * （500 字重 · --ow-fs-eyebrow-cjk · --ow-ls-eyebrow-cjk · --ow-eyebrow 色；
+ * 拉丁文案请自行大写，见 COMPONENT-RULES §8）。
+ */
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+  /** 方向，默认 horizontal；vertical 需父容器为 flex（self-stretch 撑高） */
+  orientation?: "horizontal" | "vertical"
+  /** 仅水平方向支持：居中文字标签（眉标样式） */
+  children?: ReactNode
+  className?: string
+}
+
+const labelClass = [
+  "font-medium",
+  "text-[length:var(--ow-fs-eyebrow-cjk)]",
+  "tracking-[var(--ow-ls-eyebrow-cjk)]",
+  "text-[color:var(--ow-eyebrow)]",
+  "leading-none whitespace-nowrap",
+].join(" ")
+
+export function Divider({ orientation = "horizontal", children, className, ...rest }: DividerProps) {
+  if (orientation === "vertical") {
+    return (
+      <div
+        data-slot="divider"
+        role="separator"
+        aria-orientation="vertical"
+        className={cn("w-px self-stretch bg-[var(--ow-border)]", className)}
+        {...rest}
+      />
+    )
+  }
+
+  if (children) {
+    return (
+      <div
+        data-slot="divider"
+        role="separator"
+        aria-orientation="horizontal"
+        className={cn("flex w-full items-center gap-3", className)}
+        {...rest}
+      >
+        <span aria-hidden="true" className="h-px flex-1 bg-[var(--ow-border)]" />
+        <span className={labelClass}>{children}</span>
+        <span aria-hidden="true" className="h-px flex-1 bg-[var(--ow-border)]" />
+      </div>
+    )
+  }
+
+  return (
+    <div
+      data-slot="divider"
+      role="separator"
+      aria-orientation="horizontal"
+      className={cn("h-px w-full bg-[var(--ow-border)]", className)}
+      {...rest}
+    />
+  )
+}

package/src/components/primitives/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { DROPDOWN_DIVIDER, Dropdown } from "./index"
+
+/**
+ * Dropdown —— 已废弃，DS 2.0 起是 `MenuSurface` 的别名（primitives/Menu）。
+ *
+ * 这里只留两页给还没迁走的调用方对照：属性与旧版逐字同构，形态已经是 2.0 的菜单面。
+ * 新代码请看 **Primitives / Menu**。
+ */
+const meta = {
+  title: "Primitives/Dropdown (deprecated)",
+  component: Dropdown,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Dropdown>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const CompatibleProps: Story = {
+  name: "旧属性照旧可用",
+  args: {
+    width: 200,
+    items: [
+      { key: "edit", label: "重命名" },
+      { key: "duplicate", label: "创建副本" },
+      { key: "delete", label: "删除", danger: true },
+    ],
+  },
+}
+
+export const LegacyDividerValue: Story = {
+  name: "旧分隔项常量",
+  args: {
+    width: 200,
+    items: [{ key: "edit", label: "重命名" }, DROPDOWN_DIVIDER, { key: "delete", label: "删除", danger: true }],
+  },
+}