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

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

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

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

@@ -1,70 +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("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

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