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

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

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

@@ -1,191 +0,0 @@
-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\);/,
-  )
-})