@orbit-work/ui 0.1.0

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

@@ -0,0 +1,91 @@
+"use client"
+
+import { useCallback, useState } from "react"
+import { useImeAwareEnter } from "../../../hooks/useImeAwareEnter"
+import { cn } from "../../../lib/utils"
+import { Button, Field } from "../../primitives"
+import { Close, Search } from "../Icons"
+
+export type SearchInputProps = {
+  value?: string
+  placeholder?: string
+  onChange?: (value: string) => void
+  onSearch?: (value: string) => void
+  /** 控件高度档：md=32（默认）· lg=40 */
+  size?: "md" | "lg"
+  disabled?: boolean
+  className?: string
+}
+
+/**
+ * SearchInput — Field 的搜索预设配方（DS 2.0 蓝图批次①）：
+ * 搜索图标前缀 + 有值时清除钮后缀；圆角/高度/三态边框全部由 Field 壳承担
+ * （2.0 起为 8px 圆角、高 32，替代旧版 36px 胶囊形）。
+ *
+ * W5 终扫修：清除钮原 24×24，不在 §7 控件高度档——提到 28（图标按钮 ≥28×28 的下限档），
+ * 仍在 32 高的 suffix 槽内不撑壳。
+ */
+export function SearchInput({
+  value,
+  placeholder = "搜索",
+  onChange,
+  onSearch,
+  size = "md",
+  disabled,
+  className = "",
+}: SearchInputProps) {
+  const [internal, setInternal] = useState("")
+  const { isImeEnter, onCompositionEnd, onCompositionStart } = useImeAwareEnter()
+  const current = value ?? internal
+
+  const handleChange = useCallback(
+    (next: string) => {
+      setInternal(next)
+      onChange?.(next)
+    },
+    [onChange],
+  )
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      if (isImeEnter(e)) return
+      if (e.key === "Enter") onSearch?.(current)
+    },
+    [current, isImeEnter, onSearch],
+  )
+
+  const handleClear = useCallback(() => {
+    setInternal("")
+    onChange?.("")
+  }, [onChange])
+
+  return (
+    <Field
+      type="text"
+      role="searchbox"
+      className={cn("ow-search-input", className)}
+      size={size}
+      value={current}
+      placeholder={placeholder}
+      disabled={disabled}
+      onChange={handleChange}
+      onCompositionStart={onCompositionStart}
+      onCompositionEnd={onCompositionEnd}
+      onKeyDown={handleKeyDown}
+      prefix={<Search style={{ width: 16, height: 16 }} aria-hidden />}
+      suffix={
+        current ? (
+          <Button
+            variant="ghost"
+            size="sm"
+            type="button"
+            className="w-7 h-7 p-0 text-[color:var(--ow-text-3)] hover:text-[color:var(--ow-text)]"
+            onClick={handleClear}
+            aria-label="清除"
+            icon={<Close className="w-3.5 h-3.5" />}
+          />
+        ) : undefined
+      }
+    />
+  )
+}

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

@@ -0,0 +1,305 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { SearchResult } from "./index"
+
+const meta = {
+  title: "Composite/SearchResult",
+  component: SearchResult,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SearchResult>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    items: [
+      { badge: "1", title: "AI 行业报告 2026", description: "最新人工智能技术发展趋势与市场分析" },
+      { badge: "2", title: "机器学习实践指南", description: "从基础到进阶的完整学习路径" },
+      { badge: "3", title: "GPT-4 技术解析", description: "深入理解大语言模型的工作原理" },
+    ],
+  },
+}
+
+export const WithTitle: Story = {
+  args: {
+    title: "2026 年 AI 行业最新动态",
+    items: [
+      { badge: "1", title: "AI 行业报告 2026", description: "最新人工智能技术发展趋势与市场分析" },
+      { badge: "2", title: "机器学习实践指南", description: "从基础到进阶的完整学习路径" },
+    ],
+  },
+}
+
+export const SingleItem: Story = {
+  args: {
+    items: [
+      { badge: "1", title: "Claude 3.5 发布公告", description: "Anthropic 发布最新的 Claude 3.5 模型，性能大幅提升" },
+    ],
+  },
+}
+
+export const NoBadge: Story = {
+  args: {
+    items: [
+      { title: "Untitled Document", description: "This is a search result without a badge number" },
+      { title: "Another Result", description: "Also without a badge" },
+    ],
+  },
+}
+
+export const MixedBadges: Story = {
+  args: {
+    title: "搜索结果",
+    items: [
+      { badge: "1", title: "First Result", description: "Has a badge" },
+      { title: "Second Result", description: "No badge" },
+      { badge: "3", title: "Third Result", description: "Has a badge" },
+      { title: "Fourth Result", description: "No badge" },
+    ],
+  },
+}
+
+export const LongContent: Story = {
+  args: {
+    title: "Technical Documentation",
+    items: [
+      {
+        badge: "1",
+        title: "A very long title that might wrap to multiple lines in the search result card display",
+        description:
+          "This is an extremely long description that contains a lot of detail about the search result. It demonstrates how the component handles text wrapping and layout when content exceeds normal length.",
+      },
+      {
+        badge: "2",
+        title: "Short Title",
+        description:
+          "But with a very long description that goes on and on explaining various technical concepts, implementation details, best practices, common pitfalls to avoid, performance considerations, and other important information.",
+      },
+    ],
+  },
+}
+
+export const ManyItems: Story = {
+  args: {
+    title: "Comprehensive Search Results",
+    items: [
+      { badge: "1", title: "First Result", description: "Description for first result" },
+      { badge: "2", title: "Second Result", description: "Description for second result" },
+      { badge: "3", title: "Third Result", description: "Description for third result" },
+      { badge: "4", title: "Fourth Result", description: "Description for fourth result" },
+      { badge: "5", title: "Fifth Result", description: "Description for fifth result" },
+      { badge: "6", title: "Sixth Result", description: "Description for sixth result" },
+      { badge: "7", title: "Seventh Result", description: "Description for seventh result" },
+      { badge: "8", title: "Eighth Result", description: "Description for eighth result" },
+    ],
+  },
+}
+
+export const WebSearch: Story = {
+  args: {
+    title: "Web Search Results",
+    items: [
+      {
+        badge: "A",
+        title: "Official Documentation",
+        description: "React documentation - learn about hooks, components, and best practices",
+      },
+      {
+        badge: "B",
+        title: "Tutorial Blog Post",
+        description: "Step-by-step guide to building your first React application",
+      },
+      { badge: "C", title: "Stack Overflow", description: "Common React questions and community answers" },
+    ],
+  },
+}
+
+export const DocumentationReferences: Story = {
+  args: {
+    title: "Related Documentation",
+    items: [
+      { title: "API Reference", description: "Complete API documentation for all available methods" },
+      { title: "Getting Started Guide", description: "Quick start tutorial for new users" },
+      { title: "Examples", description: "Code examples and usage patterns" },
+    ],
+  },
+}
+
+export const ChineseContent: Story = {
+  args: {
+    title: "相关文档",
+    items: [
+      { badge: "1", title: "快速开始", description: "了解如何在 5 分钟内开始使用我们的产品" },
+      { badge: "2", title: "API 文档", description: "完整的 API 接口说明和参数列表" },
+      { badge: "3", title: "最佳实践", description: "生产环境部署的建议和注意事项" },
+    ],
+  },
+}
+
+export const EnglishContent: Story = {
+  args: {
+    title: "Latest AI Research",
+    items: [
+      {
+        badge: "1",
+        title: "Transformer Architecture",
+        description: "Attention is all you need - the paper that revolutionized NLP",
+      },
+      { badge: "2", title: "GPT Series Evolution", description: "From GPT-1 to GPT-4: a comprehensive timeline" },
+      { badge: "3", title: "Multimodal Models", description: "Recent advances in vision-language models" },
+    ],
+  },
+}
+
+export const EmptyTitle: Story = {
+  args: {
+    title: "",
+    items: [
+      { badge: "1", title: "Result One", description: "Empty string title behaves same as no title" },
+      { badge: "2", title: "Result Two", description: "Second result" },
+    ],
+  },
+}
+
+export const ShortBadges: Story = {
+  args: {
+    items: [
+      { badge: "A", title: "Alpha Result", description: "Using letter badges" },
+      { badge: "B", title: "Beta Result", description: "Second letter badge" },
+      { badge: "C", title: "Gamma Result", description: "Third letter badge" },
+    ],
+  },
+}
+
+export const NumberBadges: Story = {
+  args: {
+    title: "Top 10 Results",
+    items: [
+      { badge: "1", title: "First Place", description: "The top result" },
+      { badge: "2", title: "Second Place", description: "Runner up" },
+      { badge: "3", title: "Third Place", description: "Bronze medal" },
+      { badge: "10", title: "Tenth Place", description: "Still in top 10" },
+    ],
+  },
+}
+
+export const WithCustomClassName: Story = {
+  args: {
+    title: "Custom Styled Results",
+    className: "custom-search-results",
+    items: [{ badge: "1", title: "Custom Result", description: "With custom className applied" }],
+  },
+}
+
+export const InChatMessage: Story = {
+  render: () => (
+    <div style={{ background: "var(--ow-bg)", padding: 20, minHeight: 200 }}>
+      <div style={{ marginBottom: 12, fontSize: 14, color: "var(--ow-text)" }}>
+        Here are some relevant search results for your query:
+      </div>
+      <SearchResult
+        title="Web Search Results"
+        items={[
+          { badge: "1", title: "Official Documentation", description: "Complete guide and API reference" },
+          { badge: "2", title: "Tutorial Series", description: "Learn step by step with examples" },
+          { badge: "3", title: "Community Forum", description: "Ask questions and get help" },
+        ]}
+      />
+    </div>
+  ),
+}
+
+export const MultipleCards: Story = {
+  render: () => (
+    <div style={{ background: "var(--ow-bg)", padding: 20 }}>
+      <SearchResult
+        title="Documentation"
+        items={[
+          { badge: "1", title: "Getting Started", description: "Installation and setup instructions" },
+          { badge: "2", title: "API Reference", description: "Complete API documentation" },
+        ]}
+      />
+      <SearchResult
+        title="Tutorials"
+        items={[
+          { badge: "A", title: "Beginner Tutorial", description: "Your first steps" },
+          { badge: "B", title: "Advanced Patterns", description: "Pro tips and tricks" },
+        ]}
+      />
+      <SearchResult
+        title="Community"
+        items={[
+          { title: "Forum Discussions", description: "Join the conversation" },
+          { title: "GitHub Issues", description: "Report bugs and request features" },
+        ]}
+      />
+    </div>
+  ),
+}
+
+// ── DS2 §6 容器状态完整性：空 / 载 / 错 ───────────────────────────────────────
+export const Empty: Story = {
+  args: {
+    title: "网页检索",
+    items: [],
+  },
+}
+
+export const EmptyCustomMessage: Story = {
+  args: {
+    title: "文档引用",
+    items: [],
+    emptyMessage: "这次没引用到文档，换个说法再问一次试试",
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    title: "网页检索",
+    items: [],
+    loading: true,
+  },
+}
+
+export const LoadingSingleRow: Story = {
+  args: {
+    items: [],
+    loading: true,
+    loadingRows: 1,
+  },
+}
+
+export const ErrorState: Story = {
+  args: {
+    title: "网页检索",
+    items: [],
+    error: "检索没能完成，网络请求被中断了",
+    errorDetail: "FetchError: request to https://api.search/v1 failed, reason: ECONNRESET",
+  },
+}
+
+// ── 交互行：hover/press 走地面档，focus-visible 2px 环 ────────────────────────
+export const Selectable: Story = {
+  args: {
+    title: "点一行看看交互态",
+    items: [
+      { badge: "1", title: "AI 行业报告 2026", description: "最新人工智能技术发展趋势与市场分析" },
+      { badge: "2", title: "机器学习实践指南", description: "从基础到进阶的完整学习路径" },
+      { badge: "10", title: "第十条结果", description: "序号读数用 mono + tabular-nums，两位数不跳列" },
+    ],
+    onSelect: (item, index) => console.log("selected:", index, item),
+  },
+}
+
+export const LinkRows: Story = {
+  args: {
+    title: "带链接的引用",
+    items: [
+      { badge: "1", title: "官方文档", description: "完整的接口说明和参数列表", href: "https://example.com/docs" },
+      { badge: "2", title: "快速开始", description: "五分钟跑通第一个例子", href: "https://example.com/start" },
+    ],
+  },
+}

package/src/components/composite/SearchResult/SearchResultSource.test.mjs

@@ -0,0 +1,45 @@
+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")
+
+// ── DS2 P5-5 归口锁 ──────────────────────────────────────────────────────────
+test("search result cards sit on the ground: surface + 1px border + r12, no shadow", () => {
+  assert.match(source, /bg-ow-surface border border-ow-border \[border-radius:var\(--ow-radius-card\)\]/)
+  assert.doesNotMatch(source, /shadow-/)
+  assert.doesNotMatch(source, /borderRadius: "var\(--ow-radius-lg\)"/)
+})
+
+test("result rows take ground-level hover/press and a focus ring", () => {
+  assert.match(source, /hover:bg-\[var\(--ow-hover\)\] active:bg-\[var\(--ow-press\)\]/)
+  assert.match(source, /const rowClass =\s*\n?\s*"ow-focus-ring /)
+  // 卡面上的行不是弹层行，禁用 pop 档
+  assert.doesNotMatch(source, /hover-pop|press-pop/)
+})
+
+test("badges are readouts, not error fills", () => {
+  assert.match(source, /font-\[family-name:var\(--ow-font-mono\)\] \[font-variant-numeric:tabular-nums\]/)
+  // 旧口径把序号做成 --ow-error 实底 + --ow-gray-00 文字：既非语义色也非语义文字
+  assert.doesNotMatch(source, /--ow-error/)
+  assert.doesNotMatch(source, /--ow-gray-\d/)
+})
+
+test("container states are complete: empty / loading / error", () => {
+  assert.match(source, /import \{ EmptyState, InlineMessage \} from ["']\.\.\/\.\.\/primitives["']/)
+  assert.match(source, /import \{ Skeleton \} from ["']\.\.\/Skeleton["']/)
+  assert.match(source, /<InlineMessage variant="error"/)
+  assert.match(source, /<Skeleton variant="line"/)
+  assert.match(source, /items\.length === 0 \? \(\s*<EmptyState/)
+})
+
+// R3：中性件禁信标
+test("search result is a neutral component — no beacon, no yellow", () => {
+  assert.doesNotMatch(source, /--ow-beacon|--ow-accent-dot|--ow-yellow/)
+})
+
+// ── R2 复审 ────────────────────────────────────────────────────────────────
+test("12px 密度位统一 --ow-fs-body-sm（与 Section/SandboxPermissionPrompt 同一别名）", () => {
+  assert.doesNotMatch(source, /--ow-fs-caption/)
+  assert.match(source, /text-ow-fs-body-sm/)
+})

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

@@ -0,0 +1,148 @@
+import type { ReactNode } from "react"
+import { cn } from "../../../lib/utils"
+import { EmptyState, InlineMessage } from "../../primitives"
+import { Skeleton } from "../Skeleton"
+
+export type SearchResultItem = {
+  /** 序号/来源标记，渲染为 mono 读数式定位标 */
+  badge?: string
+  title: ReactNode
+  description?: ReactNode
+  /** 传入后整行成为链接行（新窗打开） */
+  href?: string
+}
+
+export type SearchResultProps = {
+  /** 分组标题（如「2026 年 AI 行业最新动态」） */
+  title?: ReactNode
+  items: SearchResultItem[]
+  /** 加载态：skeleton 呼吸，禁 shimmer（§6/§9） */
+  loading?: boolean
+  /** 加载行数，默认 3 */
+  loadingRows?: number
+  /** 错误态：人话一句 */
+  error?: ReactNode
+  /** 错误技术详情（mono ≤2 行） */
+  errorDetail?: string
+  /** 空态一句话，默认「没有找到相关结果」 */
+  emptyMessage?: ReactNode
+  onSelect?: (item: SearchResultItem, index: number) => void
+  className?: string
+}
+
+/**
+ * SearchResult — 检索/引用结果卡（蓝图 03 · SearchResult，DS2 P5-5 归口）。
+ *
+ * 立面：贴地卡＝surface ＋ 1px --ow-border ＋ r12，0 影，容器内距 14（卡骨架口径，§5/§7）。
+ * 每条结果是一行列表行：hover/press 走「所在表面」的地面档 --ow-hover/--ow-press，
+ * focus-visible 2px 环 ＋ 2px 缝。序号标是 mono ＋ tabular-nums 读数（§7）。
+ * 容器三态齐备：空（EmptyState 信标 mono 母题）/ 载（Skeleton 呼吸）/ 错（InlineMessage）。
+ * R3 中性件：不加任何信标元素，品牌感只来自字体、灰阶与间距。
+ */
+export function SearchResult({
+  title,
+  items,
+  loading = false,
+  loadingRows = 3,
+  error,
+  errorDetail,
+  emptyMessage = "没有找到相关结果",
+  onSelect,
+  className = "",
+}: SearchResultProps) {
+  return (
+    <div
+      data-slot="search-result"
+      className={cn(
+        "my-1.5 max-w-[560px] bg-ow-surface border border-ow-border [border-radius:var(--ow-radius-card)] p-3.5",
+        className,
+      )}
+    >
+      {title && (
+        <div
+          data-ow-part="title"
+          className="mb-2 px-1 text-[length:var(--ow-fs-ui)] font-medium leading-[21px] text-ow-text"
+        >
+          {title}
+        </div>
+      )}
+      {error ? (
+        <InlineMessage variant="error" detail={errorDetail}>
+          {error}
+        </InlineMessage>
+      ) : loading ? (
+        <div data-ow-part="loading" className="flex flex-col gap-1.5" role="status" aria-label="正在检索">
+          {Array.from({ length: loadingRows }, (_, i) => (
+            <div key={i} className="flex flex-col gap-1.5 px-2 py-2">
+              <Skeleton variant="line" width="62%" height={13} />
+              <Skeleton variant="line" width="88%" height={12} />
+            </div>
+          ))}
+        </div>
+      ) : items.length === 0 ? (
+        <EmptyState message={emptyMessage} size="sm" />
+      ) : (
+        <div data-ow-part="list" className="flex flex-col">
+          {items.map((item, i) => (
+            <SearchResultEntry key={i} item={item} onSelect={onSelect ? () => onSelect(item, i) : undefined} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/** 行内容：序号读数 + 标题 + 说明。交互行与静态行共用同一套 DOM。 */
+function SearchResultEntry({ item, onSelect }: { item: SearchResultItem; onSelect?: () => void }) {
+  const body = (
+    <>
+      {item.badge && (
+        <span
+          data-ow-part="badge"
+          className="mt-[3px] min-w-[18px] shrink-0 [border-radius:var(--ow-radius-tag)] bg-ow-surface-2 px-1 py-0.5 text-center text-[length:var(--ow-fs-mark-sm)] font-medium leading-[14px] text-ow-text-3 font-[family-name:var(--ow-font-mono)] [font-variant-numeric:tabular-nums]"
+        >
+          {item.badge}
+        </span>
+      )}
+      <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <span className="text-ow-fs-body-sm font-medium leading-[18px] text-ow-text">{item.title}</span>
+        {item.description && (
+          <span className="text-ow-fs-body-sm leading-[18px] text-ow-text-2">{item.description}</span>
+        )}
+      </span>
+    </>
+  )
+
+  // §5 交互底色相对所在表面递进：卡面上的行 → hover --ow-hover / press --ow-press（非弹层，不用 pop 档）
+  const rowClass =
+    "ow-focus-ring flex w-full items-start gap-2 [border-radius:var(--ow-radius-control)] px-2 py-2 text-left"
+  const interactiveClass =
+    "cursor-pointer transition-colors duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)] hover:bg-[var(--ow-hover)] active:bg-[var(--ow-press)]"
+
+  if (item.href) {
+    return (
+      <a
+        data-ow-part="row"
+        className={cn(rowClass, interactiveClass, "no-underline")}
+        href={item.href}
+        target="_blank"
+        rel="noreferrer"
+        onClick={onSelect}
+      >
+        {body}
+      </a>
+    )
+  }
+  if (onSelect) {
+    return (
+      <button data-ow-part="row" type="button" className={cn(rowClass, interactiveClass)} onClick={onSelect}>
+        {body}
+      </button>
+    )
+  }
+  return (
+    <div data-ow-part="row" className={rowClass}>
+      {body}
+    </div>
+  )
+}