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

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

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

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

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

@@ -1,56 +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")
-
-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/)
-})