@orbit-work/ui 0.1.0

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

@@ -0,0 +1,337 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useEffect, useRef } from "react"
+import type { DesktopPetHandle, PetManifest } from "../../../../types/desktop-pet"
+import { PET_SPRITE_CELL, PET_SPRITE_DATA_URI, PET_SPRITE_GRID } from "./DesktopPet.fixture"
+import { DesktopPet } from "./index"
+
+const meta = {
+  title: "Desktop/DesktopPet",
+  component: DesktopPet,
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof DesktopPet>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * spritesheetPath 走内联 data-uri（见 DesktopPet.fixture.ts）：故事因此零网络请求——
+ * 原先的 "sprite.png" 会被拼成 /uidocs/pets/ow-pet/sprite.png 并 404，23 个故事全是白台子。
+ * petBaseUrl 同步置空，避免再在路径前拼一段前缀。
+ */
+const mockManifest: PetManifest = {
+  spritesheetPath: PET_SPRITE_DATA_URI,
+  spritesheetLayout: {
+    columns: PET_SPRITE_GRID.columns,
+    rows: PET_SPRITE_GRID.rows,
+    cellWidth: PET_SPRITE_CELL.width,
+    cellHeight: PET_SPRITE_CELL.height,
+  },
+  lookDirections: [
+    { degrees: 0, rowIndex: 9, columnIndex: 0 },
+    { degrees: 45, rowIndex: 9, columnIndex: 1 },
+    { degrees: 90, rowIndex: 9, columnIndex: 2 },
+    { degrees: 135, rowIndex: 9, columnIndex: 3 },
+    { degrees: 180, rowIndex: 9, columnIndex: 4 },
+    { degrees: 225, rowIndex: 9, columnIndex: 5 },
+    { degrees: 270, rowIndex: 9, columnIndex: 6 },
+    { degrees: 315, rowIndex: 9, columnIndex: 7 },
+  ],
+}
+
+export const Default: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "idle",
+    position: "bottom-right",
+    scale: 1,
+    animationRate: 1,
+    draggable: true,
+    toolbar: true,
+  },
+}
+
+export const Running: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "running",
+    position: "bottom-right",
+    scale: 1,
+    sessions: [
+      {
+        sessionId: "session-1",
+        title: "生成会议纪要",
+        text: "正在整理 9 月 1 日周会的决议与待办",
+        status: "running",
+      },
+    ],
+  },
+}
+
+export const Waiting: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "waiting",
+    position: "bottom-right",
+    scale: 1,
+    sessions: [
+      {
+        sessionId: "session-1",
+        title: "等待用户输入",
+        text: "需要你确认导出的文件命名规则",
+        status: "waiting",
+      },
+    ],
+  },
+}
+
+export const Review: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "review",
+    position: "bottom-right",
+    scale: 1,
+    sessions: [
+      {
+        sessionId: "session-1",
+        title: "代码审查结果",
+        text: "3 处改动待你查看，含 1 处接口变更",
+        status: "review",
+      },
+    ],
+  },
+}
+
+export const Completed: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "idle",
+    position: "bottom-right",
+    scale: 1,
+    sessions: [
+      {
+        sessionId: "session-1",
+        title: "任务已完成",
+        text: "报告已生成，共 12 页",
+        status: "completed",
+      },
+    ],
+  },
+}
+
+export const Failed: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "failed",
+    position: "bottom-right",
+    scale: 1,
+    sessions: [
+      {
+        sessionId: "session-1",
+        title: "执行失败",
+        text: "连接远端仓库超时，可以重试一次",
+        status: "failed",
+      },
+    ],
+  },
+}
+
+export const Waving: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "waving",
+    position: "bottom-right",
+    scale: 1,
+  },
+}
+
+export const Jumping: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "jumping",
+    position: "bottom-right",
+    scale: 1,
+  },
+}
+
+export const RunningRight: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "running-right",
+    position: "bottom-right",
+    scale: 1,
+  },
+}
+
+export const RunningLeft: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "running-left",
+    position: "bottom-right",
+    scale: 1,
+  },
+}
+
+export const TopLeft: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "idle",
+    position: "top-left",
+    scale: 1,
+  },
+}
+
+export const TopRight: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "idle",
+    position: "top-right",
+    scale: 1,
+  },
+}
+
+export const BottomLeft: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "idle",
+    position: "bottom-left",
+    scale: 1,
+  },
+}
+
+export const ScaledSmall: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "idle",
+    position: "bottom-right",
+    scale: 0.5,
+  },
+}
+
+export const ScaledLarge: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "idle",
+    position: "bottom-right",
+    scale: 1.5,
+  },
+}
+
+export const FastAnimation: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "running",
+    position: "bottom-right",
+    scale: 1,
+    animationRate: 2,
+  },
+}
+
+export const SlowAnimation: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "running",
+    position: "bottom-right",
+    scale: 1,
+    animationRate: 0.5,
+  },
+}
+
+export const WithBubble: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "idle",
+    position: "bottom-right",
+    scale: 1,
+    defaultBubble: "你好！我是 Orbitwork",
+  },
+}
+
+export const MultipleSessions: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "running",
+    position: "bottom-right",
+    scale: 1,
+    sessions: [
+      {
+        sessionId: "session-1",
+        title: "生成会议纪要",
+        text: "正在整理 9 月 1 日周会的决议与待办",
+        status: "running",
+      },
+      {
+        sessionId: "session-2",
+        title: "代码审查",
+        text: "等待你确认是否合并这次重构",
+        status: "waiting",
+      },
+      {
+        sessionId: "session-3",
+        title: "数据分析",
+        text: "渠道转化对比已跑完",
+        status: "completed",
+        canFeedback: false,
+        canStop: false,
+      },
+    ],
+    onSessionStop: (id) => console.log("Stop session:", id),
+    onSessionFeedback: (id) => console.log("Feedback for session:", id),
+  },
+}
+
+export const NonDraggable: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "idle",
+    position: "bottom-right",
+    scale: 1,
+    draggable: false,
+  },
+}
+
+export const NoToolbar: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "idle",
+    position: "bottom-right",
+    scale: 1,
+    toolbar: false,
+  },
+}
+
+export const CustomPosition: Story = {
+  args: {
+    manifest: mockManifest,
+    animation: "idle",
+    position: { x: 100, y: 100 },
+    scale: 1,
+  },
+}
+
+export const WithInteraction: StoryObj<typeof DesktopPet> = {
+  render: () => {
+    const petRef = useRef<DesktopPetHandle>(null)
+
+    useEffect(() => {
+      const interval = setInterval(() => {
+        petRef.current?.say("执行中...", 2000)
+      }, 3000)
+      return () => clearInterval(interval)
+    }, [])
+
+    return (
+      <div style={{ position: "relative", height: "100vh" }}>
+        <div style={{ position: "absolute", top: 20, left: 20, zIndex: 1000 }}>
+          <button onClick={() => petRef.current?.playAnimation("waving")}>挥手</button>
+          <button onClick={() => petRef.current?.playAnimation("jumping")}>跳跃</button>
+          <button onClick={() => petRef.current?.playAnimation("running")}>运行</button>
+          <button onClick={() => petRef.current?.playAnimation("idle")}>待机</button>
+          <button onClick={() => petRef.current?.say("你好！", 3000)}>说话</button>
+        </div>
+        <DesktopPet ref={petRef} manifest={mockManifest} animation="idle" position="bottom-right" scale={1} />
+      </div>
+    )
+  },
+}

package/src/components/domain/desktop/DesktopPet/DesktopPetSource.test.mjs

@@ -0,0 +1,191 @@
+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 styles = await readFile(new URL("../../../../../styles/desktop-pet.css", import.meta.url), "utf8")
+
+test("desktop pet matches Petdex uniform step timing for every animation state", () => {
+  assert.match(source, /idle: { row: 0, frames: 6, durationMs: 1100 }/)
+  assert.match(source, /['"]running-right['"]: { row: 1, frames: 8, durationMs: 1060 }/)
+  assert.match(source, /['"]running-left['"]: { row: 2, frames: 8, durationMs: 1060 }/)
+  assert.match(source, /waving: { row: 3, frames: 4, durationMs: 700 }/)
+  assert.match(source, /jumping: { row: 4, frames: 5, durationMs: 840 }/)
+  assert.match(source, /failed: { row: 5, frames: 8, durationMs: 1220 }/)
+  assert.match(source, /waiting: { row: 6, frames: 6, durationMs: 1010 }/)
+  assert.match(source, /running: { row: 7, frames: 6, durationMs: 820 }/)
+  assert.match(source, /review: { row: 8, frames: 6, durationMs: 1030 }/)
+  assert.match(source, /animation\.durationMs \/ animation\.frames/)
+  assert.doesNotMatch(source, /durations: \[/)
+})
+
+test("desktop pet applies a configurable animation rate without accepting invalid multipliers", () => {
+  assert.match(source, /animationRate = 1/)
+  assert.match(source, /Number\.isFinite\(animationRate\) && animationRate > 0 \? animationRate : 1/)
+  assert.match(source, /animation\.durationMs \/ animation\.frames \/ safeAnimationRate/)
+  assert.match(source, /\[state, frame, lookCell, animationRate\]/)
+})
+
+test("desktop pet renders one independently keyed card per session", () => {
+  assert.match(source, /sessions\.map\(\(session\) =>/)
+  assert.match(source, /key=\{session\.sessionId\}/)
+  assert.match(source, /onSessionFeedback\?\.\(sessionId, text\)/)
+  assert.match(source, /onSessionStop\?\.\(session\.sessionId\)/)
+})
+
+test("session cards stack above the pet and remain interactive in a native window", () => {
+  assert.match(styles, /\[data-ow-variant="native"\] \{[^}]*flex-direction: column;[^}]*align-items: center;/)
+  assert.match(styles, /\[data-ow-variant="native"\] \{[^}]*width: max-content;/)
+  assert.match(source, /MAX_DESKTOP_PET_SCALE = 1\.5/)
+  assert.match(source, /detectVisibleSpriteBounds/)
+  assert.match(source, /width: Math\.round\(visibleBounds\.width \* MAX_DESKTOP_PET_SCALE\)/)
+  assert.match(source, /data-ow-part="sessions" style=\{sessionsStyle\}/)
+  // R3：锚点属性不再只给 native 档；非 native 档由 resolveAnchor(pos) 算出当前贴边，
+  // 动作条据此朝画布内侧展开（原写法在左锚/下锚档被视口裁半截）。native 档仍走 nativeAnchor。
+  assert.match(source, /const anchor = nativeWindow \? nativeAnchor : resolveAnchor\(pos\)/)
+  assert.match(source, /data-anchor-horizontal=\{anchor\.horizontal\}/)
+  assert.match(source, /data-anchor-vertical=\{anchor\.vertical\}/)
+  assert.doesNotMatch(styles, /\[data-ow-part="sessions"\] \{[^}]*width: 336px/)
+  assert.match(styles, /\[data-ow-variant="native"\]\[data-anchor-horizontal="left"\] \{[^}]*align-items: flex-start;/)
+  assert.match(styles, /\[data-ow-variant="native"\]\[data-anchor-horizontal="right"\] \{[^}]*align-items: flex-end;/)
+  assert.match(
+    styles,
+    /\[data-ow-variant="native"\]\[data-anchor-vertical="top"\] \{ flex-direction: column-reverse; \}/,
+  )
+  assert.match(styles, /\[data-ow-part="sessions"\] \{[^}]*display: flex;[^}]*flex-direction: column;/)
+  assert.match(
+    styles,
+    /\[data-ow-part="session"\] button,\n[^\n]*\[data-ow-part="session"\] input \{ -webkit-app-region: no-drag; \}/,
+  )
+})
+
+test("session feedback and stop actions are accessible icons aligned at the right center", () => {
+  assert.match(source, /import \{[^}]*CommentPlus[^}]*Stop[^}]*\} from ['"]\.\.\/\.\.\/\.\.\/composite\/Icons['"]/)
+  assert.match(source, /title="反馈"[\s\S]*?aria-label="反馈"/)
+  assert.match(source, /<CommentPlus aria-hidden="true" \/>/)
+  assert.match(source, /title="停止"[\s\S]*?aria-label="停止"/)
+  assert.match(source, /<Stop aria-hidden="true" \/>/)
+  assert.match(
+    styles,
+    /\[data-ow-part="session-main"\] \{[^}]*grid-template-columns: minmax\(0, 1fr\) auto;[^}]*align-items: center;/,
+  )
+  assert.match(styles, /\[data-ow-part="session-actions"\] \{[^}]*align-items: center;[^}]*justify-self: end;/)
+})
+
+test("session status uses an accessible icon and the native pet root stays transparent", () => {
+  assert.match(source, /function SessionStatus/)
+  // R2：running 档不出图标——§9 运行态＝一颗 --ow-progress-fill 实点（CSS ::before 画），
+  // 原先渲一枚 Loader 再由 CSS `svg { display: none }` 藏掉，已在 TSX 端摘干净。
+  assert.match(source, /running: { label: ["']执行中["'], icon: null }/)
+  // 导入侧也摘干净（注释里的追溯记载不算）
+  assert.doesNotMatch(source, /import \{[^}]*\bLoader\b[^}]*\} from/)
+  assert.match(source, /completed: { label: ["']已完成["'], icon: CheckCircle }/)
+  assert.match(source, /role="img" aria-label={statusView\.label}/)
+  assert.match(source, /<SessionStatus status=\{session\.status\} \/>\s*<strong title=\{session\.title\}>/)
+  assert.doesNotMatch(source, /ow-pet__session-indicator/)
+  assert.match(styles, /\[data-ow-variant="native"\] \{[^}]*background: transparent;/)
+  assert.doesNotMatch(styles, /backdrop-filter/)
+})
+
+test("desktop pet reports content dimensions so the native window can fit its contents", () => {
+  assert.match(
+    source,
+    /onContentSizeChange\(\{ width: Math\.ceil\(bounds\.width\), height: Math\.ceil\(bounds\.height\) \}\)/,
+  )
+  assert.match(source, /new ResizeObserver\(report\)/)
+  assert.match(source, /getImageData\(0, 0, layout\.cellWidth, layout\.cellHeight\)/)
+  assert.match(source, /left: -Math\.round\(visibleBounds\.x \* scale\)/)
+  assert.match(source, /top: -Math\.round\(visibleBounds\.y \* scale\)/)
+})
+
+test("right-clicking the pet image requests a context menu without hiding the pet", () => {
+  assert.match(
+    source,
+    /onContextMenu=\{\(event\) => \{\s*event\.preventDefault\(\)\s*onContextMenuRequest\?\.\(\)\s*\}\}/,
+  )
+  assert.doesNotMatch(source, /onContextMenu=\{[^}]*handle\.hide\(\)/)
+  assert.match(styles, /\[data-ow-part="stage"\] \{[^}]*-webkit-app-region: no-drag;/)
+})
+
+test("native pet drag keeps click interactions while moving the Electron window", () => {
+  assert.match(source, /Math\.hypot\(event\.screenX - native\.startX, event\.screenY - native\.startY\) >= 4/)
+  assert.match(
+    source,
+    /onNativeDrag\?\.\(\{ phase: ["']start["'], screenX: native\.startX, screenY: native\.startY \}\)/,
+  )
+  assert.match(
+    source,
+    /onNativeDrag\?\.\(\{ phase: ["']move["'], screenX: event\.screenX, screenY: event\.screenY \}\)/,
+  )
+  assert.match(source, /suppressActivation\.current = true/)
+  assert.match(source, /onDoubleClick=\{\(\) => activate\(onDoubleClick\)\}/)
+  assert.match(styles, /\[data-ow-part="stage"\] \{[^}]*cursor: grab;[^}]*-webkit-app-region: no-drag;/)
+})
+
+test("session messages are compact, truncated, and sit on the opaque popover surface", () => {
+  assert.match(source, /<p title=\{session\.text\}>\{session\.text\}<\/p>/)
+  assert.match(styles, /\[data-ow-part="session"\] \{[^}]*padding: var\(--ow-space-2, 8px\);/)
+  assert.match(styles, /\[data-ow-part="session"\] p \{[^}]*text-overflow: ellipsis;[^}]*-webkit-line-clamp: 2;/)
+  // §5 悬浮层＝--ow-popover-bg + 1px --ow-border + --ow-shadow-pop，V1 的 color-mix 半透明玻璃下线
+  assert.match(
+    styles,
+    /\[data-ow-part="toolbar"\] \{[^}]*background: var\(--ow-popover-bg\);[^}]*box-shadow: var\(--ow-shadow-pop\);/,
+  )
+  assert.doesNotMatch(styles, /color-mix\(in srgb, ?var\(--ow-bg\)/)
+})
+
+test("R3：动作条按锚点朝画布内侧展开，1280×800 / 1440×900 都不被裁切", () => {
+  // 注释里点名的是旧写法，比对真规则前先剥注释
+  const rules = styles.replace(/\/\*[\s\S]*?\*\//g, "")
+  // 默认（右锚）：挂宠物左侧、与形象台顶边起算
+  assert.match(rules, /\[data-ow-part="toolbar"\] \{[^}]*right: 100%;[^}]*top: 0;/)
+  // 旧写法：top 从 24px 起 → 102px 竖排越过 83px 形象台底，最下一枚掉出视口
+  assert.doesNotMatch(rules, /\[data-ow-part="toolbar"\] \{[^}]*top: var\(--ow-space-6, 24px\);/)
+  // 左锚：翻到宠物右侧，不再是 left:-18px
+  assert.match(
+    rules,
+    /\[data-anchor-horizontal="left"\] \[data-ow-part="toolbar"\] \{[^}]*left: 100%;[^}]*margin-left: var\(--ow-space-1, 4px\);/,
+  )
+  // 下锚：与形象台底边对齐向上长
+  assert.match(rules, /\[data-anchor-vertical="bottom"\] \[data-ow-part="toolbar"\] \{[^}]*bottom: 0;/)
+})
+
+test("desktop pet speech bubble is one and a half times the previous default length", () => {
+  assert.match(styles, /\[data-ow-part="bubble"\] \{[^}]*max-width: 330px;/)
+  assert.doesNotMatch(styles, /\[data-ow-part="bubble"\] \{[^}]*max-width: 220px;/)
+})
+
+test("desktop pet ships a neutral placeholder skin bound to the real DOM (W0 去痕)", () => {
+  // 注释里点名的是「已下线的旧写法」，正文里才是真规则——比对时先剥注释
+  const rules = styles.replace(/\/\*[\s\S]*?\*\//g, "")
+  // 文件头必须写明这是占位皮，形象重设计待上游规格卡
+  assert.match(styles, /占位皮：形象重设计待上游规格卡/)
+  // 选择器对齐真实 DOM：旧的 .ow-pet / .ow-pet__* 类名组件早已不渲染，整份撤除
+  assert.doesNotMatch(rules, /\.ow-pet/)
+  assert.match(styles, /\[data-slot="desktop-pet"\]/)
+  // §5 无 blur、§9 无自转 spinner、无 hover 位移入场
+  assert.doesNotMatch(rules, /blur\(/)
+  assert.doesNotMatch(rules, /rotate\(360deg\)/)
+  assert.doesNotMatch(rules, /translateX\(6px\)/)
+  // §9 过渡只留颜色类 + 120ms + 唯一缓动
+  assert.match(styles, /transition:\s*\n\s*background-color var\(--ow-dur-1\) var\(--ow-ease-beacon\)/)
+  assert.doesNotMatch(rules, /transition: ?\.?\d/)
+  // §7 图标按钮 28×28 + --ow-radius-action，面板 --ow-radius-card（12），表外 11px 圆角下线
+  assert.match(
+    styles,
+    /\[data-ow-part="session-action"\] \{\n\s*width: 28px;\n\s*height: 28px;[^}]*border-radius: var\(--ow-radius-action\);/,
+  )
+  assert.match(styles, /border-radius: var\(--ow-radius-card\);/)
+  assert.doesNotMatch(rules, /border-radius: ?11px/)
+  assert.doesNotMatch(rules, /border-radius: ?50%/)
+  // §6 focus-visible 走 --ow-focus-ring（V1 的 --ow-accent 荧黄环下线）、disabled 逐 token
+  assert.match(styles, /outline: var\(--ow-focus-ring-w\) solid var\(--ow-focus-ring\);/)
+  assert.doesNotMatch(rules, /--ow-accent/)
+  assert.match(styles, /:disabled \{[^}]*color: var\(--ow-disabled-text\);/)
+  assert.doesNotMatch(rules, /opacity: ?\.5;/)
+  // 运行态＝--ow-progress-fill 实点，不再自转
+  assert.match(
+    styles,
+    /\[data-status="running"\] \[data-ow-part="session-status"\]::before \{[^}]*background: var\(--ow-progress-fill\);/,
+  )
+})