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

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

@@ -1,65 +0,0 @@
-import { type VariantProps, cva } from "class-variance-authority"
-import type { ReactNode } from "react"
-import { cn } from "../../../lib/utils"
-
-export type BadgeVariant = "normal" | "pending" | "warning" | "error" | "success"
-
-const badgeVariants = cva(
-  "inline-flex items-center gap-1 whitespace-nowrap border font-medium text-ow-fs-caption leading-none px-1.5 py-0.5 [border-radius:var(--ow-radius-tag)]",
-  {
-    variants: {
-      variant: {
-        normal: "bg-ow-badge-normal-bg text-ow-badge-normal-fg border-ow-badge-normal-border",
-        pending: "bg-ow-badge-pending-bg text-ow-badge-pending-fg border-ow-badge-pending-border",
-        warning: "bg-ow-badge-warning-bg text-ow-badge-warning-fg border-ow-badge-warning-border",
-        error: "bg-ow-badge-error-bg text-ow-badge-error-fg border-ow-badge-error-border",
-        success: "bg-ow-badge-success-bg text-ow-badge-success-fg border-ow-badge-success-border",
-      },
-    },
-    defaultVariants: {
-      variant: "normal",
-    },
-  },
-)
-
-interface BadgeProps extends VariantProps<typeof badgeVariants> {
-  children: ReactNode
-  /**
-   * 状态点形态：点色=功能色（随变体前景 currentColor）。
-   * R1 双编码——点永远伴随 children 文字，禁独立纯色点。
-   */
-  dot?: boolean
-  /** 计数读数：mono + tabular-nums（§7 读数口径）。 */
-  count?: ReactNode
-  className?: string
-}
-
-/**
- * Badge — 直角 6 状态徽标。纯分类/筛选标签用 `Tag`；
- * 带状态点/计数且可删除的胶囊用 `Chip`（primitives/Chip）。
- */
-export function Badge({ variant = "normal", dot = false, count, children, className }: BadgeProps) {
-  return (
-    <span
-      data-slot="badge"
-      data-variant={variant}
-      data-ow-part="label"
-      data-ow-role={variant === "normal" ? "neutral" : variant}
-      className={cn(badgeVariants({ variant }), className)}
-    >
-      {dot && (
-        <span
-          data-ow-part="dot"
-          className="w-1.5 h-1.5 shrink-0 bg-current [border-radius:var(--ow-radius-pill)]"
-          aria-hidden="true"
-        />
-      )}
-      {children}
-      {count != null && (
-        <span data-ow-part="count" className="shrink-0 font-[family-name:var(--ow-font-mono)] tabular-nums">
-          {count}
-        </span>
-      )}
-    </span>
-  )
-}

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

@@ -1,287 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { Download, Plus, Search, Settings, Trash, Close as X } from "../../composite/Icons"
-import { Button } from "./index"
-
-const meta = {
-  title: "Primitives/Button",
-  component: Button,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Button>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Primary: Story = {
-  args: {
-    variant: "primary",
-    children: "Primary Button",
-  },
-}
-
-export const Secondary: Story = {
-  args: {
-    variant: "secondary",
-    children: "Secondary Button",
-  },
-}
-
-export const Ghost: Story = {
-  args: {
-    variant: "ghost",
-    children: "Ghost Button",
-  },
-}
-
-export const Text: Story = {
-  args: {
-    variant: "text",
-    children: "Text Button",
-  },
-}
-
-export const Danger: Story = {
-  args: {
-    variant: "danger",
-    children: "Delete",
-  },
-}
-
-/**
- * unstyled 仅作「可访问 <button> 结构壳」逃逸口：外观由调用方 cva/BEM 类全权提供，
- * 且须自行补齐 hover/press/focus-visible/disabled。普通操作钮请用正规变体。
- */
-export const Unstyled: Story = {
-  args: {
-    variant: "unstyled",
-    children: "Unstyled Button",
-  },
-}
-
-export const Loading: Story = {
-  args: {
-    variant: "primary",
-    loading: true,
-    children: "保存中",
-  },
-}
-
-export const SmallSize: Story = {
-  args: {
-    variant: "primary",
-    size: "sm",
-    children: "Small",
-  },
-}
-
-export const MediumSize: Story = {
-  args: {
-    variant: "primary",
-    size: "md",
-    children: "Medium",
-  },
-}
-
-export const LargeSize: Story = {
-  args: {
-    variant: "primary",
-    size: "lg",
-    children: "Large",
-  },
-}
-
-export const WithIcon: Story = {
-  args: {
-    variant: "primary",
-    icon: <Plus />,
-    children: "Add Item",
-  },
-}
-
-export const IconOnly: Story = {
-  args: {
-    variant: "secondary",
-    icon: <Settings />,
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    variant: "primary",
-    children: "Disabled",
-    disabled: true,
-  },
-}
-
-export const AllVariants: Story = {
-  render: () => (
-    <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
-      <Button variant="primary">Primary</Button>
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="ghost">Ghost</Button>
-      <Button variant="text">Text</Button>
-      <Button variant="danger">Danger</Button>
-    </div>
-  ),
-}
-
-export const AllSizes: Story = {
-  render: () => (
-    <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
-      <Button variant="primary" size="sm">
-        Small
-      </Button>
-      <Button variant="primary" size="md">
-        Medium
-      </Button>
-      <Button variant="primary" size="lg">
-        Large
-      </Button>
-    </div>
-  ),
-}
-
-export const WithDifferentIcons: Story = {
-  render: () => (
-    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
-      <Button variant="primary" icon={<Plus />}>
-        Add
-      </Button>
-      <Button variant="danger" icon={<Trash />}>
-        Delete
-      </Button>
-      <Button variant="secondary" icon={<Download />}>
-        Download
-      </Button>
-      <Button variant="ghost" icon={<Settings />}>
-        Settings
-      </Button>
-      <Button variant="text" icon={<Search />}>
-        Search
-      </Button>
-    </div>
-  ),
-}
-
-export const IconOnlyButtons: Story = {
-  render: () => (
-    <div style={{ display: "flex", gap: 8 }}>
-      <Button variant="primary" icon={<Plus />} />
-      <Button variant="secondary" icon={<Settings />} />
-      <Button variant="ghost" icon={<Search />} />
-      <Button variant="danger" icon={<Trash />} />
-      <Button variant="text" icon={<X />} />
-    </div>
-  ),
-}
-
-export const VariantSizeMatrix: Story = {
-  render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
-      {(["sm", "md", "lg"] as const).map((size) => (
-        <div key={size} style={{ display: "flex", gap: 8, alignItems: "center" }}>
-          <span
-            style={{
-              width: 72,
-              fontFamily: "var(--ow-font-mono)",
-              fontSize: 11,
-              color: "var(--ow-text-3)",
-              fontVariantNumeric: "tabular-nums",
-            }}
-          >
-            {size} · {size === "sm" ? 28 : size === "md" ? 32 : 40}px
-          </span>
-          <Button variant="primary" size={size}>
-            主操作
-          </Button>
-          <Button variant="secondary" size={size}>
-            次操作
-          </Button>
-          <Button variant="ghost" size={size}>
-            幽灵
-          </Button>
-          <Button variant="danger" size={size}>
-            删除
-          </Button>
-          <Button variant="secondary" size={size} icon={<Settings />} aria-label="设置" />
-        </div>
-      ))}
-    </div>
-  ),
-}
-
-export const LoadingStates: Story = {
-  render: () => (
-    <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
-      <Button variant="primary" loading>
-        保存中
-      </Button>
-      <Button variant="secondary" loading>
-        提交中
-      </Button>
-      <Button variant="ghost" loading>
-        加载中
-      </Button>
-      <Button variant="danger" loading>
-        删除中
-      </Button>
-      <Button variant="secondary" loading icon={<Settings />} aria-label="加载中" />
-    </div>
-  ),
-}
-
-export const IconOnlyAllSizes: Story = {
-  render: () => (
-    <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
-      <Button variant="secondary" size="sm" icon={<Settings />} aria-label="设置" />
-      <Button variant="secondary" size="md" icon={<Settings />} aria-label="设置" />
-      <Button variant="secondary" size="lg" icon={<Settings />} aria-label="设置" />
-      <Button variant="ghost" size="sm" icon={<Search />} aria-label="搜索" />
-      <Button variant="ghost" size="md" icon={<Search />} aria-label="搜索" />
-      <Button variant="ghost" size="lg" icon={<Search />} aria-label="搜索" />
-    </div>
-  ),
-}
-
-export const DisabledStates: Story = {
-  render: () => (
-    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
-      <Button variant="primary" disabled>
-        Primary
-      </Button>
-      <Button variant="secondary" disabled>
-        Secondary
-      </Button>
-      <Button variant="ghost" disabled>
-        Ghost
-      </Button>
-      <Button variant="danger" disabled>
-        Danger
-      </Button>
-      <Button variant="primary" icon={<Plus />} disabled>
-        With Icon
-      </Button>
-    </div>
-  ),
-}
-
-export const InContext: Story = {
-  render: () => (
-    <div style={{ maxWidth: 500, padding: 24, background: "var(--ow-bg)", borderRadius: 8 }}>
-      <h3 style={{ margin: 0, marginBottom: 8, fontSize: 18, fontWeight: 600, color: "var(--ow-text)" }}>
-        Delete this item?
-      </h3>
-      <p style={{ margin: 0, marginBottom: 24, fontSize: 14, color: "var(--ow-text-2)" }}>
-        This action cannot be undone. The item will be permanently removed.
-      </p>
-      <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
-        <Button variant="ghost">Cancel</Button>
-        <Button variant="danger" icon={<Trash />}>
-          Delete
-        </Button>
-      </div>
-    </div>
-  ),
-}

package/src/components/primitives/Button/ButtonSource.test.mjs

@@ -1,84 +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 spinner = await readFile(new URL("../Spinner/index.tsx", import.meta.url), "utf8")
-const cssUrl = new URL("../../../../styles/desktop-surfaces.css", import.meta.url)
-const surfaces = await readFile(cssUrl, "utf8")
-
-test("variants use --ow-btn-* component tokens with hover/press progression", () => {
-  for (const v of ["primary", "secondary", "danger"]) {
-    assert.match(source, new RegExp(`bg-\\[var\\(--ow-btn-${v}-bg\\)\\]`))
-    assert.match(source, new RegExp(`hover:bg-\\[var\\(--ow-btn-${v}-hover\\)\\]`))
-    assert.match(source, new RegExp(`active:bg-\\[var\\(--ow-btn-${v}-press\\)\\]`))
-  }
-  assert.match(source, /hover:bg-\[var\(--ow-btn-ghost-hover\)\]/)
-  assert.match(source, /active:bg-\[var\(--ow-btn-ghost-press\)\]/)
-})
-
-test("disabled is per-token, focus uses ow-focus-ring, motion uses beacon ease + dur-1", () => {
-  assert.match(source, /disabled:bg-\[var\(--ow-btn-primary-disabled-bg\)\]/)
-  assert.match(source, /disabled:text-\[color:var\(--ow-disabled-text\)\]/)
-  assert.doesNotMatch(source, /disabled:opacity/)
-  assert.match(source, /ow-focus-ring/)
-  assert.match(source, /duration-\[var\(--ow-dur-1\)\] ease-\[var\(--ow-ease-beacon\)\]/)
-})
-
-test("size ladder is 28/32/40 with radius-action and DS2 density font sizes", () => {
-  assert.match(source, /sm: "h-7 [^"]*text-ow-fs-ui [^"]*var\(--ow-radius-action\)/)
-  assert.match(source, /md: "h-8 [^"]*text-ow-fs-ui [^"]*var\(--ow-radius-action\)/)
-  assert.match(source, /lg: "h-10 [^"]*text-ow-fs-body [^"]*var\(--ow-radius-action\)/)
-})
-
-// W-R2 §9 唯一转子帧：转子本体收到 primitives/Spinner（原为 Button / DropZone /
-// SkillDetailPanelView / ToolDetailModalView 四份逐字节同款手抄），Button 只接尺寸档。
-test("loading state renders a sub-20px currentColor ring spinner (1.5px stroke, 90deg gap, 0.9s linear)", () => {
-  assert.match(source, /loading\?: boolean/)
-  assert.match(source, /import \{ Spinner \} from "\.\.\/Spinner"/)
-  assert.match(source, /return <Spinner className=\{iconSizeClasses\[size\]\} \/>/)
-  assert.doesNotMatch(source, /<svg/)
-  assert.match(spinner, /animate-\[ow-spin_var\(--ow-dur-spin-fast\)_linear_infinite\]/)
-  assert.match(spinner, /strokeWidth="1\.5"/)
-  assert.match(spinner, /strokeDasharray="75 25"/)
-  assert.match(spinner, /stroke="currentColor"/)
-  assert.match(source, /aria-busy=\{loading \|\| undefined\}/)
-  assert.match(source, /disabled=\{disabled \|\| loading\}/)
-})
-
-test("icon-only compound keeps >=28px square hit targets", () => {
-  assert.match(source, /size: "sm",\s*iconOnly: true,\s*className: "w-7"/s)
-  assert.match(source, /size: "md",\s*iconOnly: true,\s*className: "w-8"/s)
-  assert.match(source, /size: "lg",\s*iconOnly: true,\s*className: "w-10"/s)
-})
-
-test("shared .btn class in desktop-surfaces.css is aligned to the Button primitive tokens", () => {
-  // P6-8：原来是「新旧两套基础 .btn 并存」，本轮已合并为唯一一份，这里改成守住"只有一份"。
-  const base = surfaces.match(/^\.btn \{[^\n]*\}$/gm) ?? []
-  assert.strictEqual(base.length, 1, "共享 .btn 基类必须只有一份（两套并存会反压 .btn--* 修饰档）")
-  assert.match(base[0], /background: var\(--ow-btn-secondary-bg\)/)
-  assert.match(base[0], /var\(--ow-ease-beacon\)/)
-  // W5 §9：逐属性过渡——transition: all 会把 padding / border-width / transform 一并纳入，
-  // 那是装饰动效的口子；只让配色变。
-  assert.doesNotMatch(base[0], /transition: all/)
-  assert.match(
-    base[0],
-    /transition: background var\(--ow-dur-1\)[^;]*, border-color var\(--ow-dur-1\)[^;]*, color var\(--ow-dur-1\)/,
-  )
-  assert.match(surfaces, /^\.btn:hover:not\(:disabled\) \{ background: var\(--ow-btn-secondary-hover\); \}$/m)
-  // focus 环走 --ow-focus-ring-w / --ow-focus-ring-offset（两者都是 2px，口径统一到 token）。
-  assert.match(
-    surfaces,
-    /^\.btn:focus-visible \{ outline: var\(--ow-focus-ring-w\) solid var\(--ow-focus-ring\); outline-offset: var\(--ow-focus-ring-offset\); \}$/m,
-  )
-  assert.match(
-    surfaces,
-    /^\.btn:disabled \{ background: var\(--ow-disabled-bg\); color: var\(--ow-disabled-text\); border-color: var\(--ow-disabled-border\); cursor: not-allowed; \}$/m,
-  )
-  assert.doesNotMatch(surfaces, /^\.btn:disabled \{ opacity/m)
-  assert.match(surfaces, /^\.btn--danger \{ background: var\(--ow-btn-danger-bg\)/m)
-  // 基类必须排在所有 .btn--* 修饰档之前，否则同特异度下基类反压修饰档的 background。
-  const baseAt = surfaces.indexOf(base[0])
-  const firstModifierAt = surfaces.search(/^\.btn--/m)
-  assert.ok(baseAt >= 0 && firstModifierAt >= 0 && baseAt < firstModifierAt, ".btn 基类必须在第一个 .btn--* 之前")
-})

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

@@ -1,219 +0,0 @@
-import { type VariantProps, cva } from "class-variance-authority"
-import { type ButtonHTMLAttributes, type ReactNode, forwardRef } from "react"
-import { cn } from "../../../lib/utils"
-import { Spinner } from "../Spinner"
-
-export type ButtonVariant = "primary" | "secondary" | "ghost" | "text" | "danger" | "unstyled"
-export type ButtonSize = "sm" | "md" | "lg"
-
-const buttonVariants = cva(
-  [
-    // W5 终扫：过渡从 transition-all 收窄到具名属性列表——§9 只许换色，all 会把布局/变换一并带上。
-    "inline-flex items-center justify-center font-medium whitespace-nowrap",
-    "transition-[background-color,border-color,color,box-shadow] duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
-    "ow-focus-ring",
-    // R2：原来 disabled:cursor-not-allowed 与 disabled:pointer-events-none 同挂——
-    // 后者让前者永远不可能生效（禁用件不接收指针事件，光标仍是默认箭头）。删死声明，
-    // 禁用态的可读性由 --ow-disabled-* 三色 ＋ disabled 属性（AT 可读）承担。
-    "disabled:pointer-events-none",
-  ].join(" "),
-  {
-    variants: {
-      variant: {
-        primary: [
-          "bg-[var(--ow-btn-primary-bg)]",
-          "text-[color:var(--ow-btn-primary-fg)]",
-          "hover:bg-[var(--ow-btn-primary-hover)]",
-          "active:bg-[var(--ow-btn-primary-press)]",
-          "disabled:bg-[var(--ow-btn-primary-disabled-bg)]",
-          "disabled:text-[color:var(--ow-btn-primary-disabled-fg)]",
-        ].join(" "),
-        secondary: [
-          "bg-[var(--ow-btn-secondary-bg)]",
-          "text-[color:var(--ow-btn-secondary-fg)]",
-          "border border-[color:var(--ow-btn-secondary-border)]",
-          "hover:bg-[var(--ow-btn-secondary-hover)]",
-          "active:bg-[var(--ow-btn-secondary-press)]",
-          "disabled:bg-[var(--ow-disabled-bg)]",
-          "disabled:text-[color:var(--ow-disabled-text)]",
-          "disabled:border-[color:var(--ow-disabled-border)]",
-        ].join(" "),
-        ghost: [
-          "bg-transparent",
-          "text-[color:var(--ow-btn-ghost-fg)]",
-          "hover:bg-[var(--ow-btn-ghost-hover)]",
-          "active:bg-[var(--ow-btn-ghost-press)]",
-          "disabled:bg-transparent",
-          "disabled:text-[color:var(--ow-disabled-text)]",
-        ].join(" "),
-        text: [
-          "bg-transparent",
-          "text-[color:var(--ow-btn-text-fg)]",
-          "hover:text-[color:var(--ow-text-hover)]",
-          "active:text-[color:var(--ow-text-press)]",
-          "disabled:text-[color:var(--ow-disabled-text)]",
-        ].join(" "),
-        danger: [
-          "bg-[var(--ow-btn-danger-bg)]",
-          "text-[color:var(--ow-btn-danger-fg)]",
-          "hover:bg-[var(--ow-btn-danger-hover)]",
-          "active:bg-[var(--ow-btn-danger-press)]",
-          "disabled:bg-[var(--ow-btn-danger-disabled-bg)]",
-          "disabled:text-[color:var(--ow-btn-danger-disabled-fg)]",
-        ].join(" "),
-        unstyled: "",
-      },
-      size: {
-        sm: "h-7 gap-1 px-3 text-ow-fs-ui [border-radius:var(--ow-radius-action)]",
-        md: "h-8 gap-1.5 px-4 text-ow-fs-ui [border-radius:var(--ow-radius-action)]",
-        lg: "h-10 gap-1.5 px-6 text-ow-fs-body [border-radius:var(--ow-radius-action)]",
-      },
-      iconOnly: {
-        true: "px-0",
-        false: "",
-      },
-      /* loading 态：交互暂停（disabled 属性）但保持 rest 配色——转子即状态的形编码（R1），不得套 disabled 灰。 */
-      loading: {
-        true: "",
-        false: "",
-      },
-    },
-    compoundVariants: [
-      {
-        variant: "primary",
-        loading: true,
-        className: "disabled:bg-[var(--ow-btn-primary-bg)] disabled:text-[color:var(--ow-btn-primary-fg)]",
-      },
-      {
-        variant: "secondary",
-        loading: true,
-        className:
-          "disabled:bg-[var(--ow-btn-secondary-bg)] disabled:text-[color:var(--ow-btn-secondary-fg)] disabled:border-[color:var(--ow-btn-secondary-border)]",
-      },
-      {
-        variant: "ghost",
-        loading: true,
-        className: "disabled:bg-transparent disabled:text-[color:var(--ow-btn-ghost-fg)]",
-      },
-      {
-        variant: "text",
-        loading: true,
-        className: "disabled:text-[color:var(--ow-btn-text-fg)]",
-      },
-      {
-        variant: "danger",
-        loading: true,
-        className: "disabled:bg-[var(--ow-btn-danger-bg)] disabled:text-[color:var(--ow-btn-danger-fg)]",
-      },
-      {
-        size: "sm",
-        iconOnly: true,
-        className: "w-7",
-      },
-      {
-        size: "md",
-        iconOnly: true,
-        className: "w-8",
-      },
-      {
-        size: "lg",
-        iconOnly: true,
-        className: "w-10",
-      },
-    ],
-    defaultVariants: {
-      variant: "secondary",
-      size: "md",
-      iconOnly: false,
-      loading: false,
-    },
-  },
-)
-
-const iconSizeClasses: Record<ButtonSize, string> = {
-  sm: "w-4 h-4",
-  md: "w-4 h-4",
-  lg: "w-5 h-5",
-}
-
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ButtonVariant
-  size?: ButtonSize
-  icon?: ReactNode
-  children?: ReactNode
-  /** 加载态：显示 <20px 小转子（1.5px 描边圆环＋90° 缺口 · linear 0.9s · currentColor），并暂停交互。 */
-  loading?: boolean
-}
-
-/** §9 <20px 小转子＝primitives/Spinner 唯一一份实现；本件只负责按尺寸档接上 icon 尺寸表。 */
-function ButtonSpinner({ size }: { size: ButtonSize }) {
-  return <Spinner className={iconSizeClasses[size]} />
-}
-
-/**
- * DS2 原语按钮。正规变体：primary / secondary / ghost / danger × sm(28) / md(32) / lg(40)；
- * icon-only（传 icon 不传 children）即 IconButton 语义，≥28×28、命中区 ≥24。
- *
- * `variant="unstyled"` 的适用边界（逃逸口，勿滥用）：
- * 仅当 Button 只作为「可访问的 <button> 结构壳」被复用、外观完全由调用方自带的
- * cva/BEM 类（如 desktop-surfaces.css 的 .btn/.ow* 视图类）提供时才允许——
- * 此时调用方样式必须自行补齐 §6 状态（hover/press/focus-visible/disabled）。
- * 凡外观接近正规变体（普通操作钮、图标钮）的场景一律用正规变体，不得 unstyled 手搓。
- *
- * `variant="text"` 为 V1 遗留别名（链接样文字钮），新代码请优先 ghost 或 Link 规范。
- */
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  { variant = "secondary", size = "md", icon, children, className, loading = false, disabled, ...rest },
-  ref,
-) {
-  if (variant === "unstyled") {
-    return (
-      <button ref={ref} type="button" className={className} disabled={disabled} {...rest}>
-        {children}
-      </button>
-    )
-  }
-
-  const isIconOnly = Boolean(icon && !children)
-
-  return (
-    <button
-      ref={ref}
-      type="button"
-      data-slot="button"
-      data-variant={variant}
-      data-size={size}
-      data-loading={loading || undefined}
-      data-ow-part="action"
-      data-ow-role={variant === "primary" || variant === "danger" ? variant : "secondary"}
-      aria-busy={loading || undefined}
-      disabled={disabled || loading}
-      className={cn(
-        buttonVariants({ variant, size, iconOnly: isIconOnly ? true : false, loading: loading && !disabled }),
-        className,
-      )}
-      {...rest}
-    >
-      {loading ? (
-        <ButtonSpinner size={size} />
-      ) : (
-        icon && (
-          <span
-            data-ow-part="icon"
-            className={cn("inline-flex items-center justify-center flex-shrink-0", iconSizeClasses[size])}
-          >
-            {icon}
-          </span>
-        )
-      )}
-      {children && (
-        // min-w-0：受 max-w 约束的按钮（如 composer 模型选择器）要能在窄容器里
-        // 收缩，否则内部 nowrap 文本撑破按钮边界、溢出覆盖相邻控件。真正的省略
-        // 号由调用方的 label span（overflow-hidden text-ellipsis）承担。
-        <span data-ow-part="label" className="inline-flex min-w-0 items-center gap-[inherit] whitespace-nowrap">
-          {children}
-        </span>
-      )}
-    </button>
-  )
-})