@orbit-work/ui 0.1.0

package/src/components/composite/FilterBar/FilterBarSource.test.mjs

@@ -0,0 +1,75 @@
+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 stories = await readFile(new URL("./FilterBar.stories.tsx", import.meta.url), "utf8")
+
+test("FilterBar 是 R3 中性件：无信标/荧黄", () => {
+  assert.doesNotMatch(source, /--ow-beacon|--ow-accent-dot|--ow-yellow|--ow-data-today/)
+})
+
+test("三合一：筛选 Tag（直角 6）+ 搜索 Field + 排序 Select 各成一槽", () => {
+  assert.match(source, /import \{ Tag \} from "\.\.\/Tag"/)
+  assert.match(source, /shape="square"/)
+  assert.match(source, /import \{ Field \} from "\.\.\/\.\.\/primitives\/Field"/)
+  assert.match(source, /import \{ Select, type SelectOption \} from "\.\.\/\.\.\/primitives\/Select"/)
+  assert.match(source, /data-ow-part="filters"/)
+  assert.match(source, /data-ow-part="search"/)
+  assert.match(source, /data-ow-part="sort"/)
+})
+
+// 既定态·无彩选中：surface 递进（--ow-selected-bg）＋ border-strong（default 面自带）
+// ＋ 500 字重 ＋ aria-pressed。全库选中加重只有 500 一档（ModelPickerList/NavMenu/ListRow）。
+test("选中筛选值多重编码（R1）：--ow-selected-bg 递进底 + 500 字重 + aria-pressed", () => {
+  assert.match(source, /pressed=\{filter\.active \?\? false\}/)
+  assert.match(source, /bg-\[var\(--ow-selected-bg\)\] font-medium/)
+  assert.doesNotMatch(source, /font-semibold/)
+  // 选中项的描边不得弱于未选中项：不再切到 Tag 的 primary 面
+  assert.doesNotMatch(source, /variant=\{filter\.active \? "primary"/)
+})
+
+test("贴地立面：0 影 + 1px --ow-border + 圆角 12；flush 时交给外层容器", () => {
+  assert.match(
+    source,
+    /!flush && "border border-\[color:var\(--ow-border\)\] \[border-radius:var\(--ow-radius-card\)\]"/,
+  )
+  assert.doesNotMatch(source, /shadow-\[var\(--ow-shadow/)
+})
+
+test("筛选条不是弹层：不得出现 pop 档交互底（pop 档由 Select 自己的菜单承担）", () => {
+  assert.doesNotMatch(source, /--ow-hover-pop|--ow-press-pop|--ow-popover-bg/)
+})
+
+test("折叠形态（原 FilterDisclosure）：aria-expanded + aria-controls，展开动效 200ms + ease-beacon", () => {
+  assert.match(source, /aria-expanded=\{isExpanded\}/)
+  assert.match(source, /aria-controls=\{panelId\}/)
+  assert.match(source, /duration-\[var\(--ow-dur-2\)\] ease-\[var\(--ow-ease-beacon\)\]/)
+})
+
+test("动效无位移/缩放式 hover 反馈", () => {
+  assert.doesNotMatch(source, /hover:[^"]*(?:scale-|translate-)/)
+})
+
+test("Tailwind 任意值 var() 全部带类型标注（ambiguous-arbitrary 铁律）", () => {
+  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
+  assert.doesNotMatch(source, /font-\[var\(--ow-font-/)
+})
+
+test("stories 覆盖全部形态状态 + 双主题、不写死主题", () => {
+  for (const name of [
+    "Default",
+    "FiltersOnly",
+    "SearchOnly",
+    "WithReset",
+    "WithActions",
+    "Disclosure",
+    "Disabled",
+    "FlushInTable",
+    "ThemePair",
+  ]) {
+    assert.match(stories, new RegExp(`export const ${name}\\b`))
+  }
+  assert.match(stories, /data-theme="light"/)
+  assert.match(stories, /data-theme="dark"/)
+})

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

@@ -0,0 +1,206 @@
+"use client"
+
+import { type ReactNode, useId, useState } from "react"
+import { cn } from "../../../lib/utils"
+import { Button } from "../../primitives/Button"
+import { Field } from "../../primitives/Field"
+import { Select, type SelectOption } from "../../primitives/Select"
+import { ChevDown, Search } from "../Icons"
+import { Tag } from "../Tag"
+
+/**
+ * FilterBar — DS 2.0 筛选条（蓝图批次② 三合一：CatalogFilterBar / FilterDisclosure /
+ * DataTableToolbar 统一口径 · R3 中性件，无信标元素）。
+ *
+ * 三个槽按固定次序排布：筛选 Tag（直角 6，`Tag shape="square"`，纯分类不带点）→
+ * 搜索 Field（32 高、前缀放大镜）→ 排序 Select。三者都可缺省，缺省即不渲染。
+ * `collapsible` 打开时是 FilterDisclosure 形态：一行主控 + 可展开的次级筛选区
+ * （展开态用 `--ow-dur-2` + `--ow-ease-beacon`，无位移式 hover）。
+ * 贴在表格顶部时用 `DataTableToolbar` 包一层，或直接传 `flush` 去掉自身边框圆角。
+ *
+ * 立面（§5）：贴地 0 影 + 1px `--ow-border`；行内 hover 为地面档 `--ow-hover`
+ * （筛选条不是弹层，pop 档只属于 Select 打开后的菜单，由 Select 自己承担）。
+ */
+
+export interface FilterBarFilter {
+  key: string
+  label: ReactNode
+  /**
+   * 选中态（既定态·无彩选中）：default 面 ＋ --ow-selected-bg 递进底 ＋ border-strong
+   * ＋ 500 字重 ＋ aria-pressed。W-R2 订正：原走 Tag 的 primary 面（surface-2/border），
+   * 边框反而比未选中弱一档；且 Tag 的 primary 自 W3 起已是纯中性别名，注释里
+   * 「颜色是第二编码」的那重颜色早已不存在。
+   */
+  active?: boolean
+  disabled?: boolean
+}
+
+export interface FilterBarProps {
+  /** 筛选值（直角 Tag）；点击回调收到被点的 key */
+  filters?: FilterBarFilter[]
+  onFilterToggle?: (key: string) => void
+  /** 搜索框；不传即不渲染 */
+  search?: {
+    value: string
+    onChange: (value: string) => void
+    placeholder?: string
+    disabled?: boolean
+    /** 搜索框宽度，默认 220px */
+    width?: number | string
+  }
+  /** 排序下拉；不传即不渲染 */
+  sort?: {
+    value: string
+    options: SelectOption[]
+    onChange: (value: string) => void
+    disabled?: boolean
+    /** 下拉宽度，默认 160px */
+    width?: number | string
+    /** 无可见标签时的可访问名，默认「排序」 */
+    label?: string
+  }
+  /** 「清空筛选」按钮；传了才渲染 */
+  onReset?: () => void
+  resetLabel?: string
+  /** 右侧动作区（新建 / 导出 …） */
+  actions?: ReactNode
+  /** 次级筛选区内容；配 collapsible 使用 */
+  children?: ReactNode
+  /** 折叠形态（原 FilterDisclosure）：主行右侧出现展开钮 */
+  collapsible?: boolean
+  /** 非受控初始展开 */
+  defaultExpanded?: boolean
+  /** 受控展开 */
+  expanded?: boolean
+  onExpandedChange?: (expanded: boolean) => void
+  expandLabel?: string
+  /** 贴合容器：去掉自身边框与圆角（用于 DataTable 顶部） */
+  flush?: boolean
+  className?: string
+}
+
+export function FilterBar({
+  filters,
+  onFilterToggle,
+  search,
+  sort,
+  onReset,
+  resetLabel = "清空筛选",
+  actions,
+  children,
+  collapsible = false,
+  defaultExpanded = false,
+  expanded,
+  onExpandedChange,
+  expandLabel = "更多筛选",
+  flush = false,
+  className,
+}: FilterBarProps) {
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded)
+  const isExpanded = expanded ?? uncontrolledExpanded
+  const panelId = useId()
+  const toggleExpanded = () => {
+    const next = !isExpanded
+    if (expanded === undefined) setUncontrolledExpanded(next)
+    onExpandedChange?.(next)
+  }
+
+  return (
+    <div
+      data-slot="filter-bar"
+      data-ow-expanded={collapsible ? String(isExpanded) : undefined}
+      className={cn(
+        "w-full bg-[var(--ow-surface)]",
+        !flush && "border border-[color:var(--ow-border)] [border-radius:var(--ow-radius-card)]",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-2 flex-wrap px-3 py-2">
+        {filters && filters.length > 0 && (
+          <div data-ow-part="filters" className="flex items-center gap-1.5 flex-wrap min-w-0" role="group">
+            {filters.map((filter) => (
+              <Tag
+                key={filter.key}
+                shape="square"
+                size="md"
+                variant="default"
+                disabled={filter.disabled}
+                pressed={filter.active ?? false}
+                onClick={() => onFilterToggle?.(filter.key)}
+                className={
+                  filter.active ? "bg-[var(--ow-selected-bg)] font-medium text-[color:var(--ow-text)]" : undefined
+                }
+              >
+                {filter.label}
+              </Tag>
+            ))}
+          </div>
+        )}
+        {search && (
+          <div data-ow-part="search" style={{ width: search.width ?? 220 }} className="min-w-0 shrink-0">
+            <Field
+              type="search"
+              value={search.value}
+              onChange={search.onChange}
+              placeholder={search.placeholder ?? "搜索"}
+              disabled={search.disabled}
+              aria-label={search.placeholder ?? "搜索"}
+              prefix={<Search className="w-4 h-4" aria-hidden="true" />}
+            />
+          </div>
+        )}
+        {sort && (
+          <div
+            data-ow-part="sort"
+            style={{ width: sort.width ?? 160 }}
+            className="min-w-0 shrink-0"
+            aria-label={sort.label ?? "排序"}
+          >
+            <Select
+              value={sort.value}
+              options={sort.options}
+              onChange={sort.onChange}
+              disabled={sort.disabled}
+              placeholder={sort.label ?? "排序"}
+            />
+          </div>
+        )}
+        {onReset && (
+          <Button variant="ghost" size="sm" onClick={onReset}>
+            {resetLabel}
+          </Button>
+        )}
+        <div className="flex-1" />
+        {collapsible && children && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={toggleExpanded}
+            aria-expanded={isExpanded}
+            aria-controls={panelId}
+            data-ow-part="expand"
+          >
+            {expandLabel}
+            <ChevDown
+              className={cn(
+                "w-4 h-4 transition-transform duration-[var(--ow-dur-2)] ease-[var(--ow-ease-beacon)]",
+                isExpanded && "rotate-180",
+              )}
+              aria-hidden="true"
+            />
+          </Button>
+        )}
+        {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
+      </div>
+      {children && (!collapsible || isExpanded) && (
+        <div
+          id={panelId}
+          data-ow-part="panel"
+          className="flex items-center gap-2 flex-wrap border-t border-[color:var(--ow-border)] px-3 py-2"
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,158 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { Field, SegmentedControl, Switch } from "../../primitives"
+import { FormField, KeyValueField, type KeyValuePair } from "./index"
+
+const meta = {
+  title: "Composite/FormField",
+  component: FormField,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof FormField>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 表单底衬：不写死主题，跟随当前档。 */
+function Form({ children, width = 460 }: { children: React.ReactNode; width?: number }) {
+  return <div style={{ width, display: "flex", flexDirection: "column", gap: 20 }}>{children}</div>
+}
+
+export const Default: Story = {
+  args: {
+    label: "连接器名称",
+    children: <Field placeholder="例如 filesystem" size="lg" />,
+  },
+  render: (args) => (
+    <Form>
+      <FormField {...args} />
+    </Form>
+  ),
+}
+
+/** label 行尾轻提示 + 说明行 + 必填标记。 */
+export const LabelVariants: Story = {
+  args: { label: "占位", children: null },
+  render: () => (
+    <Form>
+      <FormField label="连接器名称" required>
+        <Field placeholder="例如 filesystem" size="lg" />
+      </FormField>
+      <FormField label="额外参数" hint="可选">
+        <Field placeholder="-y @modelcontextprotocol/server-filesystem" size="lg" />
+      </FormField>
+      <FormField label="工作目录" hint="可选" description="只支持 ./ 开头的相对路径，留空即用项目根目录。">
+        <Field placeholder="./workspace" size="lg" />
+      </FormField>
+    </Form>
+  ),
+}
+
+/** 错误态：一句人话 + mono 技术详情（≤2 行），控件同步进 error 边框。 */
+export const ErrorStates: Story = {
+  args: { label: "占位", children: null },
+  render: () => (
+    <Form>
+      <FormField label="服务地址" error="这个地址连不上，检查一下协议和端口。">
+        <Field value="http://localhost:9/mcp" size="lg" invalid readOnly />
+      </FormField>
+      <FormField
+        label="粘贴 MCP 配置 JSON"
+        error="JSON 解析失败，第 7 行少了一个逗号。"
+        errorDetail='SyntaxError: Unexpected string in JSON at position 142 (line 7 column 5) while parsing {"mcpServers":{…}}'
+      >
+        <Field multiline value={'{\n  "mcpServers": {\n  }\n}'} size="lg" invalid readOnly />
+      </FormField>
+    </Form>
+  ),
+}
+
+/** disabled：标题/说明/控件逐 token 进禁用色，不用统一透明度。 */
+export const Disabled: Story = {
+  args: { label: "占位", children: null },
+  render: () => (
+    <Form>
+      <FormField label="连接器名称" description="已连接的连接器不能改名。" disabled>
+        <Field value="filesystem" size="lg" disabled readOnly />
+      </FormField>
+    </Form>
+  ),
+}
+
+/** 多控件槽（asGroup）：根退回 div + role=group，标题不误绑到第一个控件。 */
+export const GroupSlot: Story = {
+  args: { label: "占位", children: null },
+  render: function GroupSlotStory() {
+    const [transport, setTransport] = useState("stdio")
+    return (
+      <Form>
+        <FormField label="传输方式" description="stdio 走本地进程，HTTP/SSE 走远端服务。" asGroup>
+          <SegmentedControl
+            value={transport}
+            onChange={setTransport}
+            options={[
+              { value: "stdio", label: "stdio" },
+              { value: "streamable-http", label: "HTTP" },
+              { value: "sse", label: "SSE" },
+            ]}
+          />
+        </FormField>
+        <FormField label="允许自动重连" asGroup>
+          <Switch defaultChecked aria-label="允许自动重连" />
+        </FormField>
+      </Form>
+    )
+  },
+}
+
+/** KeyValueField：McpKeyValueField 的合并去处，键值走 mono 读数。 */
+export const KeyValue: Story = {
+  args: { label: "占位", children: null },
+  render: function KeyValueStory() {
+    const [env, setEnv] = useState<KeyValuePair[]>([
+      { key: "ROOT_PATH", value: "/Users/me/Projects" },
+      { key: "LOG_LEVEL", value: "debug" },
+    ])
+    return (
+      <Form width={560}>
+        <KeyValueField
+          label="环境变量"
+          hint="可选 · 键值对"
+          values={env}
+          onChange={setEnv}
+          addLabel="添加变量"
+          removeAriaLabel="移除这个环境变量"
+        />
+      </Form>
+    )
+  },
+}
+
+/** 键值对的空态与脱敏态：空列表自动给一行空白；masked 行留空即保留原值。 */
+export const KeyValueStates: Story = {
+  args: { label: "占位", children: null },
+  render: function KeyValueStatesStory() {
+    const [empty, setEmpty] = useState<KeyValuePair[]>([])
+    const [masked, setMasked] = useState<KeyValuePair[]>([{ key: "API_TOKEN", value: "", masked: true }])
+    return (
+      <Form width={560}>
+        <KeyValueField label="Headers" hint="可选 · 键值对" values={empty} onChange={setEmpty} addLabel="添加 Header" />
+        <KeyValueField
+          label="环境变量"
+          hint="可选 · 键值对"
+          description="敏感值以占位符展示，留空保存即继续使用原值。"
+          values={masked}
+          onChange={setMasked}
+          addLabel="添加变量"
+        />
+        <KeyValueField
+          label="环境变量（只读）"
+          hint="连接中不可改"
+          values={[{ key: "ROOT_PATH", value: "/srv/data" }]}
+          onChange={() => {}}
+          disabled
+        />
+      </Form>
+    )
+  },
+}

package/src/components/composite/FormField/FormFieldSource.test.mjs

@@ -0,0 +1,56 @@
+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("FormField is label + hint + description + control slot + error row", () => {
+  for (const part of ["label", "hint", "description", "control", "error"]) {
+    assert.match(source, new RegExp(`data-ow-part="${part}"`))
+  }
+  assert.match(source, /data-slot="form-field"/)
+})
+
+test("FormField error row reuses the Field/InlineMessage grammar", () => {
+  // 一句人话 error 色 + ErrorCircle 图标
+  assert.match(source, /import \{ Button, Field \} from "\.\.\/\.\.\/primitives"/)
+  assert.match(source, /ErrorCircle/)
+  assert.match(source, /text-ow-fs-ui leading-\[1\.4\] text-\[color:var\(--ow-error\)\]/)
+  // mono 详情 ≤2 行
+  assert.match(source, /font-\[family-name:var\(--ow-font-mono\)\] tabular-nums[\s\S]*?line-clamp-2/)
+  assert.match(source, /role="alert"/)
+})
+
+test("FormField label binding never mis-targets a multi-control slot", () => {
+  assert.match(source, /const Root = htmlFor \|\| asGroup \? "div" : "label"/)
+  assert.match(source, /role=\{asGroup \? "group" : undefined\}/)
+  assert.match(source, /aria-labelledby=\{asGroup \? labelId : undefined\}/)
+})
+
+test("FormField disabled is per-token, not a blanket opacity (§6)", () => {
+  assert.match(source, /disabled \? "text-\[color:var\(--ow-disabled-text\)\]" : "text-\[color:var\(--ow-text\)\]"/)
+  assert.doesNotMatch(source, /opacity-\d/)
+})
+
+test("KeyValueField is the merged McpKeyValueField recipe on top of FormField", () => {
+  assert.match(source, /export function KeyValueField/)
+  assert.match(source, /<FormField \{\.\.\.fieldProps\} asGroup disabled=\{disabled\}>/)
+  // 键值是读数 → mono
+  assert.match(
+    source,
+    /const MONO_CONTROL = "\[&_input\]:font-\[family-name:var\(--ow-font-mono\)\] \[&_input\]:tabular-nums"/,
+  )
+  // 移除/添加走原语 Button，不再手搓 .env-rm/.env-add
+  assert.match(source, /icon=\{<Close \/>\}[\s\S]*?aria-label=\{removeAriaLabel\}/)
+  assert.match(source, /variant="secondary"[\s\S]*?icon=\{<Plus \/>\}/)
+  assert.doesNotMatch(source, /className="[^"]*\b(?:env-rm|env-add|env-row|env-rows|mcp-field|mcp-list-field)\b/)
+})
+
+test("FormField arbitrary var() values carry type hints (tailwind-merge guard)", () => {
+  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
+  assert.doesNotMatch(source, /font-\[var\(--ow-font-/)
+})
+
+test("FormField is a neutral pattern piece: no beacon yellow (R3)", () => {
+  assert.doesNotMatch(source, /--ow-yellow|--ow-beacon|--ow-accent-dot/)
+})