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

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

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