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

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

@@ -1,364 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { useState } from "react"
-import { FileReferenceCard, FileReferenceCards, type FileReferenceItem, type FileReferenceMenuOption } from "./index"
-
-const meta = {
-  title: "Files/FileReferenceCard",
-  component: FileReferenceCard,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '已并入 Domain/Chat/Attachment（variant="card" ＋ AttachmentList layout="stack"）。本页是 @deprecated 兼容层。',
-      },
-    },
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof FileReferenceCard>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const sampleItem: FileReferenceItem = {
-  id: "1",
-  name: "README.md",
-  path: "/projects/my-app/README.md",
-}
-
-const sampleOpenWithOptions: FileReferenceMenuOption[] = [
-  {
-    id: "vscode",
-    name: "Visual Studio Code",
-    kind: "app",
-    isDefault: true,
-    iconName: "Terminal",
-  },
-  {
-    id: "typora",
-    name: "Typora",
-    kind: "app",
-    iconName: "Edit",
-  },
-  { id: "divider-1", kind: "divider" },
-  {
-    id: "copy",
-    name: "复制路径",
-    kind: "action",
-    iconName: "Copy",
-  },
-  {
-    id: "reveal",
-    name: "在文件夹中显示",
-    kind: "action",
-    iconName: "Folder",
-  },
-]
-
-export const Default: Story = {
-  args: {
-    item: sampleItem,
-    onOpen: (item) => console.log("open:", item),
-  },
-}
-
-export const WithOpenWithMenu: Story = {
-  render: () => {
-    const [lastAction, setLastAction] = useState("")
-    return (
-      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-        <FileReferenceCard
-          item={sampleItem}
-          onOpen={(item) => setLastAction(`打开: ${item.name}`)}
-          onRequestOpenWithOptions={() => sampleOpenWithOptions}
-          onOpenWith={(item, option) => setLastAction(`用 ${option.name} 打开: ${item.name}`)}
-        />
-        {lastAction && <div style={{ fontSize: 12, color: "var(--ow-text-3)" }}>最后操作: {lastAction}</div>}
-      </div>
-    )
-  },
-}
-
-export const NonClickable: Story = {
-  args: {
-    item: {
-      name: "config.json",
-      path: "/etc/app/config.json",
-      badge: "JSON",
-      typeLabel: "配置文件",
-    },
-    onRequestOpenWithOptions: () => sampleOpenWithOptions,
-    onOpenWith: (item, option) => console.log("open with:", option.name, item),
-  },
-}
-
-export const DifferentFileTypes: Story = {
-  render: () => {
-    const files: FileReferenceItem[] = [
-      { id: "1", name: "presentation.pptx", path: "/docs/presentation.pptx" },
-      { id: "2", name: "report.docx", path: "/docs/report.docx" },
-      { id: "3", name: "data.xlsx", path: "/docs/data.xlsx" },
-      { id: "4", name: "photo.jpg", path: "/images/photo.jpg" },
-      { id: "5", name: "video.mp4", path: "/media/video.mp4" },
-      { id: "6", name: "guide.pdf", path: "/docs/guide.pdf" },
-      { id: "7", name: "index.html", path: "/web/index.html" },
-      { id: "8", name: "utils.ts", path: "/src/utils.ts" },
-    ]
-
-    return <FileReferenceCards items={files} onOpen={(item) => console.log("open:", item)} />
-  },
-}
-
-export const WithCustomBadgeAndType: Story = {
-  args: {
-    item: {
-      name: "premium-doc.pdf",
-      path: "/downloads/premium-doc.pdf",
-      badge: "$",
-      typeLabel: "付费内容",
-    },
-    onOpen: (item) => console.log("open:", item),
-  },
-}
-
-export const LongFileName: Story = {
-  args: {
-    item: {
-      name: "very-long-filename-that-should-be-truncated-with-ellipsis.md",
-      path: "/projects/docs/very-long-filename-that-should-be-truncated-with-ellipsis.md",
-    },
-    onOpen: (item) => console.log("open:", item),
-  },
-}
-
-export const WithAsyncOpenWithOptions: Story = {
-  render: () => {
-    const [lastAction, setLastAction] = useState("")
-
-    const loadOptions = async (): Promise<FileReferenceMenuOption[]> => {
-      await new Promise((resolve) => setTimeout(resolve, 800))
-      return [
-        { id: "header-1", kind: "header", name: "应用程序" },
-        {
-          id: "app1",
-          name: "VS Code",
-          kind: "app",
-          iconName: "Terminal",
-        },
-        {
-          id: "app2",
-          name: "Sublime Text",
-          kind: "app",
-          iconName: "Edit",
-        },
-        { id: "divider-1", kind: "divider" },
-        { id: "header-2", kind: "header", name: "操作" },
-        {
-          id: "copy",
-          name: "复制路径",
-          kind: "action",
-          iconName: "Copy",
-        },
-      ]
-    }
-
-    return (
-      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-        <FileReferenceCard
-          item={{ name: "app.ts", path: "/src/app.ts" }}
-          onOpen={(item) => setLastAction(`打开: ${item.name}`)}
-          onRequestOpenWithOptions={loadOptions}
-          onOpenWith={(item, option) => setLastAction(`用 ${option.name} 打开: ${item.name}`)}
-        />
-        {lastAction && <div style={{ fontSize: 12, color: "var(--ow-text-3)" }}>{lastAction}</div>}
-      </div>
-    )
-  },
-}
-
-export const MultipleFiles: Story = {
-  render: () => {
-    const items: FileReferenceItem[] = [
-      { id: "1", name: "App.tsx", path: "/src/App.tsx" },
-      { id: "2", name: "styles.css", path: "/src/styles.css" },
-      { id: "3", name: "package.json", path: "/package.json" },
-      { id: "4", name: "README.md", path: "/README.md" },
-      { id: "5", name: "logo.png", path: "/public/logo.png" },
-    ]
-
-    return (
-      <FileReferenceCards
-        items={items}
-        onOpen={(item) => console.log("open:", item)}
-        onRequestOpenWithOptions={() => sampleOpenWithOptions}
-        onOpenWith={(item, option) => console.log("open with:", option.name, item)}
-      />
-    )
-  },
-}
-
-export const WithDisabledOption: Story = {
-  render: () => (
-    <FileReferenceCard
-      item={{ name: "locked.pdf", path: "/docs/locked.pdf" }}
-      onOpen={(item) => console.log("open:", item)}
-      onRequestOpenWithOptions={() => [
-        {
-          id: "preview",
-          name: "预览",
-          kind: "app",
-          iconName: "Search",
-        },
-        {
-          id: "edit",
-          name: "编辑",
-          kind: "app",
-          iconName: "Edit",
-          disabled: true,
-        },
-        { id: "divider-1", kind: "divider" },
-        {
-          id: "copy",
-          name: "复制路径",
-          kind: "action",
-          iconName: "Copy",
-        },
-      ]}
-      onOpenWith={(item, option) => console.log("open with:", option.name, item)}
-    />
-  ),
-}
-
-export const EmptyOpenWithMenu: Story = {
-  args: {
-    item: { name: "file.unknown", path: "/tmp/file.unknown" },
-    onOpen: (item) => console.log("open:", item),
-    onRequestOpenWithOptions: () => [],
-    onOpenWith: (item, option) => console.log("open with:", option.name, item),
-  },
-}
-
-export const CustomOpenWithLabel: Story = {
-  args: {
-    item: { name: "document.pdf", path: "/docs/document.pdf" },
-    onOpen: (item) => console.log("open:", item),
-    onRequestOpenWithOptions: () => sampleOpenWithOptions,
-    onOpenWith: (item, option) => console.log("open with:", option.name, item),
-    openWithLabel: "选择应用",
-  },
-}
-
-export const WithIconUrls: Story = {
-  render: () => (
-    <FileReferenceCard
-      item={{ name: "design.sketch", path: "/designs/design.sketch" }}
-      onOpen={(item) => console.log("open:", item)}
-      onRequestOpenWithOptions={() => [
-        {
-          id: "sketch",
-          name: "Sketch",
-          kind: "app",
-          iconUrl: "https://picsum.photos/32/32?random=1",
-        },
-        {
-          id: "figma",
-          name: "Figma",
-          kind: "app",
-          iconUrl: "https://picsum.photos/32/32?random=2",
-        },
-      ]}
-      onOpenWith={(item, option) => console.log("open with:", option.name, item)}
-    />
-  ),
-}
-
-export const RealWorldExample: Story = {
-  render: () => {
-    const [selectedFile, setSelectedFile] = useState<string | null>(null)
-
-    const projectFiles: FileReferenceItem[] = [
-      {
-        id: "readme",
-        name: "README.md",
-        path: "/projects/my-app/README.md",
-        typeLabel: "项目说明",
-      },
-      {
-        id: "package",
-        name: "package.json",
-        path: "/projects/my-app/package.json",
-        typeLabel: "项目配置",
-      },
-      {
-        id: "app",
-        name: "App.tsx",
-        path: "/projects/my-app/src/App.tsx",
-        typeLabel: "主文件",
-      },
-      {
-        id: "docker",
-        name: "Dockerfile",
-        path: "/projects/my-app/Dockerfile",
-        typeLabel: "容器配置",
-      },
-    ]
-
-    return (
-      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-        <FileReferenceCards
-          items={projectFiles}
-          onOpen={(item) => setSelectedFile(item.path)}
-          onRequestOpenWithOptions={async (item) => {
-            await new Promise((resolve) => setTimeout(resolve, 500))
-            return [
-              { id: "header-1", kind: "header", name: "应用程序" },
-              {
-                id: "vscode",
-                name: "VS Code",
-                kind: "app",
-                isDefault: true,
-                iconName: "Terminal",
-              },
-              {
-                id: "sublime",
-                name: "Sublime Text",
-                kind: "app",
-                iconName: "Edit",
-              },
-              { id: "divider-1", kind: "divider" },
-              { id: "header-2", kind: "header", name: "操作" },
-              {
-                id: "copy",
-                name: "复制路径",
-                kind: "action",
-                iconName: "Copy",
-              },
-              {
-                id: "reveal",
-                name: "在文件夹中显示",
-                kind: "action",
-                iconName: "Folder",
-              },
-            ]
-          }}
-          onOpenWith={(item, option) => {
-            setSelectedFile(`${option.name}: ${item.path}`)
-          }}
-        />
-        {selectedFile && (
-          <div
-            style={{
-              padding: 12,
-              background: "var(--ow-surface)",
-              borderRadius: 8,
-              fontSize: 12,
-              color: "var(--ow-text-2)",
-            }}
-          >
-            已选择: {selectedFile}
-          </div>
-        )}
-      </div>
-    )
-  },
-}

package/src/components/composite/FileReferenceCard/FileReferenceCardSource.test.mjs

@@ -1,48 +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")
-
-// 本件在 DS 2.0 已并入 domain/chat/Attachment，只剩薄兼容层。
-// 弹层定位、闲时预取、图标补齐重刷那几条锁断言随实现搬到了
-// domain/chat/Attachment/AttachmentSource.test.mjs，这里只锁「兼容层还是兼容层」。
-
-test("实现已归口 Attachment，本件不再自己画卡", () => {
-  assert.match(source, /from "\.\.\/\.\.\/domain\/chat\/Attachment"/)
-  assert.match(source, /<Attachment\b/)
-  assert.match(source, /<AttachmentList layout="stack"/)
-  assert.doesNotMatch(source, /resolveMenuLayout|getBoundingClientRect|requestIdleCallback/)
-  assert.doesNotMatch(source, /CSSProperties/)
-})
-
-test("类型导出原名原位（Markdown / markdownFileRefs / 预览面 / 桌面端都按这条路径 import）", () => {
-  for (const name of [
-    "FileReferenceTone",
-    "FileReferenceItem",
-    "FileReferenceOpenWithOption",
-    "FileReferenceMenuOption",
-    "FileReferenceCardProps",
-    "FileReferenceCardsProps",
-  ]) {
-    assert.match(source, new RegExp(`export type ${name}\\b`))
-  }
-  assert.match(source, /export const inferFileReferenceMeta = inferAttachmentMeta/)
-})
-
-test("兼容导出全部挂 @deprecated，指向 Attachment", () => {
-  assert.match(source, /@deprecated[\s\S]*?export function FileReferenceCard\(/)
-  assert.match(source, /@deprecated[\s\S]*?export function FileReferenceCards\(/)
-})
-
-test("可点击的卡不重复展示推断类型文案（旧口径保留）", () => {
-  assert.match(source, /const meta = clickable && !item\.typeLabel \? "" : item\.typeLabel/)
-})
-
-test("原生「打开方式」菜单委托仍然接得上（桌面端弹 OS 菜单那条路）", () => {
-  assert.match(source, /onNativeActionsMenu=\{onOpenWithMenu \? \(\) => onOpenWithMenu\(item\) : undefined\}/)
-  assert.match(
-    source,
-    /onRequestActions=\{onRequestOpenWithOptions \? \(\) => onRequestOpenWithOptions\(item\) : undefined\}/,
-  )
-})

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

@@ -1,122 +0,0 @@
-"use client"
-
-import {
-  Attachment,
-  type AttachmentItem,
-  AttachmentList,
-  type AttachmentMenuOption,
-  type AttachmentOpenOption,
-  type AttachmentTone,
-  inferAttachmentMeta,
-} from "../../domain/chat/Attachment"
-
-/* ------------------------------------------------------------------ *
- * 类型：原名原位保留
- *
- * 规范定义已归口 `domain/chat/Attachment`（DS 2.0 蓝图：Attachment 合并
- * AttachmentCard / Attachments / FileReferenceCard(+s) / ImageCard）。这里保留原名
- * 别名，是因为 Markdown、markdownFileRefs、FilePreviewContentView、OfficePreview 以及
- * 桌面端都按这条路径 import 类型 —— 类型不搬家，实现才搬得动。
- * ------------------------------------------------------------------ */
-
-/** @deprecated 用 `AttachmentTone`（domain/chat/Attachment）。 */
-export type FileReferenceTone = AttachmentTone
-/** @deprecated 用 `AttachmentItem`（domain/chat/Attachment）。 */
-export type FileReferenceItem = AttachmentItem
-/** @deprecated 用 `AttachmentOpenOption`（domain/chat/Attachment）。 */
-export type FileReferenceOpenWithOption = AttachmentOpenOption
-/** @deprecated 用 `AttachmentMenuOption`（domain/chat/Attachment）。 */
-export type FileReferenceMenuOption = AttachmentMenuOption
-/** @deprecated 用 `inferAttachmentMeta`（domain/chat/Attachment）。 */
-export const inferFileReferenceMeta = inferAttachmentMeta
-
-export type FileReferenceCardProps = {
-  item: FileReferenceItem
-  onOpen?: (item: FileReferenceItem) => void
-  onOpenWithMenu?: (item: FileReferenceItem) => void
-  onRequestOpenWithOptions?: (item: FileReferenceItem) => Promise<FileReferenceMenuOption[]> | FileReferenceMenuOption[]
-  onOpenWith?: (item: FileReferenceItem, option: FileReferenceMenuOption) => void
-  className?: string
-  openWithLabel?: string
-}
-
-export type FileReferenceCardsProps = {
-  items: FileReferenceItem[]
-  onOpen?: (item: FileReferenceItem) => void
-  onOpenWithMenu?: (item: FileReferenceItem) => void
-  onRequestOpenWithOptions?: (item: FileReferenceItem) => Promise<FileReferenceMenuOption[]> | FileReferenceMenuOption[]
-  onOpenWith?: (item: FileReferenceItem, option: FileReferenceMenuOption) => void
-  className?: string
-  "aria-label"?: string
-  openWithLabel?: string
-}
-
-/**
- * 转录里的文件引用卡。
- *
- * @deprecated DS 2.0 起并入 `Attachment`（domain/chat/Attachment，`variant="card"`）。
- * 本导出是薄兼容层，只把 item 拆成 Attachment 的扁平 props；新代码直接用 `Attachment`。
- */
-export function FileReferenceCard({
-  item,
-  onOpen,
-  onOpenWithMenu,
-  onRequestOpenWithOptions,
-  onOpenWith,
-  className = "",
-  openWithLabel = "打开方式",
-}: FileReferenceCardProps) {
-  // 可点击的卡本身就是打开入口，推断出的类型文案只是重复扩展名，所以不展示；
-  // 调用方显式传的 typeLabel 是业务文案（来源、价格之类），照旧保留。
-  const clickable = Boolean(onOpen)
-  const meta = clickable && !item.typeLabel ? "" : item.typeLabel
-
-  return (
-    <Attachment
-      variant="card"
-      name={item.name}
-      path={item.path}
-      badge={item.badge}
-      meta={meta}
-      className={className}
-      actionsLabel={openWithLabel}
-      onOpen={onOpen ? () => onOpen(item) : undefined}
-      onNativeActionsMenu={onOpenWithMenu ? () => onOpenWithMenu(item) : undefined}
-      onRequestActions={onRequestOpenWithOptions ? () => onRequestOpenWithOptions(item) : undefined}
-      onAction={onOpenWith ? (option) => onOpenWith(item, option) : undefined}
-    />
-  )
-}
-
-/**
- * 文件引用卡的竖列。
- *
- * @deprecated DS 2.0 起并入 `AttachmentList`（`layout="stack"`）＋ `Attachment`。
- */
-export function FileReferenceCards({
-  items,
-  onOpen,
-  onOpenWithMenu,
-  onRequestOpenWithOptions,
-  onOpenWith,
-  className = "",
-  "aria-label": ariaLabel = "文件引用",
-  openWithLabel,
-}: FileReferenceCardsProps) {
-  if (items.length === 0) return null
-  return (
-    <AttachmentList layout="stack" className={className} aria-label={ariaLabel}>
-      {items.map((item) => (
-        <FileReferenceCard
-          key={item.id ?? item.path}
-          item={item}
-          onOpen={onOpen}
-          onOpenWithMenu={onOpenWithMenu}
-          onRequestOpenWithOptions={onRequestOpenWithOptions}
-          onOpenWith={onOpenWith}
-          openWithLabel={openWithLabel}
-        />
-      ))}
-    </AttachmentList>
-  )
-}

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

@@ -1,167 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { useState } from "react"
-import { Button } from "../../primitives/Button"
-import { Checkbox } from "../../primitives/Checkbox"
-import { DataTable, type DataTableColumn } from "../DataTable"
-import { FilterBar } from "./index"
-
-const filterDefs = [
-  { key: "all", label: "全部" },
-  { key: "running", label: "运行中" },
-  { key: "done", label: "已完成" },
-  { key: "failed", label: "失败" },
-  { key: "archived", label: "已归档", disabled: true },
-]
-
-const sortOptions = [
-  { label: "最近更新", value: "recent" },
-  { label: "耗时最长", value: "duration" },
-  { label: "消耗最多", value: "cost" },
-]
-
-const meta = {
-  title: "Composite/FilterBar",
-  component: FilterBar,
-  parameters: { layout: "padded" },
-  tags: ["autodocs"],
-} satisfies Meta<typeof FilterBar>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-function SubFilter({ label, disabled }: { label: string; disabled?: boolean }) {
-  return (
-    <label className="inline-flex items-center gap-2 text-ow-fs-ui text-[color:var(--ow-text-2)]">
-      <Checkbox disabled={disabled} aria-label={label} />
-      {label}
-    </label>
-  )
-}
-
-function Live(props: Partial<React.ComponentProps<typeof FilterBar>>) {
-  const [active, setActive] = useState("running")
-  const [query, setQuery] = useState("")
-  const [sort, setSort] = useState("recent")
-  return (
-    <FilterBar
-      filters={filterDefs.map((filter) => ({ ...filter, active: filter.key === active }))}
-      onFilterToggle={setActive}
-      search={{ value: query, onChange: setQuery, placeholder: "搜索任务" }}
-      sort={{ value: sort, options: sortOptions, onChange: setSort }}
-      {...props}
-    />
-  )
-}
-
-export const Default: Story = {
-  args: {},
-  render: () => <Live />,
-}
-
-export const FiltersOnly: Story = {
-  name: "只有筛选 Tag（直角 6）",
-  args: {},
-  render: () => {
-    const [active, setActive] = useState("all")
-    return (
-      <FilterBar
-        filters={filterDefs.map((filter) => ({ ...filter, active: filter.key === active }))}
-        onFilterToggle={setActive}
-      />
-    )
-  },
-}
-
-export const SearchOnly: Story = {
-  name: "只有搜索",
-  args: {},
-  render: () => {
-    const [query, setQuery] = useState("")
-    return <FilterBar search={{ value: query, onChange: setQuery, placeholder: "搜索任务" }} />
-  },
-}
-
-export const WithReset: Story = {
-  name: "带清空筛选",
-  args: {},
-  render: () => <Live onReset={() => {}} />,
-}
-
-export const WithActions: Story = {
-  name: "带右侧动作区",
-  args: {},
-  render: () => <Live actions={<Button size="sm">新建任务</Button>} />,
-}
-
-export const Disclosure: Story = {
-  name: "折叠形态（原 FilterDisclosure）",
-  args: {},
-  render: () => (
-    <Live collapsible defaultExpanded>
-      <SubFilter label="只看我发起的" />
-      <SubFilter label="含子任务" />
-      <SubFilter label="含失败重试" disabled />
-    </Live>
-  ),
-}
-
-export const Disabled: Story = {
-  name: "全禁用（逐 token）",
-  args: {},
-  render: () => (
-    <FilterBar
-      filters={filterDefs.map((filter) => ({ ...filter, disabled: true }))}
-      search={{ value: "", onChange: () => {}, placeholder: "搜索任务", disabled: true }}
-      sort={{ value: "recent", options: sortOptions, onChange: () => {}, disabled: true }}
-    />
-  ),
-}
-
-export const FlushInTable: Story = {
-  name: "贴合表格（flush，DataTableToolbar 配方）",
-  args: {},
-  render: () => {
-    const [query, setQuery] = useState("")
-    const rows = [
-      { id: "r-1042", task: "站点回归巡检", cost: 3120 },
-      { id: "r-1043", task: "客户合同抽检", cost: 26900 },
-    ]
-    const columns: DataTableColumn<(typeof rows)[number]>[] = [
-      { key: "id", header: "运行 ID", numeric: true, width: 110 },
-      { key: "task", header: "任务" },
-      { key: "cost", header: "消耗 token", numeric: true, sortable: true, width: 120 },
-    ]
-    return (
-      <DataTable
-        columns={columns}
-        rows={rows}
-        rowKey={(row) => row.id}
-        caption="筛选后的运行记录"
-        toolbar={
-          <FilterBar
-            flush
-            className="border-b border-[color:var(--ow-border)]"
-            filters={filterDefs.slice(0, 3)}
-            search={{ value: query, onChange: setQuery, placeholder: "搜索任务", width: 180 }}
-          />
-        }
-      />
-    )
-  },
-}
-
-/** 双主题对照：同一份 demo 逐字复制，主题由 data-theme 局部驱动。 */
-export const ThemePair: Story = {
-  args: {},
-  name: "双主题对照",
-  render: () => (
-    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
-      <div data-theme="light" style={{ background: "var(--ow-bg)", padding: 16 }}>
-        <Live />
-      </div>
-      <div data-theme="dark" style={{ background: "var(--ow-bg)", padding: 16 }}>
-        <Live />
-      </div>
-    </div>
-  ),
-}