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

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

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

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

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