@orbit-work/ui 0.1.0

package/src/components/domain/theme/ThemeDemo.tsx

@@ -0,0 +1,224 @@
+import { useTenantTheme } from "../../../hooks/useTenantTheme"
+import type { TenantTheme } from "../../../theme/core/types"
+import { BeaconSpinner } from "../../composite/BeaconSpinner"
+import { Badge, Button, Card, Field, InlineMessage } from "../../primitives"
+
+// Mock data for demo purposes only
+//
+// R2：原来这两份 mock 是一整套 V1/Tailwind 默认色（靛蓝 #4F46E5 ＋ #F9FAFB/#F3F4F6/
+// #111827/#E5E7EB 灰阶）加 "Inter, system-ui" 字栈，与 DS 2.0 的 #F7F6F1/#FDFDFC/
+// #333B50/#DCDCD7 毫无关系；下方色卡逐个把这些值印在屏上，等于把 V1 调色当成
+// 「默认主题」示范。现在两份都改抄 DS 2.0 终值（default＝浅档原值；enterprise＝真·租户
+// 改色的样子，只动中性梯度与品牌名，仍落在 DS2 的面/字/线三层语义上）。
+
+/** 默认主题＝DS 2.0 浅档终值（tokens.css light 段解析后的实值）。 */
+const mockTenantTheme: TenantTheme = {
+  name: "default",
+  logo: "",
+  colors: {
+    bg: "#F7F6F1", // --ow-bg = gray-00
+    surface: "#FDFDFC", // --ow-surface
+    surface2: "#F1F0EA", // --ow-surface-2
+    text: "#333B50", // --ow-text = gray-70
+    text2: "#646B7A", // --ow-text-2 = gray-50
+    text3: "#A2A5A9", // --ow-text-3 = gray-30
+    border: "#DCDCD7", // --ow-border = gray-10
+    borderStrong: "#C2C3C1", // --ow-border-strong = gray-20
+  },
+  typography: {
+    // 抄 base.ts 的族名栈（emoji 族置栈尾，§8 已知坑）
+    fontSans: "'HarmonyOS Sans SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif",
+    fontMono: "'IBM Plex Mono', ui-monospace, 'SF Mono', monospace",
+  },
+  branding: {
+    productName: "Orbitwork",
+    companyName: "Orbitwork AI",
+  },
+}
+
+/**
+ * 企业主题＝「租户真能改的那一档」示范：中性梯度整体偏暖一档 ＋ 换字栈 ＋ 换品牌名。
+ * 不碰功能色、不碰行动极——那两族在 DS2 禁覆盖清单上（§15 皮肤边界同一口径）。
+ */
+const mockCustomTheme: TenantTheme = {
+  name: "enterprise",
+  logo: "",
+  colors: {
+    bg: "#F4F1EC",
+    surface: "#FCFAF7",
+    surface2: "#EFEAE3",
+    text: "#33302B",
+    text2: "#6B655C",
+    text3: "#A8A29A",
+    border: "#DDD7CE",
+    borderStrong: "#C4BDB2",
+  },
+  typography: {
+    fontSans: "'IBM Plex Sans', 'HarmonyOS Sans SC', 'Noto Sans SC', sans-serif",
+    fontMono: "'IBM Plex Mono', ui-monospace, monospace",
+  },
+  branding: {
+    productName: "Enterprise Portal",
+    companyName: "ACME Corporation",
+    claim: "智能工作，从登录开始",
+    claimNote: "连接你的团队与 AI 助手",
+    slogan: "交给团队，继续创造。",
+  },
+}
+
+/**
+ * Theme Demo Component
+ * Demonstrates tenant theme switching with mock data
+ */
+export function ThemeDemo() {
+  const { theme, loading, error, switchTheme } = useTenantTheme()
+
+  // §6 两态：载＝BeaconSpinner（<20px 小转子）＋ 一句 text-2 文字编码；
+  // 错＝primitives/InlineMessage（error tint 三件套 ＋ 折叠 mono 详情）。
+  // 原来两态都是「灰字居中」——正是屏级判断表里点名要退役的 V1 写法。
+  if (loading) {
+    return (
+      <div
+        data-ow-part="loading"
+        role="status"
+        aria-live="polite"
+        className="flex h-screen items-center justify-center gap-2 text-ow-fs-ui text-ow-text-2"
+      >
+        <BeaconSpinner size={16} />
+        <span>正在加载主题…</span>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div data-ow-part="error" className="flex h-screen items-center justify-center p-8">
+        <div className="w-full max-w-[560px]">
+          <InlineMessage variant="error" detail={error}>
+            主题没加载出来。
+          </InlineMessage>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-ow-surface p-8">
+      <div className="max-w-4xl mx-auto">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-ow-fs-title font-semibold text-ow-text mb-2">
+            {theme?.branding.productName || "Orbitwork"} 主题演示
+          </h1>
+          <p className="text-ow-fs-body text-ow-text-3">
+            当前主题: {theme?.name} | {theme?.branding.companyName}
+          </p>
+          {theme?.branding.slogan ? (
+            <p className="text-ow-fs-body text-ow-text-3">租户口号: {theme.branding.slogan}</p>
+          ) : null}
+        </div>
+
+        {/* Theme Switcher */}
+        <Card title="主题切换" className="mb-6">
+          <div className="flex gap-3">
+            <Button variant="primary" size="md" onClick={() => switchTheme(mockTenantTheme)}>
+              默认主题
+            </Button>
+            <Button variant="secondary" size="md" onClick={() => switchTheme(mockCustomTheme)}>
+              企业主题
+            </Button>
+          </div>
+        </Card>
+
+        {/* Component Showcase */}
+        <Card title="组件展示" className="mb-6">
+          <div className="space-y-6">
+            {/* Buttons */}
+            <div>
+              <h3 className="text-ow-fs-body font-semibold text-ow-text mb-3">按钮</h3>
+              <div className="flex gap-2 flex-wrap">
+                <Button variant="primary" size="sm">
+                  主按钮 · 小
+                </Button>
+                <Button variant="primary" size="md">
+                  主按钮 · 中
+                </Button>
+                <Button variant="secondary" size="md">
+                  次按钮
+                </Button>
+                <Button variant="ghost" size="md">
+                  幽灵钮
+                </Button>
+                <Button variant="danger" size="md">
+                  危险钮
+                </Button>
+              </div>
+            </div>
+
+            {/* Badges */}
+            <div>
+              <h3 className="text-ow-fs-body font-semibold text-ow-text mb-3">徽章</h3>
+              <div className="flex gap-2 flex-wrap">
+                <Badge variant="normal" dot>
+                  常规
+                </Badge>
+                <Badge variant="success" dot>
+                  成功
+                </Badge>
+                <Badge variant="warning" dot>
+                  警告
+                </Badge>
+                <Badge variant="error" dot>
+                  错误
+                </Badge>
+                <Badge variant="pending" dot>
+                  等待中
+                </Badge>
+              </div>
+            </div>
+
+            {/* Input */}
+            <div>
+              <h3 className="text-ow-fs-body font-semibold text-ow-text mb-3">输入框</h3>
+              <Field value="" onChange={() => {}} placeholder="输入内容..." />
+            </div>
+          </div>
+        </Card>
+
+        {/* Color Palette */}
+        <Card title="当前颜色配置" className="mb-6">
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+            {/* R2：色卡与 themeApplier 的落点表一一对应——租户能改的就是中性梯度这一档。
+                原来第一格是 Primary（--ow-primary），而它在 DS2 禁覆盖清单上，租户主题
+                永远改不动，色卡却把 mock 里的靛蓝印出来，等于示范一件做不到的事。 */}
+            <ColorSwatch label="地" token="--ow-bg" color={theme?.colors.bg} />
+            <ColorSwatch label="面" token="--ow-surface" color={theme?.colors.surface} />
+            <ColorSwatch label="嵌套井" token="--ow-surface-2" color={theme?.colors.surface2} />
+            <ColorSwatch label="正文字" token="--ow-text" color={theme?.colors.text} />
+            <ColorSwatch label="次级字" token="--ow-text-2" color={theme?.colors.text2} />
+            <ColorSwatch label="默认边" token="--ow-border" color={theme?.colors.border} />
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 色卡。缺值时不再兜 V1 hex，而是回落到同名 `--ow-*` 语义 token——
+ * 演示页永远渲当前主题的实值，读数走 mono（§7 读数口径）。
+ */
+function ColorSwatch({ label, token, color }: { label: string; token: string; color?: string }) {
+  return (
+    <div className="flex items-center gap-2">
+      <div
+        className="w-10 h-10 [border-radius:var(--ow-radius-control)] border border-ow-border-strong"
+        style={{ backgroundColor: color ?? `var(${token})` }}
+      />
+      <div>
+        <div className="text-ow-fs-caption font-medium text-ow-text">{label}</div>
+        <div className="text-ow-fs-caption text-ow-text-3 font-mono tabular-nums">{color ?? token}</div>
+      </div>
+    </div>
+  )
+}

package/src/components/index.ts

@@ -0,0 +1,11 @@
+// 基础组件
+export * from "./primitives"
+
+// 复合组件
+export * from "./composite"
+
+// 领域组件
+export * from "./domain"
+
+// 布局组件
+export * from "./Layout"

package/src/components/primitives/Avatar/Avatar.stories.tsx

@@ -0,0 +1,170 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Avatar, hashToDataColor } from "./index"
+
+const meta = {
+  title: "Primitives/Avatar",
+  component: Avatar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["data-1", "data-2", "data-3", "data-4", "data-5", "data-6", "agent"],
+      description: "DS2 data color (people) or agent ink form",
+    },
+  },
+} satisfies Meta<typeof Avatar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: "C",
+    variant: "data-1",
+  },
+}
+
+/** All six data colors — people avatars rotate over --ow-data-1..6. */
+export const DataColorWheel: Story = {
+  render: () => (
+    <div className="flex gap-3 items-center">
+      {(["data-1", "data-2", "data-3", "data-4", "data-5", "data-6"] as const).map((v, i) => (
+        <Avatar key={v} variant={v}>
+          {String.fromCharCode(65 + i)}
+        </Avatar>
+      ))}
+    </div>
+  ),
+}
+
+/** Agent form — ink square-rounded (--ow-avatar-agent-bg, radius 8). */
+export const Agent: Story = {
+  args: {
+    children: "A",
+    variant: "agent",
+  },
+}
+
+/** Same id always hashes to the same data color (hashToDataColor). */
+export const StableIdHashing: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <div className="flex gap-3 items-center">
+        {[
+          "ada@orbit.work",
+          "grace@orbit.work",
+          "alan@orbit.work",
+          "edsger@orbit.work",
+          "barbara@orbit.work",
+          "donald@orbit.work",
+        ].map((id) => (
+          <div key={id} className="flex flex-col items-center gap-1">
+            <Avatar id={id}>{id[0].toUpperCase()}</Avatar>
+            <span className="text-ow-fs-caption text-ow-text-3 font-mono">{hashToDataColor(id)}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex gap-3 items-end">
+      <Avatar variant="data-1" size="sm">
+        S
+      </Avatar>
+      <Avatar variant="data-1" size="md">
+        M
+      </Avatar>
+      <Avatar variant="data-1" size="lg">
+        L
+      </Avatar>
+      <Avatar variant="data-1" size="xl">
+        XL
+      </Avatar>
+      <Avatar variant="data-1" size={64}>
+        64
+      </Avatar>
+    </div>
+  ),
+}
+
+export const AgentSizes: Story = {
+  render: () => (
+    <div className="flex gap-3 items-end">
+      <Avatar variant="agent" size="sm">
+        A
+      </Avatar>
+      <Avatar variant="agent" size="md">
+        A
+      </Avatar>
+      <Avatar variant="agent" size="lg">
+        A
+      </Avatar>
+      <Avatar variant="agent" size="xl">
+        A
+      </Avatar>
+    </div>
+  ),
+}
+
+/**
+ * 图片头像。fixture 用内联 data-uri（离线/断网也渲得出来），
+ * 原外网图源 `i.pravatar.cc` 已移除——故事不依赖任何会过期的网络资源。
+ */
+const SAMPLE_PORTRAIT =
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+       <rect width="64" height="64" fill="#5B6B8C"/>
+       <circle cx="32" cy="25" r="11" fill="#D8DEE9"/>
+       <path d="M8 64c0-13.3 10.7-24 24-24s24 10.7 24 24z" fill="#D8DEE9"/>
+     </svg>`,
+  )
+
+export const WithImage: Story = {
+  args: {
+    children: <img src={SAMPLE_PORTRAIT} alt="User" style={{ width: "100%", height: "100%", objectFit: "cover" }} />,
+    size: 40,
+  },
+}
+
+/** Stacked group — negative margin + box-shadow ring against the page bg. */
+export const Stacked: Story = {
+  render: () => (
+    <div className="flex items-center">
+      <Avatar variant="data-1" style={{ boxShadow: "0 0 0 2px var(--ow-bg)" }}>
+        A
+      </Avatar>
+      <Avatar variant="data-2" style={{ marginLeft: -8, boxShadow: "0 0 0 2px var(--ow-bg)" }}>
+        B
+      </Avatar>
+      <Avatar variant="data-3" style={{ marginLeft: -8, boxShadow: "0 0 0 2px var(--ow-bg)" }}>
+        C
+      </Avatar>
+      <Avatar variant="data-4" style={{ marginLeft: -8, boxShadow: "0 0 0 2px var(--ow-bg)" }}>
+        D
+      </Avatar>
+      <Avatar variant="agent" style={{ marginLeft: -8, boxShadow: "0 0 0 2px var(--ow-bg)" }}>
+        E
+      </Avatar>
+    </div>
+  ),
+}
+
+/** Deprecated legacy names still resolve (brand→data-5, steel→data-1, clay→data-4, moss→data-2, ink→agent). */
+export const LegacyNamesCompat: Story = {
+  render: () => (
+    <div className="flex gap-3 items-center">
+      <Avatar variant="brand">B</Avatar>
+      <Avatar variant="steel">S</Avatar>
+      <Avatar variant="clay">C</Avatar>
+      <Avatar variant="moss">M</Avatar>
+      <Avatar variant="ink">I</Avatar>
+    </div>
+  ),
+}

package/src/components/primitives/Avatar/AvatarSource.test.mjs

@@ -0,0 +1,37 @@
+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("Avatar variant is a closed DS2 union — no arbitrary CSS background passthrough", () => {
+  // The old `| string` escape hatch is gone (DS2 Q7 ruling).
+  assert.doesNotMatch(source, /variant\?:.*\|\s*string/)
+  assert.match(source, /export type AvatarVariant/)
+  assert.match(source, /"data-1"/)
+  assert.match(source, /"data-6"/)
+  assert.match(source, /"agent"/)
+})
+
+test("person avatars rotate deterministically over --ow-data-1..6 by id hash", () => {
+  assert.match(source, /export function hashToDataColor\(id: string\)/)
+  assert.match(source, /% DATA_COLOR_COUNT/)
+  assert.match(source, /var\(--ow-\$\{resolved\}\)/)
+  assert.match(source, /hashToDataColor\(id\)/)
+})
+
+test("agent form uses ink square-rounded tokens; person text uses on-fill", () => {
+  assert.match(source, /var\(--ow-avatar-agent-bg\)/)
+  assert.match(source, /var\(--ow-avatar-agent-text\)/)
+  assert.match(source, /\[border-radius:var\(--ow-radius-sm\)\]/)
+  assert.match(source, /var\(--ow-on-fill\)/)
+  assert.match(source, /rounded-full/)
+})
+
+test("legacy preset names map onto the new scale (compat, deprecated)", () => {
+  assert.match(source, /brand: "data-5"/)
+  assert.match(source, /steel: "data-1"/)
+  assert.match(source, /clay: "data-4"/)
+  assert.match(source, /moss: "data-2"/)
+  assert.match(source, /ink: "agent"/)
+})

package/src/components/primitives/Avatar/index.tsx

@@ -0,0 +1,180 @@
+import { type VariantProps, cva } from "class-variance-authority"
+import type { CSSProperties, ReactNode } from "react"
+import { cn } from "../../../lib/utils"
+
+const avatarVariants = cva(
+  "inline-flex items-center justify-center font-semibold tracking-wide shrink-0 overflow-hidden",
+  {
+    variants: {
+      size: {
+        sm: "w-6 h-6 text-ow-fs-mark-sm",
+        md: "w-8 h-8 text-ow-fs-ui",
+        lg: "w-10 h-10 text-ow-fs-subtitle",
+        xl: "w-12 h-12 text-ow-fs-title-lg",
+      },
+      shape: {
+        /** People — full circle */
+        person: "rounded-full",
+        /** Agent — ink squircle, DS2 §7 action radius (8px) */
+        agent: "[border-radius:var(--ow-radius-sm)]",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      shape: "person",
+    },
+  },
+)
+
+/**
+ * DS2 avatar variants.
+ * - `data-1`..`data-6`: person avatars on the six DS data colors.
+ * - `agent`: ink square-rounded agent avatar (`--ow-avatar-agent-*`).
+ *
+ * Legacy names (deprecated, mapped internally — migrate at call sites):
+ * - `brand` → `data-5`, `steel` → `data-1`, `clay` → `data-4`,
+ *   `moss` → `data-2`, `ink` → `agent`.
+ */
+export type AvatarVariant =
+  | "data-1"
+  | "data-2"
+  | "data-3"
+  | "data-4"
+  | "data-5"
+  | "data-6"
+  | "agent"
+  /** @deprecated use "data-5" */
+  | "brand"
+  /** @deprecated use "data-1" */
+  | "steel"
+  /** @deprecated use "data-4" */
+  | "clay"
+  /** @deprecated use "data-2" */
+  | "moss"
+  /** @deprecated use "agent" */
+  | "ink"
+
+const LEGACY_VARIANT_MAP: Record<string, AvatarVariant> = {
+  brand: "data-5",
+  steel: "data-1",
+  clay: "data-4",
+  moss: "data-2",
+  ink: "agent",
+}
+
+const DATA_COLOR_COUNT = 6
+
+/**
+ * DS 字号档（--ow-fs-* 表内值 → token 名）。数字尺寸的字号按 size×0.4 **就近取档**，
+ * 不再落 `Math.round(size * 0.4)` 的表外自由值——同一组件只有「DS 档」一套字号来源。
+ */
+const DS_FONT_STEPS: ReadonlyArray<readonly [number, string]> = [
+  [10, "--ow-fs-mark-sm"],
+  [11, "--ow-fs-mark-md"],
+  [12, "--ow-fs-caption"],
+  [13, "--ow-fs-ui"],
+  [14, "--ow-fs-body"],
+  [16, "--ow-fs-subtitle"],
+  [19, "--ow-fs-title-lg"],
+  [22, "--ow-fs-title"],
+]
+
+/** 把任意像素诉求吸附到最近的 DS 字号档，返回该档的 token 引用。 */
+function nearestFontSizeToken(px: number): string {
+  let best: readonly [number, string] = [13, "--ow-fs-ui"]
+  for (const step of DS_FONT_STEPS) {
+    if (Math.abs(step[0] - px) < Math.abs(best[0] - px)) best = step
+  }
+  return `var(${best[1]})`
+}
+
+/**
+ * Deterministic id → data color mapping.
+ * Same id always resolves to the same `--ow-data-N` (FNV-1a hash, mod 6).
+ */
+export function hashToDataColor(id: string): `data-${1 | 2 | 3 | 4 | 5 | 6}` {
+  let hash = 0x811c9dc5
+  for (let i = 0; i < id.length; i++) {
+    hash ^= id.charCodeAt(i)
+    hash = Math.imul(hash, 0x01000193)
+  }
+  const n = ((hash >>> 0) % DATA_COLOR_COUNT) + 1
+  return `data-${n}` as `data-${1 | 2 | 3 | 4 | 5 | 6}`
+}
+
+export type AvatarProps = {
+  /** Single initial character or React node (image) */
+  children?: ReactNode
+  /** Size preset or custom size in px */
+  size?: VariantProps<typeof avatarVariants>["size"] | number
+  /**
+   * Stable identity key (user id, email, name). When set and `variant` is
+   * omitted, the background rotates deterministically over `--ow-data-1..6`
+   * via {@link hashToDataColor} — the same id always gets the same color.
+   */
+  id?: string
+  /**
+   * Explicit variant: `data-1`..`data-6` or `agent`.
+   * Arbitrary CSS background strings are no longer accepted (DS2 Q7 ruling);
+   * legacy preset names are deprecated and mapped to the new scale.
+   */
+  variant?: AvatarVariant
+  className?: string
+  style?: CSSProperties
+}
+
+function resolveVariant(variant: AvatarVariant | undefined, id: string | undefined): AvatarVariant {
+  if (variant) return LEGACY_VARIANT_MAP[variant] ?? variant
+  if (id) return hashToDataColor(id)
+  return "data-1"
+}
+
+/**
+ * Avatar — single initial or image on a solid DS2 background.
+ *
+ * People sit on the six `--ow-data-N` colors (circle, `--ow-on-fill` text);
+ * agents use the ink square-rounded form (`--ow-avatar-agent-bg/-text`,
+ * radius `--ow-radius-sm`). Pass `id` for a stable per-identity color.
+ *
+ * 叠排（stacking）由调用方给相邻头像加负外边距实现（故事样板用 `margin-left: -8px`）；
+ * 需要把重叠处切开时用一圈与所在地同色的 `box-shadow` 描边环——那是**描边**不是立面，
+ * §5「贴地零影」禁的是抬升阴影，两者不是一回事，勿据此给贴地件加立面影。
+ */
+export function Avatar({ children, size = "md", id, variant, className, style: cusStyles }: AvatarProps) {
+  const resolved = resolveVariant(variant, id)
+  const isAgent = resolved === "agent"
+  const bg = isAgent ? "var(--ow-avatar-agent-bg)" : `var(--ow-${resolved})`
+  const fg = isAgent ? "var(--ow-avatar-agent-text)" : "var(--ow-on-fill)"
+  const shape = isAgent ? ("agent" as const) : ("person" as const)
+
+  // Support both preset sizes and custom pixel values
+  const isCustomSize = typeof size === "number"
+  const customStyle: CSSProperties = isCustomSize
+    ? {
+        width: size,
+        height: size,
+        fontSize: nearestFontSizeToken(size * 0.4),
+        background: bg,
+        color: fg,
+        lineHeight: 1,
+        ...cusStyles,
+      }
+    : {
+        background: bg,
+        color: fg,
+        lineHeight: 1,
+        ...cusStyles,
+      }
+
+  return (
+    <span
+      data-slot="avatar"
+      data-variant={resolved}
+      data-ow-part="image"
+      className={cn(avatarVariants({ size: isCustomSize ? null : size, shape }), className)}
+      style={customStyle}
+    >
+      {children}
+    </span>
+  )
+}