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

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

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

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

@@ -1,45 +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")
-
-// ── 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

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