@orbit-work/ui 0.1.0

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

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

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

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

@@ -0,0 +1,90 @@
+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..." />
+  },
+}