@orbit-work/ui 0.1.0

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

@@ -0,0 +1,265 @@
+import type { ReactNode } from "react"
+
+/**
+ * BeaconIcons — 信标族图标 · 9 枚
+ *
+ * 规格源：design/ow/components/icons/BeaconIcons/（三件套）＋ ow/assets/icons/*.svg。
+ * 手法唯一：保留 Lucide 原形骨架，只替换一个零件为信标的点（loading 例外＝整枚替换为信标公转）。
+ *
+ * - 24 网格 · 描边 1.75 · 线端 round；20 档直接缩放 24 档 markup；
+ *   16 档用规格卡实测调参版（描边 2.2、点径加大、个别省略最淡尾点）。
+ * - `.dot` 是每枚图标里唯一允许点亮的零件，一枚限一点；静止态整枚 currentColor（R2）。
+ * - 点亮机制 CSS 在 styles/utilities.css（.ow-dot-lit / .ow-dot-pre，色取 var(--ow-accent-dot)）：
+ *   `.ow-dot-lit .dot { fill: var(--ow-accent-dot); opacity: 1 }`（点亮＝位置/状态极，计入荧黄三极配额）
+ *   `.ow-dot-pre .dot { fill: var(--ow-accent-dot); opacity: .4 }`（hover 预亮，手势期豁免不计配额）
+ *   组件通过 `dot` prop 挂类；外部也可在祖先元素挂 .ow-dot-lit / .ow-dot-pre 点亮（如侧栏当前项）。
+ * - 点亮永远是第二编码（R1）：必伴文字标签或形状差异；同一列表内位置极与状态极不得同形。
+ */
+export type BeaconIconName =
+  | "tasks"
+  | "agent"
+  | "history"
+  | "share"
+  | "branch"
+  | "schedule"
+  | "artifact"
+  | "workspace"
+  | "loading"
+
+export interface BeaconIconProps {
+  name: BeaconIconName
+  /** 16 | 20 | 24（16px 档用调参版描边 2.2）；默认 20 */
+  size?: 16 | 20 | 24
+  /** 信标点状态：off=纯 currentColor；pre=预亮 40%（hover 手势期豁免）；
+   *  lit=点亮（位置极：浅=var(--ow-accent-dot) 深黄 / 暗=荧黄）。
+   *  同一列表内位置极与状态极不得同形；无信标点语义的场景一律 off。 */
+  dot?: "off" | "pre" | "lit"
+  /** 无障碍名；装饰性图标省略（渲染 aria-hidden） */
+  label?: string
+  className?: string
+}
+
+interface BeaconGlyph {
+  /** true=描边骨架图标（fill none / stroke currentColor）；false=纯 fill（loading） */
+  stroke: boolean
+  /** 24 网格 markup（24/20 档共用，描边 1.75） */
+  base: ReactNode
+  /** 16px 实测调参版 markup（描边 2.2、点径加大） */
+  small: ReactNode
+}
+
+/* 几何逐像素移植自 BeaconIcons.html 规格卡 / ow/assets/icons/*.svg（24 档）
+ * 与 design/scripts/iconset-extract.md（16px 实测版）。 */
+const GLYPHS: Record<BeaconIconName, BeaconGlyph> = {
+  tasks: {
+    stroke: true,
+    base: (
+      <>
+        <path d="M9 6.5h11M9 12h11M9 17.5h11" />
+        <circle cx="4.2" cy="6.5" r="1.1" fill="currentColor" stroke="none" opacity=".35" />
+        <circle cx="4.2" cy="12" r="1.5" fill="currentColor" stroke="none" opacity=".6" />
+        <circle className="dot" cx="4.2" cy="17.5" r="2" fill="currentColor" stroke="none" />
+      </>
+    ),
+    small: (
+      <>
+        <path d="M9 6.5h11M9 12h11M9 17.5h11" />
+        <circle cx="4.2" cy="6.5" r="1.3" fill="currentColor" stroke="none" opacity=".35" />
+        <circle cx="4.2" cy="12" r="1.7" fill="currentColor" stroke="none" opacity=".6" />
+        <circle className="dot" cx="4.2" cy="17.5" r="2.2" fill="currentColor" stroke="none" />
+      </>
+    ),
+  },
+  agent: {
+    stroke: true,
+    base: (
+      <>
+        <rect x="3.5" y="7.5" width="17" height="12.5" rx="3" />
+        <path d="M12 4.6V7.5" />
+        <circle className="dot" cx="12" cy="3" r="1.9" fill="currentColor" stroke="none" />
+        <circle cx="9" cy="13.5" r="1.1" fill="currentColor" stroke="none" />
+        <circle cx="15" cy="13.5" r="1.1" fill="currentColor" stroke="none" />
+      </>
+    ),
+    small: (
+      <>
+        <rect x="3.5" y="7.5" width="17" height="12.5" rx="3" />
+        <path d="M12 4.8V7.5" />
+        <circle className="dot" cx="12" cy="3" r="2.1" fill="currentColor" stroke="none" />
+        <circle cx="9" cy="13.5" r="1.2" fill="currentColor" stroke="none" />
+        <circle cx="15" cy="13.5" r="1.2" fill="currentColor" stroke="none" />
+      </>
+    ),
+  },
+  history: {
+    stroke: true,
+    base: (
+      <>
+        <path d="M7.4 5.2A8.5 8.5 0 1 1 4 12.9" />
+        <path d="M12 7.5V12l3.2 1.9" />
+        <circle className="dot" cx="3.3" cy="9.6" r="1.5" fill="currentColor" stroke="none" opacity=".62" />
+        <circle cx="5.6" cy="5.7" r="1.15" fill="currentColor" stroke="none" opacity=".38" />
+        <circle cx="9.2" cy="3.1" r=".85" fill="currentColor" stroke="none" opacity=".22" />
+      </>
+    ),
+    /* 16px 档省略最淡的第三点 */
+    small: (
+      <>
+        <path d="M7.4 5.2A8.5 8.5 0 1 1 4 12.9" />
+        <path d="M12 7.5V12l3.2 1.9" />
+        <circle className="dot" cx="3.3" cy="9.6" r="1.7" fill="currentColor" stroke="none" opacity=".62" />
+        <circle cx="5.6" cy="5.7" r="1.3" fill="currentColor" stroke="none" opacity=".38" />
+      </>
+    ),
+  },
+  share: {
+    stroke: true,
+    base: (
+      <>
+        <path d="M8.3 10.8 15.7 6.9M8.3 13.2l7.4 3.9" />
+        <circle className="dot" cx="6" cy="12" r="3.1" fill="currentColor" stroke="none" />
+        <circle cx="18" cy="5.6" r="2.2" fill="currentColor" stroke="none" opacity=".5" />
+        <circle cx="18" cy="18.4" r="2.2" fill="currentColor" stroke="none" opacity=".5" />
+      </>
+    ),
+    small: (
+      <>
+        <path d="M8.3 10.8 15.7 6.9M8.3 13.2l7.4 3.9" />
+        <circle className="dot" cx="6" cy="12" r="3.3" fill="currentColor" stroke="none" />
+        <circle cx="18" cy="5.6" r="2.4" fill="currentColor" stroke="none" opacity=".5" />
+        <circle cx="18" cy="18.4" r="2.4" fill="currentColor" stroke="none" opacity=".5" />
+      </>
+    ),
+  },
+  branch: {
+    stroke: true,
+    base: (
+      <>
+        <path d="M6 15.4V4" />
+        <path d="M18 8.6a9 9 0 0 1-9 9" />
+        <circle className="dot" cx="6" cy="18" r="2.9" fill="currentColor" stroke="none" />
+        <circle cx="18" cy="6" r="2.4" />
+      </>
+    ),
+    small: (
+      <>
+        <path d="M6 15.4V4" />
+        <path d="M18 8.6a9 9 0 0 1-9 9" />
+        <circle className="dot" cx="6" cy="18" r="3.1" fill="currentColor" stroke="none" />
+        <circle cx="18" cy="6" r="2.5" />
+      </>
+    ),
+  },
+  schedule: {
+    stroke: true,
+    base: (
+      <>
+        <path d="M9.5 2.8h5" />
+        <circle cx="12" cy="14" r="7.6" />
+        <path d="M12 14 14.9 11.1" />
+        <circle className="dot" cx="15.4" cy="10.6" r="1.9" fill="currentColor" stroke="none" />
+      </>
+    ),
+    small: (
+      <>
+        <path d="M9.5 2.8h5" />
+        <circle cx="12" cy="14" r="7.6" />
+        <path d="M12 14 14.9 11.1" />
+        <circle className="dot" cx="15.4" cy="10.6" r="2.1" fill="currentColor" stroke="none" />
+      </>
+    ),
+  },
+  artifact: {
+    stroke: true,
+    base: (
+      <>
+        <path d="M14 3.5H7a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5z" />
+        <path d="M14 3.5v5h5" />
+        <circle cx="9" cy="15.5" r="1" fill="currentColor" stroke="none" opacity=".35" />
+        <circle cx="12" cy="15.5" r="1.35" fill="currentColor" stroke="none" opacity=".6" />
+        <circle className="dot" cx="15.2" cy="15.5" r="1.8" fill="currentColor" stroke="none" />
+      </>
+    ),
+    small: (
+      <>
+        <path d="M14 3.5H7a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5z" />
+        <path d="M14 3.5v5h5" />
+        <circle cx="9" cy="15.5" r="1.2" fill="currentColor" stroke="none" opacity=".35" />
+        <circle cx="12" cy="15.5" r="1.5" fill="currentColor" stroke="none" opacity=".6" />
+        <circle className="dot" cx="15.2" cy="15.5" r="2" fill="currentColor" stroke="none" />
+      </>
+    ),
+  },
+  workspace: {
+    stroke: true,
+    base: (
+      <>
+        <rect x="3" y="4" width="18" height="16" rx="2" />
+        <path d="M14.5 4v16" />
+        <circle className="dot" cx="17.75" cy="8.2" r="1.5" fill="currentColor" stroke="none" />
+      </>
+    ),
+    small: (
+      <>
+        <rect x="3" y="4" width="18" height="16" rx="2" />
+        <path d="M14.5 4v16" />
+        <circle className="dot" cx="17.75" cy="8.4" r="1.8" fill="currentColor" stroke="none" />
+      </>
+    ),
+  },
+  /* 唯一整枚替换＝信标公转；纯 fill 无描边。卫星 .dot 默认 currentColor（R2），
+   * 产品内出现即运行态：由调用方传 dot="lit"（状态极，计入配额，必伴文字双编码）。 */
+  loading: {
+    stroke: false,
+    base: (
+      <>
+        <circle cx="12" cy="12" r="3.2" fill="currentColor" />
+        <circle className="dot" cx="20" cy="8" r="3.4" fill="currentColor" />
+        <circle cx="15.6" cy="3.9" r="1.6" fill="currentColor" opacity=".45" />
+        <circle cx="9.8" cy="3.3" r="1.2" fill="currentColor" opacity=".28" />
+      </>
+    ),
+    /* 16px 档只留中心＋卫星两点，尾迹省略 */
+    small: (
+      <>
+        <circle cx="12" cy="12" r="3.6" fill="currentColor" />
+        <circle className="dot" cx="20" cy="8" r="3.8" fill="currentColor" />
+      </>
+    ),
+  },
+}
+
+export const BEACON_ICON_NAMES = Object.keys(GLYPHS) as BeaconIconName[]
+
+/** 信标族图标（9 枚）。点亮态类名挂在 svg 根上，CSS 见 styles/utilities.css。 */
+export function BeaconIcon({ name, size = 20, dot = "off", label, className }: BeaconIconProps) {
+  const glyph = GLYPHS[name]
+  const small = size === 16
+  const classes = ["ow-beacon-ic", dot === "lit" ? "ow-dot-lit" : dot === "pre" ? "ow-dot-pre" : "", className ?? ""]
+    .filter(Boolean)
+    .join(" ")
+  const strokeAttrs = glyph.stroke
+    ? ({
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: small ? 2.2 : 1.75,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+      } as const)
+    : undefined
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      className={classes}
+      aria-hidden={label ? undefined : true}
+      aria-label={label}
+      role={label ? "img" : undefined}
+      {...strokeAttrs}
+    >
+      {small ? glyph.small : glyph.base}
+    </svg>
+  )
+}

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

@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { BeaconSpinner } from "./index"
+
+const meta = {
+  title: "Composite/BeaconSpinner",
+  component: BeaconSpinner,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof BeaconSpinner>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    size: 32,
+  },
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
+      <BeaconSpinner size={64} />
+      <BeaconSpinner size={32} />
+      <BeaconSpinner size={20} />
+      <BeaconSpinner size={16} />
+    </div>
+  ),
+}
+
+/** spinning=false：静止收笔姿态——停在 +24°，整体落为 trail 单色，不占荧黄极。 */
+export const Static: Story = {
+  render: () => (
+    <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
+      <BeaconSpinner size={64} spinning={false} />
+      <BeaconSpinner size={32} spinning={false} />
+      <BeaconSpinner size={32} spinning={false} trail="var(--ow-text-3)" />
+      <BeaconSpinner size={16} spinning={false} />
+    </div>
+  ),
+}
+
+/** 切换 spinning 观察收笔：转完当前圈 → 120ms var(--ow-ease-beacon) 落到 +24°。 */
+export const SpinningToggle: Story = {
+  render: function SpinningToggle() {
+    const [spinning, setSpinning] = useState(true)
+    return (
+      <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
+        <BeaconSpinner size={48} spinning={spinning} />
+        <button type="button" onClick={() => setSpinning((s) => !s)}>
+          {spinning ? "停止（收笔）" : "继续公转"}
+        </button>
+      </div>
+    )
+  },
+}
+
+/** <20px 小转子描边默认 currentColor，随所在文字取色。 */
+export const RingFollowsText: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+      <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--ow-text)" }}>
+        <BeaconSpinner size={14} /> 正文色文字里的小转子
+      </span>
+      <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--ow-text-3)" }}>
+        <BeaconSpinner size={14} /> 次要文字里的小转子
+      </span>
+      <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--ow-error)" }}>
+        <BeaconSpinner size={14} /> 语义色文字里的小转子
+      </span>
+    </div>
+  ),
+}
+
+export const OnDarkStage: Story = {
+  render: () => (
+    <div
+      style={{
+        background: "var(--ow-navy)",
+        borderRadius: 12,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 24,
+        padding: 24,
+      }}
+    >
+      <BeaconSpinner size={60} trail="var(--ow-white)" />
+      <BeaconSpinner size={42} trail="var(--ow-white)" />
+      <BeaconSpinner size={42} trail="var(--ow-white)" spinning={false} />
+    </div>
+  ),
+}
+
+export const OnSurface: Story = {
+  render: () => (
+    <div
+      style={{
+        background: "var(--ow-surface)",
+        border: "1px solid var(--ow-border)",
+        borderRadius: 12,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 24,
+        padding: 24,
+      }}
+    >
+      <BeaconSpinner size={60} />
+      <BeaconSpinner size={42} />
+      <BeaconSpinner size={38} />
+    </div>
+  ),
+}
+
+export const SlowDuration: Story = {
+  args: {
+    size: 48,
+    duration: 3,
+  },
+}
+
+export const PageLoading: Story = {
+  render: () => (
+    <div
+      style={{
+        minHeight: 240,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 16,
+        background: "var(--ow-bg)",
+        borderRadius: 12,
+      }}
+    >
+      <BeaconSpinner size={64} />
+      <span style={{ color: "var(--ow-text-2)", fontSize: 14 }}>系统初始化中…</span>
+    </div>
+  ),
+}

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

@@ -0,0 +1,185 @@
+"use client"
+
+import { type CSSProperties, useEffect, useState } from "react"
+
+export type BeaconSpinnerProps = {
+  /** 边长 px；≥20 渲染完整信标，<20 渲染小转子环；默认 32 */
+  size?: number
+  /** 尾迹/中心色；默认 var(--ow-text)（随主题）。<20px 小转子默认 currentColor（随所在文字） */
+  trail?: string
+  /** 卫星色；默认 var(--ow-beacon)（浅=深黄/暗=荧黄）。仅 spinning 时着色，静止收笔落为 trail 单色不占极 */
+  satellite?: string
+  /** 旋转周期秒数；默认走 var(--ow-dur-spin)=1.6s（完整信标）/ var(--ow-dur-spin-fast)=0.9s（转子环） */
+  duration?: number
+  /** true=公转（linear infinite）；false=转完当前圈停在 +24° 的静止收笔姿态。默认 true */
+  spinning?: boolean
+  /** 可访问性标签，覆盖默认「加载中」 */
+  "aria-label"?: string
+  /** 额外的 CSS 类名 */
+  className?: string
+  /** 额外的内联样式 */
+  style?: CSSProperties
+}
+
+/** 旋转相位：spin=公转中；finishing=已请求停止，转完当前圈；settle=0→+24° 收笔；rest=静止 +24°。 */
+type SpinPhase = "spin" | "finishing" | "settle" | "rest"
+
+function useSpinPhase(spinning: boolean) {
+  const [phase, setPhase] = useState<SpinPhase>(spinning ? "spin" : "rest")
+  useEffect(() => {
+    if (spinning) {
+      setPhase("spin")
+    } else {
+      // 停止时不立即定格：转完当前圈（animationiteration），再以 120ms 收笔到 +24°
+      setPhase((p) => (p === "spin" ? "finishing" : p))
+    }
+  }, [spinning])
+  const onAnimationIteration = () => setPhase((p) => (p === "finishing" ? "settle" : p))
+  const onAnimationEnd = () => setPhase((p) => (p === "settle" ? "rest" : p))
+  return { phase, onAnimationIteration, onAnimationEnd }
+}
+
+function spinAnimation(phase: SpinPhase, spinDuration: string): string | undefined {
+  if (phase === "spin" || phase === "finishing") return `ow-spin ${spinDuration} linear infinite`
+  if (phase === "settle") return "ow-spin-settle var(--ow-dur-1, 120ms) var(--ow-ease-beacon)"
+  return undefined // rest：无动画，落在基线 transform +24°
+}
+
+/**
+ * BeaconSpinner — Orbitwork 品牌加载指示器（DS 2.0）
+ *
+ * 规格（ow/components/brand/BeaconSpinner + ow/guidelines/motion-loading）:
+ * - ≥20px：中心实点 r8.2 恒定不转 + 尾迹四点 + 卫星 r10.4，绕 48,48 公转 1.6s linear
+ * - <20px：1.5px 描边圆环 + 90° 缺口，0.9s linear，描边默认 currentColor 随所在文字
+ * - spinning=false：转完当前圈停在 +24° 静止收笔姿态，整体落为 trail 单色（不占荧黄极）
+ * - prefers-reduced-motion：旋转停，直接呈现 +24° 静止态
+ */
+export function BeaconSpinner({
+  size = 32,
+  trail,
+  satellite = "var(--ow-beacon)",
+  duration,
+  spinning = true,
+  "aria-label": ariaLabel,
+  className = "",
+  style,
+}: BeaconSpinnerProps) {
+  const isFullBeacon = size >= 20
+  const spinDuration = duration
+    ? `${duration}s`
+    : isFullBeacon
+      ? "var(--ow-dur-spin, 1.6s)"
+      : "var(--ow-dur-spin-fast, 0.9s)"
+  const { phase, onAnimationIteration, onAnimationEnd } = useSpinPhase(spinning)
+
+  const wrapperStyle: CSSProperties = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    ...style,
+  }
+  const label = ariaLabel ?? (spinning ? "加载中" : "已停止")
+
+  return (
+    <div className={`ow-beacon-spinner ow-motion ${className}`} style={wrapperStyle} role="status" aria-live="polite">
+      {isFullBeacon ? (
+        <FullBeaconSpinner
+          size={size}
+          trail={trail ?? "var(--ow-text)"}
+          satellite={spinning ? satellite : (trail ?? "var(--ow-text)")}
+          animation={spinAnimation(phase, spinDuration)}
+          onAnimationIteration={onAnimationIteration}
+          onAnimationEnd={onAnimationEnd}
+          aria-label={label}
+        />
+      ) : (
+        <RingSpinner
+          size={size}
+          trail={trail ?? "currentColor"}
+          animation={spinAnimation(phase, spinDuration)}
+          onAnimationIteration={onAnimationIteration}
+          onAnimationEnd={onAnimationEnd}
+          aria-label={label}
+        />
+      )}
+    </div>
+  )
+}
+
+type SpinVisualProps = {
+  size: number
+  trail: string
+  animation: string | undefined
+  onAnimationIteration: () => void
+  onAnimationEnd: () => void
+  "aria-label": string
+}
+
+function FullBeaconSpinner({
+  size,
+  trail,
+  satellite,
+  animation,
+  onAnimationIteration,
+  onAnimationEnd,
+  "aria-label": ariaLabel,
+}: SpinVisualProps & { satellite: string }) {
+  // 尾迹数据：照 ow/components/brand/BeaconSpinner.jsx，逐像素
+  const trails = [
+    [60.2, 20.6, 6.7, 0.6],
+    [41.76, 18.66, 5.5, 0.45],
+    [25.71, 27.93, 4.3, 0.3],
+    [18.16, 44.86, 3.3, 0.2],
+  ] as const
+
+  return (
+    <svg width={size} height={size} viewBox="0 0 96 96" role="img" aria-label={ariaLabel} style={{ display: "block" }}>
+      <circle cx="48" cy="48" r="8.2" fill={trail} />
+      <g
+        style={{
+          transformOrigin: "48px 48px",
+          transform: "rotate(24deg)", // 静止收笔基线：动画运行时被覆盖，停止/reduced-motion 时呈现 +24°
+          animation,
+        }}
+        onAnimationIteration={onAnimationIteration}
+        onAnimationEnd={onAnimationEnd}
+      >
+        {trails.map(([cx, cy, r, o], i) => (
+          <circle key={i} cx={cx} cy={cy} r={r} fill={trail} opacity={o} />
+        ))}
+        <circle cx="75.4" cy="35.8" r="10.4" fill={satellite} />
+      </g>
+    </svg>
+  )
+}
+
+function RingSpinner({
+  size,
+  trail,
+  animation,
+  onAnimationIteration,
+  onAnimationEnd,
+  "aria-label": ariaLabel,
+}: SpinVisualProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" role="img" aria-label={ariaLabel} style={{ display: "block" }}>
+      <circle
+        cx="8"
+        cy="8"
+        r="6.6"
+        fill="none"
+        stroke={trail}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeDasharray="31.1 10.4"
+        style={{
+          transformOrigin: "8px 8px",
+          transform: "rotate(24deg)",
+          animation,
+        }}
+        onAnimationIteration={onAnimationIteration}
+        onAnimationEnd={onAnimationEnd}
+      />
+    </svg>
+  )
+}