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

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

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

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

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

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

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

@@ -1,23 +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")
-
-// 文件头声明「描边统一 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)
-})