@orbit-work/ui 0.1.0

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

@@ -0,0 +1,196 @@
+"use client"
+
+import { type DragEvent, type ReactNode, useCallback, useRef, useState } from "react"
+import { cn } from "../../../lib/utils"
+import { Button } from "../../primitives/Button"
+import { EmptyState } from "../../primitives/EmptyState"
+import { InlineMessage } from "../../primitives/InlineMessage"
+import { Spinner } from "../../primitives/Spinner"
+
+/**
+ * DropZone — 拖放落点（DS 2.0 模式件，蓝图批次②「DropZone 拖放落点规范」）。
+ *
+ * 静息：2px 虚线 --ow-border-strong ＋ 圆角 --ow-radius-card(12) ＋ 透明底（贴地之物，0 影）；
+ * hover：底 --ow-hover（地面/面板档递进，§5）；
+ * 拖入手势期：边框 --ow-drop-border ＋ 底 --ow-drop-bg。
+ *
+ * 三极说明（§4）：--ow-drop-* 是状态极「拖放手势期」的语义 token（浅档 yellow-deep、
+ * 暗档 yellow），**只在指针悬着文件的这几百毫秒内亮**，落下即熄，属手势期豁免、不计全屏配额；
+ * 组件默认样式里不出现荧黄（R2：这里引的是语义 token 不是极色本体，check-ds2 的 yellow 规则
+ * 只拦 --ow-yellow/--ow-beacon/--ow-accent-dot 直写，故无需 allowlist 条目）。
+ * R1 双编码：拖入态除了变色，文案同时切到「松手放到这里」，形/文各占一样。
+ *
+ * 空态母题走 EmptyState 原语（信标 mono 母题 ＋ 一句 text-2 ＋ 可选主按钮），禁插画禁 emoji。
+ * 键盘可达：区域本身不抢 role，浏览文件由 EmptyState 里的真按钮承担。
+ */
+export interface DropZoneProps {
+  /** 落下或选中文件后回调 */
+  onFiles?: (files: File[]) => void
+  /** input accept，如 ".png,.jpg" */
+  accept?: string
+  /** 允许多选，默认 true */
+  multiple?: boolean
+  disabled?: boolean
+  /** 静息文案，一句话 */
+  message?: ReactNode
+  /** 拖入手势期文案 */
+  activeMessage?: ReactNode
+  /** 浏览按钮文案，默认「选择文件」；传 null 不渲染按钮 */
+  actionLabel?: string | null
+  /** 补充说明（格式/大小限制），text-3 一行 */
+  hint?: ReactNode
+  /** 错误一句话，人话；渲染为 InlineMessage error */
+  error?: string
+  /** 错误技术详情，mono ≤2 行 */
+  errorDetail?: string
+  /** 上传中：区域置为忙态，显示小转子 */
+  loading?: boolean
+  loadingLabel?: string
+  /** 自定义内容，替换默认空态母题 */
+  children?: ReactNode
+  className?: string
+}
+
+export function DropZone({
+  onFiles,
+  accept,
+  multiple = true,
+  disabled = false,
+  message = "把文件拖到这里",
+  activeMessage = "松手放到这里",
+  actionLabel = "选择文件",
+  hint,
+  error,
+  errorDetail,
+  loading = false,
+  loadingLabel = "正在上传",
+  children,
+  className,
+}: DropZoneProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const dragDepth = useRef(0)
+  const [dragging, setDragging] = useState(false)
+  const busy = disabled || loading
+
+  const browse = useCallback(() => {
+    if (busy) return
+    inputRef.current?.click()
+  }, [busy])
+
+  const emit = useCallback(
+    (list: FileList | null) => {
+      if (!list || list.length === 0) return
+      onFiles?.(Array.from(list))
+    },
+    [onFiles],
+  )
+
+  const onDragEnter = (e: DragEvent<HTMLDivElement>) => {
+    if (busy) return
+    e.preventDefault()
+    dragDepth.current += 1
+    setDragging(true)
+  }
+
+  const onDragOver = (e: DragEvent<HTMLDivElement>) => {
+    if (busy) return
+    e.preventDefault()
+  }
+
+  const onDragLeave = (e: DragEvent<HTMLDivElement>) => {
+    if (busy) return
+    e.preventDefault()
+    dragDepth.current = Math.max(0, dragDepth.current - 1)
+    if (dragDepth.current === 0) setDragging(false)
+  }
+
+  const onDrop = (e: DragEvent<HTMLDivElement>) => {
+    if (busy) return
+    e.preventDefault()
+    dragDepth.current = 0
+    setDragging(false)
+    emit(e.dataTransfer?.files ?? null)
+  }
+
+  return (
+    <div data-slot="dropzone-root" className={cn("flex w-full flex-col gap-2", className)}>
+      <div
+        data-slot="dropzone"
+        data-ow-part="surface"
+        data-ow-state={cn(disabled && "disabled", loading && "loading", dragging && "dragging") || undefined}
+        aria-busy={loading || undefined}
+        onDragEnter={onDragEnter}
+        onDragOver={onDragOver}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
+        onClick={browse}
+        className={cn(
+          "flex w-full flex-col items-center justify-center gap-2 px-4 py-6 box-border",
+          "border-2 border-dashed [border-radius:var(--ow-radius-card)]",
+          "transition-[background-color,border-color,color] duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+          disabled
+            ? "cursor-not-allowed border-[color:var(--ow-disabled-border)] bg-[var(--ow-disabled-bg)] text-[color:var(--ow-disabled-text)]"
+            : // §6 忙态不留可交互反馈：browse() 已被 busy 拦住（:96），样式也必须撤掉
+              // 手型光标与 hover/press 底，否则「点了没反应」——与 disabled 分支同口径。
+              loading
+              ? "cursor-default border-[color:var(--ow-border-strong)] text-[color:var(--ow-text-2)]"
+              : dragging
+                ? "cursor-copy border-[color:var(--ow-drop-border)] bg-[var(--ow-drop-bg)] text-[color:var(--ow-text)]"
+                : error
+                  ? "cursor-pointer border-[color:var(--ow-error)] text-[color:var(--ow-text)]"
+                  : "cursor-pointer border-[color:var(--ow-border-strong)] text-[color:var(--ow-text)] hover:bg-[var(--ow-hover)] active:bg-[var(--ow-press)]",
+        )}
+      >
+        {children ??
+          (loading ? (
+            <span className="inline-flex items-center gap-2 text-ow-fs-ui text-[color:var(--ow-text-2)]">
+              <Spinner size="md" />
+              {loadingLabel}
+            </span>
+          ) : (
+            <EmptyState
+              className="gap-2 px-0 py-0"
+              markSize={32}
+              message={dragging ? activeMessage : message}
+              action={
+                actionLabel === null ? undefined : (
+                  <Button
+                    variant="primary"
+                    size="md"
+                    disabled={busy}
+                    onClick={(e) => {
+                      // 区域整体可点，按钮不能让点击再冒泡回去，否则弹两次文件框
+                      e.stopPropagation()
+                      browse()
+                    }}
+                  >
+                    {actionLabel}
+                  </Button>
+                )
+              }
+            />
+          ))}
+        {hint && !loading && <p className="m-0 text-ow-fs-ui text-[color:var(--ow-text-3)]">{hint}</p>}
+        <input
+          ref={inputRef}
+          data-ow-part="input"
+          type="file"
+          accept={accept}
+          multiple={multiple}
+          disabled={busy}
+          className="hidden"
+          onClick={(e) => e.stopPropagation()}
+          onChange={(e) => {
+            emit(e.target.files)
+            e.target.value = ""
+          }}
+        />
+      </div>
+      {error && (
+        <InlineMessage variant="error" detail={errorDetail}>
+          {error}
+        </InlineMessage>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { FSelect } from "./index"
+
+/** @deprecated FSelect 已并入 primitives/Select，仅作兼容导出（内部即 Select size="lg"）。 */
+const meta = {
+  title: "Composite/FSelect (Deprecated)",
+  component: FSelect,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof FSelect>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const modelOptions = [
+  { value: "opus", label: "Claude Opus" },
+  { value: "sonnet", label: "Claude Sonnet" },
+  { value: "haiku", label: "Claude Haiku" },
+]
+
+const languageOptions = [
+  { value: "zh", label: "简体中文", sub: "Chinese" },
+  { value: "en", label: "English", sub: "English" },
+  { value: "ja", label: "日本語", sub: "Japanese" },
+  { value: "ko", label: "한국어", sub: "Korean" },
+]
+
+export const Default: Story = {
+  args: {
+    value: "sonnet",
+    options: modelOptions,
+    onChange: (value) => console.log("selected:", value),
+  },
+}
+
+export const WithSubtext: Story = {
+  args: {
+    value: "zh",
+    options: languageOptions,
+    onChange: (value) => console.log("selected:", value),
+  },
+}
+
+export const NoSelection: Story = {
+  args: {
+    value: "",
+    options: modelOptions,
+    onChange: (value) => console.log("selected:", value),
+    placeholder: "请选择模型",
+  },
+}
+
+export const ManyOptions: Story = {
+  args: {
+    value: "option-5",
+    options: Array.from({ length: 12 }, (_, i) => ({
+      value: `option-${i + 1}`,
+      label: `选项 ${i + 1}`,
+    })),
+    onChange: (value) => console.log("selected:", value),
+  },
+}

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

@@ -0,0 +1,29 @@
+import { Select, type SelectOption } from "../../primitives/Select"
+
+/**
+ * @deprecated DS 2.0 起 FSelect 并入 primitives/Select，请直接使用
+ * `Select`（`SelectOption` 与本类型同构）。
+ */
+export type FSelectOption = SelectOption
+
+/**
+ * @deprecated DS 2.0 起 FSelect 并入 primitives/Select，请直接使用
+ * `SelectProps`（如需保持旧 40px 高度，传 `size="lg"`）。
+ */
+export interface FSelectProps {
+  value: string
+  options: FSelectOption[]
+  onChange: (value: string) => void
+  placeholder?: string
+}
+
+/**
+ * Compact anchored select used by dense desktop forms.
+ *
+ * @deprecated DS 2.0 起 FSelect 并入 primitives/Select——本组件仅作兼容
+ * 导出，内部即 `<Select size="lg" />`（40px 高，对齐旧 FSelect 度量），
+ * 旧 usePopover 私有实现已退役。新代码请直接使用 `Select`。
+ */
+export function FSelect({ value, options, onChange, placeholder = "请选择" }: FSelectProps): React.ReactElement {
+  return <Select value={value} options={options} onChange={onChange} placeholder={placeholder} size="lg" />
+}

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

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { FeedbackContextMenuView } from "./index"
+
+const meta = {
+  title: "Composite/FeedbackContextMenuView",
+  component: FeedbackContextMenuView,
+  parameters: {
+    layout: "fullscreen",
+  },
+  // 展示壳：.feedback-context-menu 是 position:fixed，配 layout:"centered" 时故事根盒
+  // 因脱流而零尺寸，快照里只剩一条空白竖条。壳给出实际尺寸，并用 transform 造一个
+  // 包含块（fixed 的定位基准改成本壳），让 point{100,100} 落在壳内拍得到。
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          position: "relative",
+          transform: "translateZ(0)",
+          minWidth: 360,
+          minHeight: 260,
+          background: "var(--ow-bg)",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ["autodocs"],
+} satisfies Meta<typeof FeedbackContextMenuView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const DefaultReadMode: Story = {
+  args: {
+    point: { x: 100, y: 100 },
+    editMode: false,
+    canCopy: true,
+    canSave: true,
+    onSelect: (action) => console.log("select", action),
+  },
+}
+
+export const ReadModeNoCopy: Story = {
+  args: {
+    point: { x: 100, y: 100 },
+    editMode: false,
+    canCopy: false,
+    canSave: true,
+    onSelect: (action) => console.log("select", action),
+  },
+}
+
+export const ReadModeNoSave: Story = {
+  args: {
+    point: { x: 100, y: 100 },
+    editMode: false,
+    canCopy: true,
+    canSave: false,
+    onSelect: (action) => console.log("select", action),
+  },
+}
+
+export const EditModeAllEnabled: Story = {
+  args: {
+    point: { x: 100, y: 100 },
+    editMode: true,
+    canCut: true,
+    canCopy: true,
+    canPaste: true,
+    onSelect: (action) => console.log("select", action),
+  },
+}
+
+export const EditModeNoCut: Story = {
+  args: {
+    point: { x: 100, y: 100 },
+    editMode: true,
+    canCut: false,
+    canCopy: true,
+    canPaste: true,
+    onSelect: (action) => console.log("select", action),
+  },
+}
+
+export const EditModeNoPaste: Story = {
+  args: {
+    point: { x: 100, y: 100 },
+    editMode: true,
+    canCut: true,
+    canCopy: true,
+    canPaste: false,
+    onSelect: (action) => console.log("select", action),
+  },
+}
+
+export const EditModeAllDisabled: Story = {
+  args: {
+    point: { x: 100, y: 100 },
+    editMode: true,
+    canCut: false,
+    canCopy: false,
+    canPaste: false,
+    onSelect: (action) => console.log("select", action),
+  },
+}

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

@@ -0,0 +1,51 @@
+import { MenuSurface } from "../../primitives/Menu"
+import { ClipboardList, Copy, Cut, Download, Mail } from "../Icons"
+
+export type FeedbackContextMenuAction = "cut" | "copy" | "paste" | "save" | "feedback"
+
+export interface FeedbackContextMenuViewProps {
+  point: { x: number; y: number }
+  editMode?: boolean
+  canCut?: boolean
+  canPaste?: boolean
+  canCopy?: boolean
+  canSave?: boolean
+  onSelect: (action: FeedbackContextMenuAction) => void
+}
+
+export function FeedbackContextMenuView({
+  point,
+  editMode = false,
+  canCut = false,
+  canPaste = false,
+  canCopy = false,
+  canSave = false,
+  onSelect,
+}: FeedbackContextMenuViewProps) {
+  const items = editMode
+    ? [
+        { key: "cut", label: "剪切", icon: <Cut />, disabled: !canCut },
+        { key: "copy", label: "复制", icon: <Copy />, disabled: !canCopy },
+        { key: "paste", label: "粘贴", icon: <ClipboardList />, disabled: !canPaste },
+      ]
+    : [
+        ...(canCopy ? [{ key: "copy", label: "复制", icon: <Copy /> }] : []),
+        ...(canSave ? [{ key: "save", label: "下载", icon: <Download /> }] : []),
+        { key: "feedback", label: "反馈", icon: <Mail /> },
+      ]
+
+  return (
+    <div
+      className="feedback-context-menu"
+      style={{ left: point.x, top: point.y }}
+      onClick={(event) => event.stopPropagation()}
+    >
+      <MenuSurface
+        width={140}
+        autoAdjust
+        items={items}
+        onSelect={(key) => onSelect(key as FeedbackContextMenuAction)}
+      />
+    </div>
+  )
+}