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

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

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

@@ -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")
-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

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

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

@@ -1,25 +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")
-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\)"/)
-})