@orbit-work/ui 0.1.0

package/src/components/domain/chat/ArtifactCard/ArtifactCard.stories.tsx

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Doc, Folder } from "../../../composite/Icons"
+import { ArtifactCard, ArtifactTrail } from "./index"
+
+const noop = () => undefined
+
+const meta = {
+  title: "Chat/ArtifactCard",
+  component: ArtifactCard,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 440 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ArtifactCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 完成态：递减短迹（text-3 · 浅暗同形）＋标题＋mono 元信息脚注 */
+export const Default: Story = {
+  args: {
+    title: "Q3 渠道复盘（终稿）",
+    meta: "report_q3_channels.docx · 4,180 字 · 08-28 14:32",
+  },
+}
+
+/** 生成中变体：短迹末颗=var(--ow-beacon)（状态极·限一处，呼吸、reduced-motion 静止），meta 必含「生成中」文字（R1 双编码） */
+export const Generating: Story = {
+  args: {
+    title: "竞品定价对照表",
+    meta: "生成中 · 已完成 3/5 节 · 01:12",
+    generating: true,
+  },
+}
+
+/**
+ * 可打开（R3 · Terry 意见 4）：`onOpen` 让卡本体成按钮（宿主接预览栏 / 默认应用），
+ * hover 卡边升 `--ow-border-strong`；`onOpenWith` ＋ `openWithApps` 在右侧出一枚 ghost
+ * 「打开方式」下拉——候选应用由宿主查系统列出，末行「其他应用…」交系统选择器。
+ * 按钮是中性件（ghost 档），不占行动极。
+ */
+export const WithOpenWith: Story = {
+  args: {
+    title: "Q3 渠道复盘（终稿）",
+    meta: "report_q3_channels.docx · 4,180 字 · 08-28 14:32",
+    onOpen: noop,
+    onOpenWith: noop,
+    openWithApps: [
+      { id: "word", label: "Microsoft Word", icon: <Doc />, hint: "默认" },
+      { id: "pages", label: "Pages", icon: <Doc /> },
+      { id: "finder", label: "在访达中显示", icon: <Folder /> },
+    ],
+  },
+}
+
+/** 只给 `onOpenWith` 不给候选列表：按钮直接回调 `null`，由宿主拉起系统「打开方式」选择器。 */
+export const OpenWithSystemChooser: Story = {
+  args: {
+    title: "竞品定价对照表",
+    meta: "pricing_matrix.xlsx · 6 表 · 09-04 10:02",
+    onOpen: noop,
+    onOpenWith: noop,
+  },
+}
+
+/** 生成中＋打开口子：卡本体与「打开方式」一起禁用，等生成结束再放开。 */
+export const GeneratingWithOpenWith: Story = {
+  args: {
+    title: "竞品定价对照表",
+    meta: "生成中 · 已完成 3/5 节 · 01:12",
+    generating: true,
+    onOpen: noop,
+    onOpenWith: noop,
+    openWithApps: [{ id: "numbers", label: "Numbers", icon: <Doc /> }],
+  },
+}
+
+/** 无 meta：仅短迹＋标题 */
+export const TitleOnly: Story = {
+  args: {
+    title: "发布说明草稿",
+  },
+}
+
+/** ExecutionSummary 行共用同一记号：短迹＋完成摘要＋右侧 mono 步数·耗时 */
+export const ExecutionSummaryRow: Story = {
+  args: { title: "" },
+  render: () => (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 9,
+        background: "var(--ow-surface)",
+        border: "1px solid var(--ow-border)",
+        borderRadius: "var(--ow-radius-md)",
+        padding: "0 12px",
+        /* W5 终扫修：行高原 34，不在 §7 控件高度档 {28,32,40}——落 32（密行档）。 */
+        height: 32,
+        fontFamily: "var(--ow-font-body)",
+      }}
+    >
+      <ArtifactTrail />
+      {/* R2 复审修：字号原写裸 12.5 / 10.5（半像素，不在 --ow-fs-* 任何一档），归阶到
+          --ow-fs-caption(12) 与 --ow-fs-mark-sm(10)。 */}
+      <span style={{ fontSize: "var(--ow-fs-caption)", color: "var(--ow-text)" }}>核对 14 份来源，更新 9 处引用</span>
+      <span
+        style={{
+          marginLeft: "auto",
+          fontFamily: "var(--ow-font-mono)",
+          fontVariantNumeric: "tabular-nums",
+          fontSize: "var(--ow-fs-mark-sm)",
+          color: "var(--ow-text-2)",
+        }}
+      >
+        6 步 · 2m40s
+      </span>
+    </div>
+  ),
+}

package/src/components/domain/chat/ArtifactCard/index.tsx

@@ -0,0 +1,249 @@
+import type { CSSProperties, ReactNode } from "react"
+import { cn } from "../../../../lib/utils"
+import { ChevDown } from "../../../composite/Icons"
+import { Button } from "../../../primitives/Button"
+import { MENU_SEPARATOR, Menu } from "../../../primitives/Menu"
+import type { MenuEntry } from "../../../primitives/Menu"
+
+/** 「打开方式」的一枚候选应用（宿主查系统可用程序后列出；icon 走 §7 图标色域，禁彩色）。 */
+export type ArtifactOpenWithApp = {
+  id: string
+  label: string
+  icon?: ReactNode
+  /** 行尾次要文字（如「默认」） */
+  hint?: string
+}
+
+export type ArtifactCardProps = {
+  /** 产物标题，如「Q3 渠道复盘（终稿）」 */
+  title: string
+  /** mono 元信息脚注（tabular-nums），如 "report_q3_channels.docx · 4,180 字 · 08-28 14:32"；generating 时必须含「生成中」文字（R1 双编码） */
+  meta?: string
+  /** 生成中：短迹末颗换 var(--ow-beacon)（状态极·限一处），末颗呼吸、reduced-motion 静止 */
+  generating?: boolean
+  /**
+   * 打开产物（点卡本体）：宿主接预览栏 / 系统默认应用。不给＝卡不可点（纯记号）。
+   * R3（2026-09-04，Terry 意见 4）。生成中禁点。
+   */
+  onOpen?: () => void
+  /**
+   * 「打开方式」候选应用。给了就出下拉（末行恒为「其他应用…」，回调 `null`，由宿主拉
+   * 系统选择器）；不给而只给 `onOpenWith` ＝ 按钮直接回调 `null`。
+   */
+  openWithApps?: ArtifactOpenWithApp[]
+  /** 「打开方式」回调：用本地其他软件打开文件。`app === null` ＝ 交给系统选择器。不给＝不出按钮。 */
+  onOpenWith?: (app: ArtifactOpenWithApp | null) => void
+  /** 按钮文案，缺省「打开方式」 */
+  openWithLabel?: string
+  className?: string
+}
+
+/** 递减短迹 4 颗：尺寸 6/5/4/3px · 透明度 1/.68/.45/.25 */
+const TRAIL_DOTS: Array<{ size: number; opacity: number }> = [
+  { size: 6, opacity: 1 },
+  { size: 5, opacity: 0.68 },
+  { size: 4, opacity: 0.45 },
+  { size: 3, opacity: 0.25 },
+]
+
+/**
+ * ArtifactTrail 递减短迹——「Orbitwork 交付物」统一签名（照 ow/components/chat/ArtifactCard 规格卡）。
+ * 4 颗由大到小（6/5/4/3px）、透明度递减（1/.68/.45/.25）的圆点，色=var(--ow-text-3)，
+ * 浅暗同形，不占荧黄配额，不做常驻动画。
+ * generating 时末颗换 var(--ow-beacon)（状态极·限一处，允许呼吸、reduced-motion 静止），
+ * 且宿主元信息必须同时含「生成中」文字（R1 双编码）。
+ */
+export function ArtifactTrail({
+  generating = false,
+  className = "",
+  style,
+}: {
+  generating?: boolean
+  className?: string
+  style?: CSSProperties
+}) {
+  return (
+    <span className={`ow-artifact-trail ${className}`} style={{ ...trailStyle, ...style }} aria-hidden="true">
+      {TRAIL_DOTS.map((dot, i) => {
+        const gen = generating && i === TRAIL_DOTS.length - 1
+        return (
+          <i
+            key={i}
+            className={gen ? "ow-artifact-trail__dot--gen" : undefined}
+            style={{
+              ...trailDotStyle,
+              width: dot.size,
+              height: dot.size,
+              ...(gen ? { background: "var(--ow-beacon)", opacity: 1 } : { opacity: dot.opacity }),
+            }}
+          />
+        )
+      })}
+    </span>
+  )
+}
+
+const OTHER_APP_KEY = "__ow_open_with_other__"
+
+/**
+ * ArtifactCard 交付记号（品牌锁定件，照 ow/components/chat/ArtifactCard 规格卡逐像素）。
+ * 产物卡=var(--ow-surface)＋1px var(--ow-border)＋radius 12；顶部递减短迹＋
+ * 标题（13.5px/600 text）＋mono 元信息脚注（10px text-2 · tabular-nums）。
+ * generating 变体：短迹末颗=var(--ow-beacon)（状态极·限一处，同屏至多一张），
+ * meta 必须同时含「生成中」文字（R1 双编码）；生成结束回落为 text-3 短迹。
+ * 禁：图标彩色、品牌黄装饰、短迹常驻动画。
+ *
+ * R3（2026-09-04，Terry 意见 4）加两个口子，记号本体（短迹/标题/脚注的几何与配色）不动：
+ * - `onOpen`：卡本体成按钮（预览栏 / 默认应用由宿主接），hover 边转 `--ow-border-strong`；
+ * - `onOpenWith`（＋可选 `openWithApps`）：卡右侧一枚 ghost「打开方式」——有候选列表就出
+ *   `primitives/Menu` 下拉（末行「其他应用…」交系统选择器），没有就直接回调。
+ *   按钮是 §4 R3 中性件（ghost 档，不占行动极）；生成中两处一起禁用。
+ */
+export function ArtifactCard({
+  title,
+  meta,
+  generating = false,
+  onOpen,
+  openWithApps,
+  onOpenWith,
+  openWithLabel = "打开方式",
+  className = "",
+}: ArtifactCardProps) {
+  const body = (
+    <>
+      <div style={trailRowStyle}>
+        <ArtifactTrail generating={generating} />
+      </div>
+      <div data-ow-part="title" style={titleStyle}>
+        {title}
+      </div>
+      {meta && (
+        <div data-ow-part="meta" style={metaStyle}>
+          {meta}
+        </div>
+      )}
+    </>
+  )
+
+  const openWithButton = (
+    <Button
+      variant="ghost"
+      size="sm"
+      type="button"
+      data-ow-part="open-with"
+      className={cn("shrink-0 whitespace-nowrap", openWithApps?.length && "flex-row-reverse")}
+      disabled={generating}
+      icon={openWithApps?.length ? <ChevDown /> : undefined}
+      onClick={openWithApps?.length ? undefined : () => onOpenWith?.(null)}
+    >
+      {openWithLabel}
+    </Button>
+  )
+
+  const openWithItems: MenuEntry[] | null = openWithApps?.length
+    ? [
+        ...openWithApps.map((app) => ({ key: app.id, label: app.label, icon: app.icon, hint: app.hint })),
+        MENU_SEPARATOR,
+        { key: OTHER_APP_KEY, label: "其他应用…" },
+      ]
+    : null
+
+  return (
+    <div
+      data-slot="artifact-card"
+      data-ow-state={cn(generating && "generating", onOpen && "interactive") || undefined}
+      className={`ow-artifact-card ${className}`}
+      style={cardStyle}
+    >
+      {onOpen ? (
+        <button
+          type="button"
+          data-ow-part="open"
+          className="ow-focus-ring"
+          style={openButtonStyle}
+          disabled={generating}
+          aria-label={`打开 ${title}`}
+          onClick={onOpen}
+        >
+          {body}
+        </button>
+      ) : (
+        <div data-ow-part="body" style={bodyStyle}>
+          {body}
+        </div>
+      )}
+      {onOpenWith &&
+        (openWithItems ? (
+          <Menu
+            trigger={openWithButton}
+            items={openWithItems}
+            ariaLabel="打开方式"
+            onSelect={(key) => {
+              if (key === OTHER_APP_KEY) return onOpenWith(null)
+              const app = openWithApps?.find((item) => item.id === key)
+              if (app) onOpenWith(app)
+            }}
+          />
+        ) : (
+          openWithButton
+        ))}
+    </div>
+  )
+}
+
+const cardStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  background: "var(--ow-surface)",
+  border: "1px solid var(--ow-border)",
+  borderRadius: "var(--ow-radius-lg)",
+  padding: "12px 14px 11px",
+  fontFamily: "var(--ow-font-body)",
+  transition: "border-color var(--ow-dur-1) var(--ow-ease-beacon)",
+}
+
+const bodyStyle: CSSProperties = { flex: "1 1 auto", minWidth: 0 }
+
+/* 卡本体成按钮：清掉 UA 的边/底/内距，字与色继承卡；hover 反馈由卡边（CSS :has）出，不另涂底。 */
+const openButtonStyle: CSSProperties = {
+  ...bodyStyle,
+  display: "block",
+  textAlign: "left",
+  appearance: "none",
+  border: 0,
+  padding: 0,
+  margin: 0,
+  background: "transparent",
+  color: "inherit",
+  font: "inherit",
+  cursor: "pointer",
+  borderRadius: "var(--ow-radius-xs)",
+}
+
+const trailRowStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: 8,
+}
+
+/* 短迹点间距 3px（原型模板 template.dc.html:1222-1227 的执行摘要头行与 1354-1359 的产物卡
+   逐值同源；A9 对齐前这里是 5px，两处宿主一并收到 3）。 */
+const trailStyle: CSSProperties = { display: "flex", alignItems: "center", gap: 3, height: 8, flex: "none" }
+const trailDotStyle: CSSProperties = { display: "block", borderRadius: "50%", background: "var(--ow-text-3)" }
+
+const titleStyle: CSSProperties = {
+  fontSize: 13.5,
+  fontWeight: 600,
+  color: "var(--ow-text)",
+  lineHeight: 1.4,
+}
+
+const metaStyle: CSSProperties = {
+  fontFamily: "var(--ow-font-mono)",
+  fontVariantNumeric: "tabular-nums",
+  fontSize: 10,
+  color: "var(--ow-text-2)",
+  marginTop: 5,
+}

package/src/components/domain/chat/Attachment/Attachment.stories.tsx

@@ -0,0 +1,235 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Attachment, AttachmentList, type AttachmentMenuOption } from "./index"
+
+const meta = {
+  title: "Domain/Chat/Attachment",
+  component: Attachment,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Attachment>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const Frame = ({ children, width = 520 }: { children: React.ReactNode; width?: number }) => (
+  <div style={{ width, maxWidth: "100%", display: "flex", flexDirection: "column", gap: 12 }}>{children}</div>
+)
+
+const Row = ({ label, children }: { label: string; children: React.ReactNode }) => (
+  <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+    <span
+      style={{
+        font: "500 var(--ow-fs-eyebrow, 11px)/1 var(--ow-font-sans)",
+        letterSpacing: "var(--ow-ls-eyebrow, 0.08em)",
+        color: "var(--ow-eyebrow, var(--ow-text-3))",
+      }}
+    >
+      {label}
+    </span>
+    {children}
+  </div>
+)
+
+const OPEN_WITH: AttachmentMenuOption[] = [
+  { id: "header", kind: "header", name: "推荐应用" },
+  { id: "preview", kind: "app", name: "预览", iconName: "Doc" },
+  { id: "vscode", kind: "app", name: "Visual Studio Code", iconName: "Terminal" },
+  { id: "div", kind: "divider" },
+  { id: "reveal", kind: "action", name: "在访达中显示", iconName: "Folder" },
+]
+
+/* ── 形态矩阵 ── */
+
+export const Card: Story = {
+  name: "卡形态",
+  render: () => (
+    <Frame>
+      <Row label="只读">
+        <Attachment variant="card" name="季度复盘.md" path="/Users/orbit/docs/季度复盘.md" />
+      </Row>
+      <Row label="可点开 ＋ 打开方式菜单">
+        <Attachment
+          variant="card"
+          name="2026-Q3-预算.xlsx"
+          path="/Users/orbit/docs/2026-Q3-预算.xlsx"
+          meta="XLSX · 754 KB"
+          onOpen={() => {}}
+          actions={OPEN_WITH}
+          onAction={() => {}}
+        />
+      </Row>
+      <Row label="带移除">
+        <Attachment
+          variant="card"
+          name="接口契约.json"
+          path="/Users/orbit/api/接口契约.json"
+          meta="JSON · 18 KB"
+          onOpen={() => {}}
+          onRemove={() => {}}
+        />
+      </Row>
+    </Frame>
+  ),
+}
+
+export const Tile: Story = {
+  name: "方片形态（Composer 附件条）",
+  render: () => (
+    <Frame>
+      <AttachmentList layout="strip" aria-label="待发送附件">
+        <Attachment variant="tile" name="需求说明.docx" meta="DOCX · 231 KB" onRemove={() => {}} />
+        <Attachment variant="tile" name="日志片段-2026-08-31.txt" meta="TXT · 12 KB" onRemove={() => {}} />
+        <Attachment variant="tile" name="架构图.pdf" meta="PDF · 2.4 MB" onRemove={() => {}} />
+      </AttachmentList>
+    </Frame>
+  ),
+}
+
+export const Image: Story = {
+  name: "图片形态（缩略 ＋ 遮罩操作）",
+  render: () => (
+    <Frame>
+      <AttachmentList layout="strip" aria-label="待发送图片">
+        <Attachment
+          variant="image"
+          name="首页改版.png"
+          thumbnail="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112'%3E%3Crect width='112' height='112' fill='%23C9C6BC'/%3E%3C/svg%3E"
+          onOpen={() => {}}
+          onRemove={() => {}}
+        />
+        <Attachment variant="image" name="没取到缩略图.png" placeholder="cover.png · 1600×900" onRemove={() => {}} />
+      </AttachmentList>
+    </Frame>
+  ),
+}
+
+export const Media: Story = {
+  name: "富媒体图卡",
+  render: () => (
+    <Frame width={420}>
+      <Attachment
+        variant="media"
+        name="现场照片.jpg"
+        placeholder="现场照片.jpg · 1600×900"
+        caption="发布会现场，第二排右起第三位是我们的工程师。"
+      />
+    </Frame>
+  ),
+}
+
+/* ── 状态矩阵（§6） ── */
+
+export const Uploading: Story = {
+  name: "上传中",
+  render: () => (
+    <Frame>
+      <Row label="卡形态">
+        <Attachment variant="card" name="录屏-完整版.mp4" meta="MP4 · 184 MB" status="uploading" progress={42} />
+      </Row>
+      <Row label="方片 ＋ 图片">
+        <AttachmentList layout="strip">
+          <Attachment variant="tile" name="录屏-完整版.mp4" status="uploading" progress={42} onRemove={() => {}} />
+          <Attachment
+            variant="image"
+            name="首页改版.png"
+            thumbnail="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112'%3E%3Crect width='112' height='112' fill='%23C9C6BC'/%3E%3C/svg%3E"
+            status="uploading"
+            progress={68}
+            onRemove={() => {}}
+          />
+        </AttachmentList>
+      </Row>
+    </Frame>
+  ),
+}
+
+export const Failed: Story = {
+  name: "失败（error tint ＋ 重试）",
+  render: () => (
+    <Frame>
+      <Row label="卡形态">
+        <Attachment
+          variant="card"
+          name="录屏-完整版.mp4"
+          meta="MP4 · 184 MB"
+          status="error"
+          errorText="网络断了，没传上去"
+          onRetry={() => {}}
+          onRemove={() => {}}
+        />
+      </Row>
+      <Row label="方片 ＋ 图片">
+        <AttachmentList layout="strip">
+          <Attachment variant="tile" name="录屏-完整版.mp4" status="error" onRetry={() => {}} onRemove={() => {}} />
+          <Attachment
+            variant="image"
+            name="首页改版.png"
+            thumbnail="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112'%3E%3Crect width='112' height='112' fill='%23C9C6BC'/%3E%3C/svg%3E"
+            status="error"
+            onRetry={() => {}}
+            onRemove={() => {}}
+          />
+        </AttachmentList>
+      </Row>
+    </Frame>
+  ),
+}
+
+export const Disabled: Story = {
+  name: "禁用（逐 token）",
+  render: () => (
+    <Frame>
+      <Attachment variant="card" name="只读附件.pdf" meta="PDF · 1.2 MB" disabled onOpen={() => {}} />
+      <AttachmentList layout="strip">
+        <Attachment variant="tile" name="只读附件.pdf" meta="PDF · 1.2 MB" disabled onRemove={() => {}} />
+      </AttachmentList>
+    </Frame>
+  ),
+}
+
+/* ── 容器 ── */
+
+export const ListStack: Story = {
+  name: "行集 · 竖列",
+  render: () => (
+    <Frame>
+      <AttachmentList layout="stack" aria-label="本地文件引用">
+        <Attachment variant="card" name="季度复盘.md" path="/docs/季度复盘.md" onOpen={() => {}} />
+        <Attachment variant="card" name="接口契约.json" path="/api/接口契约.json" onOpen={() => {}} />
+        <Attachment variant="card" name="架构图.pdf" path="/docs/架构图.pdf" onOpen={() => {}} />
+      </AttachmentList>
+    </Frame>
+  ),
+}
+
+export const ListEmpty: Story = {
+  name: "行集 · 空态",
+  render: () => (
+    <Frame>
+      <AttachmentList layout="stack" empty="这轮对话还没有附件" />
+    </Frame>
+  ),
+}
+
+/* ── 打开方式菜单（Menu 配方） ── */
+
+export const AsyncOpenWith: Story = {
+  name: "打开方式 · 异步加载",
+  render: () => (
+    <Frame>
+      <p style={{ margin: 0, font: "400 var(--ow-fs-ui, 13px)/1.5 var(--ow-font-sans)", color: "var(--ow-text-2)" }}>
+        点开菜单会去拉可用应用；闲时已经预取过一次，所以通常一点就有。弹层的立面、翻转、外点关闭、键盘导航都由 Menu
+        原语承担。
+      </p>
+      <Attachment
+        variant="card"
+        name="设计稿.sketch"
+        path="/Users/orbit/design/设计稿.sketch"
+        meta="SKETCH · 12 MB"
+        onOpen={() => {}}
+        onRequestActions={() => new Promise((resolve) => setTimeout(() => resolve(OPEN_WITH), 600))}
+        onAction={() => {}}
+      />
+    </Frame>
+  ),
+}