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

package/src/components/composite/ModelModalityFlow/index.tsx

@@ -1,113 +0,0 @@
-import { cn } from "../../../lib/utils"
-import { ModalityAudio, ModalityImage, ModalityText, ModalityVideo } from "../Icons"
-
-export type ModelModality = "text" | "image" | "video" | "audio"
-
-export type ModelModalityFlowProps = {
-  inputModalities?: readonly string[]
-  outputModalities?: readonly string[]
-  className?: string
-}
-
-/**
- * ModelModalityFlow — 模型输入→输出模态摘要（DS 2.0 W2 重铸）。
- *
- * 分类芯片口径（§7 / 判断表「挂载芯片」条）：V1 的四色分类（text 蓝 / image 绿 /
- * video 橙 / audio 紫）不再成立——分类不是状态，不该占四个功能色极。四类统一落
- * info tint（`--ow-mention-bg` / `--ow-mention-text`），靠**类别图标**区分而非彩度；
- * audio 原来那条颜色混合拼底（Tailwind 任意值里带逗号，实际编译不出底色，渲染成
- * 裸图标）随之删除。
- * 形状（§7）：18 方框走 `--ow-radius-tag`（6px 直角分类档，不带点/计数故不用胶囊）。
- * 图标（W-R2 收编）：四枚 glyph 原为本件就地手写的 16 视框 / 1.6 描边 SVG，与
- * composite/Icons 全族的 24 视框 / 1.75 描边并存两套语系、且不受图标族改动波及。
- * 现已按 ×1.5 等比迁进 Icons（`ModalityText/Image/Video/Audio`），本件只做 import；
- * 实心部件在各自 path 上显式 `fill="currentColor"`，不靠「最后一个 path」这类位置
- * 选择器去猜（旧写法会把 image 的山线、audio 的外弧一并填实）。
- */
-export function ModelModalityFlow({
-  inputModalities,
-  outputModalities,
-  className = "",
-}: ModelModalityFlowProps): React.ReactElement | null {
-  const input = normalizeModelModalities(inputModalities)
-  const output = normalizeModelModalities(outputModalities)
-  if (input.length === 0 && output.length === 0) return null
-
-  return (
-    <span
-      data-slot="model-modalities"
-      className={cn("inline-flex items-center gap-0.5 align-middle", className)}
-      title={`输入：${input.map(modalityLabel).join("、")}；输出：${output.map(modalityLabel).join("、")}`}
-    >
-      <span data-ow-part="group" className="inline-flex items-center gap-0.5" aria-label="输入模态">
-        {input.map((modality) => (
-          <ModalityIcon key={`in-${modality}`} modality={modality} />
-        ))}
-      </span>
-      <span
-        data-ow-part="arrow"
-        className="text-ow-text-3 font-medium text-ow-fs-body-sm leading-none px-px"
-        aria-hidden="true"
-      >
-        →
-      </span>
-      <span data-ow-part="group" className="inline-flex items-center gap-0.5" aria-label="输出模态">
-        {output.map((modality) => (
-          <ModalityIcon key={`out-${modality}`} modality={modality} />
-        ))}
-      </span>
-    </span>
-  )
-}
-
-/** 四类共用同一 info tint 芯片；类别只由图标区分（§7 分类芯片口径）。 */
-const MODALITY_CHIP = "bg-[var(--ow-mention-bg)] text-[color:var(--ow-mention-text)]"
-
-function ModalityIcon({ modality }: { modality: ModelModality }): React.ReactElement {
-  return (
-    <span
-      data-slot="model-modality"
-      data-variant={modality}
-      className={cn(
-        "w-[18px] h-[18px] rounded-[var(--ow-radius-tag)] inline-flex items-center justify-center leading-none",
-        // 描边/端点/填充由 Icons 族自带（1.75 描边），芯片这边只定尺寸
-        "[&_svg]:w-3.5 [&_svg]:h-3.5",
-        MODALITY_CHIP,
-      )}
-      aria-label={modalityLabel(modality)}
-    >
-      {modalityGlyph(modality)}
-    </span>
-  )
-}
-
-function normalizeModelModalities(values: readonly string[] | undefined): ModelModality[] {
-  const result: ModelModality[] = []
-  for (const value of values ?? []) {
-    const modality = value
-      .toLowerCase()
-      .replace(/^modality_/, "")
-      .replace(/^model_modality_/, "")
-      .replace(/^content_modality_/, "")
-      .replace(/^input_/, "")
-      .replace(/^output_/, "")
-    if (isModelModality(modality) && !result.includes(modality)) result.push(modality)
-  }
-  return result
-}
-
-function isModelModality(value: string): value is ModelModality {
-  return value === "text" || value === "image" || value === "video" || value === "audio"
-}
-
-function modalityGlyph(modality: ModelModality): React.ReactNode {
-  // text 从字母 "T" 改为文本行图标：四类一律图标，字母混在图标里读作另一个语系。
-  if (modality === "text") return <ModalityText aria-hidden="true" />
-  if (modality === "image") return <ModalityImage aria-hidden="true" />
-  if (modality === "video") return <ModalityVideo aria-hidden="true" />
-  return <ModalityAudio aria-hidden="true" />
-}
-
-function modalityLabel(modality: ModelModality): string {
-  return { text: "文本", image: "图片", video: "视频", audio: "音频" }[modality]
-}

package/src/components/composite/ModelPickerList/ModelPickerList.stories.tsx

@@ -1,313 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { Check } from "../Icons"
-import { ModelPickerList } from "./index"
-
-const meta = {
-  title: "Composite/ModelPickerList",
-  component: ModelPickerList,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof ModelPickerList>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const basicOptions = [
-  { id: "claude-opus", name: "Claude Opus", secondaryText: "最强推理能力" },
-  { id: "claude-sonnet", name: "Claude Sonnet", secondaryText: "平衡性能与成本" },
-  { id: "claude-haiku", name: "Claude Haiku", secondaryText: "快速响应" },
-]
-
-export const Default: Story = {
-  args: {
-    options: basicOptions,
-    value: "claude-sonnet",
-    onSelect: (id) => console.log("selected", id),
-  },
-}
-
-export const NoSelection: Story = {
-  args: {
-    options: basicOptions,
-    value: null,
-    onSelect: (id) => console.log("selected", id),
-  },
-}
-
-export const FirstItemSelected: Story = {
-  args: {
-    options: basicOptions,
-    value: "claude-opus",
-    onSelect: (id) => console.log("selected", id),
-  },
-}
-
-export const LastItemSelected: Story = {
-  args: {
-    options: basicOptions,
-    value: "claude-haiku",
-    onSelect: (id) => console.log("selected", id),
-  },
-}
-
-export const WithRecommended: Story = {
-  args: {
-    options: [
-      { id: "claude-opus", name: "Claude Opus", secondaryText: "最强推理能力" },
-      { id: "claude-sonnet", name: "Claude Sonnet", secondaryText: "平衡性能与成本", recommended: true },
-      { id: "claude-haiku", name: "Claude Haiku", secondaryText: "快速响应" },
-    ],
-    value: "claude-sonnet",
-    onSelect: (id) => console.log("selected", id),
-  },
-}
-
-export const WithInputModalities: Story = {
-  args: {
-    options: [
-      { id: "gpt-4", name: "GPT-4", secondaryText: "Text generation", inputModalities: ["text"] },
-      {
-        id: "gpt-4-vision",
-        name: "GPT-4 Vision",
-        secondaryText: "Vision understanding",
-        inputModalities: ["text", "image"],
-      },
-      { id: "whisper", name: "Whisper", secondaryText: "Speech to text", inputModalities: ["audio"] },
-    ],
-    value: "gpt-4-vision",
-    onSelect: (id) => console.log("selected", id),
-  },
-}
-
-export const WithOutputModalities: Story = {
-  args: {
-    options: [
-      { id: "gpt-4", name: "GPT-4", secondaryText: "Text output", outputModalities: ["text"] },
-      { id: "dall-e-3", name: "DALL-E 3", secondaryText: "Image generation", outputModalities: ["image"] },
-      { id: "tts-1", name: "TTS-1", secondaryText: "Text to speech", outputModalities: ["audio"] },
-    ],
-    value: "dall-e-3",
-    onSelect: (id) => console.log("selected", id),
-  },
-}
-
-export const WithBothModalities: Story = {
-  args: {
-    options: [
-      {
-        id: "claude-opus",
-        name: "Claude Opus",
-        secondaryText: "Multimodal model",
-        inputModalities: ["text", "image"],
-        outputModalities: ["text"],
-      },
-      {
-        id: "gpt-4-vision",
-        name: "GPT-4 Vision",
-        secondaryText: "Vision model",
-        inputModalities: ["text", "image"],
-        outputModalities: ["text"],
-      },
-    ],
-    value: "claude-opus",
-    onSelect: (id) => console.log("selected", id),
-  },
-}
-
-export const WithMultiplier: Story = {
-  args: {
-    options: [
-      { id: "claude-opus", name: "Claude Opus", secondaryText: "最强推理能力", multiplier: 3.0 },
-      { id: "claude-sonnet", name: "Claude Sonnet", secondaryText: "平衡性能与成本", multiplier: 1.5 },
-      { id: "claude-haiku", name: "Claude Haiku", secondaryText: "快速响应", multiplier: 0.5 },
-    ],
-    value: "claude-sonnet",
-    onSelect: (id) => console.log("selected", id),
-  },
-}
-
-export const WithTrailing: Story = {
-  args: {
-    options: [
-      {
-        id: "claude-opus",
-        name: "Claude Opus",
-        secondaryText: "最强推理能力",
-        trailing: <Check style={{ width: 14, height: 14, color: "var(--ow-success)" }} />,
-      },
-      { id: "claude-sonnet", name: "Claude Sonnet", secondaryText: "平衡性能与成本" },
-      { id: "claude-haiku", name: "Claude Haiku", secondaryText: "快速响应" },
-    ],
-    value: "claude-opus",
-    onSelect: (id) => console.log("selected", id),
-  },
-}
-
-export const WithMultiplierAndTrailing: Story = {
-  args: {
-    options: [
-      {
-        id: "claude-opus",
-        name: "Claude Opus",
-        secondaryText: "最强推理能力",
-        multiplier: 3.0,
-        trailing: <span style={{ fontSize: 11, color: "var(--ow-text-3)" }}>New</span>,
-      },
-      { id: "claude-sonnet", name: "Claude Sonnet", secondaryText: "平衡性能与成本", multiplier: 1.5 },
-    ],
-    value: "claude-opus",
-    onSelect: (id) => console.log("selected", id),
-  },
-}
-
-export const WithDisabledItem: Story = {
-  args: {
-    options: [
-      { id: "claude-opus", name: "Claude Opus", secondaryText: "最强推理能力" },
-      { id: "claude-sonnet", name: "Claude Sonnet", secondaryText: "平衡性能与成本", disabled: true },
-      { id: "claude-haiku", name: "Claude Haiku", secondaryText: "快速响应" },
-    ],
-    value: "claude-opus",
-    onSelect: (id) => console.log("selected", id),
-  },
-}
-
-export const AllDisabled: Story = {
-  args: {
-    options: [
-      { id: "claude-opus", name: "Claude Opus", secondaryText: "Unavailable", disabled: true },
-      { id: "claude-sonnet", name: "Claude Sonnet", secondaryText: "Unavailable", disabled: true },
-      { id: "claude-haiku", name: "Claude Haiku", secondaryText: "Unavailable", disabled: true },
-    ],
-    value: null,
-    onSelect: (id) => console.log("selected", id),
-  },
-}
-
-/** 缺省空态＝G5（信标母题 ＋ 一句 text-2），不再手搓灰字 */
-export const EmptyList: Story = {
-  args: {
-    options: [],
-    value: null,
-    onSelect: (id) => console.log("selected", id),
-  },
-}
-
-/** 换文案只改一句话，形不变 */
-export const EmptyWithCustomMessage: Story = {
-  args: {
-    options: [],
-    value: null,
-    onSelect: (id) => console.log("selected", id),
-    emptyMessage: "暂无可用模型，请稍后再试",
-  },
-}
-
-/** compact 密度档＝32 行高，与 ListRow density="compact" 同值 */
-export const CompactDensity: Story = {
-  args: {
-    options: [
-      { id: "claude-opus", name: "Claude Opus" },
-      { id: "claude-sonnet", name: "Claude Sonnet" },
-      { id: "claude-haiku", name: "Claude Haiku" },
-    ],
-    value: "claude-sonnet",
-    density: "compact",
-    onSelect: (id) => console.log("selected", id),
-  },
-}
-
-export const WithNullOption: Story = {
-  args: {
-    options: [
-      { id: null, name: "None", secondaryText: "No model selected" },
-      { id: "claude-opus", name: "Claude Opus", secondaryText: "最强推理能力" },
-      { id: "claude-sonnet", name: "Claude Sonnet", secondaryText: "平衡性能与成本" },
-    ],
-    value: null,
-    onSelect: (id) => console.log("selected", id),
-  },
-}
-
-export const NoSecondaryText: Story = {
-  args: {
-    options: [
-      { id: "claude-opus", name: "Claude Opus" },
-      { id: "claude-sonnet", name: "Claude Sonnet" },
-      { id: "claude-haiku", name: "Claude Haiku" },
-    ],
-    value: "claude-sonnet",
-    onSelect: (id) => console.log("selected", id),
-  },
-}
-
-export const LongNames: Story = {
-  args: {
-    options: [
-      { id: "1", name: "This is a very long model name that might overflow", secondaryText: "Description" },
-      {
-        id: "2",
-        name: "Claude Sonnet 3.5 Extended Context Window Version",
-        secondaryText: "Another long description text here",
-      },
-    ],
-    value: "1",
-    onSelect: (id) => console.log("selected", id),
-  },
-}
-
-export const MixedConfiguration: Story = {
-  args: {
-    options: [
-      {
-        id: "claude-opus",
-        name: "Claude Opus",
-        secondaryText: "最强推理能力",
-        recommended: true,
-        multiplier: 3.0,
-        inputModalities: ["text", "image"],
-        outputModalities: ["text"],
-      },
-      { id: "claude-sonnet", name: "Claude Sonnet", secondaryText: "平衡性能与成本", multiplier: 1.5 },
-      {
-        id: "claude-haiku",
-        name: "Claude Haiku",
-        secondaryText: "快速响应",
-        multiplier: 0.5,
-        trailing: <span style={{ fontSize: 11, color: "var(--ow-success)" }}>Fast</span>,
-      },
-      { id: "gpt-4", name: "GPT-4", secondaryText: "OpenAI model", disabled: true },
-    ],
-    value: "claude-opus",
-    onSelect: (id) => console.log("selected", id),
-  },
-}
-
-export const InDialog: Story = {
-  render: () => (
-    <div
-      style={{
-        width: 400,
-        background: "var(--ow-surface)",
-        border: "1px solid var(--ow-border-strong)",
-        borderRadius: 12,
-        overflow: "hidden",
-      }}
-    >
-      <div style={{ padding: 16, borderBottom: "1px solid var(--ow-border-strong)" }}>
-        <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600, color: "var(--ow-text)" }}>Select Model</h3>
-      </div>
-      <ModelPickerList
-        options={[
-          { id: "claude-opus", name: "Claude Opus", secondaryText: "最强推理能力", recommended: true, multiplier: 3.0 },
-          { id: "claude-sonnet", name: "Claude Sonnet", secondaryText: "平衡性能与成本", multiplier: 1.5 },
-          { id: "claude-haiku", name: "Claude Haiku", secondaryText: "快速响应", multiplier: 0.5 },
-        ]}
-        value="claude-sonnet"
-        onSelect={(id) => console.log("selected", id)}
-      />
-    </div>
-  ),
-}

package/src/components/composite/ModelPickerList/index.tsx

@@ -1,142 +0,0 @@
-"use client"
-
-import type { ReactNode, Ref } from "react"
-import { Button } from "../../primitives"
-import { Badge } from "../../primitives/Badge"
-import { EmptyState } from "../../primitives/EmptyState"
-import { Check } from "../Icons"
-import { ModelModalityFlow } from "../ModelModalityFlow"
-
-export interface ModelPickerOption {
-  id: string | null
-  name: string
-  secondaryText?: string
-  recommended?: boolean
-  inputModalities?: string[]
-  outputModalities?: string[]
-  multiplier?: number
-  disabled?: boolean
-  trailing?: ReactNode
-}
-
-/** 行高档，与 composite/ListRow 的 density 同名同值：default=40 · compact=32 */
-export type ModelPickerListDensity = "default" | "compact"
-
-export interface ModelPickerListProps {
-  options: ModelPickerOption[]
-  value: string | null
-  onSelect: (id: string | null) => void
-  selectedOptionRef?: Ref<HTMLSpanElement>
-  /** 自定义空态节点；缺省时用 primitives/EmptyState 的弹层紧凑档（G5） */
-  empty?: ReactNode
-  /** 缺省空态的一句话文案（§6 容器空态） */
-  emptyMessage?: ReactNode
-  /** 行高档：default=40（ListRow default）· compact=32（ListRow compact） */
-  density?: ModelPickerListDensity
-  className?: string
-}
-
-/**
- * 弹层里的 G5 空态：走 EmptyState 的 `variant="text"` 档——一行 --ow-fs-ui text-2 灰字，
- * 无母题无钮（原型 template.dc.html L923 / L3018 的弹层口径）。A5-B4 从 `sm` 紧凑档改来：
- * 模型选择器是贴在触发钮下的短弹层，28px 母题会把它顶成一屏正经空态的体量。
- */
-function ModelPickerEmpty({ message }: { message: ReactNode }) {
-  return <EmptyState message={message} variant="text" />
-}
-
-/**
- * ModelPickerList — chat 与 settings 共用的模型行列表（DS 2.0 W2 重铸）。
- *
- * 度量（§7）：行高对齐 ListRow 的两档密度值 default 40 / compact 32（不再是 46px 的
- * 表外值），但骨架本身**不是** ListRow——行是共享表里的 `.modelopt` 段
- * （desktop-surfaces.css）自铺的：自管 min-height / gap / padding / hover-pop /
- * press-pop / focus-visible / `.active` 选中 / `--locked` 禁用。
- * 两套骨架并存已在 R2 复审记名（见下）：合并到 ListRow 需要它先长出「整行是按钮 ＋
- * 右槽放静态内容」的档位——ListRow 现在一传 `action` 就把根降成不可聚焦的 <div>
- * （hasCustomAction ⇒ rowIsButton=false），而模型行必须键盘可达（本件用 Button 承载），
- * 故本轮不合并，只把两侧的选中态口径对齐（ListRow 已改为同一套 selected-bg ＋
- * border-strong ＋ control-on 勾）。
- * 选中（§6 无彩选中）：表面递进底（--ow-selected-bg）＋ --ow-border-strong 边
- * ＋ 行尾 --ow-control-on 勾 ＋ 500 字重四重编码，不靠彩度，也不再借 --ow-primary-bg
- * （行动极）上色。勾是选中的形状编码，与调用方自带的 `trailing` 内容分槽并存。
- * 立面（§5）：贴地零影；行坐在弹层面上，hover/press 走 -pop 档。
- * 动效（§9）：仅底色与边色过渡，120ms＋ease-beacon，禁位移缩放。
- * 空态（§6 / G5）：不传 `empty` 时落 primitives/EmptyState 的紧凑档——信标母题 ＋
- * 一句 text-2；旧的「一行灰字」写法不再是缺省。`empty` 仍可整块覆盖，兼容既有调用。
- */
-export function ModelPickerList({
-  options,
-  value,
-  onSelect,
-  selectedOptionRef,
-  empty,
-  emptyMessage = "暂无匹配的模型",
-  density = "default",
-  className = "",
-}: ModelPickerListProps) {
-  return (
-    <div
-      data-slot="model-picker-list"
-      data-density={density}
-      className={["cpop__scroll", "model-picker-list", density === "compact" && "model-picker-list--compact", className]
-        .filter(Boolean)
-        .join(" ")}
-    >
-      {options.length === 0
-        ? (empty ?? <ModelPickerEmpty message={emptyMessage} />)
-        : options.map((option) => {
-            const selected = !option.disabled && option.id === value
-            const multiplierLabel = formatModelMultiplier(option.multiplier)
-            const state = [option.disabled && "disabled", selected && "selected"].filter(Boolean).join(" ")
-            return (
-              <Button
-                variant="unstyled"
-                key={option.id ?? "__clear__"}
-                data-slot="model-option"
-                data-ow-state={state || undefined}
-                aria-current={selected || undefined}
-                className={["modelopt", selected && "active", option.disabled && "modelopt--locked"]
-                  .filter(Boolean)
-                  .join(" ")}
-                disabled={option.disabled}
-                onClick={() => onSelect(option.id)}
-              >
-                <span ref={selected ? selectedOptionRef : undefined} className="meta">
-                  <span className="n model-title">
-                    <span className="model-title__name">{option.name}</span>
-                    {(option.recommended || option.inputModalities || option.outputModalities) && (
-                      <span className="model-title__badges">
-                        {option.recommended && <Badge>推荐</Badge>}
-                        <ModelModalityFlow
-                          inputModalities={option.inputModalities}
-                          outputModalities={option.outputModalities}
-                        />
-                      </span>
-                    )}
-                  </span>
-                  {option.secondaryText && <span className="s">{option.secondaryText}</span>}
-                </span>
-                {(multiplierLabel || option.trailing || selected) && (
-                  <span className="modelopt__trailing">
-                    {multiplierLabel && <span className="modelopt__multiplier">{multiplierLabel}</span>}
-                    {option.trailing && <span className="ck">{option.trailing}</span>}
-                    {/* R2 L2-2-3：勾槽恒占位。原来只有 selected 才渲染这枚 16 的勾，
-                        未选中行的 mono 倍率读数就多占 16+6 往右挪，三行读数右沿差 23px。
-                        §7 的「读数 mono ＋ tabular-nums」以同列对齐为前提，故未选中也留空槽。 */}
-                    <span className="modelopt__check" data-ow-state={selected ? "on" : "off"} aria-hidden="true">
-                      {selected ? <Check /> : null}
-                    </span>
-                  </span>
-                )}
-              </Button>
-            )
-          })}
-    </div>
-  )
-}
-
-function formatModelMultiplier(multiplier: number | undefined): string | null {
-  if (typeof multiplier !== "number" || !Number.isFinite(multiplier) || multiplier <= 0) return null
-  return `×${Number(multiplier.toFixed(4))}`
-}

package/src/components/composite/ModelSelect/ModelSelect.stories.tsx

@@ -1,90 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { useState } from "react"
-import { ModelSelect } from "./index"
-
-const meta = {
-  title: "Composite/ModelSelect",
-  component: ModelSelect,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof ModelSelect>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const mockModels = [
-  {
-    id: "gpt-4",
-    name: "GPT-4",
-    description: "Most capable model, best for complex tasks",
-    providerName: "OpenAI",
-    recommended: true,
-    inputModalities: ["text"],
-    outputModalities: ["text"],
-    multiplier: 1.0,
-  },
-  {
-    id: "gpt-3.5-turbo",
-    name: "GPT-3.5 Turbo",
-    description: "Fast and efficient for most tasks",
-    providerName: "OpenAI",
-    inputModalities: ["text"],
-    outputModalities: ["text"],
-    multiplier: 0.5,
-  },
-  {
-    id: "claude-3-opus",
-    name: "Claude 3 Opus",
-    description: "Powerful model for complex reasoning",
-    providerName: "Anthropic",
-    inputModalities: ["text", "image"],
-    outputModalities: ["text"],
-    multiplier: 1.2,
-  },
-  {
-    id: "claude-3-sonnet",
-    name: "Claude 3 Sonnet",
-    description: "Balanced performance and speed",
-    providerName: "Anthropic",
-    inputModalities: ["text", "image"],
-    outputModalities: ["text"],
-    multiplier: 0.8,
-  },
-]
-
-export const Default: Story = {
-  render: () => {
-    const [value, setValue] = useState<string | null>("gpt-4")
-    return (
-      <div>
-        <ModelSelect value={value} options={mockModels} onChange={setValue} />
-        <p style={{ marginTop: 16, fontSize: 14, color: "var(--ow-text-3)" }}>Selected: {value || "(none)"}</p>
-      </div>
-    )
-  },
-}
-
-export const WithClear: Story = {
-  render: () => {
-    const [value, setValue] = useState<string | null>("claude-3-sonnet")
-    return <ModelSelect value={value} options={mockModels} onChange={setValue} allowClear={true} />
-  },
-}
-
-export const Empty: Story = {
-  args: {
-    value: null,
-    options: [],
-    onChange: () => {},
-    emptyLabel: "暂无可用模型",
-  },
-}
-
-export const CustomPlaceholder: Story = {
-  render: () => {
-    const [value, setValue] = useState<string | null>(null)
-    return <ModelSelect value={value} options={mockModels} onChange={setValue} placeholder="Choose an AI model..." />
-  },
-}