@orbit-work/ui 0.1.0

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

@@ -0,0 +1,102 @@
+import type { ReactNode } from "react"
+import { Badge, Button, Card, Switch } from "../../primitives"
+import { DingTalk, Feishu, WeCom } from "../Icons"
+
+export type AssistantChannelPlatform = "dingtalk" | "feishu" | "wecom"
+
+export interface AssistantChannelCardProps {
+  platform: AssistantChannelPlatform
+  connected: boolean
+  enabled: boolean
+  loading?: boolean
+  busy?: boolean
+  onConfigure: () => void
+  onToggle?: () => void
+}
+
+/**
+ * 卡骨架槽位类（DS 2.0 统一语法）：
+ * 容器内距由 `Card` 体槽给（px-3.5 py-3 ＝ 横 14 / 纵 12）；卡内字段槽一律 8（gap-2），
+ * 头部图标↔文本走 ListRow 家族的 12 槽（gap-3），标题↔描述 4。
+ * BEM 类名保留为 DOM 钩子（apps/desktop e2e 依赖 `.assistant-card__title`），
+ * 几何与字号已从 styles/assistant-settings.css 收回到这里的 token 类。
+ */
+const HEAD_CLASS = "flex items-center gap-3 min-w-0 max-sm:flex-col max-sm:items-start"
+const ICON_CLASS = "assistant-card__icon shrink-0 w-6 h-6"
+const MAIN_CLASS = "assistant-card__main flex-1 min-w-0 flex flex-col gap-1"
+const TITLE_ROW_CLASS = "assistant-card__title-row flex items-center gap-2 min-w-0"
+const TITLE_CLASS =
+  "assistant-card__title min-w-0 truncate font-semibold text-ow-fs-title-sm leading-[1.4] text-ow-text font-[family-name:var(--ow-font-sans)]"
+const DESC_CLASS =
+  "assistant-card__desc font-normal text-ow-fs-caption leading-[1.5] text-ow-text-3 font-[family-name:var(--ow-font-sans)]"
+const ACTIONS_CLASS = "assistant-actions shrink-0 flex items-center justify-end gap-2 max-sm:w-full"
+
+const PLATFORM_META: Record<
+  AssistantChannelPlatform,
+  {
+    title: string
+    description: string
+    icon: ReactNode
+  }
+> = {
+  dingtalk: {
+    title: "钉钉",
+    description: "接收钉钉私聊与群聊消息，并接入 Orbitwork 会话。",
+    icon: <DingTalk className={ICON_CLASS} />,
+  },
+  feishu: {
+    title: "飞书",
+    description: "接收飞书私聊与群聊消息，并接入 Orbitwork 会话。",
+    icon: <Feishu className={ICON_CLASS} />,
+  },
+  wecom: {
+    title: "企业微信",
+    description: "接收企业微信私聊与群聊消息，并接入 Orbitwork 会话。",
+    icon: <WeCom className={ICON_CLASS} />,
+  },
+}
+
+/**
+ * AssistantChannelCard — 第三方助理通道卡（钉钉 / 飞书 / 企业微信）。
+ *
+ * 立面走 `Card` 基座（§5 贴地：0 影 ＋ 1px `--ow-border` ＋ `--ow-surface`，§7 圆角 12）；
+ * 动作钮走 `Button` 基座 secondary/md（高 32，圆角 `--ow-radius-action`），
+ * 加载态用基座转子（R1 形编码）而非灰掉；开关走 `Switch` 原语。
+ * 平台图标是第三方品牌标（§15 皮肤边界豁免官方色），落图标档 24。
+ */
+export function AssistantChannelCard({
+  platform,
+  connected,
+  enabled,
+  loading = false,
+  busy = false,
+  onConfigure,
+  onToggle,
+}: AssistantChannelCardProps): React.ReactElement {
+  const meta = PLATFORM_META[platform]
+
+  return (
+    <Card>
+      <div data-ow-part="head" className={`assistant-card__head ${HEAD_CLASS}`}>
+        {meta.icon}
+        <div data-ow-part="labels" className={MAIN_CLASS}>
+          <div className={TITLE_ROW_CLASS}>
+            <div className={TITLE_CLASS}>{meta.title}</div>
+            {connected && (
+              <Badge variant={enabled ? "success" : "normal"} dot>
+                {enabled ? "已连接" : "已停止"}
+              </Badge>
+            )}
+          </div>
+          <div className={DESC_CLASS}>{meta.description}</div>
+        </div>
+        <div data-ow-part="action" className={ACTIONS_CLASS}>
+          <Button variant="secondary" onClick={onConfigure} loading={loading} disabled={busy}>
+            配置
+          </Button>
+          {connected && onToggle && <Switch checked={enabled} onChange={onToggle} disabled={busy} />}
+        </div>
+      </div>
+    </Card>
+  )
+}

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

@@ -0,0 +1,197 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { AssistantToggleRow } from "./index"
+
+const meta = {
+  title: "Composite/AssistantToggleRow",
+  component: AssistantToggleRow,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof AssistantToggleRow>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Enabled: Story = {
+  args: {
+    title: "Code Suggestions",
+    description: "Get AI-powered code completion and suggestions",
+    checked: true,
+    onChange: (checked) => console.log("toggle", checked),
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    title: "Auto-format",
+    description: "Automatically format code on save",
+    checked: false,
+    onChange: (checked) => console.log("toggle", checked),
+  },
+}
+
+export const DisabledState: Story = {
+  args: {
+    title: "Premium Feature",
+    description: "This feature is only available for premium users",
+    checked: false,
+    onChange: (checked) => console.log("toggle", checked),
+    disabled: true,
+  },
+}
+
+export const DisabledStateChecked: Story = {
+  args: {
+    title: "System Required",
+    description: "This setting cannot be changed",
+    checked: true,
+    onChange: (checked) => console.log("toggle", checked),
+    disabled: true,
+  },
+}
+
+export const ShortTitle: Story = {
+  args: {
+    title: "Debug",
+    description: "Enable debug mode for development",
+    checked: true,
+    onChange: (checked) => console.log("toggle", checked),
+  },
+}
+
+export const LongTitle: Story = {
+  args: {
+    title: "Enable Advanced Code Analysis and Performance Monitoring",
+    description: "Monitor performance metrics and analyze code quality in real-time",
+    checked: false,
+    onChange: (checked) => console.log("toggle", checked),
+  },
+}
+
+export const LongDescription: Story = {
+  args: {
+    title: "Security Scanning",
+    description:
+      "Automatically scan your codebase for security vulnerabilities, outdated dependencies, and potential bugs. This will run on every commit and pull request.",
+    checked: true,
+    onChange: (checked) => console.log("toggle", checked),
+  },
+}
+
+export const MultilineDescription: Story = {
+  args: {
+    title: "Telemetry",
+    description:
+      "Send anonymous usage data to help improve the product. This includes crash reports, feature usage, and performance metrics. Your code is never sent.",
+    checked: false,
+    onChange: (checked) => console.log("toggle", checked),
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 600 }}>
+      <AssistantToggleRow
+        title="Enabled Feature"
+        description="This feature is currently enabled"
+        checked={true}
+        onChange={(checked) => console.log("enabled", checked)}
+      />
+      <AssistantToggleRow
+        title="Disabled Feature"
+        description="This feature is currently disabled"
+        checked={false}
+        onChange={(checked) => console.log("disabled", checked)}
+      />
+      <AssistantToggleRow
+        title="Disabled Control (Off)"
+        description="Cannot be toggled"
+        checked={false}
+        onChange={(checked) => console.log("disabled-off", checked)}
+        disabled={true}
+      />
+      <AssistantToggleRow
+        title="Disabled Control (On)"
+        description="Cannot be toggled"
+        checked={true}
+        onChange={(checked) => console.log("disabled-on", checked)}
+        disabled={true}
+      />
+    </div>
+  ),
+}
+
+export const SettingsPanel: Story = {
+  render: () => (
+    <div
+      style={{
+        background: "var(--ow-surface)",
+        border: "1px solid var(--ow-border)",
+        borderRadius: 8,
+        padding: 16,
+        maxWidth: 600,
+      }}
+    >
+      <h3 style={{ margin: "0 0 16px 0", fontSize: 16, fontWeight: 600, color: "var(--ow-text)" }}>Editor Settings</h3>
+      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <AssistantToggleRow
+          title="Line Numbers"
+          description="Show line numbers in the editor"
+          checked={true}
+          onChange={(checked) => console.log("line-numbers", checked)}
+        />
+        <AssistantToggleRow
+          title="Word Wrap"
+          description="Wrap long lines to fit in the viewport"
+          checked={false}
+          onChange={(checked) => console.log("word-wrap", checked)}
+        />
+        <AssistantToggleRow
+          title="Minimap"
+          description="Show code minimap on the right side"
+          checked={true}
+          onChange={(checked) => console.log("minimap", checked)}
+        />
+        <AssistantToggleRow
+          title="Breadcrumbs"
+          description="Show file path breadcrumbs at the top"
+          checked={true}
+          onChange={(checked) => console.log("breadcrumbs", checked)}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const MixedStates: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 600 }}>
+      <AssistantToggleRow
+        title="AI Assistance"
+        description="Get intelligent code suggestions and completions"
+        checked={true}
+        onChange={(checked) => console.log("ai", checked)}
+      />
+      <AssistantToggleRow
+        title="Telemetry"
+        description="Help improve the product by sending anonymous usage data"
+        checked={false}
+        onChange={(checked) => console.log("telemetry", checked)}
+      />
+      <AssistantToggleRow
+        title="Beta Features"
+        description="Try experimental features before they're released (requires restart)"
+        checked={false}
+        onChange={(checked) => console.log("beta", checked)}
+      />
+      <AssistantToggleRow
+        title="Enterprise Mode"
+        description="Connect to your organization's secure environment"
+        checked={false}
+        onChange={(checked) => console.log("enterprise", checked)}
+        disabled={true}
+      />
+    </div>
+  ),
+}

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

@@ -0,0 +1,35 @@
+import { ListRow } from "../ListRow"
+
+export interface AssistantToggleRowProps {
+  title: string
+  description: string
+  checked: boolean
+  onChange: (checked: boolean) => void
+  disabled?: boolean
+}
+
+/**
+ * @deprecated 已并入行家族 `ListRow`（蓝图批次② ListRow 合并件）。
+ * 新代码直接写 `<ListRow control="switch" checked onCheckedChange />`；
+ * 本导出只是给包外消费方留的薄兼容层，形态全部由 ListRow 承担。
+ */
+export function AssistantToggleRow({
+  title,
+  description,
+  checked,
+  onChange,
+  disabled,
+}: AssistantToggleRowProps): React.ReactElement {
+  return (
+    <ListRow
+      title={title}
+      description={description}
+      control="switch"
+      checked={checked}
+      onCheckedChange={onChange}
+      disabled={disabled}
+      divider={false}
+      className="px-0"
+    />
+  )
+}

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

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { AttachmentCard, Attachments } from "./index"
+
+const meta = {
+  title: "Composite/AttachmentCard",
+  component: AttachmentCard,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '已并入 Domain/Chat/Attachment（variant="tile" / "image"）。本页是 @deprecated 兼容层，新用法看 Attachment。',
+      },
+    },
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof AttachmentCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const PdfFile: Story = {
+  args: {
+    name: "Design-System-Spec.pdf",
+    size: "2.4 MB",
+    type: "pdf",
+    status: "completed",
+    onRemove: () => console.log("remove"),
+  },
+}
+
+export const DocFile: Story = {
+  args: {
+    name: "Project-Requirements.docx",
+    size: "854 KB",
+    type: "doc",
+    status: "completed",
+    onRemove: () => console.log("remove"),
+  },
+}
+
+export const ExcelFile: Story = {
+  args: {
+    name: "Q3-Financial-Report.xlsx",
+    size: "1.2 MB",
+    type: "xls",
+    status: "completed",
+    onRemove: () => console.log("remove"),
+  },
+}
+
+export const Uploading: Story = {
+  args: {
+    name: "Large-Video-File.mp4",
+    size: "45 MB",
+    type: "doc",
+    status: "uploading",
+    progress: 67,
+    onRemove: () => console.log("remove"),
+  },
+}
+
+export const UploadError: Story = {
+  args: {
+    name: "Failed-Upload.zip",
+    size: "15 MB",
+    type: "doc",
+    status: "error",
+    onRemove: () => console.log("remove"),
+    onRetry: () => console.log("retry"),
+  },
+}
+
+export const ImageThumbnail: Story = {
+  args: {
+    name: "screenshot.png",
+    thumbnail: "https://picsum.photos/200/200",
+    status: "completed",
+    onRemove: () => console.log("remove"),
+    onPreview: () => console.log("preview"),
+  },
+}
+
+export const ImageThumbnailError: Story = {
+  args: {
+    name: "failed-image.jpg",
+    thumbnail: "https://picsum.photos/200/201",
+    status: "error",
+    onRemove: () => console.log("remove"),
+    onRetry: () => console.log("retry"),
+  },
+}
+
+export const LongFileName: Story = {
+  args: {
+    name: "Very-Long-File-Name-That-Should-Wrap-Across-Multiple-Lines-In-The-Card.pdf",
+    size: "3.7 MB",
+    type: "pdf",
+    status: "completed",
+    onRemove: () => console.log("remove"),
+  },
+}
+
+export const MultipleAttachments: Story = {
+  render: () => (
+    <Attachments>
+      <AttachmentCard name="Design-Spec.pdf" size="2.4 MB" type="pdf" onRemove={() => console.log("remove 1")} />
+      <AttachmentCard
+        name="screenshot.png"
+        thumbnail="https://picsum.photos/200/200"
+        onRemove={() => console.log("remove 2")}
+        onPreview={() => console.log("preview")}
+      />
+      <AttachmentCard name="Report.xlsx" size="1.2 MB" type="xls" onRemove={() => console.log("remove 3")} />
+      <AttachmentCard
+        name="Uploading.mp4"
+        size="45 MB"
+        type="doc"
+        status="uploading"
+        progress={45}
+        onRemove={() => console.log("remove 4")}
+      />
+    </Attachments>
+  ),
+}

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

@@ -0,0 +1,80 @@
+import type { ReactNode } from "react"
+import { Attachment, AttachmentList, type AttachmentStatus } from "../../domain/chat/Attachment"
+
+export type AttachmentCardProps = {
+  /** File name */
+  name: string
+  /** File size label (e.g. "754 KB") */
+  size?: string
+  /** File type badge (e.g. "PDF", "DOC") */
+  type?: "pdf" | "doc" | "xls" | "img" | string
+  /** Optional thumbnail URL for image attachments */
+  thumbnail?: string
+  /** Upload lifecycle displayed inside the composer attachment strip. */
+  status?: "uploading" | "completed" | "error"
+  /** Upload progress from 0 to 100. */
+  progress?: number
+  /** Shows a remove action on card hover/focus. */
+  onRemove?: () => void
+  /** Shows a retry action for failed uploads. */
+  onRetry?: () => void
+  /** Opens the image attachment preview. */
+  onPreview?: () => void
+  className?: string
+}
+
+const STATUS: Record<NonNullable<AttachmentCardProps["status"]>, AttachmentStatus> = {
+  uploading: "uploading",
+  completed: "done",
+  error: "error",
+}
+
+/**
+ * Composer 附件条里的单个附件（方片 / 缩略图两档）。
+ *
+ * @deprecated DS 2.0 起并入 `Attachment`（domain/chat/Attachment）：无缩略走
+ * `variant="tile"`，有缩略走 `variant="image"`。本导出是薄兼容层，只做状态词映射
+ * （completed → done）与 meta 读数拼装；新代码直接用 `Attachment`。
+ */
+export function AttachmentCard({
+  name,
+  size,
+  type = "doc",
+  thumbnail,
+  status = "completed",
+  progress = 0,
+  onRemove,
+  onRetry,
+  onPreview,
+  className = "",
+}: AttachmentCardProps) {
+  const label = type.toUpperCase()
+  return (
+    <Attachment
+      variant={thumbnail ? "image" : "tile"}
+      name={name}
+      meta={size ? `${label} · ${size}` : label}
+      kind={type}
+      thumbnail={thumbnail}
+      status={STATUS[status]}
+      progress={progress}
+      onOpen={onPreview}
+      onRetry={onRetry}
+      onRemove={onRemove}
+      className={className}
+    />
+  )
+}
+
+/**
+ * 附件横排条。
+ *
+ * @deprecated DS 2.0 起并入 `AttachmentList`（`layout="strip"`）。
+ */
+export function Attachments({ children, className = "" }: { children: ReactNode; className?: string }) {
+  return (
+    <AttachmentList layout="strip" className={className}>
+      {children}
+    </AttachmentList>
+  )
+}

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

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { BackButton } from "./index"
+
+const meta = {
+  title: "Composite/BackButton",
+  component: BackButton,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof BackButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 默认 icon-only：无障碍名走 label（默认「返回」）。 */
+export const IconOnly: Story = {
+  args: {},
+}
+
+/** 带文案：图标在左，可见文案即无障碍名。 */
+export const WithLabel: Story = {
+  args: { children: "返回站点", label: "返回站点" },
+}
+
+/** 三档尺寸：28 / 32 / 40。 */
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+      <BackButton size="sm" />
+      <BackButton size="md" />
+      <BackButton size="lg" />
+      <BackButton size="sm">返回</BackButton>
+      <BackButton size="md">返回</BackButton>
+      <BackButton size="lg">返回</BackButton>
+    </div>
+  ),
+}
+
+/** 禁用态：逐 token 禁用色，非统一透明度。 */
+export const Disabled: Story = {
+  render: () => (
+    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+      <BackButton disabled />
+      <BackButton disabled>返回定时任务</BackButton>
+    </div>
+  ),
+}
+
+/** 用在标题栏 leading 槽里的样子。 */
+export const InTitleBar: Story = {
+  render: () => (
+    <div
+      style={{
+        width: 480,
+        height: "var(--ow-titlebar-h)",
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "0 12px",
+        background: "var(--ow-surface)",
+        borderBottom: "1px solid var(--ow-border)",
+      }}
+    >
+      <BackButton size="sm" label="返回列表" />
+      <span style={{ fontSize: 13, fontWeight: 500, color: "var(--ow-text)" }}>每日构建</span>
+    </div>
+  ),
+}
+
+/** 双主题对照。 */
+export const ThemeMatrix: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 16 }}>
+      {(["light", "dark"] as const).map((theme) => (
+        <div
+          key={theme}
+          data-theme={theme}
+          style={{
+            background: "var(--ow-bg)",
+            padding: 16,
+            display: "flex",
+            gap: 8,
+            border: "1px solid var(--ow-border)",
+            borderRadius: "var(--ow-radius-card)",
+          }}
+        >
+          <BackButton />
+          <BackButton>返回</BackButton>
+          <BackButton disabled>返回</BackButton>
+        </div>
+      ))}
+    </div>
+  ),
+}

package/src/components/composite/BackButton/BackButtonSource.test.mjs

@@ -0,0 +1,29 @@
+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("BackButton 归口 ghost + chevron-left，不自造样式", () => {
+  assert.match(source, /variant="ghost"/)
+  assert.match(source, /ChevLeft/)
+  assert.doesNotMatch(source, /variant="unstyled"/)
+  assert.doesNotMatch(source, /className="ch-ic--back"/)
+  assert.doesNotMatch(source, /--ow-primary-bg|--ow-info-bg/)
+})
+
+test("状态与命中区交给 Button 原语；不重写 hover/press/focus", () => {
+  assert.doesNotMatch(source, /hover:|active:|focus-visible:/)
+  assert.match(source, /size = "md"/)
+})
+
+test("icon-only 时才写 aria-label，带文案时不覆盖可见名", () => {
+  assert.match(source, /const iconOnly = children == null/)
+  assert.match(source, /aria-label=\{iconOnly \? label : undefined\}/)
+  assert.match(source, /data-slot="back-button"/)
+})
+
+test("中性件：禁信标/荧黄（R3），无 Tailwind 歧义任意值", () => {
+  assert.doesNotMatch(source, /--ow-yellow|--ow-beacon|--ow-accent-dot/)
+  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
+})