@orbit-work/ui 0.1.0

package/src/components/composite/ListRow/ListRowSource.test.mjs

@@ -0,0 +1,101 @@
+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 assistantToggleRow = await readFile(new URL("../AssistantToggleRow/index.tsx", import.meta.url), "utf8")
+const settingsView = await readFile(
+  new URL("../../domain/desktop/DesktopSettingsView/index.tsx", import.meta.url),
+  "utf8",
+)
+
+test("ListRow keeps the §7 row metrics: 40 default, 32 compact", () => {
+  assert.match(source, /default: "min-h-10 gap-3 px-3 py-2"/)
+  assert.match(source, /compact: "min-h-8 gap-2 px-2\.5 py-1"/)
+  // 左图标 16 网格
+  assert.match(source, /data-ow-part="icon"[\s\S]*?w-4 h-4 \[&>svg\]:w-4 \[&>svg\]:h-4/)
+})
+
+test("ListRow separates rows with a 1px --ow-border rule only between adjacent rows", () => {
+  // 宽度由基类的常驻 1px 透明环给（选中环与分隔线共用同一条边，不再切 border-t-0/border-t）
+  assert.match(source, /"border border-\[color:transparent\]"/)
+  assert.match(source, /true: "\[\[data-slot=list-row\]\+&\]:border-t-\[color:var\(--ow-border\)\]"/)
+  // 不靠 :first-child——段标题之后的第一行也不该多出顶边
+  assert.doesNotMatch(source, /first:border-t/)
+  assert.match(source, /const showDivider = divider \?\? surface === "base"/)
+})
+
+test("ListRow hover/press follow the surface the row sits on (§5)", () => {
+  assert.match(
+    source,
+    /surface: "base",\s*\n\s*className: "hover:bg-\[var\(--ow-hover\)\] active:bg-\[var\(--ow-press\)\]"/,
+  )
+  assert.match(
+    source,
+    /surface: "pop",\s*\n\s*className: "hover:bg-\[var\(--ow-hover-pop\)\] active:bg-\[var\(--ow-press-pop\)\]"/,
+  )
+  // 弹层内行不得退回地面 hover 档
+  assert.doesNotMatch(source, /surface: "pop",\s*\n\s*className: "hover:bg-\[var\(--ow-hover\)\]/)
+})
+
+test("ListRow states cover focus-visible, per-token disabled and selected (§6)", () => {
+  assert.match(source, /rowIsButton && "ow-focus-ring"/)
+  assert.match(source, /disabled \? "text-\[color:var\(--ow-disabled-text\)\]" : "text-\[color:var\(--ow-text\)\]"/)
+  // 既定态·无彩选中四重编码：--ow-selected-bg 递进底 ＋ border-strong 环 ＋ control-on 勾 ＋ aria-current。
+  // --ow-current-bg 是位置极专用底（侧栏当前项/NavMenu），通用行不得占用。
+  assert.match(
+    source,
+    /selected: \{\s*\n\s*true:\s*"bg-\[var\(--ow-selected-bg\)\] border-\[color:var\(--ow-border-strong\)\]/,
+  )
+  assert.doesNotMatch(source, /bg-\[var\(--ow-current-bg\)\]/)
+  assert.match(source, /data-ow-part="selected-check"/)
+  assert.match(source, /text-\[color:var\(--ow-control-on\)\]/)
+  assert.match(source, /aria-current=\{selected \|\| undefined\}/)
+  // 禁统一透明度禁用态
+  assert.doesNotMatch(source, /opacity-\d/)
+})
+
+test("ListRow never nests a button inside a button", () => {
+  assert.match(source, /const INTERACTIVE_CONTROLS: ListRowControl\[\] = \["switch", "checkbox"\]/)
+  assert.match(source, /const rowIsButton = clickable && !controlIsInteractive && !hasCustomAction/)
+})
+
+test("ListRow motion is background-only, 120ms + ease-beacon, no hover displacement (§9)", () => {
+  assert.match(
+    source,
+    /transition-\[background-color,color,border-color\] duration-\[var\(--ow-dur-1\)\] ease-\[var\(--ow-ease-beacon\)\]/,
+  )
+  // 写成分组形式，避免断言里的字面量本身被 check-ds2 的 hover-move 规则误伤
+  assert.doesNotMatch(source, /hover:(?:scale|translate)-|duration-200|transition-all/)
+})
+
+test("ListRow arbitrary var() values carry type hints (tailwind-merge guard)", () => {
+  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
+  assert.doesNotMatch(source, /font-\[var\(--ow-font-/)
+})
+
+test("ListRow is a neutral pattern piece: no beacon yellow (R3)", () => {
+  assert.doesNotMatch(source, /--ow-yellow|--ow-beacon|--ow-accent-dot/)
+})
+
+test("ListRow subtext is text-2 and title is fs-ui 500", () => {
+  assert.match(source, /data-ow-part="title"[\s\S]*?text-ow-fs-ui font-medium/)
+  assert.match(source, /data-ow-part="description"[\s\S]*?text-\[color:var\(--ow-text-2\)\]/)
+})
+
+test("row family legacy entries are thin deprecated wrappers over ListRow", () => {
+  assert.match(assistantToggleRow, /@deprecated/)
+  assert.match(assistantToggleRow, /import \{ ListRow \} from "\.\.\/ListRow"/)
+  assert.doesNotMatch(assistantToggleRow, /assistant-toggle-row/)
+  assert.match(settingsView, /@deprecated/)
+  // R3（2026-09-04，Terry 意见 5）：`DesktopSettingRow` 仍是 ListRow 的薄壳，外观类从
+  // A2-B2 的 `.set-card` 卡形换回 `.set-row` 分隔线行——行间那条 1px --ow-border 交给
+  // ListRow 自带的 divider 机制（上一个兄弟也是行才画），所以调用点不再关 divider；
+  // 另有一枚 `disabled` 透传（真禁用行逐 token）。JSX 是多行，断言随之多行匹配。
+  assert.match(settingsView, /<ListRow\s+title=\{title\}\s+description=\{description\}\s+action=/)
+  assert.match(settingsView, /className="set-row"/)
+  assert.doesNotMatch(settingsView, /className="set-card"/)
+  assert.doesNotMatch(settingsView, /divider=\{false\}/)
+  // 注释里会点名被退役的旧写法作存档；禁项只查代码。
+  assert.doesNotMatch(settingsView.replace(/\/\*[\s\S]*?\*\//g, ""), /px-0 py-3\.5/)
+})

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

@@ -0,0 +1,309 @@
+"use client"
+
+import { cva } from "class-variance-authority"
+import type { ReactNode } from "react"
+import { cn } from "../../../lib/utils"
+import { Checkbox, Switch } from "../../primitives"
+import { Check, ChevRight } from "../Icons"
+
+/**
+ * ListRow — DS 2.0 行家族（蓝图批次② 合并件：SettingRow / PermissionRow /
+ * ToggleRow / ListRowCheckbox 抽象为同一配方）。
+ *
+ * 度量（COMPONENT-RULES §7）：行高 40，`density="compact"` 密档 32；左图标 16、
+ * 主文 fs-ui 500、副文 fs-body-sm text-2、右操作槽 shrink-0。
+ * 分隔：1px `--ow-border` 上边线，只在上一个兄弟也是 ListRow 时画（首行与段标题
+ * 之后的第一行都不画；`divider={false}` 整行关闭）。
+ * 立面（§5）：贴地无影；`surface="base"` 行 hover=`--ow-hover`→press=`--ow-press`，
+ * 坐在弹层底上的行 `surface="pop"` 一律 `--ow-hover-pop`→`--ow-press-pop`。
+ * 状态（§6）：default/hover/press/focus-visible（2px 环＋2px 缝，走 ow-focus-ring）/
+ * disabled 逐 token / selected（`--ow-selected-bg` 递进底 ＋ `--ow-border-strong` 环 ＋
+ *   `--ow-control-on` 勾，无彩四重编码）。
+ * 动效（§9）：仅底色过渡，120ms＋ease-beacon，禁位移缩放。
+ * R3：中性件，禁信标荧黄。
+ *
+ * 焦点口径（无嵌套按钮）：
+ * - 右槽是静态内容（chevron / none / 文本）时，`onClick` 让根元素成为 button，
+ *   整行一个焦点位；
+ * - 右槽是交互控件（switch / checkbox / 自定义按钮）时，根保持 div，焦点位归控件，
+ *   `onClick` 仍作为鼠标便捷命中区生效（键盘走控件本身）。
+ */
+export type ListRowDensity = "default" | "compact"
+/** 行所在表面：base=地/面板 · pop=弹层（菜单/下拉/命令面板），决定 hover 档 */
+export type ListRowSurface = "base" | "pop"
+/** 右操作槽预设；自定义控件用 `action` 插槽 */
+export type ListRowControl = "none" | "switch" | "checkbox" | "chevron"
+
+export interface ListRowProps {
+  /** 左图标插槽，16 网格，色随 text-3 */
+  icon?: ReactNode
+  /** 主文，fs-ui 500 */
+  title: ReactNode
+  /** 副文，fs-body-sm text-2 */
+  description?: ReactNode
+  /** 右操作槽预设：switch/checkbox 需配 checked + onCheckedChange */
+  control?: ListRowControl
+  /** 自定义右操作槽；给出时覆盖 control 预设 */
+  action?: ReactNode
+  checked?: boolean
+  /** checkbox 预设的混合态 */
+  indeterminate?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  /** 行高档：default=40 · compact=32 */
+  density?: ListRowDensity
+  surface?: ListRowSurface
+  /** 上分隔线，默认 base 表面开、pop 表面关；组内首行自动不画 */
+  divider?: boolean
+  /** 整行可点。右槽为静态内容时根元素升为 button */
+  onClick?: () => void
+  /**
+   * 选中态（既定态·无彩选中，四重编码）：`--ow-selected-bg` 递进底 ＋ `--ow-border-strong`
+   * 1px 环 ＋ 行尾 `--ow-control-on` 勾 ＋ aria-current。
+   * W-R2 订正：原只有 `--ow-current-bg` 一重底色——那是**位置极**专用底（侧栏当前项
+   * ／NavMenu／.rail-item.active），通用行选中在同库另有 `--ow-selected-bg`
+   * （ModelPickerList 的 `.modelopt.active` 用的就是它），两件混用会稀释位置极的专属性。
+   */
+  selected?: boolean
+  disabled?: boolean
+  /** switch/checkbox 预设的无障碍名，缺省取 title 的字符串值 */
+  controlAriaLabel?: string
+  className?: string
+}
+
+const rowVariants = cva(
+  [
+    "relative flex w-full box-border items-center text-left",
+    // 1px 透明环常驻：选中/分隔线只换 border-color，行高与内容框不因描边出现而跳动
+    // （同 .modelopt 的「rest border transparent → .active border-strong」口径）。
+    "border border-[color:transparent]",
+    "transition-[background-color,color,border-color] duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+  ].join(" "),
+  {
+    variants: {
+      density: {
+        default: "min-h-10 gap-3 px-3 py-2",
+        compact: "min-h-8 gap-2 px-2.5 py-1",
+      },
+      surface: {
+        base: "[border-radius:0px]",
+        pop: "[border-radius:var(--ow-radius-control)]",
+      },
+      divider: {
+        // 只在「上一个兄弟也是行」时画分隔线：不依赖 :first-child，
+        // 行组前面挂着段标题/说明时也不会多出一条顶边。宽度由基类的常驻透明环给，
+        // 这里只点亮顶边颜色（原来切 border-t-0/border-t 会与选中环抢同一条边）。
+        true: "[[data-slot=list-row]+&]:border-t-[color:var(--ow-border)]",
+        false: "",
+      },
+      interactive: {
+        true: "cursor-pointer",
+        false: "",
+      },
+      disabled: {
+        true: "cursor-not-allowed",
+        false: "",
+      },
+      selected: {
+        true: "bg-[var(--ow-selected-bg)] border-[color:var(--ow-border-strong)] [[data-slot=list-row]+&]:border-t-[color:var(--ow-border-strong)]",
+        false: "bg-transparent",
+      },
+    },
+    compoundVariants: [
+      {
+        interactive: true,
+        disabled: false,
+        surface: "base",
+        className: "hover:bg-[var(--ow-hover)] active:bg-[var(--ow-press)]",
+      },
+      {
+        interactive: true,
+        disabled: false,
+        surface: "pop",
+        className: "hover:bg-[var(--ow-hover-pop)] active:bg-[var(--ow-press-pop)]",
+      },
+    ],
+    defaultVariants: {
+      density: "default",
+      surface: "base",
+      divider: true,
+      interactive: false,
+      disabled: false,
+      selected: false,
+    },
+  },
+)
+
+/** 交互控件占右槽时，根元素不得再是 button（避免嵌套按钮吞焦点） */
+const INTERACTIVE_CONTROLS: ListRowControl[] = ["switch", "checkbox"]
+
+export function ListRow({
+  icon,
+  title,
+  description,
+  control = "none",
+  action,
+  checked,
+  indeterminate,
+  onCheckedChange,
+  density = "default",
+  surface = "base",
+  divider,
+  onClick,
+  selected = false,
+  disabled = false,
+  controlAriaLabel,
+  className,
+}: ListRowProps) {
+  const showDivider = divider ?? surface === "base"
+  const hasCustomAction = action !== undefined && action !== null
+  const controlIsInteractive = !hasCustomAction && INTERACTIVE_CONTROLS.includes(control)
+  const clickable = Boolean(onClick) && !disabled
+  // 右槽为静态内容 → 整行升为 button（一个焦点位）；否则焦点位归右槽控件。
+  const rowIsButton = clickable && !controlIsInteractive && !hasCustomAction
+  const ariaLabel = controlAriaLabel ?? (typeof title === "string" ? title : undefined)
+
+  const trailing = hasCustomAction ? (
+    action
+  ) : control === "switch" ? (
+    <Switch checked={checked} onChange={onCheckedChange} disabled={disabled} aria-label={ariaLabel} />
+  ) : control === "checkbox" ? (
+    <Checkbox
+      checked={checked}
+      indeterminate={indeterminate}
+      onChange={onCheckedChange}
+      disabled={disabled}
+      aria-label={ariaLabel}
+    />
+  ) : control === "chevron" ? (
+    <ChevRight
+      className={cn("w-4 h-4", disabled ? "text-[color:var(--ow-disabled-text)]" : "text-[color:var(--ow-text-3)]")}
+      aria-hidden="true"
+    />
+  ) : null
+
+  const body = (
+    <>
+      {icon && (
+        <span
+          data-ow-part="icon"
+          aria-hidden="true"
+          className={cn(
+            "shrink-0 inline-flex items-center justify-center w-4 h-4 [&>svg]:w-4 [&>svg]:h-4",
+            disabled ? "text-[color:var(--ow-disabled-text)]" : "text-[color:var(--ow-text-3)]",
+          )}
+        >
+          {icon}
+        </span>
+      )}
+      <span data-ow-part="labels" 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] truncate",
+            disabled ? "text-[color:var(--ow-disabled-text)]" : "text-[color:var(--ow-text)]",
+          )}
+        >
+          {title}
+        </span>
+        {description !== undefined && description !== null && description !== false && (
+          <span
+            data-ow-part="description"
+            className={cn(
+              "text-ow-fs-body-sm font-normal leading-[1.4] min-w-0",
+              disabled ? "text-[color:var(--ow-disabled-text)]" : "text-[color:var(--ow-text-2)]",
+            )}
+          >
+            {description}
+          </span>
+        )}
+      </span>
+      {(selected || (trailing !== null && trailing !== undefined)) && (
+        <span data-ow-part="action" className="shrink-0 inline-flex items-center gap-2">
+          {/* 选中的形编码（R1 颜色不单独承担状态）：--ow-control-on 无彩极色的勾，
+              与 ModelPickerList 的 .modelopt__check 同一枚。 */}
+          {selected && (
+            <span
+              data-ow-part="selected-check"
+              aria-hidden="true"
+              className="shrink-0 inline-flex items-center justify-center w-4 h-4 text-[color:var(--ow-control-on)] [&>svg]:w-4 [&>svg]:h-4"
+            >
+              <Check />
+            </span>
+          )}
+          {trailing}
+        </span>
+      )}
+    </>
+  )
+
+  const rootClassName = cn(
+    rowVariants({
+      density,
+      surface,
+      divider: showDivider,
+      interactive: clickable,
+      disabled,
+      selected,
+    }),
+    rowIsButton && "ow-focus-ring",
+    className,
+  )
+
+  const dataAttrs = {
+    "data-slot": "list-row",
+    "data-density": density,
+    "data-surface": surface,
+    "data-ow-part": "surface",
+    "data-ow-state": cn(disabled && "disabled", selected && "selected", clickable && "interactive").trim() || undefined,
+  }
+
+  if (rowIsButton) {
+    return (
+      <button
+        type="button"
+        {...dataAttrs}
+        className={rootClassName}
+        disabled={disabled}
+        aria-current={selected || undefined}
+        onClick={onClick}
+      >
+        {body}
+      </button>
+    )
+  }
+
+  return (
+    <div
+      {...dataAttrs}
+      className={rootClassName}
+      aria-disabled={disabled || undefined}
+      onClick={clickable ? onClick : undefined}
+    >
+      {body}
+    </div>
+  )
+}
+
+export interface ListRowGroupProps {
+  /** 组的无障碍名；给出时组带 role="group" */
+  label?: string
+  children: ReactNode
+  className?: string
+}
+
+/**
+ * ListRowGroup — 行家族容器，只负责纵向堆叠并给一组行一个无障碍名。
+ * 分隔线由 ListRow 自己的相邻兄弟选择器承担，容器不参与。
+ */
+export function ListRowGroup({ label, children, className }: ListRowGroupProps) {
+  return (
+    <div
+      data-slot="list-row-group"
+      role={label ? "group" : undefined}
+      aria-label={label}
+      className={cn("flex flex-col w-full min-w-0", className)}
+    >
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,192 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Markdown } from "./index"
+
+const meta = {
+  title: "Composite/Markdown",
+  component: Markdown,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Markdown>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const BasicText: Story = {
+  args: {
+    source: `# Heading 1
+
+This is a paragraph with **bold text**, *italic text*, and \`inline code\`.
+
+## Heading 2
+
+Another paragraph with _italic_ and some regular text.`,
+  },
+}
+
+export const Lists: Story = {
+  args: {
+    source: `# Task List
+
+Unordered list:
+- First item
+- Second item with **bold**
+- Third item with \`code\`
+
+Ordered list:
+1. Step one
+2. Step two
+3. Step three`,
+  },
+}
+
+export const CodeBlock: Story = {
+  args: {
+    source: `# Code Example
+
+Here's a TypeScript function:
+
+\`\`\`typescript
+function greet(name: string): string {
+  return \`Hello, \${name}!\`
+}
+\`\`\`
+
+And a bash command:
+
+\`\`\`bash
+npm install @anthropic-ai/sdk
+\`\`\``,
+  },
+}
+
+export const Table: Story = {
+  args: {
+    source: `# Data Table
+
+| Name | Role | Status |
+|------|------|--------|
+| Alice | Engineer | Active |
+| Bob | Designer | Active |
+| Carol | PM | Away |`,
+  },
+}
+
+export const Links: Story = {
+  args: {
+    source: `# Links
+
+Visit [Anthropic](https://anthropic.com) for more info.
+
+Or check out https://github.com/anthropics directly.`,
+  },
+}
+
+export const Mixed: Story = {
+  args: {
+    source: `# Project Overview
+
+This project demonstrates **markdown rendering** with support for:
+
+1. Headings (H1-H6)
+2. Text formatting (*italic*, **bold**, \`code\`)
+3. Lists (ordered and unordered)
+4. Code blocks with syntax highlighting
+
+## Example
+
+\`\`\`javascript
+const example = {
+  name: 'Markdown Demo',
+  features: ['headings', 'lists', 'code']
+}
+\`\`\`
+
+### Features Table
+
+| Feature | Supported |
+|---------|-----------|
+| Bold | ✓ |
+| Italic | ✓ |
+| Code | ✓ |
+| Links | ✓ |
+
+For more info, visit https://example.com`,
+  },
+}
+
+/** 标题阶：h1 19 / h2 16 / h3 14 / h4-h6 14 降至 text-2（§2 全部走字号 token） */
+export const HeadingLadder: Story = {
+  args: {
+    source: `# 一级标题 · 项目周报
+
+## 二级标题 · 本周进展
+
+### 三级标题 · 索引重建
+
+#### 四级标题 · 备注
+
+正文段落。四级以下与三级同号，靠 text-2 再降一档。`,
+  },
+}
+
+/** 引用块：贴地面 0 影 ＋ 1px 边，左侧 2px 引导条；块内空行分段 */
+export const Blockquote: Story = {
+  args: {
+    source: `## 评审意见
+
+> 合并前先核对 \`config.retries\`，完成度 82% 已写回任务卡。
+>
+> 缓存过期那条告警可以先不管，重建索引后会自己消。
+
+回到正文。`,
+  },
+}
+
+/** 行内 code：surface-2 井底 ＋1px 边 ＋radius 4 ＋0.9em；读数走 mono */
+export const InlineCode: Story = {
+  args: {
+    source: `把 \`retries\` 从 \`0\` 调到 \`2\`，然后跑 \`orbitwork run brief --fast\`。
+
+配置文件在 \`packages/ui/styles/tokens.css\`，改完记得跑一遍校验。`,
+  },
+}
+
+/** 表格＝DataTable 语法轻量版：表头 surface-2 井底，右对齐列按数值列走 mono+tabular-nums */
+export const AlignedTable: Story = {
+  args: {
+    source: `## 本周任务
+
+| 任务 | 负责人 | 耗时 |
+|------|--------|-----:|
+| 重建索引 | 陈默 | 3.2s |
+| 迁移代码面 | 林一 | 14.8s |
+| 校验 token | 周舟 | 0.9s |`,
+  },
+}
+
+/** 双主题对照：代码面与表格都随主题翻转（常暗只属终端） */
+export const DualTheme: Story = {
+  args: { source: "" },
+  render: () => {
+    const source = `## 迁移说明
+
+把 \`--ow-code-bg\` 接到代码面上。
+
+\`\`\`typescript
+const codeBg = "var(--ow-code-bg)"
+\`\`\`
+
+> 代码块随主题翻转，终端才是常暗域。`
+    return (
+      <div className="flex">
+        {(["light", "dark"] as const).map((theme) => (
+          <div key={theme} data-theme={theme} className="flex-1 bg-ow-bg text-ow-text p-4">
+            <Markdown source={source} />
+          </div>
+        ))}
+      </div>
+    )
+  },
+}