@orbit-work/ui 0.1.0

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

@@ -0,0 +1,328 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Clock } from "../Icons"
+import { SitesArtifactCardView } from "./index"
+
+const meta = {
+  title: "Composite/SitesArtifactCardView",
+  component: SitesArtifactCardView,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SitesArtifactCardView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Published: Story = {
+  args: {
+    state: "published",
+    title: "My Portfolio Site",
+    eyebrow: "Published 2 minutes ago",
+    url: "https://portfolio.sites.anthropic.com",
+    accessLabel: "Public",
+    onOpen: () => console.log("Open site"),
+    onCopy: () => console.log("Copy link"),
+    onManageAccess: () => console.log("Manage access"),
+    onViewReleases: () => console.log("View releases"),
+  },
+}
+
+export const Failed: Story = {
+  args: {
+    state: "failed",
+    title: "Build Failed",
+    eyebrow: "Failed 5 minutes ago",
+    errorDetail: "Error: Module not found",
+    onOpen: undefined,
+    onCopy: undefined,
+    onManageAccess: undefined,
+    onViewReleases: undefined,
+  },
+}
+
+export const PublishedWithMeta: Story = {
+  args: {
+    state: "published",
+    title: "Documentation Site",
+    eyebrow: "Published 1 hour ago",
+    url: "https://docs.mycompany.com",
+    accessLabel: "Private",
+    meta: [<span key="1">v0.1.0</span>, <span key="2">•</span>, <span key="3">Build #42</span>],
+    onOpen: () => console.log("Open site"),
+    onCopy: () => console.log("Copy link"),
+  },
+}
+
+export const PublishedCopied: Story = {
+  args: {
+    state: "published",
+    title: "Landing Page",
+    eyebrow: "Published just now",
+    url: "https://landing.sites.anthropic.com",
+    accessLabel: "Public",
+    copied: true,
+    onOpen: () => console.log("Open site"),
+    onCopy: () => console.log("Copy link"),
+    onManageAccess: () => console.log("Manage access"),
+  },
+}
+
+export const PublishedNoActions: Story = {
+  args: {
+    state: "published",
+    title: "Static Site",
+    eyebrow: "Published yesterday",
+    url: "https://static.example.com",
+    accessLabel: "Public",
+  },
+}
+
+export const PublishedLongTitle: Story = {
+  args: {
+    state: "published",
+    title: "My Very Long Project Title That Demonstrates How the Component Handles Extended Titles",
+    eyebrow: "Published 3 hours ago",
+    url: "https://very-long-subdomain-name.sites.anthropic.com/path/to/page",
+    accessLabel: "Organization",
+    onOpen: () => console.log("Open site"),
+    onCopy: () => console.log("Copy link"),
+  },
+}
+
+export const PublishedShortTitle: Story = {
+  args: {
+    state: "published",
+    title: "App",
+    eyebrow: "Published",
+    url: "https://a.co",
+    accessLabel: "Private",
+    onOpen: () => console.log("Open site"),
+  },
+}
+
+export const PublishedNoURL: Story = {
+  args: {
+    state: "published",
+    title: "Local Preview",
+    eyebrow: "Building...",
+    accessLabel: "Private",
+    onOpen: () => console.log("Open site"),
+  },
+}
+
+export const PublishedNoAccessLabel: Story = {
+  args: {
+    state: "published",
+    title: "Public Site",
+    eyebrow: "Published 10 minutes ago",
+    url: "https://public.example.com",
+    onOpen: () => console.log("Open site"),
+    onCopy: () => console.log("Copy link"),
+  },
+}
+
+export const PublishedOnlyOpenAction: Story = {
+  args: {
+    state: "published",
+    title: "Minimal Actions",
+    eyebrow: "Published 1 day ago",
+    url: "https://minimal.example.com",
+    accessLabel: "Public",
+    onOpen: () => console.log("Open site"),
+  },
+}
+
+export const PublishedOnlyCopyAction: Story = {
+  args: {
+    state: "published",
+    title: "Copy Only",
+    eyebrow: "Published 2 days ago",
+    url: "https://copy.example.com",
+    accessLabel: "Private",
+    onCopy: () => console.log("Copy link"),
+  },
+}
+
+export const FailedLongError: Story = {
+  args: {
+    state: "failed",
+    title: "Build Failed",
+    eyebrow: "Failed 30 seconds ago",
+    errorDetail:
+      "Error: Cannot find module ./components/Header. Please check that the file exists and the path is correct.",
+  },
+}
+
+export const FailedShortError: Story = {
+  args: {
+    state: "failed",
+    title: "Build Error",
+    eyebrow: "Failed",
+    errorDetail: "Timeout",
+  },
+}
+
+export const FailedNoErrorDetail: Story = {
+  args: {
+    state: "failed",
+    title: "Unknown Error",
+    eyebrow: "Failed 1 minute ago",
+  },
+}
+
+export const PublishedWithTimestamp: Story = {
+  args: {
+    state: "published",
+    title: "Time-Stamped Release",
+    eyebrow: "Published Aug 27, 2026 at 3:45 PM",
+    url: "https://timestamped.example.com",
+    accessLabel: "Public",
+    meta: [
+      <>
+        <Clock style={{ width: 14, height: 14, marginRight: 4, verticalAlign: "middle" }} />
+        Last updated 5 minutes ago
+      </>,
+    ],
+    onOpen: () => console.log("Open site"),
+  },
+}
+
+export const PublishedComplexMeta: Story = {
+  args: {
+    state: "published",
+    title: "Production Deployment",
+    eyebrow: "Published 2 hours ago",
+    url: "https://prod.company.com",
+    accessLabel: "Organization",
+    meta: [
+      <span key="1" style={{ fontWeight: 600 }}>
+        v3.2.1
+      </span>,
+      <span key="2">•</span>,
+      <span key="3">Build #156</span>,
+      <span key="4">•</span>,
+      <span key="5">main@a1b2c3d</span>,
+    ],
+    onOpen: () => console.log("Open site"),
+    onCopy: () => console.log("Copy link"),
+    onManageAccess: () => console.log("Manage access"),
+    onViewReleases: () => console.log("View releases"),
+  },
+}
+
+export const ChineseContent: Story = {
+  args: {
+    state: "published",
+    title: "我的项目网站",
+    eyebrow: "2分钟前发布",
+    url: "https://chinese.sites.anthropic.com",
+    accessLabel: "公开",
+    onOpen: () => console.log("Open site"),
+    onCopy: () => console.log("Copy link"),
+  },
+}
+
+export const MixedLanguageContent: Story = {
+  args: {
+    state: "published",
+    title: "Project 项目",
+    eyebrow: "Published 发布于 1 hour ago",
+    url: "https://mixed.example.com",
+    accessLabel: "Public 公开",
+    meta: [<span key="1">版本 v2.0</span>, <span key="2">•</span>, <span key="3">Build #88</span>],
+    onOpen: () => console.log("Open site"),
+  },
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 600 }}>
+      <SitesArtifactCardView
+        state="published"
+        title="Successful Deployment"
+        eyebrow="Published 5 minutes ago"
+        url="https://success.example.com"
+        accessLabel="Public"
+        onOpen={() => console.log("Open")}
+        onCopy={() => console.log("Copy")}
+      />
+      <SitesArtifactCardView
+        state="failed"
+        title="Failed Deployment"
+        eyebrow="Failed 2 minutes ago"
+        errorDetail="Build error: missing dependencies"
+      />
+    </div>
+  ),
+}
+
+export const MultiplePublished: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 600 }}>
+      <SitesArtifactCardView
+        state="published"
+        title="Production Site"
+        eyebrow="Published 1 hour ago"
+        url="https://prod.example.com"
+        accessLabel="Organization"
+        meta={[<span key="1">v0.1.0</span>]}
+        onOpen={() => console.log("Open prod")}
+        onCopy={() => console.log("Copy prod")}
+        onManageAccess={() => console.log("Manage prod")}
+        onViewReleases={() => console.log("Releases prod")}
+      />
+      <SitesArtifactCardView
+        state="published"
+        title="Staging Site"
+        eyebrow="Published 10 minutes ago"
+        url="https://staging.example.com"
+        accessLabel="Private"
+        meta={[<span key="1">v0.1.0-beta.3</span>]}
+        onOpen={() => console.log("Open staging")}
+        onCopy={() => console.log("Copy staging")}
+      />
+      <SitesArtifactCardView
+        state="published"
+        title="Preview Site"
+        eyebrow="Published just now"
+        url="https://preview-abc123.example.com"
+        accessLabel="Private"
+        copied
+        onOpen={() => console.log("Open preview")}
+        onCopy={() => console.log("Copy preview")}
+      />
+    </div>
+  ),
+}
+
+export const AccessVariations: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 600 }}>
+      <SitesArtifactCardView
+        state="published"
+        title="Public Site"
+        eyebrow="Published 1 hour ago"
+        url="https://public.example.com"
+        accessLabel="Public"
+        onOpen={() => console.log("Open")}
+      />
+      <SitesArtifactCardView
+        state="published"
+        title="Private Site"
+        eyebrow="Published 2 hours ago"
+        url="https://private.example.com"
+        accessLabel="Private"
+        onOpen={() => console.log("Open")}
+      />
+      <SitesArtifactCardView
+        state="published"
+        title="Organization Site"
+        eyebrow="Published 3 hours ago"
+        url="https://org.example.com"
+        accessLabel="Organization"
+        onOpen={() => console.log("Open")}
+      />
+    </div>
+  ),
+}

package/src/components/composite/SitesArtifactCardView/SitesArtifactCardViewSource.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")
+const styles = await readFile(new URL("../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+// ── R2 复审 ────────────────────────────────────────────────────────────────
+test("状态行不再冒充 §8 眉标：类名改 __status，形制＝功能色点 ＋ 中性文字", () => {
+  assert.doesNotMatch(source, /sites-result-card__eyebrow/)
+  assert.doesNotMatch(styles, /sites-result-card__eyebrow/)
+  assert.match(source, /className="sites-result-card__status"/)
+  assert.match(source, /className="sites-result-card__status-dot"/)
+  assert.match(styles, /\.sites-result-card__status \{[^}]*color: var\(--ow-text-2\)/)
+  assert.match(styles, /\.sites-result-card__status \{[^}]*font: 500 /)
+  assert.doesNotMatch(styles, /\.sites-result-card__status \{[^}]*var\(--ow-success\)/)
+})
+
+test("状态点色走 --ow-{v}-on-tint（与 tint 面同一口径），成/败两态双编码", () => {
+  assert.match(styles, /\.sites-result-card__status-dot \{[^}]*background: var\(--ow-success-on-tint\)/)
+  assert.match(
+    styles,
+    /\.sites-result-card--error \.sites-result-card__status-dot \{ background: var\(--ow-error-on-tint\); \}/,
+  )
+})
+
+test("卡面骨架：14 内距 ＋ 1px --ow-border ＋ r12 ＋ 零影", () => {
+  const card = styles.match(/\n\.sites-result-card \{[^}]*\}/)?.[0]
+  assert.ok(card)
+  assert.match(card, /padding: 14px/)
+  assert.match(card, /solid var\(--ow-border\)/)
+  assert.doesNotMatch(card, /box-shadow/)
+})
+
+test("间距落 --ow-space-* 档：本族段不留 10/5/3 裸值", () => {
+  const block = styles.slice(
+    styles.indexOf(".sites-artifact-list {"),
+    styles.indexOf(".sites-result-card__actions svg"),
+  )
+  assert.ok(block.length > 0)
+  assert.doesNotMatch(block, /: 10px[;,]/)
+  assert.doesNotMatch(block, /: 5px[;, ]/)
+  assert.doesNotMatch(block, /: 3px[;,]/)
+  assert.doesNotMatch(block, /gap: 5px/)
+})

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

@@ -0,0 +1,100 @@
+import type { ReactNode } from "react"
+import { ArtifactTrail } from "../../domain/chat/ArtifactCard"
+import { Button } from "../../primitives"
+import { CheckCircle, Clock, Copy, Globe, Lock } from "../Icons"
+
+export type SitesArtifactCardViewProps = {
+  state: "published" | "failed"
+  title: string
+  eyebrow: string
+  url?: string
+  accessLabel?: string
+  meta?: ReactNode[]
+  copied?: boolean
+  errorDetail?: string
+  onOpen?: () => void
+  onCopy?: () => void
+  onManageAccess?: () => void
+  onViewReleases?: () => void
+}
+
+/** Visual-only Sites release card. Business side effects stay with the consumer. */
+export function SitesArtifactCardView({
+  state,
+  title,
+  eyebrow,
+  url,
+  accessLabel,
+  meta = [],
+  copied = false,
+  errorDetail,
+  onOpen,
+  onCopy,
+  onManageAccess,
+  onViewReleases,
+}: SitesArtifactCardViewProps) {
+  const failed = state === "failed"
+  return (
+    <section className={`sites-result-card sites-result-card--${failed ? "error" : "success"}`} aria-label={eyebrow}>
+      <div className="sites-result-card__content">
+        {/* DS 2.0 交付记号：卡头改用递减短迹签名（text-3 · 浅暗同形），替换原 34px 彩色图标位 */}
+        <ArtifactTrail className="sites-result-card__trail" style={{ marginBottom: 8 }} />
+        <div className="sites-result-card__heading">
+          {/* W5 终扫修：卡头签名唯一——只留 ArtifactTrail 短迹。原彩色状态圈（CheckCircle/
+              AlertCircle）与短迹同框是两套卡头签名并存，状态改由这行状态标承担（R1 文字编码）。
+              R2 复审修：类名从 __eyebrow 改 __status——它不是 §8 眉标（那套是 500/
+              --ow-fs-eyebrow-cjk/+0.08em/--ow-eyebrow）。形制也随之收口为「状态点 ＋ 中性文字」，
+              功能色只落在 6px 点上。入参名 `eyebrow` 为包外兼容保留。 */}
+          <div className="sites-result-card__status">
+            <span className="sites-result-card__status-dot" aria-hidden="true" />
+            {eyebrow}
+          </div>
+          {!failed && accessLabel && (
+            <span className="sites-result-card__access">
+              <Lock />
+              {accessLabel}
+            </span>
+          )}
+        </div>
+        <div className="sites-result-card__title">{title}</div>
+        {url && (
+          <div className="sites-result-card__url" title={url}>
+            {url}
+          </div>
+        )}
+        {(meta.length > 0 || errorDetail) && (
+          <div className="sites-result-card__meta">
+            {meta.map((item, index) => (
+              <span key={index}>{item}</span>
+            ))}
+            {errorDetail && <span>{errorDetail}</span>}
+          </div>
+        )}
+        {!failed && (onOpen || onCopy || onManageAccess || onViewReleases) && (
+          <div className="sites-result-card__actions">
+            {onOpen && (
+              <Button size="sm" variant="primary" icon={<Globe />} onClick={onOpen}>
+                打开站点
+              </Button>
+            )}
+            {onCopy && (
+              <Button size="sm" variant="secondary" icon={copied ? <CheckCircle /> : <Copy />} onClick={onCopy}>
+                {copied ? "已复制" : "复制链接"}
+              </Button>
+            )}
+            {onManageAccess && (
+              <Button size="sm" variant="secondary" icon={<Lock />} onClick={onManageAccess}>
+                访问权限
+              </Button>
+            )}
+            {onViewReleases && (
+              <Button size="sm" variant="secondary" icon={<Clock />} onClick={onViewReleases}>
+                发布记录
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Skeleton } from "./index"
+
+const meta = {
+  title: "Composite/Skeleton",
+  component: Skeleton,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Skeleton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Text: Story = {
+  args: {
+    variant: "text",
+    lines: 3,
+  },
+}
+
+export const TextCustomLines: Story = {
+  args: {
+    variant: "text",
+    lines: 5,
+  },
+}
+
+export const Line: Story = {
+  args: {
+    variant: "line",
+    width: "100%",
+    height: 16,
+  },
+}
+
+export const LineCustomSize: Story = {
+  args: {
+    variant: "line",
+    width: 200,
+    height: 24,
+  },
+}
+
+export const Block: Story = {
+  args: {
+    variant: "block",
+    width: "100%",
+    height: 80,
+  },
+}
+
+export const BlockCustomSize: Story = {
+  args: {
+    variant: "block",
+    width: 300,
+    height: 120,
+    radius: 16,
+  },
+}
+
+export const Avatar: Story = {
+  args: {
+    variant: "avatar",
+  },
+}
+
+export const Card: Story = {
+  args: {
+    variant: "card",
+    height: 120,
+  },
+}
+
+export const Circle: Story = {
+  args: {
+    variant: "line",
+    width: 48,
+    height: 48,
+    circle: true,
+  },
+}
+
+export const ChatBubbleSkeleton: Story = {
+  render: () => (
+    <div style={{ maxWidth: 600, display: "flex", flexDirection: "column", gap: 16 }}>
+      <div style={{ display: "flex", gap: 12 }}>
+        <Skeleton variant="line" width={32} height={32} circle />
+        <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 8 }}>
+          <Skeleton variant="line" width="80%" height={14} />
+          <Skeleton variant="line" width="60%" height={14} />
+        </div>
+      </div>
+      <div style={{ display: "flex", gap: 12 }}>
+        <Skeleton variant="line" width={32} height={32} circle />
+        <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 8 }}>
+          <Skeleton variant="line" width="90%" height={14} />
+          <Skeleton variant="line" width="75%" height={14} />
+          <Skeleton variant="line" width="40%" height={14} />
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const CardListSkeleton: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 400 }}>
+      {Array.from({ length: 3 }).map((_, i) => (
+        <div key={i} style={{ padding: 16, border: "1px solid var(--ow-border)", borderRadius: 12 }}>
+          <div style={{ display: "flex", gap: 12, marginBottom: 12 }}>
+            <Skeleton variant="line" width={48} height={48} radius={8} />
+            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 8 }}>
+              <Skeleton variant="line" width="70%" height={16} />
+              <Skeleton variant="line" width="50%" height={12} />
+            </div>
+          </div>
+          <Skeleton variant="line" width="100%" height={12} />
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const TableSkeleton: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 600 }}>
+      <div style={{ display: "flex", gap: 16 }}>
+        <Skeleton variant="line" width={40} height={14} />
+        <Skeleton variant="line" width="1fr" height={14} />
+        <Skeleton variant="line" width={100} height={14} />
+        <Skeleton variant="line" width={80} height={14} />
+      </div>
+      {Array.from({ length: 5 }).map((_, i) => (
+        <div key={i} style={{ display: "flex", gap: 16, alignItems: "center" }}>
+          <Skeleton variant="line" width={40} height={12} />
+          <Skeleton variant="line" width="1fr" height={12} />
+          <Skeleton variant="line" width={100} height={12} />
+          <Skeleton variant="line" width={80} height={12} />
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const DashboardSkeleton: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 24, maxWidth: 800 }}>
+      <div style={{ display: "flex", gap: 16 }}>
+        <Skeleton variant="block" width="1fr" height={100} />
+        <Skeleton variant="block" width="1fr" height={100} />
+        <Skeleton variant="block" width="1fr" height={100} />
+      </div>
+      <Skeleton variant="block" height={200} />
+      <div style={{ display: "flex", gap: 16 }}>
+        <Skeleton variant="block" width="60%" height={160} />
+        <Skeleton variant="block" width="40%" height={160} />
+      </div>
+    </div>
+  ),
+}
+
+export const ProfileSkeleton: Story = {
+  render: () => (
+    <div style={{ maxWidth: 400, padding: 20, border: "1px solid var(--ow-border)", borderRadius: 12 }}>
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 16, marginBottom: 24 }}>
+        <Skeleton variant="line" width={80} height={80} circle />
+        <Skeleton variant="line" width={120} height={20} />
+        <Skeleton variant="line" width={160} height={14} />
+      </div>
+      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <div>
+          <Skeleton variant="line" width={80} height={12} style={{ marginBottom: 8 }} />
+          <Skeleton variant="line" width="100%" height={36} />
+        </div>
+        <div>
+          <Skeleton variant="line" width={80} height={12} style={{ marginBottom: 8 }} />
+          <Skeleton variant="line" width="100%" height={36} />
+        </div>
+        <div>
+          <Skeleton variant="line" width={80} height={12} style={{ marginBottom: 8 }} />
+          <Skeleton variant="line" width="100%" height={80} />
+        </div>
+      </div>
+    </div>
+  ),
+}

package/src/components/composite/Skeleton/SkeletonSource.test.mjs

@@ -0,0 +1,25 @@
+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")
+const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/[^\n]*/g, "")
+
+// ── R2 复审 ────────────────────────────────────────────────────────────────
+test("avatar 位是真圆：barStyle 先摊开，尺寸与 50% 圆角写在其后不被反杀", () => {
+  const circle = source.match(/const circleStyle: React\.CSSProperties = \{[\s\S]*?\n\}/)?.[0]
+  assert.ok(circle, "circleStyle 未找到")
+  // ...barStyle 必须排在 width/height/borderRadius 之前，否则 height:16 与 radius-xs 会覆盖 32/50%
+  assert.ok(circle.indexOf("...barStyle") < circle.indexOf("width: 32"), "...barStyle 必须在尺寸之前展开")
+  assert.ok(circle.indexOf("...barStyle") < circle.indexOf('borderRadius: "50%"'))
+})
+
+test("§9 唯一缓动：呼吸走 --ow-ease-beacon，不留裸 ease-in-out", () => {
+  assert.match(source, /animation: "ow-skeleton 1\.6s var\(--ow-ease-beacon\) infinite"/)
+  assert.doesNotMatch(code, /ease-in-out/)
+})
+
+test("骨架屏禁 shimmer 扫光，底色走 hover 档", () => {
+  assert.doesNotMatch(code, /shimmer|linear-gradient/)
+  assert.match(source, /background: "var\(--ow-hover\)"/)
+})