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

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

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

@@ -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 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

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

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

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

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

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

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