@orbit-work/ui 0.1.0

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

@@ -0,0 +1,78 @@
+"use client"
+
+import { Button } from "../Button"
+import { InlineMessage } from "../InlineMessage"
+
+export type ErrorCardProps = {
+  /** 错误类别标签，如 "Invalid Request" */
+  title?: string
+  /** 错误描述信息 */
+  message?: string
+  /** 重试按钮文案，默认 "重试" */
+  retryLabel?: string
+  /** 重试回调，不传时不显示按钮 */
+  onRetry?: () => void
+  /** 重试按钮禁用 */
+  retryDisabled?: boolean
+  /** 技术详情原始文本（JSON 或纯文本），为空时不显示折叠区 */
+  detail?: string
+  /** 展开详情文案，默认 "显示详情" */
+  showDetailLabel?: string
+  /** 收起详情文案，默认 "隐藏详情" */
+  hideDetailLabel?: string
+  /** 右上角版本号，如 "v1.2.3" */
+  version?: string
+  /** 自定义 className */
+  className?: string
+}
+
+/**
+ * @deprecated DS2 已将 ErrorCard 并入 InlineMessage（variant="error"），
+ * 请直接使用 `InlineMessage`；此件仅作薄兼容导出，映射旧 props 后委托新件渲染。
+ *
+ * W5 终扫：重试钮原走 variant="unstyled" 手搓（px-3 py-1 无高度声明、text-xs，
+ * 只有 rest/disabled 没有 hover/active/focus-visible）。改 Button variant="secondary"
+ * size="sm"——高度落 28（§7 控件高表）、圆角 --ow-radius-action、focus 三件套由
+ * ow-focus-ring 承担；只把边/字/hover 底重着到 error tint 族 token，不再手搓状态。
+ */
+export function ErrorCard({
+  title = "请求错误",
+  message = "请求被服务端拒绝。",
+  retryLabel = "重试",
+  onRetry,
+  retryDisabled,
+  detail,
+  showDetailLabel = "显示详情",
+  hideDetailLabel = "隐藏详情",
+  version,
+  className,
+}: ErrorCardProps) {
+  return (
+    <InlineMessage
+      variant="error"
+      title={title}
+      meta={version}
+      detail={detail}
+      showDetailLabel={showDetailLabel}
+      hideDetailLabel={hideDetailLabel}
+      className={className}
+      action={
+        onRetry ? (
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            onClick={onRetry}
+            disabled={retryDisabled}
+            data-ow-part="retry"
+            className="bg-transparent border-[color:var(--ow-error-tint-border)] text-[color:var(--ow-error-on-tint)] hover:bg-[var(--ow-error-tint-hover)] hover:text-[color:var(--ow-error-on-tint)] active:bg-[var(--ow-error-tint-hover)]"
+          >
+            {retryLabel}
+          </Button>
+        ) : undefined
+      }
+    >
+      {message}
+    </InlineMessage>
+  )
+}

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

@@ -0,0 +1,208 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Search } from "../../composite/Icons"
+import { Keycap } from "../Keycap"
+import { Field } from "./index"
+
+const meta = {
+  title: "Primitives/Field",
+  component: Field,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Field>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const label = (text: string) => (
+  <div style={{ fontSize: "var(--ow-fs-ui, 13px)", color: "var(--ow-text-3)", marginBottom: 6 }}>{text}</div>
+)
+
+export const Default: Story = {
+  args: {
+    placeholder: "输入项目名称",
+  },
+}
+
+export const WithValue: Story = {
+  args: {
+    defaultValue: "数据看板改版",
+  },
+}
+
+export const Large: Story = {
+  args: {
+    size: "lg",
+    placeholder: "大表单档，高 40",
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    value: "只读内容，不可编辑",
+    disabled: true,
+  },
+}
+
+export const DisabledEmpty: Story = {
+  args: {
+    placeholder: "暂不可用",
+    disabled: true,
+  },
+}
+
+export const WithPrefixIcon: Story = {
+  args: {
+    placeholder: "搜索会话",
+    prefix: <Search style={{ width: 16, height: 16 }} />,
+  },
+}
+
+export const WithUnitSuffix: Story = {
+  args: {
+    placeholder: "0",
+    defaultValue: "2048",
+    suffix: (
+      <span
+        style={{
+          fontFamily: "var(--ow-font-mono)",
+          fontVariantNumeric: "tabular-nums",
+          fontSize: 12,
+          color: "var(--ow-text-3)",
+        }}
+      >
+        tokens
+      </span>
+    ),
+  },
+}
+
+export const WithKeycapSuffix: Story = {
+  args: {
+    placeholder: "全局搜索",
+    prefix: <Search style={{ width: 16, height: 16 }} />,
+    suffix: <Keycap>⌘K</Keycap>,
+  },
+}
+
+export const ErrorState: Story = {
+  args: {
+    defaultValue: "orbit://workspace",
+    error: "这个地址连不上，检查一下拼写或网络。",
+  },
+}
+
+export const ErrorWithMonoDetail: Story = {
+  args: {
+    defaultValue: "https://api.orbitwork.dev/v3",
+    error: "服务暂时不可用，稍后再试一次。",
+    errorDetail: "GET /v3/health → 503 upstream_unavailable (trace: 9f2a-77c1, 2026-08-31 14:22:05)",
+  },
+}
+
+export const InvalidBorderOnly: Story = {
+  name: "Invalid（仅边框，文案外置）",
+  args: {
+    defaultValue: "重复的项目名",
+    invalid: true,
+    "aria-label": "项目名称",
+  },
+}
+
+export const Multiline: Story = {
+  args: {
+    multiline: true,
+    placeholder: "描述你遇到的问题、期望行为或需求场景",
+    rows: 4,
+  },
+}
+
+export const MultilineDisabled: Story = {
+  args: {
+    multiline: true,
+    value: "这段内容不可编辑。\n多行禁用态同样逐 token 换色，不整体降透明度。",
+    disabled: true,
+  },
+}
+
+export const MultilineError: Story = {
+  args: {
+    multiline: true,
+    defaultValue: "{ invalid json",
+    error: "内容不是合法的 JSON，检查括号是否配对。",
+    errorDetail: "SyntaxError: Unexpected end of JSON input at position 14",
+  },
+}
+
+export const BareControl: Story = {
+  name: "Bare（standalone=false，嵌入自带表面）",
+  render: () => (
+    <div
+      style={{
+        maxWidth: 480,
+        border: "1px solid var(--ow-border)",
+        borderRadius: "var(--ow-radius-card, 12px)",
+        background: "var(--ow-surface)",
+        padding: 12,
+      }}
+    >
+      <Field multiline standalone={false} placeholder="裸控件形态：外层容器（如 Composer）自带表面与边框" rows={2} />
+    </div>
+  ),
+}
+
+export const ThreeBorderStates: Story = {
+  name: "三态边框（rest / hover / focus）",
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 420 }}>
+      <div>
+        {label("rest — border")}
+        <Field placeholder="默认态" />
+      </div>
+      <div>
+        {label("hover — border-strong（悬停体验）")}
+        <Field placeholder="悬停我" />
+      </div>
+      <div>
+        {label("focus — focus-ring 边框 + 2px 环 2px 缝（点进来体验）")}
+        <Field placeholder="聚焦我" />
+      </div>
+      <div>
+        {label("disabled — 逐 token")}
+        <Field placeholder="禁用" disabled />
+      </div>
+    </div>
+  ),
+}
+
+export const AllVariants: Story = {
+  name: "全形态一览",
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 460 }}>
+      <Field placeholder="单行 · 32" />
+      <Field size="lg" placeholder="大表单 · 40" />
+      <Field prefix={<Search style={{ width: 16, height: 16 }} />} placeholder="前缀图标" />
+      <Field
+        defaultValue="12.5"
+        suffix={
+          <span
+            style={{
+              fontFamily: "var(--ow-font-mono)",
+              fontVariantNumeric: "tabular-nums",
+              fontSize: 12,
+              color: "var(--ow-text-3)",
+            }}
+          >
+            MB
+          </span>
+        }
+        placeholder="后缀单位"
+      />
+      <Field prefix={<Search style={{ width: 16, height: 16 }} />} suffix={<Keycap>⌘K</Keycap>} placeholder="双插槽" />
+      <Field value="禁用内容" disabled />
+      <Field defaultValue="错误值" error="这里有点问题，改一下再提交。" errorDetail="E_VALIDATION field=name len=0" />
+      <Field multiline rows={3} placeholder="多行形态" />
+    </div>
+  ),
+}

package/src/components/primitives/Field/FieldSource.test.mjs

@@ -0,0 +1,70 @@
+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("field shell owns the three-state border on --ow-surface-2 ground（R3：focus 只换边框色）", () => {
+  // rest(border) → hover(border-hover) → focus(border-focus)：三态全由 1px 边框色承担。
+  // R3（2026-09-04，Terry 意见 1「焦点环 too much」）：输入类 focus 不再画任何外环——
+  // 既没有 --ow-focus-shadow 的 2px 环＋缝，也没有 R2 那版 outline 三件套（FOCUS_RING_WITHIN）。
+  // 键盘 focus-visible 环只属按钮与链接（.ow-focus-ring），不在本件。
+  assert.match(source, /border-\[color:var\(--ow-input-border\)\]/)
+  assert.match(source, /\[&:hover:not\(:focus-within\)\]:border-\[color:var\(--ow-input-border-hover\)\]/)
+  assert.match(source, /focus-within:border-\[color:var\(--ow-input-border-focus\)\]/)
+  assert.doesNotMatch(source, /focus-within:\[box-shadow:/)
+  assert.doesNotMatch(source, /focus-within:outline/)
+  assert.doesNotMatch(source, /const FOCUS_RING_WITHIN/)
+  assert.match(source, /bg-\[var\(--ow-input-bg\)\]/)
+  assert.match(source, /placeholder:text-\[color:var\(--ow-placeholder\)\]/)
+})
+
+test("field metrics follow section 7: 32/40 heights, radius-control corners", () => {
+  assert.match(source, /multiline: false, size: "md", className: "h-8 px-2\.5"/)
+  assert.match(source, /multiline: false, size: "lg", className: "h-10 px-3"/)
+  assert.match(source, /\[border-radius:var\(--ow-radius-control\)\]/)
+  assert.match(source, /\[border-radius:var\(--ow-radius-card\)\]/)
+})
+
+test("disabled state is token-by-token, never a blanket opacity", () => {
+  assert.match(source, /bg-\[var\(--ow-input-disabled-bg\)\]/)
+  assert.match(source, /border-\[color:var\(--ow-disabled-border\)\]/)
+  assert.match(source, /text-\[color:var\(--ow-input-disabled-text\)\]/)
+  assert.doesNotMatch(source, /opacity-\d/)
+  // 统一透明度禁用 token 不得出现（拼接避免触发 ds2 guard 对字面量的扫描）
+  assert.doesNotMatch(source, new RegExp(`--ow-opacity${"-"}disabled`))
+})
+
+test("error state pairs the error border with plain-language line and mono detail", () => {
+  assert.match(source, /error\?: string/)
+  assert.match(source, /errorDetail\?: string/)
+  assert.match(source, /border-\[color:var\(--ow-error\)\]/)
+  assert.match(source, /text-\[color:var\(--ow-error\)\]/)
+  // W5：mono 直引 DS token（原裸 `font-mono` 依赖 Tailwind @theme 映射），字号走 --ow-fs-caption。
+  assert.match(
+    source,
+    /font-\[family-name:var\(--ow-font-mono\)\] \[font-variant-numeric:tabular-nums\][^"]*line-clamp-2/,
+  )
+  assert.match(source, /text-ow-fs-caption[^"]*line-clamp-2/)
+  assert.doesNotMatch(source, /"font-mono |\bfont-mono /)
+  assert.match(source, /aria-invalid/)
+  assert.match(source, /aria-describedby/)
+})
+
+test("prefix/suffix are slots and multiline renders a textarea", () => {
+  assert.match(source, /prefix\?: ReactNode/)
+  assert.match(source, /suffix\?: ReactNode/)
+  assert.match(source, /data-ow-part="prefix"/)
+  assert.match(source, /data-ow-part="suffix"/)
+  assert.match(source, /<textarea/)
+})
+
+test("motion uses the beacon ease at the 120ms tier; no scale or translate on hover", () => {
+  assert.match(source, /duration-\[var\(--ow-dur-1\)\] ease-\[var\(--ow-ease-beacon\)\]/)
+  assert.doesNotMatch(source, /hover:(scale|translate)/)
+})
+
+test("field is a neutral primitive: no beacon or raw accent colors", () => {
+  assert.doesNotMatch(source, /--ow-beacon|--ow-yellow|--ow-accent-dot/)
+  assert.doesNotMatch(source, /#[0-9a-fA-F]{3,8}\b/)
+})

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

@@ -0,0 +1,297 @@
+import { type VariantProps, cva } from "class-variance-authority"
+import {
+  type ChangeEvent,
+  type InputHTMLAttributes,
+  type ReactNode,
+  type TextareaHTMLAttributes,
+  forwardRef,
+  useId,
+} from "react"
+import { cn } from "../../../lib/utils"
+
+/**
+ * Field — DS 2.0 字段壳（蓝图批次① 合并件：Input / TextField / Textarea / SearchInput）。
+ *
+ * 壳承担三态边框 rest(border) → hover(border-strong) → focus(focus-ring 2px 环＋2px 缝)，
+ * 底 = --ow-surface-2（经 --ow-input-bg），高 32（size="lg" 大表单 40），圆角 8，
+ * placeholder = --ow-placeholder，disabled 逐 token；前后缀为插槽（图标/单位/清除钮/Keycap）；
+ * multiline 形态渲染 textarea；error 态 = error 边框＋人话一句＋mono 详情 ≤2 行。
+ */
+export type FieldProps = {
+  value?: string
+  defaultValue?: string
+  placeholder?: string
+  disabled?: boolean
+  /** 值语义 onChange（收 string，非原生事件） */
+  onChange?: (value: string) => void
+  /** 多行形态（textarea） */
+  multiline?: boolean
+  /** 渲染带边框的独立字段壳；false = 裸控件（嵌入自带表面的容器，如 Composer） */
+  standalone?: boolean
+  /** HTML input type（仅单行有效） */
+  type?: string
+  /** 控件高度档：md=32（默认）· lg=40（大表单） */
+  size?: "md" | "lg"
+  /**
+   * 表面档（§5 递进）：`base`（默认）坐在地面/卡面上，底 --ow-input-bg；
+   * `pop` 坐在弹层面上（menu / popover / dialog 内），底与边各升一档，
+   * 免得暗档 surface-2 与 popover-bg 同色把井抹平。
+   */
+  tier?: "base" | "pop"
+  /** 前缀插槽：图标 / 单位符号 */
+  prefix?: ReactNode
+  /** 后缀插槽：单位 / 清除钮 / 快捷键 Keycap */
+  suffix?: ReactNode
+  /** 错误一句话（人话）。非空时字段进入 error 态（error 边框 + aria-invalid + 文案行） */
+  error?: string
+  /** 错误技术详情，mono 展示，最多两行截断 */
+  errorDetail?: string
+  /** 仅 error 边框、不渲染文案（错误文案由外层自渲染时用；传 aria-invalid 同效） */
+  invalid?: boolean
+  className?: string
+} & Omit<
+  InputHTMLAttributes<HTMLInputElement> & TextareaHTMLAttributes<HTMLTextAreaElement>,
+  "value" | "defaultValue" | "placeholder" | "disabled" | "onChange" | "className" | "type" | "size" | "prefix"
+>
+
+/**
+ * 字段壳：三态边框 + focus 环挂在 focus-within 上，随内部控件聚焦点亮。
+ *
+ * R2 两处收口：
+ * ① **表面档**（`tier`）——底恒取 --ow-input-bg(=--ow-surface-2) 时，放进弹层面（Menu 的
+ *    searchable 搜索框）暗档 --ow-surface-2 与 --ow-popover-bg 几乎同色（相差不到一级），
+ *    井整个消失。§5 要求坐在弹层上的表面按 -pop 档递进，故补 `tier="pop"`：
+ *    底 --ow-input-bg-pop、边 --ow-input-border-pop。
+ * ② **焦点语法**——R2 曾把 focus-within 的 box-shadow 缝改成 outline 三件套；R3（Terry
+ *    意见 1「焦点环 too much」）连 outline 也撤：输入类 focus 只剩 1px 边框变
+ *    --ow-input-border-focus，不画任何外环。键盘 focus-visible 环只属按钮与链接。
+ */
+/* R3（2026-09-04，Terry 意见 1）：输入类 focus 只变边框色，不再画 2px 外环——
+   原 FOCUS_RING_WITHIN（outline 三件套挂 focus-within）整枚撤；键盘环只属按钮与链接。 */
+
+const shellVariants = cva(
+  [
+    "flex w-full min-w-0 box-border border",
+    "text-[color:var(--ow-input-text)]",
+    "transition-[border-color,background-color] duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+  ].join(" "),
+  {
+    variants: {
+      tier: {
+        base: "",
+        pop: "",
+      },
+      disabled: {
+        true: "text-[color:var(--ow-input-disabled-text)] cursor-not-allowed",
+        false: [
+          "[&:hover:not(:focus-within)]:border-[color:var(--ow-input-border-hover)]",
+          "focus-within:border-[color:var(--ow-input-border-focus)]",
+        ].join(" "),
+      },
+      error: {
+        true: "",
+        false: "",
+      },
+      multiline: {
+        true: "items-start [border-radius:var(--ow-radius-card)]",
+        false: "items-center [border-radius:var(--ow-radius-control)]",
+      },
+      size: {
+        md: "gap-1.5",
+        lg: "gap-2",
+      },
+    },
+    compoundVariants: [
+      // 底与边色按 tier×disabled 互斥发一份，避免同一属性挂两条同优先级的任意值工具类。
+      {
+        disabled: true,
+        className: "bg-[var(--ow-input-disabled-bg)] border-[color:var(--ow-disabled-border)]",
+      },
+      {
+        disabled: false,
+        tier: "base",
+        className: "bg-[var(--ow-input-bg)] border-[color:var(--ow-input-border)]",
+      },
+      {
+        disabled: false,
+        tier: "pop",
+        className: "bg-[var(--ow-input-bg-pop)] border-[color:var(--ow-input-border-pop)]",
+      },
+      { multiline: false, size: "md", className: "h-8 px-2.5" },
+      { multiline: false, size: "lg", className: "h-10 px-3" },
+      { multiline: true, size: "md", className: "py-2 px-2.5" },
+      { multiline: true, size: "lg", className: "py-2.5 px-3" },
+      {
+        error: true,
+        disabled: false,
+        className:
+          "border-[color:var(--ow-error)] [&:hover:not(:focus-within)]:border-[color:var(--ow-error)] focus-within:border-[color:var(--ow-error)]",
+      },
+    ],
+    defaultVariants: { tier: "base", disabled: false, error: false, multiline: false, size: "md" },
+  },
+)
+
+/** 内部控件：透明裸控件，视觉全部由壳承担 */
+const controlVariants = cva(
+  [
+    "w-full min-w-0 flex-1 bg-transparent border-0 outline-none",
+    "font-normal text-ow-fs-ui text-[color:var(--ow-input-text)]",
+    "placeholder:text-[color:var(--ow-placeholder)]",
+    "disabled:cursor-not-allowed disabled:text-[color:var(--ow-input-disabled-text)]",
+  ].join(" "),
+  {
+    variants: {
+      multiline: {
+        true: "resize-y min-h-20 leading-normal",
+        false: "h-full",
+      },
+    },
+    defaultVariants: { multiline: false },
+  },
+)
+
+/**
+ * 前后缀壳。`[&_svg]:w-4 [&_svg]:h-4` 是必需的：Icons 族的裸 svg 只有 viewBox 没有
+ * width/height，在没有确定尺寸的 flex 壳里会解析成 0×0（地址栏的站点图标就这么消失过）。
+ * 尺寸由壳一次性给足，所有 prefix/suffix 调用方不必各补一遍。
+ */
+const affixClasses =
+  "inline-flex items-center justify-center shrink-0 [&_svg]:w-4 [&_svg]:h-4 text-[color:var(--ow-text-3)]"
+
+export const Field = forwardRef<HTMLInputElement | HTMLTextAreaElement, FieldProps>(function Field(
+  {
+    value,
+    defaultValue,
+    placeholder,
+    disabled,
+    onChange,
+    multiline = false,
+    standalone = true,
+    type = "text",
+    size = "md",
+    tier = "base",
+    prefix,
+    suffix,
+    error,
+    errorDetail,
+    invalid,
+    className,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    ...rest
+  },
+  ref,
+) {
+  const errorId = useId()
+  const hasErrorText = Boolean(error)
+  const hasError = hasErrorText || Boolean(invalid) || ariaInvalid === true || ariaInvalid === "true"
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    onChange?.(e.target.value)
+  }
+
+  const sharedControlProps = {
+    value,
+    defaultValue,
+    placeholder,
+    disabled,
+    onChange: handleChange,
+    "aria-invalid": (ariaInvalid ?? (hasError || undefined)) as FieldProps["aria-invalid"],
+    "aria-describedby": cn(ariaDescribedBy, hasErrorText ? errorId : undefined) || undefined,
+  }
+
+  const hasAffix = Boolean(prefix || suffix)
+
+  /* 裸控件形态：无壳，嵌入自带表面的容器（Composer 等）。前后缀存在时仍走壳。 */
+  if (!standalone && !hasAffix) {
+    if (multiline) {
+      return (
+        <textarea
+          ref={ref as React.Ref<HTMLTextAreaElement>}
+          data-slot="field"
+          data-variant="textarea"
+          data-ow-part="control"
+          data-ow-role="input"
+          className={cn(controlVariants({ multiline: true }), className)}
+          {...sharedControlProps}
+          {...rest}
+        />
+      )
+    }
+    return (
+      <input
+        ref={ref as React.Ref<HTMLInputElement>}
+        data-slot="field"
+        data-variant="text"
+        data-ow-part="control"
+        data-ow-role="input"
+        type={type}
+        className={cn(controlVariants({ multiline: false }), className)}
+        {...sharedControlProps}
+        {...rest}
+      />
+    )
+  }
+
+  const control = multiline ? (
+    <textarea
+      ref={ref as React.Ref<HTMLTextAreaElement>}
+      data-slot="field-control"
+      data-variant="textarea"
+      className={controlVariants({ multiline: true })}
+      {...sharedControlProps}
+      {...rest}
+    />
+  ) : (
+    <input
+      ref={ref as React.Ref<HTMLInputElement>}
+      data-slot="field-control"
+      data-variant="text"
+      type={type}
+      className={controlVariants({ multiline: false })}
+      {...sharedControlProps}
+      {...rest}
+    />
+  )
+
+  return (
+    <div
+      data-slot="field"
+      data-ow-part="control"
+      data-ow-role="input"
+      data-ow-state={cn(disabled && "disabled", hasError && "error") || undefined}
+      className={cn("flex flex-col gap-1 w-full min-w-0", className)}
+    >
+      <div
+        data-ow-part="shell"
+        data-tier={tier}
+        className={shellVariants({ tier, disabled: !!disabled, error: hasError, multiline, size })}
+      >
+        {prefix && (
+          <span className={cn(affixClasses, multiline && "mt-0.5")} data-ow-part="prefix">
+            {prefix}
+          </span>
+        )}
+        {control}
+        {suffix && (
+          <span className={cn(affixClasses, multiline && "mt-0.5")} data-ow-part="suffix">
+            {suffix}
+          </span>
+        )}
+      </div>
+      {hasErrorText && (
+        <div data-ow-part="error" id={errorId} className="flex flex-col gap-0.5">
+          <span className="text-ow-fs-ui leading-[1.4] text-[color:var(--ow-error)]">{error}</span>
+          {errorDetail && (
+            <span className="font-[family-name:var(--ow-font-mono)] [font-variant-numeric:tabular-nums] text-ow-fs-caption leading-[1.5] text-[color:var(--ow-text-3)] line-clamp-2 break-all">
+              {errorDetail}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  )
+})
+
+export type FieldShellVariants = VariantProps<typeof shellVariants>