@orbit-work/ui 0.1.0

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

@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Button } from "../Button"
+import { InlineMessage } from "./index"
+
+const meta = {
+  title: "Primitives/InlineMessage",
+  component: InlineMessage,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "DS2 行内消息原语（合并旧 ErrorCard/Message）：info/success/warning/error 四态 tint 族表面，图标＋人话一句＋可选 mono 详情（折叠）＋可选动作＋可关闭。中性件，禁信标荧黄。",
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof InlineMessage>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Info: Story = {
+  args: { variant: "info", children: "工作区已切换到只读模式，编辑会在同步完成后恢复。" },
+}
+
+export const Success: Story = {
+  args: { variant: "success", children: "站点已发布，最新版本正在全网生效。" },
+}
+
+export const Warning: Story = {
+  args: { variant: "warning", children: "剩余额度不足 10%，本月底前请及时续订。" },
+}
+
+export const ErrorVariant: Story = {
+  name: "Error",
+  args: { variant: "error", children: "连接服务器失败，请检查网络后重试。" },
+}
+
+export const WithTitle: Story = {
+  args: {
+    variant: "error",
+    title: "Invalid Request",
+    children: "请求被服务端拒绝，参数校验未通过。",
+  },
+}
+
+export const WithMeta: Story = {
+  args: {
+    variant: "error",
+    title: "连接错误",
+    meta: "v2.4.1",
+    children: "后端流式响应中断。",
+  },
+}
+
+export const WithDetail: Story = {
+  args: {
+    variant: "error",
+    title: "请求错误",
+    children: "模型服务返回了无效响应。",
+    detail: '{"code":502,"message":"upstream timeout","request_id":"req_8f3a21"}',
+  },
+}
+
+export const WithAction: Story = {
+  args: {
+    variant: "warning",
+    children: "本地缓存与云端不一致。",
+    action: (
+      <Button size="sm" variant="secondary">
+        重新同步
+      </Button>
+    ),
+  },
+}
+
+export const Closable: Story = {
+  args: {
+    variant: "info",
+    children: "新版模型目录已上线，可在设置中切换。",
+    closable: true,
+  },
+}
+
+export const NoIcon: Story = {
+  args: { variant: "info", icon: null, children: "纯文本提示，不带图标。" },
+}
+
+export const AllVariants: Story = {
+  args: { children: "占位" },
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 560 }}>
+      <InlineMessage variant="info">工作区已切换到只读模式。</InlineMessage>
+      <InlineMessage variant="success">站点已发布。</InlineMessage>
+      <InlineMessage variant="warning">剩余额度不足 10%。</InlineMessage>
+      <InlineMessage variant="error" title="连接错误" meta="v2.4.1" detail='{"code":502}' closable>
+        连接服务器失败，请检查网络后重试。
+      </InlineMessage>
+    </div>
+  ),
+}
+
+/**
+ * R2 T5 ⑥：描边档。整屏只该有一处重量时用它——登录失败屏的横幅走这一档，
+ * 实底留给「重新登录」主钮。边色/字色仍随 variant。
+ */
+export const OutlineError: Story = {
+  args: {
+    variant: "error",
+    tone: "outline",
+    title: "登录失败",
+    children: "这次没登上，重新发起登录再试一次。",
+    action: (
+      <Button size="sm" variant="secondary">
+        重新登录
+      </Button>
+    ),
+  },
+}
+
+export const AllTones: Story = {
+  args: { children: "占位" },
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 560 }}>
+      <InlineMessage variant="error" title="tint（缺省）">
+        实心 tint 底：行内错误的常规档。
+      </InlineMessage>
+      <InlineMessage variant="error" tone="outline" title="outline">
+        透明底只留边与字：整屏另有实底行动钮时用。
+      </InlineMessage>
+      <InlineMessage variant="warning" tone="outline">
+        四个 variant 都能走 outline，色仍由 variant 决定。
+      </InlineMessage>
+    </div>
+  ),
+}

package/src/components/primitives/InlineMessage/InlineMessageSource.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 errorCard = await readFile(new URL("../ErrorCard/index.tsx", import.meta.url), "utf8")
+/** 注释里点名旧写法作文档，禁令只查代码。 */
+const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+const errorCardCode = errorCard.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+
+// W5 终扫：详情折叠箭头原写死 duration-150 且无缓动。§9 时长词表只有 120/200/320ms，
+// 唯一缓动 --ow-ease-beacon；同件的 components.css 段用的正是 120ms ease-beacon。
+test("detail chevron motion is tokenised: dur-1 + ease-beacon, no literal ms", () => {
+  assert.match(code, /transition-transform duration-\[var\(--ow-dur-1\)\] ease-\[var\(--ow-ease-beacon\)\]/)
+  assert.doesNotMatch(code, /duration-\d/)
+})
+
+// W5 终扫：重试钮原走 variant="unstyled" 手搓（px-3 py-1 无高度声明、text-xs、
+// 只有 rest/disabled，缺 hover/active/focus-visible）。Button 的 unstyled 是逃逸口，
+// 外观接近正规变体时不该用。
+test("ErrorCard retry hands shape and state coverage back to the Button primitive", () => {
+  assert.match(errorCardCode, /variant="secondary"/)
+  assert.match(errorCardCode, /size="sm"/)
+  assert.doesNotMatch(errorCardCode, /variant="unstyled"/)
+  // 手搓的度量与状态一律不再出现
+  assert.doesNotMatch(errorCardCode, /px-3 py-1/)
+  assert.doesNotMatch(errorCardCode, /\btext-xs\b/)
+  assert.doesNotMatch(errorCardCode, /\[border-radius:var\(--ow-radius-action\)\]/)
+  // 只留 error tint 族重着色，逐 token
+  for (const token of ["--ow-error-tint-border", "--ow-error-on-tint", "--ow-error-tint-hover"]) {
+    assert.ok(errorCardCode.includes(token), token)
+  }
+})
+
+/**
+ * R2 T5 ⑥：立面档 tone（tint 缺省 / outline 描边）。outline 只抽掉底色，
+ * 边色与字色仍由四个 variant 给——不得另开一套色。
+ * 同批 L2-2-2：原语不再写死 max-width:560，宽度交给容器。
+ */
+test("tone 档：缺省 tint，outline 只把底抽成 transparent", async () => {
+  const styles = await readFile(new URL("../../../../styles/components.css", import.meta.url), "utf8")
+  assert.match(code, /tone = "tint",/)
+  assert.match(code, /data-tone=\{tone\}/)
+  assert.match(styles, /\[data-slot="inline-message"\]\[data-tone="outline"\] \{\s*background: transparent;\s*\}/)
+  // outline 档不得自带边色/字色（那是 variant 的活）
+  assert.doesNotMatch(styles, /\[data-tone="outline"\] \{[^}]*border-color/)
+  assert.doesNotMatch(styles, /\[data-tone="outline"\] \{[^}]*color: var\(--ow-/)
+  // L2-2-2：原语宽度上限撤除
+  assert.doesNotMatch(styles, /\[data-slot="inline-message"\] \{[^}]*max-width: 560px/)
+})

package/src/components/primitives/InlineMessage/index.tsx

@@ -0,0 +1,141 @@
+"use client"
+
+import { type ReactNode, useCallback, useState } from "react"
+import { cn } from "../../../lib/utils"
+import { ChevDown, Close, ErrorCircle, InfoCircle, SuccessCircle, WarningTriangle } from "../../composite/Icons"
+
+export type InlineMessageVariant = "info" | "success" | "warning" | "error"
+
+/**
+ * 立面档：tint（缺省，实心 tint 底）/ outline（透明底，只留 1px tint 边与 on-tint 字）。
+ * outline 用于「整屏只该有一处重量」的场合——登录失败屏的横幅走它，
+ * 把该屏唯一的行动极留给主钮（R2 T5 ⑥）。边色/字色仍随 variant 走，不另开一套色。
+ */
+export type InlineMessageTone = "tint" | "outline"
+
+export type InlineMessageProps = {
+  /** 语义四态，决定 tint 族配色与默认图标 */
+  variant?: InlineMessageVariant
+  /** 立面档：tint（缺省）实心 tint 底；outline 透明底只留边与字 */
+  tone?: InlineMessageTone
+  /** 可选短标题（500 字重一行） */
+  title?: ReactNode
+  /** 人话一句：消息正文 */
+  children?: ReactNode
+  /** 覆盖默认图标；传 null 隐藏图标 */
+  icon?: ReactNode | null
+  /** 右上角 mono 元信息（如版本号） */
+  meta?: ReactNode
+  /** 可选 mono 技术详情（JSON 自动 pretty），折叠展示 */
+  detail?: string
+  /** 展开详情文案，默认「显示详情」 */
+  showDetailLabel?: string
+  /** 收起详情文案，默认「隐藏详情」 */
+  hideDetailLabel?: string
+  /** 底部动作区（如重试按钮） */
+  action?: ReactNode
+  /** 显示右上关闭按钮 */
+  closable?: boolean
+  onClose?: () => void
+  className?: string
+}
+
+const defaultIcons: Record<InlineMessageVariant, ReactNode> = {
+  info: <InfoCircle />,
+  success: <SuccessCircle />,
+  warning: <WarningTriangle />,
+  error: <ErrorCircle />,
+}
+
+/**
+ * InlineMessage — DS2 行内消息原语（合并旧 primitives/ErrorCard 与 domain/chat/Message）。
+ *
+ * info/success/warning/error 四态 tint 族表面（--ow-{v}-tint / -tint-border / -on-tint），
+ * 图标＋人话一句＋可选 mono 详情（折叠）＋可选动作区＋可关闭。
+ * 圆角 card 档；关闭/展开为真按钮，focus-visible 2px 环＋2px 缝；
+ * 中性件，禁信标荧黄。样式在 styles/components.css 的 InlineMessage 段。
+ *
+ * W5 终扫：详情箭头原写死 duration-150 且无缓动，§9 时长词表只有 120/200/320ms、
+ * 唯一缓动 ease-beacon——改 --ow-dur-1 + --ow-ease-beacon，与同件 CSS 段一致。
+ */
+export function InlineMessage({
+  variant = "info",
+  tone = "tint",
+  title,
+  children,
+  icon,
+  meta,
+  detail,
+  showDetailLabel = "显示详情",
+  hideDetailLabel = "隐藏详情",
+  action,
+  closable = false,
+  onClose,
+  className,
+}: InlineMessageProps) {
+  const [expanded, setExpanded] = useState(false)
+  const hasDetail = Boolean(detail?.trim())
+  const formattedDetail = hasDetail ? prettyJson(detail!) : ""
+  const toggleDetail = useCallback(() => setExpanded((v) => !v), [])
+
+  return (
+    <div
+      data-slot="inline-message"
+      data-variant={variant}
+      data-tone={tone}
+      data-ow-part="surface"
+      data-ow-role={variant}
+      role={variant === "error" ? "alert" : "status"}
+      className={cn(className)}
+    >
+      <div data-ow-part="row">
+        {icon !== null && (
+          <span data-ow-part="icon" aria-hidden="true">
+            {icon ?? defaultIcons[variant]}
+          </span>
+        )}
+        <div data-ow-part="body">
+          {title && <div data-ow-part="title">{title}</div>}
+          {children && <div data-ow-part="text">{children}</div>}
+          {hasDetail && (
+            <div data-ow-part="detail">
+              <button type="button" data-ow-part="detail-toggle" aria-expanded={expanded} onClick={toggleDetail}>
+                <ChevDown
+                  className={cn(
+                    "transition-transform duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+                    expanded && "rotate-180",
+                  )}
+                  aria-hidden="true"
+                />
+                <span>{expanded ? hideDetailLabel : showDetailLabel}</span>
+              </button>
+              {expanded && (
+                <>
+                  <div data-ow-part="detail-rule" />
+                  <pre data-ow-part="detail-body">{formattedDetail}</pre>
+                </>
+              )}
+            </div>
+          )}
+          {action && <div data-ow-part="action">{action}</div>}
+        </div>
+        {meta && <span data-ow-part="meta">{meta}</span>}
+        {closable && (
+          <button type="button" data-ow-part="close" aria-label="关闭提示" onClick={onClose}>
+            <Close aria-hidden="true" />
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// --- Internal helpers ---
+
+function prettyJson(text: string): string {
+  try {
+    return JSON.stringify(JSON.parse(text), null, 2)
+  } catch {
+    return text
+  }
+}

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

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Input } from "./index"
+
+/**
+ * Input 已废弃：DS 2.0 起并入 Field（Primitives/Field），本导出为薄兼容别名。
+ * 全部形态演示见 Primitives/Field。
+ */
+const meta = {
+  title: "Primitives/Input (deprecated → Field)",
+  component: Input,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: "已废弃。Input 是 Field 的薄兼容导出，API 与 Field 一致；新代码请直接使用 Field。",
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Input>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const CompatAlias: Story = {
+  name: "兼容别名（等同 Field）",
+  args: {
+    placeholder: "Input = Field 的兼容导出",
+  },
+}

package/src/components/primitives/Input/index.tsx

@@ -0,0 +1,12 @@
+import { Field, type FieldProps } from "../Field"
+
+/**
+ * @deprecated DS 2.0 起 Input 并入 Field（primitives/Field）。
+ * 本文件仅为薄兼容导出，API 与 Field 完全一致（FieldProps 为 InputProps 超集：
+ * 新增 size / error / errorDetail）。请迁移到 `import { Field } from "@orbit-work/ui"`。
+ * 计划：批次⑥ 整屏收尾后移除。
+ */
+export const Input = Field
+
+/** @deprecated 使用 FieldProps。 */
+export type InputProps = FieldProps

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

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Keycap, KeycapCombo } from "./index"
+
+const meta = {
+  title: "Primitives/Keycap",
+  component: Keycap,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Keycap>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Single: Story = {
+  args: {
+    children: "Esc",
+  },
+}
+
+export const SingleLetter: Story = {
+  args: {
+    children: "K",
+  },
+}
+
+export const Symbol: Story = {
+  args: {
+    children: "⌘",
+  },
+}
+
+export const Combo: Story = {
+  render: () => <KeycapCombo keys={["Ctrl", "Shift", "P"]} />,
+}
+
+export const ComboMac: Story = {
+  render: () => <KeycapCombo keys={["⌘", "K"]} />,
+}
+
+export const InMenuRow: Story = {
+  render: () => (
+    <div
+      style={{
+        width: 260,
+        background: "var(--ow-popover-bg, var(--ow-surface))",
+        border: "1px solid var(--ow-border)",
+        borderRadius: "var(--ow-radius-menu, 10px)",
+        boxShadow: "var(--ow-shadow-pop)",
+        padding: 4,
+      }}
+    >
+      {[
+        { label: "命令面板", keys: ["Ctrl", "K"] },
+        { label: "新建会话", keys: ["Ctrl", "N"] },
+        { label: "全局搜索", keys: ["Ctrl", "Shift", "F"] },
+      ].map((item) => (
+        <div
+          key={item.label}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 12,
+            height: 32,
+            padding: "0 8px",
+            borderRadius: "var(--ow-radius-sm, 8px)",
+            fontSize: "var(--ow-fs-ui, 13px)",
+            color: "var(--ow-text)",
+          }}
+        >
+          <span>{item.label}</span>
+          <KeycapCombo keys={item.keys} />
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const KeyGallery: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
+      <Keycap>Esc</Keycap>
+      <Keycap>Tab</Keycap>
+      <Keycap>Enter</Keycap>
+      <Keycap>Space</Keycap>
+      <Keycap>↑</Keycap>
+      <Keycap>↓</Keycap>
+      <Keycap>F12</Keycap>
+    </div>
+  ),
+}

package/src/components/primitives/Keycap/KeycapSource.test.mjs

@@ -0,0 +1,30 @@
+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("Keycap locks DS 2.0 shape: radius-key(4), surface-2, 1px border, height 18, mono 11", () => {
+  assert.match(source, /\[border-radius:var\(--ow-radius-key\)\]/)
+  assert.match(source, /bg-\[var\(--ow-surface-2\)\]/)
+  assert.match(source, /border-\[color:var\(--ow-border\)\]/)
+  assert.match(source, /h-\[18px\]/)
+  // R2：11px 在字号表里有名有姓（--ow-fs-mark-md），不再写裸 px。
+  assert.match(source, /text-ow-fs-mark-md/)
+  assert.doesNotMatch(source, /text-\[11px\]/)
+  assert.match(source, /--ow-font-mono/)
+  assert.match(source, /tabular-nums/)
+})
+
+test("Keycap is a neutral display element rendered as <kbd> with no beacon tokens", () => {
+  assert.match(source, /<kbd/)
+  assert.doesNotMatch(source, /--ow-beacon|--ow-accent-dot|--ow-yellow/)
+  // 恒定 token 不越界（拼接避免 guard 把测试文件本身当引用扫红）
+  assert.doesNotMatch(source, new RegExp(`--ow-pa${"per"}`))
+})
+
+test("KeycapCombo joins keys with a + connector in text-3 and exposes an aria-label", () => {
+  assert.match(source, /keys: string\[\]/)
+  assert.match(source, /text-\[color:var\(--ow-text-3\)\]/)
+  assert.match(source, /keys\.join\("\+"\)/)
+})

package/src/components/primitives/Keycap/index.tsx

@@ -0,0 +1,67 @@
+import type { HTMLAttributes, ReactNode } from "react"
+import { cn } from "../../../lib/utils"
+
+/**
+ * Keycap — 键帽（DS 2.0 原语，R3 中性件）
+ *
+ * 规格（ui-shapes 卡）：surface-2 底 + 1px --ow-border + 高 18 + mono 11（走
+ * --ow-fs-mark-md，不再写裸 11px）+ 圆角 --ow-radius-key(4px)；读数 mono + tabular-nums。
+ * 纯展示件，无交互态：18/5/3 三个度量是 ui-shapes 卡为展示件写明的自由值，
+ * 不受 §7 控件高表与 --ow-space-* 约束。
+ */
+export interface KeycapProps extends HTMLAttributes<HTMLElement> {
+  children: ReactNode
+  className?: string
+}
+
+const keycapClass = [
+  "inline-flex items-center justify-center",
+  "h-[18px] min-w-[18px] px-[5px]",
+  "bg-[var(--ow-surface-2)] border border-[color:var(--ow-border)]",
+  "[border-radius:var(--ow-radius-key)]",
+  "font-medium text-ow-fs-mark-md leading-none text-[color:var(--ow-text-2)]",
+  "[font-family:var(--ow-font-mono)] [font-variant-numeric:tabular-nums]",
+  "whitespace-nowrap select-none",
+].join(" ")
+
+export function Keycap({ children, className, ...rest }: KeycapProps) {
+  return (
+    <kbd data-slot="keycap" data-ow-part="key" className={cn(keycapClass, className)} {...rest}>
+      {children}
+    </kbd>
+  )
+}
+
+/**
+ * KeycapCombo — 组合快捷键，键帽间以 + 号连接（text-3 mono，不参与朗读）。
+ */
+export interface KeycapComboProps extends HTMLAttributes<HTMLElement> {
+  /** 按顺序排列的键名，如 ["Ctrl", "Shift", "P"] */
+  keys: string[]
+  className?: string
+}
+
+export function KeycapCombo({ keys, className, "aria-label": ariaLabel, ...rest }: KeycapComboProps) {
+  return (
+    <span
+      data-slot="keycap-combo"
+      className={cn("inline-flex items-center gap-[3px]", className)}
+      aria-label={ariaLabel ?? keys.join("+")}
+      {...rest}
+    >
+      {keys.map((key, i) => (
+        <span key={`${key}-${i}`} className="inline-flex items-center gap-[3px]">
+          {i > 0 && (
+            <span
+              aria-hidden="true"
+              className="text-ow-fs-mark-md leading-none text-[color:var(--ow-text-3)] [font-family:var(--ow-font-mono)]"
+            >
+              +
+            </span>
+          )}
+          <Keycap aria-hidden="true">{key}</Keycap>
+        </span>
+      ))}
+    </span>
+  )
+}