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

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

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

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

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

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

@@ -1,37 +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")
-
-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

@@ -1,180 +0,0 @@
-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>
-  )
-}