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

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

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

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

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