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

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

@@ -1,148 +0,0 @@
-"use client"
-
-import { useEffect, useRef, useState } from "react"
-import { useSelectedOptionLocator } from "../../../hooks/useSelectedOptionLocator"
-import { MenuSurface } from "../../primitives/Menu"
-import { SelectTrigger } from "../../primitives/Select"
-import { ModelPickerList, type ModelPickerOption } from "../ModelPickerList"
-
-export interface ModelSelectOption {
-  id: string
-  name: string
-  description?: string
-  providerName?: string
-  recommended?: boolean
-  inputModalities?: string[]
-  outputModalities?: string[]
-  multiplier?: number
-}
-
-export interface ModelSelectProps {
-  value: string | null
-  options: ModelSelectOption[]
-  onChange: (id: string | null) => void
-  placeholder?: string
-  allowClear?: boolean
-  emptyLabel?: string
-}
-
-/**
- * Model picker — a DS 2.0 preset recipe on top of the Select base:
- * trigger = primitives/Select 的 SelectTrigger（三态壳 32 高、圆角 8），
- * menu = primitives/Menu 的 MenuSurface（弹层规范，portal 模式带搜索），
- * rows = ModelPickerList / ModelModalityFlow（模型行渲染配方）。
- */
-export function ModelSelect({
-  value,
-  options,
-  onChange,
-  placeholder = "选择模型",
-  allowClear = false,
-  emptyLabel = "暂无可用模型",
-}: ModelSelectProps) {
-  const [open, setOpen] = useState(false)
-  const [query, setQuery] = useState("")
-  const wrapRef = useRef<HTMLDivElement>(null)
-  // 弹层 portal 出去后不在触发器子树里，外点判断要拿到面本体的 ref（MenuSurface 的
-  // surfaceRef 槽）。原来靠 `.closest(".model-dropdown")` 用类名字符串判归属——
-  // 类名一改就静默失效（关不掉或点不进），且把样式钩子当成了行为契约。
-  const surfaceRef = useRef<HTMLDivElement>(null)
-  const selected = options.find((model) => model.id === value) ?? null
-  const disabled = options.length === 0
-  const close = () => {
-    setOpen(false)
-    setQuery("")
-  }
-
-  useEffect(() => {
-    if (!open) return
-    const onPointerDown = (event: PointerEvent) => {
-      const target = event.target as HTMLElement
-      if (wrapRef.current?.contains(target)) return
-      if (surfaceRef.current?.contains(target)) return
-      close()
-    }
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") close()
-    }
-    document.addEventListener("pointerdown", onPointerDown, true)
-    document.addEventListener("keydown", onKeyDown)
-    return () => {
-      document.removeEventListener("pointerdown", onPointerDown, true)
-      document.removeEventListener("keydown", onKeyDown)
-    }
-  }, [open])
-
-  const keyword = query.trim().toLowerCase()
-  const filtered = keyword
-    ? options.filter((model) => `${model.name} ${model.id}`.toLowerCase().includes(keyword))
-    : options
-  const pickerOptions: ModelPickerOption[] = [
-    ...(allowClear && (!keyword || "不设置".includes(keyword)) ? [{ id: null, name: "不设置" }] : []),
-    ...filtered.map(({ id, name, recommended, inputModalities, outputModalities, multiplier }) => ({
-      id,
-      name,
-      recommended,
-      inputModalities,
-      outputModalities,
-      multiplier,
-    })),
-  ]
-  const selectedOptionRef = useSelectedOptionLocator<HTMLSpanElement>({
-    open,
-    selectedKey: value,
-    query,
-    itemCount: pickerOptions.length,
-  })
-
-  return (
-    <div ref={wrapRef} style={{ position: "relative" }}>
-      <SelectTrigger
-        open={open}
-        size="md"
-        disabled={disabled}
-        className="min-w-[200px]"
-        onClick={() => {
-          if (!disabled) {
-            setOpen((current) => !current)
-            setQuery("")
-          }
-        }}
-      >
-        {selected ? (
-          selected.name
-        ) : disabled ? (
-          emptyLabel
-        ) : (
-          <span className="text-[color:var(--ow-placeholder)]">{placeholder}</span>
-        )}
-      </SelectTrigger>
-      {open && (
-        <MenuSurface
-          className="model-dropdown"
-          surfaceRef={surfaceRef}
-          width={288}
-          portal={wrapRef}
-          searchable={options.length > 6}
-          searchValue={query}
-          onSearchChange={setQuery}
-          searchPlaceholder="搜索模型"
-          contentKey={pickerOptions.length}
-        >
-          <ModelPickerList
-            options={pickerOptions}
-            value={value}
-            selectedOptionRef={selectedOptionRef}
-            onSelect={(id) => {
-              onChange(id)
-              close()
-            }}
-            // W2 §6 / G5：搜不到时不再手搓一行灰字，交给 ModelPickerList 的缺省空态
-            //（primitives/EmptyState 紧凑档：信标母题 ＋ 一句 text-2）。
-            emptyMessage="暂无匹配的模型"
-          />
-        </MenuSurface>
-      )}
-    </div>
-  )
-}

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

@@ -1,170 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import type { ModelSelectOption } from "../ModelSelect"
-import { ModelsSettingsSectionView } from "./index"
-
-const meta = {
-  title: "Composite/ModelsSettingsSectionView",
-  component: ModelsSettingsSectionView,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof ModelsSettingsSectionView>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-/* W3 验收修：fixture 原为 V1 旧形状 {value,label,sub}，与现行 ModelSelectOption
-   {id,name,description} 对不上——三个下拉在 Storybook 里全渲染成空行/空名。 */
-const defaultModelOptions: ModelSelectOption[] = [
-  { id: "claude-sonnet", name: "Claude Sonnet", description: "平衡性能与成本" },
-  { id: "claude-opus", name: "Claude Opus", description: "最强推理能力" },
-  { id: "claude-haiku", name: "Claude Haiku", description: "快速响应" },
-]
-
-const imageModelOptions: ModelSelectOption[] = [
-  { id: "dall-e-3", name: "DALL-E 3", description: "OpenAI 图像生成" },
-  { id: "midjourney", name: "Midjourney", description: "艺术风格生成" },
-]
-
-const visionModelOptions: ModelSelectOption[] = [
-  { id: "claude-opus", name: "Claude Opus", description: "视觉理解" },
-  { id: "gpt-4-vision", name: "GPT-4 Vision", description: "多模态理解" },
-]
-
-export const Available: Story = {
-  args: {
-    available: true,
-    defaultModel: "claude-sonnet",
-    defaultModelOptions,
-    onDefaultModelChange: (value) => console.log("default model", value),
-    imageModel: "dall-e-3",
-    imageModelOptions,
-    onImageModelChange: (value) => console.log("image model", value),
-    visionModel: "claude-opus",
-    visionModelOptions,
-    onVisionModelChange: (value) => console.log("vision model", value),
-  },
-}
-
-/**
- * 带思考强度（R2 · 找茬 L1-1-7 · 原型模板 L2517–2530）：三条模型槽之后的第四张卡，
- * 右端一枚三格分段器 标准 / 深度思考 / 极限思考。不传 `onEffortChange` 就不出这一行，
- * 所以宿主一期没接数据时段内画面与从前一致。
- */
-export const WithThinkingEffort: Story = {
-  args: {
-    available: true,
-    defaultModel: "claude-sonnet",
-    defaultModelOptions,
-    onDefaultModelChange: (value) => console.log("default model", value),
-    imageModel: "dall-e-3",
-    imageModelOptions,
-    onImageModelChange: (value) => console.log("image model", value),
-    visionModel: "claude-opus",
-    visionModelOptions,
-    onVisionModelChange: (value) => console.log("vision model", value),
-    effort: "deep",
-    onEffortChange: (value) => console.log("effort", value),
-  },
-}
-
-export const NoImageModel: Story = {
-  args: {
-    available: true,
-    defaultModel: "claude-sonnet",
-    defaultModelOptions,
-    onDefaultModelChange: (value) => console.log("default model", value),
-    imageModel: undefined,
-    imageModelOptions,
-    onImageModelChange: (value) => console.log("image model", value),
-    visionModel: "claude-opus",
-    visionModelOptions,
-    onVisionModelChange: (value) => console.log("vision model", value),
-  },
-}
-
-export const NoVisionModel: Story = {
-  args: {
-    available: true,
-    defaultModel: "claude-sonnet",
-    defaultModelOptions,
-    onDefaultModelChange: (value) => console.log("default model", value),
-    imageModel: "dall-e-3",
-    imageModelOptions,
-    onImageModelChange: (value) => console.log("image model", value),
-    visionModel: undefined,
-    visionModelOptions,
-    onVisionModelChange: (value) => console.log("vision model", value),
-  },
-}
-
-export const LoadingState: Story = {
-  args: {
-    available: false,
-    unavailableReason: "正在加载模型列表…",
-    defaultModel: undefined,
-    defaultModelOptions: [],
-    onDefaultModelChange: () => {},
-    imageModel: undefined,
-    imageModelOptions: [],
-    onImageModelChange: () => {},
-    visionModel: undefined,
-    visionModelOptions: [],
-    onVisionModelChange: () => {},
-  },
-}
-
-export const Unavailable: Story = {
-  args: {
-    available: false,
-    unavailableReason: "当前套餐不含模型权益，请先开通套餐",
-    defaultModel: undefined,
-    defaultModelOptions: [],
-    onDefaultModelChange: () => {},
-    imageModel: undefined,
-    imageModelOptions: [],
-    onImageModelChange: () => {},
-    visionModel: undefined,
-    visionModelOptions: [],
-    onVisionModelChange: () => {},
-  },
-}
-
-export const ErrorState: Story = {
-  args: {
-    available: false,
-    loadFailed: true,
-    loadError: "无法连接到模型服务",
-    retrying: false,
-    onRetry: () => console.log("retry"),
-    defaultModel: undefined,
-    defaultModelOptions: [],
-    onDefaultModelChange: () => {},
-    imageModel: undefined,
-    imageModelOptions: [],
-    onImageModelChange: () => {},
-    visionModel: undefined,
-    visionModelOptions: [],
-    onVisionModelChange: () => {},
-  },
-}
-
-export const ErrorStateRetrying: Story = {
-  args: {
-    available: false,
-    loadFailed: true,
-    loadError: "网络连接超时",
-    retrying: true,
-    onRetry: () => console.log("retry"),
-    defaultModel: undefined,
-    defaultModelOptions: [],
-    onDefaultModelChange: () => {},
-    imageModel: undefined,
-    imageModelOptions: [],
-    onImageModelChange: () => {},
-    visionModel: undefined,
-    visionModelOptions: [],
-    onVisionModelChange: () => {},
-  },
-}

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

@@ -1,139 +0,0 @@
-/*
- * W5 终扫（§7 行高）：三处 ListRow 原来挂 `px-0 py-3.5 gap-4` —— py-3.5=14px 上下内距
- * 把 40 档行撑到 ~64px，脱出 ListRow 的 40/32 两档。上下内距与槽间距一律交还
- * ListRow 自带档位（`density`），这里只保留 px-0（设置屏的行与 Section 标题左对齐，
- * 属水平贴边，不动高度表）。要更松就加 density 档，不在调用点覆写内距。
- *
- * R3（Terry 意见 5）作废 A2-B2「一条设置＝一张卡」：三行回到 `.set-row` 分隔线行
- * （1px --ow-border ＋ radius-lg ＋ --ow-surface ＋ 内距 13/16），顶边分隔线随之关掉；
- * 14 的卡间距由外面这一层 `gap-3.5` 给（`Section` 的内容槽本身不带 gap，
- * 设置面外层 `.settings__col` 的 gap 只管它的直接子节点）。
- */
-import { EmptyState } from "../../primitives/EmptyState"
-import { SegmentedControl } from "../../primitives/SegmentedControl"
-import { ListRow } from "../ListRow"
-import { ModelCatalogErrorState } from "../ModelCatalogErrorState"
-import { ModelSelect, type ModelSelectOption } from "../ModelSelect"
-import { Section } from "../Section"
-
-/** 思考强度三档（原型模板 L3084 `EFFORTS`）。 */
-export type ModelThinkingEffort = "standard" | "deep" | "max"
-
-const EFFORTS: Array<{ value: ModelThinkingEffort; label: string }> = [
-  { value: "standard", label: "标准" },
-  { value: "deep", label: "深度思考" },
-  { value: "max", label: "极限思考" },
-]
-
-export interface ModelsSettingsSectionViewProps {
-  available: boolean
-  unavailableReason: string
-  defaultModel: string | null
-  imageModel: string | null
-  visionModel: string | null
-  defaultModelOptions: ModelSelectOption[]
-  imageModelOptions: ModelSelectOption[]
-  visionModelOptions: ModelSelectOption[]
-  loadFailed?: boolean
-  loadError?: string | null
-  retrying?: boolean
-  onRetry?: () => void
-  /**
-   * 思考强度（R2 · 找茬 L1-1-7 · 原型模板 L2517–2530 的独立卡）。
-   * 不传 `onEffortChange` 就不出这一行——宿主一期没接数据时段内画面与从前一致。
-   */
-  effort?: ModelThinkingEffort
-  onEffortChange?: (effort: ModelThinkingEffort) => void
-  onDefaultModelChange: (id: string) => void
-  onImageModelChange: (id: string | null) => void
-  onVisionModelChange: (id: string | null) => void
-}
-
-export function ModelsSettingsSectionView(props: ModelsSettingsSectionViewProps) {
-  // §6 错误制式先判：目录**取不回来**与「没有模型权益」是两件事，错误分支原来嵌在
-  // `!available` 里，于是 available=true 的失败态整屏无一句错误文案、无重试钮，
-  // §6 在这条路径上零渲染。加载失败与权益无关，提到最外层单独判。
-  if (props.loadFailed && props.onRetry) {
-    return <ModelCatalogErrorState message={props.loadError} retrying={props.retrying} onRetry={props.onRetry} />
-  }
-  if (!props.available) {
-    // §6 容器空态：信标 mono 母题 ＋ 一句 text-2（禁插画禁 emoji），不再自绘一行假列表
-    return (
-      <Section title="默认模型" titleTier="eyebrow" divider={false}>
-        <EmptyState message={`暂无可用模型权益。${props.unavailableReason}`} />
-      </Section>
-    )
-  }
-  return (
-    // R2 找茬 L1-1-8：组标题走眉标档（设置弹窗右栏头已经是一枚 24 段标题，
-    // 紧挨着再来一枚 14/600 就是双标题）；文案照原型 L2503 改「默认模型」。
-    <Section title="默认模型" titleTier="eyebrow" divider={false}>
-      <div className="flex flex-col gap-0">
-        <ListRow
-          title="默认模型"
-          description="日常对话与任务使用的模型"
-          className="set-row"
-          action={
-            <ModelSelect
-              value={props.defaultModel}
-              options={props.defaultModelOptions}
-              onChange={(id) => {
-                if (id) props.onDefaultModelChange(id)
-              }}
-            />
-          }
-        />
-        <ListRow
-          title="图片模型"
-          description="图像生成与编辑使用的模型"
-          className="set-row"
-          action={
-            <ModelSelect
-              value={props.imageModel}
-              options={props.imageModelOptions}
-              onChange={props.onImageModelChange}
-              allowClear
-              placeholder="选择图片模型"
-              emptyLabel="暂无可用的图片模型"
-            />
-          }
-        />
-        <ListRow
-          title="视觉模型"
-          description="图片内容理解使用的模型"
-          className="set-row"
-          action={
-            <ModelSelect
-              value={props.visionModel}
-              options={props.visionModelOptions}
-              onChange={props.onVisionModelChange}
-              allowClear
-              placeholder="选择视觉模型"
-              emptyLabel="暂无可用的视觉模型"
-            />
-          }
-        />
-        {/* R2 找茬 L1-1-7：原型（模板 L2517–2530）在三条模型槽之后还有独立一张卡
-            ——左「思考强度 / 影响推理链长度与耗时」，右一枚三格分段器（EFFORTS L3084）。
-            §6 选中态走无彩极色（设置面内选中底由 desktop-surfaces.css 指到 --ow-current-bg），
-            不用 primary。宿主取数写进交接单。 */}
-        {props.onEffortChange && (
-          <ListRow
-            title="思考强度"
-            description="影响推理链长度与耗时"
-            className="set-row"
-            action={
-              <SegmentedControl
-                size="sm"
-                options={EFFORTS}
-                value={props.effort ?? "standard"}
-                onChange={(value) => props.onEffortChange?.(value as ModelThinkingEffort)}
-                aria-label="思考强度"
-              />
-            }
-          />
-        )}
-      </div>
-    </Section>
-  )
-}