@orbit-work/ui 0.1.0

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

@@ -0,0 +1,219 @@
+"use client"
+
+import { type ReactNode, useId } from "react"
+import { cn } from "../../../lib/utils"
+import { Button, Field } from "../../primitives"
+import { Close, ErrorCircle, Plus } from "../Icons"
+
+/**
+ * FormField — DS 2.0 表单字段块（蓝图批次② 合并件：McpField / McpKeyValueField）。
+ *
+ * 结构：label（＋可选说明后缀）→ 可选说明行 → 控件槽 → error 行。
+ * 语法沿用 Field 原语的错误块（一句人话 error 色 ＋ mono 详情 ≤2 行）与
+ * InlineMessage 的 error 图标，字段壳本身仍由 Field/Select/Switch 等控件承担，
+ * FormField 不重复画边框（§5 贴地不叠面）。
+ * 状态（§6）：default / disabled 逐 token / error（error 色标题不变，靠 error 行＋
+ * 控件 aria-invalid 双编码）/ required（`*` ＋ aria-required 由控件承担）。
+ * R3：中性件，禁信标荧黄。
+ */
+export interface FormFieldProps {
+  /** 字段名，fs-ui 500 */
+  label: ReactNode
+  /** label 行尾的轻提示，如「可选」「可选 · 键值对」，text-3 400 */
+  hint?: ReactNode
+  /** 说明行，fs-body-sm text-2 */
+  description?: ReactNode
+  /** 关联控件 id；缺省时 FormField 整体是 label 元素，点击标题即落到内部控件 */
+  htmlFor?: string
+  /** 控件槽里不止一个控件（Tabs / SegmentedControl / 键值对行）时置 true：
+   *  根改用 div + role="group"，标题不再绑定到某一个控件 */
+  asGroup?: boolean
+  required?: boolean
+  /** 错误一句话（人话）。非空时渲染 error 行 */
+  error?: string
+  /** 错误技术详情，mono ＋ tabular-nums，最多两行 */
+  errorDetail?: string
+  disabled?: boolean
+  /** 控件槽 */
+  children: ReactNode
+  className?: string
+}
+
+export function FormField({
+  label,
+  hint,
+  description,
+  htmlFor,
+  asGroup = false,
+  required = false,
+  error,
+  errorDetail,
+  disabled = false,
+  children,
+  className,
+}: FormFieldProps) {
+  const errorId = useId()
+  const labelId = useId()
+  const hasError = Boolean(error)
+  // 单控件且无显式 htmlFor 时整体是 label，点击标题即落到内部控件（旧 .mcp-field 的行为）；
+  // 多控件槽（asGroup）或已给 htmlFor 时根退回 div，避免 label 误绑到第一个控件。
+  const Root = htmlFor || asGroup ? "div" : "label"
+
+  return (
+    <Root
+      data-slot="form-field"
+      data-ow-part="surface"
+      data-ow-state={cn(disabled && "disabled", hasError && "error") || undefined}
+      role={asGroup ? "group" : undefined}
+      aria-labelledby={asGroup ? labelId : undefined}
+      className={cn("flex flex-col gap-2 w-full min-w-0", className)}
+    >
+      <span
+        data-ow-part="label"
+        id={asGroup ? labelId : undefined}
+        className={cn(
+          "flex items-center gap-1.5 text-ow-fs-ui font-medium leading-[1.3]",
+          disabled ? "text-[color:var(--ow-disabled-text)]" : "text-[color:var(--ow-text)]",
+        )}
+      >
+        {htmlFor ? <label htmlFor={htmlFor}>{label}</label> : label}
+        {required && (
+          <span aria-hidden="true" className="text-[color:var(--ow-error)]">
+            *
+          </span>
+        )}
+        {hint !== undefined && hint !== null && (
+          <span data-ow-part="hint" className="font-normal text-[color:var(--ow-text-3)]">
+            {hint}
+          </span>
+        )}
+      </span>
+      {description !== undefined && description !== null && (
+        <span
+          data-ow-part="description"
+          className={cn(
+            "text-ow-fs-body-sm font-normal leading-[1.45]",
+            disabled ? "text-[color:var(--ow-disabled-text)]" : "text-[color:var(--ow-text-2)]",
+          )}
+        >
+          {description}
+        </span>
+      )}
+      <span data-ow-part="control" className="flex flex-col gap-1 w-full min-w-0">
+        {children}
+      </span>
+      {hasError && (
+        <span data-ow-part="error" id={errorId} role="alert" className="flex flex-col gap-0.5">
+          <span className="flex items-start gap-1.5 text-ow-fs-ui leading-[1.4] text-[color:var(--ow-error)]">
+            <ErrorCircle className="w-3.5 h-3.5 mt-0.5 shrink-0" aria-hidden="true" />
+            <span className="min-w-0">{error}</span>
+          </span>
+          {errorDetail && (
+            <span className="font-[family-name:var(--ow-font-mono)] tabular-nums text-ow-fs-body-sm leading-[1.5] text-[color:var(--ow-text-3)] line-clamp-2 break-all">
+              {errorDetail}
+            </span>
+          )}
+        </span>
+      )}
+    </Root>
+  )
+}
+
+/** 键值都是读数（§7 读数一律 mono＋tabular-nums），把 mono 打到 Field 壳内的控件上 */
+const MONO_CONTROL = "[&_input]:font-[family-name:var(--ow-font-mono)] [&_input]:tabular-nums"
+
+export interface KeyValuePair {
+  key: string
+  value: string
+  /** 值已在服务端脱敏：输入框显示占位符，留空即保留原值 */
+  masked?: boolean
+}
+
+export interface KeyValueFieldProps extends Omit<FormFieldProps, "children" | "htmlFor" | "asGroup"> {
+  values: KeyValuePair[]
+  onChange: (values: KeyValuePair[]) => void
+  keyPlaceholder?: string
+  valuePlaceholder?: string
+  /** masked 行的值占位符 */
+  maskedPlaceholder?: string
+  addLabel?: string
+  removeAriaLabel?: string
+}
+
+/**
+ * KeyValueField — FormField 的键值对配方（旧 McpKeyValueField 的合并去处）。
+ *
+ * 每行 = key Field ＋ mono `=` ＋ value Field ＋ 移除钮；末行是虚线描边的添加钮。
+ * 键值都是读数语境，走 mono（§7）。移除钮是中性 ghost，hover 才进 error 色（双编码
+ * 靠图标形），不占荧黄极。
+ */
+export function KeyValueField({
+  values,
+  onChange,
+  keyPlaceholder = "KEY",
+  valuePlaceholder = "value",
+  maskedPlaceholder = "••••••（输入新值可替换）",
+  addLabel = "添加一项",
+  removeAriaLabel = "移除这一项",
+  disabled = false,
+  ...fieldProps
+}: KeyValueFieldProps) {
+  const rows = values.length ? values : [{ key: "", value: "" }]
+
+  return (
+    <FormField {...fieldProps} asGroup disabled={disabled}>
+      <div data-ow-part="rows" className="flex flex-col gap-2 w-full min-w-0">
+        {rows.map((row, index) => (
+          <div
+            // 键可为空且允许重复，行没有稳定 id，只能用下标
+            key={index}
+            data-ow-part="row"
+            className="flex items-center gap-2 w-full min-w-0"
+          >
+            <Field
+              className={cn("basis-[38%] shrink-0", MONO_CONTROL)}
+              value={row.key}
+              disabled={disabled}
+              placeholder={keyPlaceholder}
+              aria-label={`${keyPlaceholder} ${index + 1}`}
+              onChange={(next) =>
+                onChange(rows.map((r, i) => (i === index ? { key: next, value: r.masked ? "" : r.value } : r)))
+              }
+            />
+            <span aria-hidden="true" className="font-[family-name:var(--ow-font-mono)] text-[color:var(--ow-text-3)]">
+              =
+            </span>
+            <Field
+              className={cn("flex-1 min-w-0", MONO_CONTROL)}
+              value={row.masked ? "" : row.value}
+              disabled={disabled}
+              placeholder={row.masked ? maskedPlaceholder : valuePlaceholder}
+              aria-label={`${valuePlaceholder} ${index + 1}`}
+              onChange={(next) =>
+                onChange(rows.map((r, i) => (i === index ? { ...r, value: next, masked: false } : r)))
+              }
+            />
+            <Button
+              variant="ghost"
+              size="sm"
+              icon={<Close />}
+              disabled={disabled}
+              aria-label={removeAriaLabel}
+              onClick={() => onChange(rows.filter((_, i) => i !== index))}
+            />
+          </div>
+        ))}
+        <Button
+          variant="secondary"
+          size="sm"
+          disabled={disabled}
+          className="self-start"
+          icon={<Plus />}
+          onClick={() => onChange([...rows, { key: "", value: "" }])}
+        >
+          {addLabel}
+        </Button>
+      </div>
+    </FormField>
+  )
+}

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

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { HomeBackdrop } from "./index"
+
+/**
+ * 主屏背景构造线纹（原型模板 818–832 · 裁决 18）。
+ *
+ * 只描边、只取 `--ow-border`、`opacity .5`；绝对定位在内容面右上（`top -24% / right -20% / width 74%`），
+ * 溢出由内容面的 `overflow: hidden` 裁掉——画面上只剩右上角几段弧。装饰件：`aria-hidden` ＋ 不吃点击。
+ */
+const meta = {
+  title: "Composite/HomeBackdrop",
+  component: HomeBackdrop,
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof HomeBackdrop>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 真实位置：套一层内容面（`--ow-surface` ＋ relative ＋ overflow hidden），看到的就是主屏上那几段弧。 */
+export const OnContentSurface: Story = {
+  render: (args) => (
+    <div
+      style={{
+        position: "relative",
+        overflow: "hidden",
+        width: "100%",
+        height: "520px",
+        background: "var(--ow-surface)",
+      }}
+    >
+      <HomeBackdrop {...args} />
+    </div>
+  ),
+}
+
+/** 全貌（取证用）：不裁切、居中放大，七个圆——轨道 r30 ＋ 信标五点尾迹 ＋ 卫星——一次看全。 */
+export const FullGeometry: Story = {
+  render: () => (
+    <div
+      style={{
+        position: "relative",
+        overflow: "hidden",
+        display: "grid",
+        placeItems: "center",
+        width: "100%",
+        height: "520px",
+        background: "var(--ow-surface)",
+      }}
+    >
+      {/* 取证档：只覆盖定位与透明度，几何与描边一律不动 */}
+      <HomeBackdrop style={{ position: "static", width: 420, opacity: 1 }} />
+    </div>
+  ),
+}

package/src/components/composite/HomeBackdrop/HomeBackdropSource.test.mjs

@@ -0,0 +1,50 @@
+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 brand = await readFile(new URL("../OrbitworkLogo/index.tsx", import.meta.url), "utf8")
+
+/** 从源码里抽出 [a, b, c] 形式的三元组（忽略 TRAIL 的第四位 opacity）。 */
+function triples(text) {
+  return [...text.matchAll(/\[\s*([\d.]+),\s*([\d.]+),\s*([\d.]+)(?:,\s*[\d.]+)?\s*\]/g)].map((m) =>
+    m.slice(1, 4).join(","),
+  )
+}
+
+test("底纹几何与品牌标同源：轨道 r30 ＋ TRAIL 五点 ＋ 卫星，逐值锁死（§12）", () => {
+  const backdrop = triples(source.slice(source.indexOf("const CIRCLES")))
+  assert.equal(backdrop.length, 7)
+  // 轨道环（构造框 r30）在原型模板 821 行，标志本体不画它
+  assert.ok(backdrop.includes("48,48,30"))
+  // TRAIL 五点：直接从 composite/OrbitworkLogo 的锁定表取，任一侧漂了就红
+  const trail = triples(brand.slice(brand.indexOf("const TRAIL"), brand.indexOf("VARIANT_COLORS")))
+  assert.equal(trail.length, 5)
+  for (const point of trail) assert.ok(backdrop.includes(point), `底纹缺 TRAIL 点 ${point}`)
+  // 卫星位：与 OrbitworkMark 结尾那枚 <circle cx="75.4" cy="35.8" r="10.4"> 同值
+  assert.match(brand, /cx="75\.4" cy="35\.8" r="10\.4"/)
+  assert.ok(backdrop.includes("75.4,35.8,10.4"))
+})
+
+test("只描边、只取 --ow-border、stroke-width 0.2（零彩、零填充）", () => {
+  assert.match(source, /fill="none"/)
+  assert.match(source, /stroke="var\(--ow-border\)"/)
+  assert.match(source, /strokeWidth="0\.2"/)
+  // 荧黄只归三极：背景不是极位，不许出现品牌黄或任何裸色值
+  assert.doesNotMatch(source, /#[0-9a-fA-F]{3,8}/)
+  assert.doesNotMatch(source, /--ow-(beacon|yellow|accent|primary)/)
+})
+
+test("纯装饰层：aria-hidden ＋ 不吃点击 ＋ 不进无障碍树", () => {
+  assert.match(source, /aria-hidden="true"/)
+  assert.match(source, /focusable="false"/)
+  assert.match(source, /pointer-events-none/)
+  assert.doesNotMatch(source, /role="img"/)
+  assert.doesNotMatch(source, /aria-label/)
+})
+
+test("定位照原型 818–832：绝对定位 top -24% / right -20% / width 74% / 1:1 / opacity .5", () => {
+  assert.match(source, /absolute top-\[-24%\] right-\[-20%\] w-\[74%\] aspect-square/)
+  assert.match(source, /opacity-50/)
+  assert.match(source, /viewBox="0 0 96 96"/)
+})

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

@@ -0,0 +1,53 @@
+import type { SVGProps } from "react"
+import { cn } from "../../../lib/utils"
+
+/**
+ * HomeBackdrop — 主屏背景构造线纹（原型模板 818–832 · 裁决 18）
+ *
+ * 底纹**就是标志的构造几何本身**：96 构造框里的轨道环 r30、信标五点尾迹、荧黄卫星位，
+ * 全部只描边、只取 `--ow-border`、`stroke-width 0.2`（74% 宽下实效 ≈1.85px）、`opacity .5`。
+ * 它替掉的是老品牌那几圈星轨插画，不是新画的装饰。
+ *
+ * 立面与归属（COMPONENT-RULES §4/§5/§7）：
+ * - **纯装饰**：`aria-hidden` + `focusable="false"` + `pointer-events-none`，读屏与命中测试都读不到它。
+ * - **零彩**：只有 `--ow-border` 一支描边色，不碰信标荧黄——荧黄只归三极，背景不是其中之一。
+ * - **贴地**：无填充、无阴影、无渐变；分层靠这条 1px 级的线，不靠投影。
+ * - **只在主屏出**：绝对定位挂在内容面（`.owcenter`，`position: relative`）右上，
+ *   `top -24% / right -20% / width 74%`，溢出部分由内容面的 `overflow: hidden` 裁掉，
+ *   画面上只剩右上角几段弧。会话屏、插件中心等一律不挂——它不是全局水印。
+ *
+ * 几何是 §12 品牌锁定值：与 `composite/OrbitworkLogo` 的 `TRAIL` ＋ 卫星同源，
+ * 逐值锁死（`HomeBackdropSource.test.mjs` 直接拿两份源码比对），不得自行改动。
+ */
+
+/** 构造几何锁定值 [cx, cy, r]：轨道 · 心 · 尾迹四点 · 卫星（同 OrbitworkMark 的 TRAIL ＋ 卫星）。 */
+const CIRCLES: ReadonlyArray<readonly [number, number, number]> = [
+  [48, 48, 30],
+  [48, 48, 8.2],
+  [60.2, 20.6, 6.7],
+  [41.76, 18.66, 5.5],
+  [25.71, 27.93, 4.3],
+  [18.16, 44.86, 3.3],
+  [75.4, 35.8, 10.4],
+]
+
+export type HomeBackdropProps = Omit<SVGProps<SVGSVGElement>, "viewBox" | "children">
+
+export function HomeBackdrop({ className, ...rest }: HomeBackdropProps) {
+  return (
+    <svg
+      data-slot="home-backdrop"
+      viewBox="0 0 96 96"
+      aria-hidden="true"
+      focusable="false"
+      className={cn("absolute top-[-24%] right-[-20%] w-[74%] aspect-square pointer-events-none opacity-50", className)}
+      {...rest}
+    >
+      <g fill="none" stroke="var(--ow-border)" strokeWidth="0.2">
+        {CIRCLES.map(([cx, cy, r]) => (
+          <circle key={`${cx}-${cy}-${r}`} cx={cx} cy={cy} r={r} />
+        ))}
+      </g>
+    </svg>
+  )
+}

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

@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import type * as React from "react"
+import * as Icons from "./index"
+
+const meta = {
+  title: "Composite/Icons",
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const iconNames = Object.keys(Icons).filter(
+  (name) => name !== "Icon" && typeof Icons[name as keyof typeof Icons] === "function",
+)
+
+export const AllIcons: Story = {
+  render: () => (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
+        gap: 24,
+        padding: 20,
+      }}
+    >
+      {iconNames.map((name) => {
+        const IconComponent = Icons[name as keyof typeof Icons] as React.ComponentType<Icons.IconProps>
+        return (
+          <div
+            key={name}
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 8,
+            }}
+          >
+            <IconComponent style={{ width: 24, height: 24, color: "var(--ow-text)" }} />
+            <span style={{ fontSize: 11, color: "var(--ow-text-3)", textAlign: "center" }}>{name}</span>
+          </div>
+        )
+      })}
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ display: "flex", alignItems: "center", gap: 24, padding: 20 }}>
+      <Icons.Sparkles style={{ width: 16, height: 16 }} />
+      <Icons.Sparkles style={{ width: 24, height: 24 }} />
+      <Icons.Sparkles style={{ width: 32, height: 32 }} />
+      <Icons.Sparkles style={{ width: 48, height: 48 }} />
+    </div>
+  ),
+}
+
+export const Colors: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 24, padding: 20 }}>
+      <Icons.Check style={{ width: 24, height: 24, color: "var(--ow-success)" }} />
+      <Icons.ErrorCircle style={{ width: 24, height: 24, color: "var(--ow-error)" }} />
+      <Icons.WarningTriangle style={{ width: 24, height: 24, color: "var(--ow-warning)" }} />
+      <Icons.InfoCircle style={{ width: 24, height: 24, color: "var(--ow-info)" }} />
+    </div>
+  ),
+}
+
+export const CommonIcons: Story = {
+  render: () => (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
+        gap: 20,
+        padding: 20,
+      }}
+    >
+      {[
+        "Plus",
+        "Edit",
+        "Trash",
+        "Search",
+        "Close",
+        "Check",
+        "More",
+        "Settings",
+        "Share",
+        "Copy",
+        "Download",
+        "Refresh",
+      ].map((name) => {
+        const IconComponent = Icons[name as keyof typeof Icons] as React.ComponentType<Icons.IconProps>
+        return (
+          <div key={name} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
+            <IconComponent style={{ width: 24, height: 24, color: "var(--ow-text)" }} />
+            <span style={{ fontSize: 11, color: "var(--ow-text-3)" }}>{name}</span>
+          </div>
+        )
+      })}
+    </div>
+  ),
+}
+
+export const StatusIcons: Story = {
+  render: () => (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
+        gap: 20,
+        padding: 20,
+      }}
+    >
+      {["SuccessCircle", "ErrorCircle", "WarningTriangle", "InfoCircle", "Loader"].map((name) => {
+        const IconComponent = Icons[name as keyof typeof Icons] as React.ComponentType<Icons.IconProps>
+        return (
+          <div key={name} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
+            <IconComponent style={{ width: 24, height: 24, color: "var(--ow-text)" }} />
+            <span style={{ fontSize: 11, color: "var(--ow-text-3)" }}>{name}</span>
+          </div>
+        )
+      })}
+    </div>
+  ),
+}
+
+export const NavigationIcons: Story = {
+  render: () => (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
+        gap: 20,
+        padding: 20,
+      }}
+    >
+      {["ChevUp", "ChevDown", "ChevLeft", "ChevRight", "Arrow", "ArrowDown"].map((name) => {
+        const IconComponent = Icons[name as keyof typeof Icons] as React.ComponentType<Icons.IconProps>
+        return (
+          <div key={name} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
+            <IconComponent style={{ width: 24, height: 24, color: "var(--ow-text)" }} />
+            <span style={{ fontSize: 11, color: "var(--ow-text-3)" }}>{name}</span>
+          </div>
+        )
+      })}
+    </div>
+  ),
+}

package/src/components/composite/Icons/IconsSource.test.mjs

@@ -0,0 +1,23 @@
+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")
+
+// 文件头声明「描边统一 1.75（DS 2.0）」，但守卫层没有规则盯图标描边。
+// W-R2 复审时全文件分布是 1.75×123 / 2×1（Check）/ 2.5×2（Arrow）/ 0.8×1（Keyboard 空格条），
+// Check 又是全库选中态的形编码，配重不齐会顺着选中态带出去。此测试把口径钉死。
+test("图标族描边只有 1.75 一档（文件头口径）", () => {
+  const widths = [...source.matchAll(/strokeWidth="([\d.]+)"/g)].map((m) => m[1])
+  assert.ok(widths.length > 100, "图标族描边声明数异常，检查是否被整体重写")
+  assert.deepEqual([...new Set(widths)], ["1.75"])
+})
+
+// 第三方产品集成图标（DingTalk/Feishu/WeCom）是 1024 视框 + 官方品牌色，
+// 明文排除在 Figma 05 Icons 目录之外——不参与 24 视框/1.75 描边口径，但也不得再扩编。
+test("24 视框之外只允许第三方集成图标那三枚 1024 视框", () => {
+  const boxes = [...source.matchAll(/viewBox="0 0 ([\d ]+)"/g)].map((m) => m[1])
+  const outliers = boxes.filter((b) => b !== "24 24")
+  assert.deepEqual([...new Set(outliers)], ["1024 1024"])
+  assert.equal(outliers.length, 3)
+})