@orbit-work/ui 0.1.0

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

@@ -0,0 +1,333 @@
+"use client"
+
+import { type FormEventHandler, type ReactNode, useCallback, useEffect, useId, useRef } from "react"
+import { createPortal } from "react-dom" // ui-imports-guard-disable-line
+import { FOCUSABLE, trapTab } from "../../../lib/focusTrap"
+import { cn } from "../../../lib/utils"
+import { Button } from "../../primitives"
+import { Close, WarningTriangle } from "../Icons"
+
+export type DialogVariant = "default" | "danger"
+/** 头部图标底：plain＝裸图标（默认）；其余＝功能色 tint 徽章（仅状态语境用，§7 图标色规） */
+export type DialogIconTone = "plain" | "info" | "warning" | "error"
+
+const ICON_TONE_CLASS: Record<Exclude<DialogIconTone, "plain">, string> = {
+  info: "bg-[var(--ow-info-tint)] text-[color:var(--ow-info-on-tint)]",
+  warning: "bg-[var(--ow-warning-tint)] text-[color:var(--ow-warning-on-tint)]",
+  error: "bg-[var(--ow-error-tint)] text-[color:var(--ow-error-on-tint)]",
+}
+
+/** 可聚焦元素选择器 —— 焦点圈闭环用（§6 focus-visible 必达且不得逃出模态）。 */
+
+export type DialogProps = {
+  /** 是否打开 */
+  open: boolean
+  /** 变体：danger＝破坏性确认（tint 图标徽章＋error 主按钮） */
+  variant?: DialogVariant
+  /** 标题 */
+  title?: ReactNode
+  /** 标题下的副文案 */
+  subtitle?: ReactNode
+  /** 标题前的图标；danger 变体缺省用告警三角 */
+  icon?: ReactNode
+  /** 图标底档；默认 danger 变体走 error 徽章，其余裸图标 */
+  iconTone?: DialogIconTone
+  /** 正文 */
+  children?: ReactNode
+  /** 脚部动作槽；给了就完全接管脚部（覆盖 onConfirm 便捷档） */
+  actions?: ReactNode
+  /** 便捷确认档：不传 actions 时渲染「取消＋确认」，确认按钮随 variant 取 primary/danger */
+  onConfirm?: () => void
+  confirmLabel?: ReactNode
+  cancelLabel?: ReactNode
+  confirmDisabled?: boolean
+  confirmLoading?: boolean
+  /** 遮罩点击/关闭钮/Escape 的统一出口 */
+  onClose?: () => void
+  /** 右上角关闭钮 */
+  closable?: boolean
+  /** 点遮罩关闭（默认 true） */
+  closeOnOverlayClick?: boolean
+  /** Escape 关闭（默认 true） */
+  closeOnEscape?: boolean
+  /** 宽度（三槽档默认 440；bare 档默认不设，交给内容/调用方 CSS） */
+  width?: number | string
+  /** 关掉默认内边距 —— 自管间距的面板内容用 */
+  padded?: boolean
+  /**
+   * 裸壳档：只出遮罩＋立面，不渲染头/体/脚三槽，内容自带全部结构。
+   * 供 OrbitworkModal 兼容层与自带 chrome 的预览壳使用。
+   */
+  bare?: boolean
+  /** 给了就把立面渲染成 <form>，脚部提交钮可用 type="submit" */
+  onSubmit?: FormEventHandler<HTMLFormElement>
+  /** 无 title 时的无障碍名 */
+  ariaLabel?: string
+  className?: string
+  overlayClassName?: string
+  /**
+   * 是否 portal 到 `document.body`（缺省 true）。
+   * false＝就地渲染整棵遮罩树：给 storybook 画框内取证用（画框自带 transform，
+   * 会把 `position: fixed` 的遮罩收进画框），也给需要弹层留在自己层叠上下文里的宿主用。
+   */
+  portal?: boolean
+  /**
+   * 是否把立面钉进视口（缺省 true）：写 `max-w-[90vw] max-h-[85vh]`，bare 档另加 `overflow-auto`。
+   * false＝这三样一概不写，尺寸上限与滚动全交给 `className`／消费方 CSS
+   *（定尺弹窗——如设置的 960×640 ＋ 右栏内滚——走这一档，免得两条上限打架、滚出第二条滚动条）。
+   */
+  fitViewport?: boolean
+}
+
+/**
+ * Dialog —— DS 2.0 唯一模态基座（合并 OrbitworkModal）。
+ *
+ * 立面按 §5：`--ow-scrim` 遮罩 ＋ `--ow-shadow-modal` ＋ 1px `--ow-border`，
+ * z 取 `--ow-z-modal`；圆角按 §7 取 `--ow-radius-modal`(16)。
+ * 动效按 §9：唯一缓动 `--ow-ease-beacon`，遮罩 200ms / 面板 320ms 纯淡入
+ * （禁缩放位移）；`.ow-motion` 使 prefers-reduced-motion 下静态入场。
+ * 行为：Escape 关闭、Tab 焦点圈闭环、关闭后焦点还给触发元素。
+ * 落点：缺省 portal 到 `document.body`；`portal={false}` 就地出树（画框取证／宿主自管层叠）。
+ * 尺寸：缺省 `fitViewport` 把立面钉进视口（90vw/85vh）；`fitViewport={false}` 交给 className 定尺。
+ * R3 中性件——不含任何信标/荧黄元素。
+ */
+export function Dialog({
+  open,
+  variant = "default",
+  title,
+  subtitle,
+  icon,
+  iconTone,
+  children,
+  actions,
+  onConfirm,
+  confirmLabel = "确认",
+  cancelLabel = "取消",
+  confirmDisabled = false,
+  confirmLoading = false,
+  onClose,
+  closable = true,
+  closeOnOverlayClick = true,
+  closeOnEscape = true,
+  width,
+  padded = true,
+  bare = false,
+  onSubmit,
+  ariaLabel,
+  className = "",
+  overlayClassName = "",
+  portal = true,
+  fitViewport = true,
+}: DialogProps) {
+  const surfaceRef = useRef<HTMLElement | null>(null)
+  const restoreRef = useRef<HTMLElement | null>(null)
+  // 回调 ref：同一份状态既挂 <div> 也挂 <form>（onSubmit 档），避免两套 ref 类型。
+  const setSurface = useCallback((node: HTMLElement | null) => {
+    surfaceRef.current = node
+  }, [])
+  const reactId = useId()
+  const titleId = `${reactId}-title`
+  const descId = `${reactId}-desc`
+
+  const requestClose = useCallback(() => {
+    onClose?.()
+  }, [onClose])
+
+  // Escape 出口 ＋ Tab 焦点圈闭环（捕获阶段，弹层内焦点不外泄）。
+  useEffect(() => {
+    if (!open) return undefined
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && closeOnEscape) {
+        event.stopPropagation()
+        requestClose()
+        return
+      }
+      if (event.key !== "Tab") return
+      const surface = surfaceRef.current
+      if (!surface) return
+      trapTab(event, surface)
+    }
+    document.addEventListener("keydown", onKeyDown, true)
+    return () => document.removeEventListener("keydown", onKeyDown, true)
+  }, [open, closeOnEscape, requestClose])
+
+  // 入场取焦（自带 autofocus / data-autofocus 的内容优先），离场把焦点还给触发元素。
+  // 消费方要指定入场焦点，用 `data-autofocus` 而不是 React 的 `autoFocus` prop：
+  // React 不会把 autoFocus 写成 DOM 属性，而是在 commit 阶段直接 .focus()——那发生在
+  // 本 effect 之前，等这里读 activeElement 时焦点已在立面内，还焦目标就丢了（关闭后回不到触发元素）。
+  useEffect(() => {
+    if (!open) return undefined
+    restoreRef.current = (document.activeElement as HTMLElement | null) ?? null
+    const surface = surfaceRef.current
+    if (surface && !surface.contains(document.activeElement)) {
+      const target =
+        surface.querySelector<HTMLElement>("[autofocus],[data-autofocus]") ??
+        surface.querySelector<HTMLElement>(FOCUSABLE)
+      ;(target ?? surface).focus()
+    }
+    return () => {
+      restoreRef.current?.focus?.()
+    }
+  }, [open])
+
+  if (!open) return null
+  // 只有 portal 档需要真实 document；就地渲染档在 SSR 下照常出树。
+  if (portal && typeof document === "undefined") return null
+
+  const hasHeader = !bare && (title !== undefined || (closable && !!onClose))
+  const showConfirmRow = !bare && !actions && !!onConfirm
+  const hasFooter = !bare && (!!actions || showConfirmRow)
+  const headerIcon = icon ?? (variant === "danger" ? <WarningTriangle aria-hidden="true" /> : null)
+  const tone: DialogIconTone = iconTone ?? (variant === "danger" ? "error" : "plain")
+
+  const surfaceClass = cn(
+    "relative box-border outline-none",
+    // fitViewport 档才把立面钉进视口；false 时上限与自滚全交给 className（定尺弹窗用）。
+    fitViewport && "max-w-[90vw] max-h-[85vh]",
+    // 裸壳档保留旧 OrbitworkModal 的块级+自滚布局，内容自带 chrome；三槽档用列式弹性布局。
+    bare ? fitViewport && "overflow-auto" : "flex flex-col overflow-hidden",
+    "bg-[var(--ow-popover-bg)] [border-radius:var(--ow-radius-modal)]",
+    "border border-[color:var(--ow-border)] shadow-[var(--ow-shadow-modal)]",
+    "animate-[fade-in_var(--ow-dur-3)_var(--ow-ease-beacon)]",
+    className,
+  )
+  const resolvedWidth = width ?? (bare ? undefined : 440)
+  const surfaceStyle: React.CSSProperties = {}
+  if (resolvedWidth !== undefined) surfaceStyle.width = resolvedWidth
+  if (!bare) surfaceStyle.padding = padded ? "var(--ow-space-6, 24px)" : 0
+
+  const body = (
+    <>
+      {hasHeader && (
+        <div data-slot="dialog-header" className="flex items-start justify-between gap-3 mb-4 flex-shrink-0">
+          <div className="flex-1 min-w-0 flex items-start gap-3">
+            {headerIcon && (
+              <span
+                data-ow-part="icon"
+                data-ow-tone={tone}
+                className={cn(
+                  "flex-[0_0_auto] inline-flex items-center justify-center",
+                  tone === "plain"
+                    ? "w-5 h-5 text-[color:var(--ow-text-2)] [&>svg]:w-5 [&>svg]:h-5"
+                    : cn(
+                        // §7 形状表：999 只留给带状态点/计数的 chip 与真圆件；
+                        // 头部图标徽章与页头图标钮同口径，落 8px 行动档。
+                        "w-8 h-8 [border-radius:var(--ow-radius-action)] [&>svg]:w-4 [&>svg]:h-4",
+                        ICON_TONE_CLASS[tone],
+                      ),
+                )}
+              >
+                {headerIcon}
+              </span>
+            )}
+            <div className="flex-1 min-w-0">
+              {title !== undefined && (
+                <div
+                  id={titleId}
+                  data-ow-part="title"
+                  className="text-[color:var(--ow-text)] font-semibold text-ow-fs-subtitle leading-[1.3] font-[family-name:var(--ow-font-sans)]"
+                >
+                  {title}
+                </div>
+              )}
+              {subtitle !== undefined && (
+                <div
+                  id={descId}
+                  data-ow-part="subtitle"
+                  className="mt-1 text-[color:var(--ow-text-3)] font-normal text-ow-fs-ui leading-[1.4] font-[family-name:var(--ow-font-sans)]"
+                >
+                  {subtitle}
+                </div>
+              )}
+            </div>
+          </div>
+          {closable && onClose && (
+            <Button
+              variant="ghost"
+              size="md"
+              type="button"
+              data-ow-part="close"
+              icon={<Close />}
+              aria-label="关闭"
+              onClick={requestClose}
+            />
+          )}
+        </div>
+      )}
+      <div
+        data-slot="dialog-body"
+        className="flex-1 min-h-0 overflow-y-auto text-[color:var(--ow-text-2)] font-normal text-ow-fs-body leading-6 font-[family-name:var(--ow-font-sans)]"
+      >
+        {children}
+      </div>
+      {hasFooter && (
+        <div data-slot="dialog-actions" className="flex items-center justify-end gap-3 mt-5 flex-shrink-0">
+          {actions ?? (
+            <>
+              {onClose && (
+                <Button variant="secondary" type="button" onClick={requestClose}>
+                  {cancelLabel}
+                </Button>
+              )}
+              <Button
+                variant={variant === "danger" ? "danger" : "primary"}
+                type="button"
+                loading={confirmLoading}
+                disabled={confirmDisabled}
+                onClick={onConfirm}
+              >
+                {confirmLabel}
+              </Button>
+            </>
+          )}
+        </div>
+      )}
+    </>
+  )
+
+  const surfaceProps = {
+    "data-slot": "dialog",
+    "data-ow-part": "surface",
+    "data-ow-variant": variant,
+    role: "dialog",
+    "aria-modal": true as const,
+    "aria-labelledby": title !== undefined ? titleId : undefined,
+    "aria-describedby": subtitle !== undefined ? descId : undefined,
+    "aria-label": title === undefined ? ariaLabel : undefined,
+    tabIndex: -1,
+    className: surfaceClass,
+    style: surfaceStyle,
+  }
+
+  const content = bare ? children : body
+
+  const overlay = (
+    <div
+      data-slot="dialog-overlay"
+      data-ow-part="overlay"
+      className={cn(
+        "ow-motion fixed inset-0 flex items-center justify-center p-4",
+        "z-[var(--ow-z-modal)] bg-[var(--ow-scrim)]",
+        "animate-[fade-in_var(--ow-dur-2)_var(--ow-ease-beacon)]",
+        overlayClassName,
+      )}
+      onMouseDown={(event) => {
+        if (!closeOnOverlayClick) return
+        if (event.target !== event.currentTarget) return
+        requestClose()
+      }}
+    >
+      {onSubmit ? (
+        <form {...surfaceProps} ref={setSurface} onSubmit={onSubmit}>
+          {content}
+        </form>
+      ) : (
+        <div {...surfaceProps} ref={setSurface}>
+          {content}
+        </div>
+      )}
+    </div>
+  )
+
+  return portal ? createPortal(overlay, document.body) : overlay
+}

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

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { DropZone } from "./index"
+
+const meta = {
+  title: "Composite/DropZone",
+  component: DropZone,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof DropZone>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const Frame = ({ children }: { children: React.ReactNode }) => (
+  <div style={{ width: 480, maxWidth: "100%" }}>{children}</div>
+)
+
+export const Default: Story = {
+  render: () => (
+    <Frame>
+      <DropZone hint="支持 PNG、JPG、PDF，单个不超过 20 MB" />
+    </Frame>
+  ),
+}
+
+export const WithoutButton: Story = {
+  name: "只拖不选",
+  render: () => (
+    <Frame>
+      <DropZone actionLabel={null} message="把文件拖到这里" />
+    </Frame>
+  ),
+}
+
+export const DragGesture: Story = {
+  name: "拖入手势期",
+  render: () => (
+    <Frame>
+      <p style={{ margin: "0 0 8px", fontSize: "var(--ow-fs-ui, 13px)", color: "var(--ow-text-2)" }}>
+        从桌面拖一个文件进来：边框换 --ow-drop-border、底换 --ow-drop-bg，文案同时切成「松手放到这里」 （R1
+        双编码）。松手即熄，属状态极手势期豁免，不计全屏配额。
+      </p>
+      <DropZone onFiles={() => {}} />
+    </Frame>
+  ),
+}
+
+export const Loading: Story = {
+  name: "上传中",
+  render: () => (
+    <Frame>
+      <DropZone loading loadingLabel="正在上传 3 个文件" />
+    </Frame>
+  ),
+}
+
+export const ErrorState: Story = {
+  name: "错误",
+  render: () => (
+    <Frame>
+      <DropZone
+        error="这个文件太大了，换个小于 20 MB 的再试。"
+        errorDetail='{"code":"FILE_TOO_LARGE","size":"38.4MB"}'
+      />
+    </Frame>
+  ),
+}
+
+export const Disabled: Story = {
+  name: "禁用",
+  render: () => (
+    <Frame>
+      <DropZone disabled message="当前不能上传文件" />
+    </Frame>
+  ),
+}
+
+export const CustomContent: Story = {
+  name: "自定义内容",
+  render: () => (
+    <Frame>
+      <DropZone>
+        <span style={{ fontSize: "var(--ow-fs-ui, 13px)", color: "var(--ow-text-2)" }}>
+          把整个文件夹拖进来，我按目录结构导入。
+        </span>
+      </DropZone>
+    </Frame>
+  ),
+}
+
+export const DualTheme: Story = {
+  name: "双主题对照",
+  parameters: { layout: "fullscreen" },
+  render: () => (
+    <div style={{ display: "flex" }}>
+      {(["light", "dark"] as const).map((theme) => (
+        <div key={theme} data-theme={theme} style={{ flex: 1, background: "var(--ow-bg)", padding: 16 }}>
+          <DropZone hint="支持 PNG、JPG、PDF" />
+          <div style={{ height: 12 }} />
+          <DropZone disabled message="当前不能上传文件" />
+        </div>
+      ))}
+    </div>
+  ),
+}

package/src/components/composite/DropZone/DropZoneSource.test.mjs

@@ -0,0 +1,68 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+const spinner = await readFile(new URL("../../primitives/Spinner/index.tsx", import.meta.url), "utf8")
+
+// check-ds2 也扫测试文件，违规写法拼接构造，免得守卫把断言本身当成违规。
+const NO_UNIFORM_DISABLED = new RegExp(`disabled:${"opacity"}-`)
+
+test("静息落点 = 2px 虚线 --ow-border-strong + 圆角 card(12)，贴地 0 影", () => {
+  assert.match(source, /border-2 border-dashed \[border-radius:var\(--ow-radius-card\)\]/)
+  assert.match(source, /border-\[color:var\(--ow-border-strong\)\]/)
+  assert.doesNotMatch(source, /shadow-|box-shadow/)
+})
+
+test("拖入手势期用 --ow-drop-* 语义 token（状态极手势期豁免）", () => {
+  assert.match(source, /border-\[color:var\(--ow-drop-border\)\] bg-\[var\(--ow-drop-bg\)\]/)
+  // R2：组件里不得直写荧黄本体，只经语义 token 间接获得
+  assert.doesNotMatch(source, /var\(--ow-yellow|var\(--ow-beacon|var\(--ow-accent-dot/)
+})
+
+test("R1 双编码：拖入态除了变色，文案同时换成另一句", () => {
+  assert.match(source, /activeMessage = "松手放到这里"/)
+  assert.match(source, /dragging \? activeMessage : message/)
+})
+
+test("地面交互底色按 §5 递进：hover → press（非 pop 档，落点不是弹层）", () => {
+  assert.match(source, /hover:bg-\[var\(--ow-hover\)\] active:bg-\[var\(--ow-press\)\]/)
+  assert.doesNotMatch(source, /hover:bg-\[var\(--ow-hover-pop\)\]/)
+})
+
+test("状态完整性：禁用逐 token、上传中小转子、错误走 InlineMessage", () => {
+  assert.match(
+    source,
+    /border-\[color:var\(--ow-disabled-border\)\] bg-\[var\(--ow-disabled-bg\)\] text-\[color:var\(--ow-disabled-text\)\]/,
+  )
+  assert.doesNotMatch(source, NO_UNIFORM_DISABLED)
+  // W-R2：转子本体收到 primitives/Spinner（§9 唯一转子帧），本件只消费不再手抄
+  assert.match(source, /import \{ Spinner \} from "\.\.\/\.\.\/primitives\/Spinner"/)
+  assert.match(source, /<Spinner size="md" \/>/)
+  assert.doesNotMatch(source, /<svg/)
+  assert.match(spinner, /motion-safe:animate-\[ow-spin_var\(--ow-dur-spin-fast\)_linear_infinite\]/)
+  assert.match(spinner, /strokeWidth="1.5"/)
+  assert.match(source, /<InlineMessage variant="error"/)
+})
+
+// §6 状态表：忙态不得保留可交互反馈。busy=disabled||loading 已拦住 browse()，
+// 样式也必须撤掉手型光标与 hover/press 底，否则「点了没反应」。
+test("上传中＝非交互态：cursor-default，不留 hover/press 反馈", () => {
+  assert.match(
+    source,
+    /loading\s*\n?\s*\? "cursor-default border-\[color:var\(--ow-border-strong\)\] text-\[color:var\(--ow-text-2\)\]"/,
+  )
+  // hover/press 只挂在最后一支（rest 可点档）上
+  assert.equal(source.match(/hover:bg-\[var\(--ow-hover\)\]/g)?.length, 1)
+})
+
+test("空态母题走 EmptyState 原语，浏览按钮阻止冒泡（否则弹两次文件框）", () => {
+  assert.match(source, /import \{ EmptyState \} from "\.\.\/\.\.\/primitives\/EmptyState"/)
+  assert.match(source, /e\.stopPropagation\(\)\s*\n\s*browse\(\)/)
+})
+
+test("动效 ease-beacon + dur-1；任意值 var() 带类型标注", () => {
+  assert.match(source, /duration-\[var\(--ow-dur-1\)\] ease-\[var\(--ow-ease-beacon\)\]/)
+  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
+  assert.doesNotMatch(source, /font-\[var\(--ow-font-/)
+})