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

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

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

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

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

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

@@ -1,51 +0,0 @@
-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>
-  )
-}