@orbit-work/ui 0.1.0

package/src/components/domain/desktop/DesktopPet/index.tsx

@@ -0,0 +1,591 @@
+"use client"
+
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react"
+import type { CSSProperties, PointerEvent as ReactPointerEvent } from "react"
+import type {
+  DesktopPetHandle,
+  DesktopPetProps,
+  DesktopPetSessionBubble,
+  PetAnimation,
+  PetManifest,
+  PetPosition,
+  PetToolbarItem,
+} from "../../../../types/desktop-pet"
+import {
+  CheckCircle,
+  ClipboardList,
+  Clock,
+  Close,
+  CommentPlus,
+  ErrorCircle,
+  Hand,
+  Keyboard,
+  Stop,
+} from "../../../composite/Icons"
+import { Button, Field } from "../../../primitives"
+
+const CELL = { width: 192, height: 208 }
+/**
+ * 拼 petBaseUrl 前先看 path 是不是已经自成一条 URL——data: / blob: / http(s): / 以 `/` 开头
+ * 的绝对路径都原样返回。故事用内联 data-uri 图集时若照旧拼前缀，会拼出
+ * `/uidocs/pets/ow-pet/data:image/png;...` 这种必然 404 的路径。
+ */
+function resolvePetAsset(baseUrl: string, path: string): string {
+  return /^(?:[a-z][a-z\d+\-.]*:|\/)/i.test(path) ? path : `${baseUrl}/${path}`
+}
+const MAX_DESKTOP_PET_SCALE = 1.5
+const VISIBLE_ALPHA_THRESHOLD = 8
+
+type SpriteBounds = { x: number; y: number; width: number; height: number }
+type SpriteLayout = NonNullable<PetManifest["spritesheetLayout"]>
+
+const spriteBoundsCache = new Map<string, Promise<SpriteBounds>>()
+
+function detectVisibleSpriteBounds(spriteUrl: string, layout: SpriteLayout): Promise<SpriteBounds> {
+  const cacheKey = `${spriteUrl}:${layout.columns}:${layout.rows}:${layout.cellWidth}:${layout.cellHeight}`
+  const cached = spriteBoundsCache.get(cacheKey)
+  if (cached) return cached
+  const detection = (async () => {
+    const response = await fetch(spriteUrl)
+    if (!response.ok) throw new Error(`Failed to load pet spritesheet: ${response.status}`)
+    const bitmap = await createImageBitmap(await response.blob())
+    const canvas = document.createElement("canvas")
+    canvas.width = layout.cellWidth
+    canvas.height = layout.cellHeight
+    const context = canvas.getContext("2d", { willReadFrequently: true })
+    if (!context) throw new Error("Unable to inspect pet spritesheet")
+    let minX = layout.cellWidth
+    let minY = layout.cellHeight
+    let maxX = -1
+    let maxY = -1
+    try {
+      for (let row = 0; row < layout.rows; row += 1) {
+        for (let column = 0; column < layout.columns; column += 1) {
+          context.clearRect(0, 0, layout.cellWidth, layout.cellHeight)
+          context.drawImage(
+            bitmap,
+            column * layout.cellWidth,
+            row * layout.cellHeight,
+            layout.cellWidth,
+            layout.cellHeight,
+            0,
+            0,
+            layout.cellWidth,
+            layout.cellHeight,
+          )
+          const pixels = context.getImageData(0, 0, layout.cellWidth, layout.cellHeight).data
+          for (let y = 0; y < layout.cellHeight; y += 1) {
+            for (let x = 0; x < layout.cellWidth; x += 1) {
+              if (pixels[(y * layout.cellWidth + x) * 4 + 3]! <= VISIBLE_ALPHA_THRESHOLD) continue
+              minX = Math.min(minX, x)
+              minY = Math.min(minY, y)
+              maxX = Math.max(maxX, x)
+              maxY = Math.max(maxY, y)
+            }
+          }
+        }
+      }
+    } finally {
+      bitmap.close()
+    }
+    return maxX >= minX && maxY >= minY
+      ? { x: minX, y: minY, width: maxX - minX + 1, height: maxY - minY + 1 }
+      : { x: 0, y: 0, width: layout.cellWidth, height: layout.cellHeight }
+  })().catch((error) => {
+    spriteBoundsCache.delete(cacheKey)
+    throw error
+  })
+  spriteBoundsCache.set(cacheKey, detection)
+  return detection
+}
+const ROWS: Record<PetAnimation, { row: number; frames: number; durationMs: number }> = {
+  idle: { row: 0, frames: 6, durationMs: 1100 },
+  "running-right": { row: 1, frames: 8, durationMs: 1060 },
+  "running-left": { row: 2, frames: 8, durationMs: 1060 },
+  waving: { row: 3, frames: 4, durationMs: 700 },
+  jumping: { row: 4, frames: 5, durationMs: 840 },
+  failed: { row: 5, frames: 8, durationMs: 1220 },
+  waiting: { row: 6, frames: 6, durationMs: 1010 },
+  running: { row: 7, frames: 6, durationMs: 820 },
+  review: { row: 8, frames: 6, durationMs: 1030 },
+}
+
+function positionStyle(position: PetPosition): CSSProperties {
+  if (typeof position === "object") return { left: position.x, top: position.y }
+  return { [position.includes("bottom") ? "bottom" : "top"]: 24, [position.includes("right") ? "right" : "left"]: 24 }
+}
+
+/**
+ * R3：动作条要朝画布内侧展开，所以非 native 档也得知道自己贴在哪个角。
+ * 规则：贴边写法（right/bottom 有值）直接认边；坐标写法（拖拽后或 position={{x,y}}）
+ * 按是否越过视口中线判断。结果写进 data-anchor-horizontal / data-anchor-vertical，
+ * 由 styles/desktop-pet.css 决定竖排挂宠物哪一侧、从哪条边起算，避免被视口裁半截。
+ */
+function resolveAnchor(pos: CSSProperties): { horizontal: "left" | "right"; vertical: "top" | "bottom" } {
+  const viewportWidth = typeof window === "undefined" ? 0 : window.innerWidth
+  const viewportHeight = typeof window === "undefined" ? 0 : window.innerHeight
+  return {
+    horizontal:
+      pos.right !== undefined || (typeof pos.left === "number" && pos.left * 2 > viewportWidth) ? "right" : "left",
+    vertical:
+      pos.bottom !== undefined || (typeof pos.top === "number" && pos.top * 2 > viewportHeight) ? "bottom" : "top",
+  }
+}
+
+/**
+ * 会话状态位。running 档**不出图标**：§9 里运行态＝一颗 --ow-progress-fill 实点（禁自转），
+ * 那颗点由 desktop-pet.css 的 `[data-status="running"] … ::before` 画。
+ * 原先这里仍渲一枚 Loader、再由 CSS `svg { display: none }` 藏掉——V1 自转 spinner 退役时
+ * 只在 CSS 端遮住、没在 TSX 端摘干净，图标每次照进 DOM。R2 一并摘除。
+ */
+function SessionStatus({ status }: { status: DesktopPetSessionBubble["status"] }) {
+  const statusView = {
+    running: { label: "执行中", icon: null },
+    waiting: { label: "等待输入", icon: Clock },
+    review: { label: "待查看", icon: ClipboardList },
+    completed: { label: "已完成", icon: CheckCircle },
+    failed: { label: "失败", icon: ErrorCircle },
+  }[status]
+  const StatusIcon = statusView.icon
+  return (
+    <span data-ow-part="session-status" title={statusView.label} role="img" aria-label={statusView.label}>
+      {StatusIcon ? <StatusIcon aria-hidden="true" /> : null}
+    </span>
+  )
+}
+
+export const DesktopPet = forwardRef<DesktopPetHandle, DesktopPetProps>(function DesktopPet(
+  {
+    petBaseUrl = "/uidocs/pets/ow-pet",
+    manifest: manifestProp,
+    animation = "idle",
+    position = "bottom-right",
+    scale = 1,
+    animationRate = 1,
+    draggable = true,
+    trackPointer = true,
+    toolbar = true,
+    defaultBubble,
+    persistKey,
+    nativeWindow = false,
+    nativeAnchor = { horizontal: "right", vertical: "bottom" },
+    onHideRequest,
+    onContextMenuRequest,
+    sessions = [],
+    onSessionFeedback,
+    onSessionStop,
+    onContentSizeChange,
+    onNativeDrag,
+    className = "",
+    style,
+    onReady,
+    onError,
+    onClick,
+    onDoubleClick,
+  },
+  ref,
+) {
+  const [manifest, setManifest] = useState<PetManifest | null>(manifestProp ?? null)
+  const [state, setState] = useState<PetAnimation>(animation)
+  const [frame, setFrame] = useState(0)
+  const [lookCell, setLookCell] = useState<{ row: number; column: number } | null>(null)
+  const [bubble, setBubble] = useState(defaultBubble ?? "")
+  const [hidden, setHidden] = useState(false)
+  const initialPosition = useMemo(() => positionStyle(position), [position])
+  const [pos, setPos] = useState<CSSProperties>(() => {
+    if (!nativeWindow && typeof window !== "undefined" && persistKey) {
+      try {
+        const saved = localStorage.getItem(persistKey)
+        if (saved) return JSON.parse(saved)
+      } catch {}
+    }
+    return initialPosition
+  })
+  const rootRef = useRef<HTMLDivElement>(null)
+  const bubbleTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const [feedbackSessionId, setFeedbackSessionId] = useState<string | null>(null)
+  const [feedbackText, setFeedbackText] = useState("")
+  const [spriteBounds, setSpriteBounds] = useState<SpriteBounds | null>(null)
+  const [spriteFailed, setSpriteFailed] = useState(false)
+
+  useEffect(() => {
+    if (manifestProp) return
+    fetch(`${petBaseUrl}/pet.json`)
+      .then((response) => {
+        if (!response.ok) throw new Error(`Failed to load pet manifest: ${response.status}`)
+        return response.json()
+      })
+      .then(setManifest)
+      .catch((error) => onError?.(error instanceof Error ? error : new Error(String(error))))
+  }, [manifestProp, petBaseUrl, onError])
+  useEffect(() => setState(animation), [animation])
+  useEffect(() => {
+    setSpriteBounds(null)
+    setSpriteFailed(false)
+    if (!manifest) return
+    const layout = manifest.spritesheetLayout ?? {
+      columns: 8,
+      rows: 11,
+      cellWidth: CELL.width,
+      cellHeight: CELL.height,
+    }
+    let active = true
+    void detectVisibleSpriteBounds(resolvePetAsset(petBaseUrl, manifest.spritesheetPath), layout)
+      .then((bounds) => {
+        if (active) setSpriteBounds(bounds)
+      })
+      // 图集取不到（404 / 解码失败）：落中性占位块，不留一块白台子
+      .catch(() => {
+        if (active) setSpriteFailed(true)
+      })
+    return () => {
+      active = false
+    }
+  }, [manifest, petBaseUrl])
+  useEffect(() => {
+    if (lookCell) return
+    const animation = ROWS[state]
+    const safeAnimationRate = Number.isFinite(animationRate) && animationRate > 0 ? animationRate : 1
+    const timer = setTimeout(
+      () => setFrame((value) => (value + 1) % animation.frames),
+      animation.durationMs / animation.frames / safeAnimationRate,
+    )
+    return () => clearTimeout(timer)
+  }, [state, frame, lookCell, animationRate])
+
+  const say = useCallback((text: string, durationMs = 3600) => {
+    setBubble(text)
+    if (bubbleTimer.current) clearTimeout(bubbleTimer.current)
+    if (durationMs > 0) bubbleTimer.current = setTimeout(() => setBubble(""), durationMs)
+  }, [])
+  const lookAt = useCallback(
+    (degrees: number | null) => {
+      if (degrees === null || !manifest?.lookDirections?.length) return setLookCell(null)
+      const normalized = ((degrees % 360) + 360) % 360
+      const distance = (degree: number) => Math.min(Math.abs(degree - normalized), 360 - Math.abs(degree - normalized))
+      const nearest = manifest.lookDirections.reduce((best, item) =>
+        distance(item.degrees) < distance(best.degrees) ? item : best,
+      )
+      setLookCell({ row: nearest.rowIndex, column: nearest.columnIndex })
+    },
+    [manifest],
+  )
+  const reset = useCallback(() => {
+    setPos(initialPosition)
+    if (persistKey) localStorage.removeItem(persistKey)
+  }, [initialPosition, persistKey])
+  const handle = useMemo<DesktopPetHandle>(
+    () => ({
+      playAnimation: (value) => {
+        setLookCell(null)
+        setFrame(0)
+        setState(value)
+      },
+      lookAt,
+      say,
+      hide: () => {
+        if (nativeWindow) onHideRequest?.()
+        else setHidden(true)
+      },
+      show: () => setHidden(false),
+      reset,
+    }),
+    [lookAt, say, reset, nativeWindow, onHideRequest],
+  )
+  useImperativeHandle(ref, () => handle, [handle])
+  useEffect(() => {
+    if (manifest) onReady?.(handle, manifest)
+  }, [manifest, handle, onReady])
+  useEffect(() => {
+    const root = rootRef.current
+    if (!root || !onContentSizeChange) return
+    const report = () => {
+      const bounds = root.getBoundingClientRect()
+      onContentSizeChange({ width: Math.ceil(bounds.width), height: Math.ceil(bounds.height) })
+    }
+    report()
+    if (typeof ResizeObserver === "undefined") return
+    const observer = new ResizeObserver(report)
+    observer.observe(root)
+    return () => observer.disconnect()
+  }, [manifest, onContentSizeChange])
+
+  const drag = useRef<{ x: number; y: number; left: number; top: number } | null>(null)
+  const nativeDrag = useRef<{ pointerId: number; startX: number; startY: number; started: boolean } | null>(null)
+  const suppressActivation = useRef(false)
+  const pointerDown = (event: ReactPointerEvent) => {
+    if (!draggable || event.button !== 0) return
+    suppressActivation.current = false
+    if (nativeWindow) {
+      nativeDrag.current = { pointerId: event.pointerId, startX: event.screenX, startY: event.screenY, started: false }
+      event.currentTarget.setPointerCapture(event.pointerId)
+      return
+    }
+    const root = rootRef.current
+    const rect = root?.getBoundingClientRect()
+    if (!root || !rect) return
+    const parent = root.offsetParent as HTMLElement | null
+    const parentRect = parent?.getBoundingClientRect()
+    const fixed = window.getComputedStyle(root).position === "fixed"
+    drag.current = {
+      x: event.clientX,
+      y: event.clientY,
+      left: fixed
+        ? rect.left
+        : rect.left - (parentRect?.left ?? 0) - (parent?.clientLeft ?? 0) + (parent?.scrollLeft ?? 0),
+      top: fixed ? rect.top : rect.top - (parentRect?.top ?? 0) - (parent?.clientTop ?? 0) + (parent?.scrollTop ?? 0),
+    }
+    event.currentTarget.setPointerCapture(event.pointerId)
+  }
+  const pointerMove = (event: ReactPointerEvent) => {
+    const native = nativeDrag.current
+    if (native && native.pointerId === event.pointerId) {
+      if (!native.started && Math.hypot(event.screenX - native.startX, event.screenY - native.startY) >= 4) {
+        native.started = true
+        suppressActivation.current = true
+        onNativeDrag?.({ phase: "start", screenX: native.startX, screenY: native.startY })
+      }
+      if (native.started) onNativeDrag?.({ phase: "move", screenX: event.screenX, screenY: event.screenY })
+      return
+    }
+    if (drag.current) {
+      setPos({
+        left: Math.round(drag.current.left + event.clientX - drag.current.x),
+        top: Math.round(drag.current.top + event.clientY - drag.current.y),
+      })
+      return
+    }
+    if (trackPointer && rootRef.current) {
+      const rect = rootRef.current.getBoundingClientRect()
+      const dx = event.clientX - (rect.left + rect.width / 2)
+      const dy = event.clientY - (rect.top + rect.height / 2)
+      if (Math.hypot(dx, dy) > 28) lookAt(((Math.atan2(dx, -dy) * 180) / Math.PI + 360) % 360)
+      else lookAt(null)
+    }
+  }
+  const pointerUp = (event: ReactPointerEvent) => {
+    const native = nativeDrag.current
+    if (native && native.pointerId === event.pointerId) {
+      if (native.started) onNativeDrag?.({ phase: "end", screenX: event.screenX, screenY: event.screenY })
+      nativeDrag.current = null
+      return
+    }
+    if (drag.current && persistKey) localStorage.setItem(persistKey, JSON.stringify(pos))
+    drag.current = null
+  }
+  const activate = (callback?: () => void) => {
+    if (!suppressActivation.current) callback?.()
+  }
+
+  const rootPosition = nativeWindow ? {} : pos
+  const anchor = nativeWindow ? nativeAnchor : resolveAnchor(pos)
+  if (!manifest)
+    return (
+      <div
+        data-slot="desktop-pet"
+        data-ow-state="loading"
+        data-ow-variant={nativeWindow ? "native" : undefined}
+        className={className}
+        style={{ ...rootPosition, ...style }}
+      />
+    )
+  const layout = manifest.spritesheetLayout ?? { columns: 8, rows: 11, cellWidth: CELL.width, cellHeight: CELL.height }
+  const visibleBounds = spriteBounds ?? { x: 0, y: 0, width: layout.cellWidth, height: layout.cellHeight }
+  const cell = lookCell ?? { row: ROWS[state].row, column: frame }
+  const spriteUrl = resolvePetAsset(petBaseUrl, manifest.spritesheetPath)
+  const stageStyle: CSSProperties = {
+    position: "relative",
+    width: Math.round(visibleBounds.width * scale),
+    height: Math.round(visibleBounds.height * scale),
+  }
+  const sessionsStyle: CSSProperties | undefined = nativeWindow
+    ? { width: Math.round(visibleBounds.width * MAX_DESKTOP_PET_SCALE) }
+    : undefined
+  const spriteStyle: CSSProperties = {
+    position: "absolute",
+    left: -Math.round(visibleBounds.x * scale),
+    top: -Math.round(visibleBounds.y * scale),
+    width: layout.cellWidth,
+    height: layout.cellHeight,
+    backgroundImage: `url(${spriteUrl})`,
+    backgroundRepeat: "no-repeat",
+    backgroundSize: `${layout.columns * layout.cellWidth}px ${layout.rows * layout.cellHeight}px`,
+    backgroundPosition: `${-cell.column * layout.cellWidth}px ${-cell.row * layout.cellHeight}px`,
+    transform: `scale(${scale})`,
+    transformOrigin: "top left",
+  }
+  const items: PetToolbarItem[] =
+    toolbar === true
+      ? [
+          // §7 图标族：默认工具条走 composite/Icons 单色字形，不用 emoji 字面量。
+          {
+            key: "wave",
+            label: "打招呼",
+            icon: <Hand aria-hidden="true" />,
+            onClick: (pet) => pet.playAnimation("waving"),
+          },
+          {
+            key: "work",
+            label: "工作",
+            icon: <Keyboard aria-hidden="true" />,
+            onClick: (pet) => pet.playAnimation("running"),
+          },
+          { key: "hide", label: "隐藏", icon: <Close aria-hidden="true" />, onClick: (pet) => pet.hide() },
+        ]
+      : Array.isArray(toolbar)
+        ? toolbar
+        : []
+  const submitFeedback = (sessionId: string) => {
+    const text = feedbackText.trim()
+    if (!text) return
+    onSessionFeedback?.(sessionId, text)
+    setFeedbackText("")
+    setFeedbackSessionId(null)
+  }
+
+  return (
+    <div
+      ref={rootRef}
+      data-slot="desktop-pet"
+      data-ow-variant={nativeWindow ? "native" : undefined}
+      className={className}
+      data-hidden={hidden}
+      data-anchor-horizontal={anchor.horizontal}
+      data-anchor-vertical={anchor.vertical}
+      style={{ ...rootPosition, ...style }}
+      onPointerMove={pointerMove}
+      onPointerUp={pointerUp}
+      onPointerCancel={pointerUp}
+      onPointerLeave={() => !drag.current && lookAt(null)}
+    >
+      {sessions.length > 0 && (
+        <div data-ow-part="sessions" style={sessionsStyle} aria-label="正在执行的任务">
+          {sessions.map((session) => {
+            const terminal = session.status === "completed" || session.status === "failed"
+            const editing = feedbackSessionId === session.sessionId
+            return (
+              <section key={session.sessionId} data-ow-part="session" data-status={session.status}>
+                <div data-ow-part="session-main">
+                  <div data-ow-part="session-content">
+                    <div data-ow-part="session-heading">
+                      <SessionStatus status={session.status} />
+                      <strong title={session.title}>{session.title}</strong>
+                    </div>
+                    {session.text && <p title={session.text}>{session.text}</p>}
+                  </div>
+                  {!terminal && (
+                    <div data-ow-part="session-actions">
+                      {session.canFeedback !== false && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          type="button"
+                          data-ow-part="session-action"
+                          title="反馈"
+                          aria-label="反馈"
+                          aria-expanded={editing}
+                          icon={<CommentPlus aria-hidden="true" />}
+                          onClick={() => {
+                            setFeedbackSessionId(editing ? null : session.sessionId)
+                            setFeedbackText("")
+                          }}
+                        />
+                      )}
+                      {session.canStop !== false && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          type="button"
+                          data-ow-part="session-action"
+                          data-ow-variant="stop"
+                          title="停止"
+                          aria-label="停止"
+                          icon={<Stop aria-hidden="true" />}
+                          onClick={() => onSessionStop?.(session.sessionId)}
+                        />
+                      )}
+                    </div>
+                  )}
+                </div>
+                {editing && (
+                  <div data-ow-part="feedback">
+                    <Field
+                      autoFocus
+                      standalone={false}
+                      value={feedbackText}
+                      maxLength={500}
+                      placeholder="向该任务发送反馈"
+                      aria-label={`给 ${session.title} 的反馈`}
+                      onChange={setFeedbackText}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter" && !event.nativeEvent.isComposing) submitFeedback(session.sessionId)
+                        if (event.key === "Escape") setFeedbackSessionId(null)
+                      }}
+                    />
+                    <Button
+                      variant="primary"
+                      size="sm"
+                      type="button"
+                      disabled={!feedbackText.trim()}
+                      onClick={() => submitFeedback(session.sessionId)}
+                    >
+                      发送
+                    </Button>
+                  </div>
+                )}
+              </section>
+            )
+          })}
+        </div>
+      )}
+      {items.length > 0 && (
+        <div data-ow-part="toolbar">
+          {items.map((item) => (
+            <Button
+              key={item.key}
+              variant="ghost"
+              size="sm"
+              type="button"
+              title={item.label}
+              icon={item.icon}
+              onClick={() => item.onClick(handle)}
+            />
+          ))}
+        </div>
+      )}
+      <div
+        data-ow-part="stage"
+        style={stageStyle}
+        onPointerDown={pointerDown}
+        onContextMenu={(event) => {
+          event.preventDefault()
+          onContextMenuRequest?.()
+        }}
+        onClick={() => activate(onClick)}
+        onDoubleClick={() => activate(onDoubleClick)}
+        role="img"
+        aria-label={manifest.displayName}
+      >
+        {spriteFailed ? (
+          /* 图集缺失/404：不留白台子，落一块中性占位——surface-2 面 ＋ 1px 边 ＋ r12 ＋
+             居中信标构型（几何取自 EmptyState 母题的静止收笔姿态，单色 text-3，不占任何极）。
+             度量与形由 desktop-pet.css 的 [data-ow-part="sprite-fallback"] 承担。 */
+          <div data-ow-part="sprite-fallback" title={manifest.displayName}>
+            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <circle cx="12" cy="12" r="8" stroke="currentColor" strokeWidth="1.5" opacity="0.45" />
+              <circle cx="12" cy="4" r="2.25" fill="currentColor" />
+              <circle cx="17.6" cy="7.2" r="1.5" fill="currentColor" opacity="0.68" />
+              <circle cx="19.4" cy="13" r="1.1" fill="currentColor" opacity="0.45" />
+              <circle cx="15.8" cy="17.8" r="0.8" fill="currentColor" opacity="0.25" />
+            </svg>
+          </div>
+        ) : (
+          <div data-ow-part="sprite" style={spriteStyle} />
+        )}
+      </div>
+      <div data-ow-part="bubble" data-visible={!!bubble}>
+        {bubble}
+      </div>
+    </div>
+  )
+})