@linxin666/dsh-pet 0.2.3 → 0.2.5

package/src/client/PetSprite.tsx

@@ -10,17 +10,18 @@
  */
 
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
-import type { CSSProperties, PointerEvent as ReactPointerEvent, ReactNode, ReactPortal } from 'react'
+import type { CSSProperties, PointerEvent as ReactPointerEvent, ReactElement, ReactNode, ReactPortal } from 'react'
 import { createPortal } from 'react-dom'
 import clsx from 'clsx'
 import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
 import type { PetDisplayConfig } from '../persist.ts'
 import type { PetStateView } from '../service.ts'
 import type { PetDefinition } from '../registry.ts'
+import type { DecorationView } from '../contracts/status-decoration.ts'
 import type { PetFeedback } from './pet-store.ts'
 import { framePosition, rowOfTrack, trimTrack } from './spritesheet.ts'
 import { sequenceFrameAt } from './sequences.ts'
-import { animationForPhase, type PetAnimation } from '../state.ts'
+import { animationForPhase, type ActivityPhase, type PetAnimation } from '../state.ts'
 import { NS } from './locales.ts'
 import styles from './pet.module.css'
 
@@ -63,6 +64,89 @@ function clampOffset(value: number, max: number): number {
   return Math.max(0, Math.min(max, value))
 }
 
+/**
+ * The status decoration ornament (pet-center M5, #567). Renders the active
+ * phase's frame segment as a CSS-background strip at a compact bubble
+ * height; prefers-reduced-motion holds the segment's first frame, and a
+ * missing or undecodable asset simply paints nothing (CSS background
+ * failure) — the bubble text is never disturbed. The span is aria-hidden;
+ * the bubble keeps its own semantics untouched.
+ */
+function StatusOrnament(props: { decoration: DecorationView; phase: ActivityPhase }): ReactElement | null {
+  const { decoration, phase } = props
+  const segment = decoration.phases[phase]
+  const shown = segment !== undefined && segment !== 'hide'
+  const segmentKey = segment !== undefined && segment !== 'hide' ? segment.from + ':' + segment.to : 'none'
+  const spanRef = useRef<HTMLSpanElement | null>(null)
+  const scale = 18 / decoration.cell.height
+  const frameWidth = Math.round(decoration.cell.width * scale)
+  const stripWidth = decoration.columns * frameWidth
+  // Value-stable dependency key: the host serves a fresh DecorationView
+  // object on every state poll (2 s), so the effect must not depend on the
+  // object identity — otherwise each poll would cancel and restart the
+  // frame loop and the animation would jump back to its first frame.
+  const durationsKey = decoration.durations.join(',')
+  useEffect(() => {
+    if (segment === undefined || segment === 'hide') return
+    const el = spanRef.current
+    if (el === null) return
+    const position = (index: number): string => (-index * frameWidth) + 'px 0px'
+    const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches === true
+    el.style.backgroundPosition = position(segment.from)
+    // A single-frame segment (from === to) has nothing to animate: with
+    // loop=true the wrap branch would reset index to the same frame and the
+    // tick would keep rescheduling a no-op rAF forever. Settle on the one
+    // frame instead — same as the reduced-motion static hold.
+    if (reduceMotion || segment.from === segment.to) return
+    let raf = 0
+    let index = segment.from
+    let elapsed = 0
+    let last = performance.now()
+    const tick = (ts: number): void => {
+      const delta = ts - last
+      last = ts
+      elapsed += delta
+      const duration = decoration.durations[index] ?? 160
+      if (elapsed >= duration) {
+        elapsed = 0
+        if (index < segment.to) index += 1
+        else if (decoration.loop) index = segment.from
+        // Only advance the background when the frame actually changes:
+        // the segment's frame rate (duration ms, typically 90-160) is far
+        // below the rAF cadence, so writing the same position every frame
+        // would churn style recalculations for no visual change.
+        el.style.backgroundPosition = position(index)
+      }
+      // A non-looping segment settles on its last frame; stop scheduling
+      // instead of repainting the same position every frame.
+      if (!decoration.loop && index === segment.to) return
+      raf = requestAnimationFrame(tick)
+    }
+    raf = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(raf)
+  }, [shown, segmentKey, frameWidth, decoration.loop, durationsKey])
+  if (!shown) return null
+  return (
+    <span
+      ref={spanRef}
+      aria-hidden="true"
+      data-dsh-pet-decoration={decoration.id}
+      style={{
+        display: 'inline-block',
+        width: frameWidth,
+        height: 18,
+        marginRight: 6,
+        verticalAlign: 'middle',
+        flexShrink: 0,
+        backgroundImage: 'url(' + decoration.entryUrl + ')',
+        backgroundSize: stripWidth + 'px 18px',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: '0px 0px',
+      }}
+    />
+  )
+}
+
 /**
  * The floating pet. The spritesheet frame advances on requestAnimationFrame
  * with per-frame durations from the definition's tracks; the atlas image is
@@ -110,6 +194,33 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
   const rows = definition.rows
   const tracks = definition.tracks
   const sequences = definition.sequences
+  // Hover-panel chrome from the pet's voice pack (pet-center M4, issue
+  // #677): every slot falls back to the i18n dictionary when unset. Stat
+  // formats carry {rank}/{n}/{points} placeholders the host validated.
+  const panel = definition.panel
+  const panelLabel = (slot: 'feed' | 'rename' | 'hide' | 'confirm', i18n: string): string =>
+    panel?.labels?.[slot] ?? i18n
+  const panelStat = (
+    slot: 'rank' | 'treats' | 'points',
+    i18nKey: 'pet.rank' | 'pet.treats' | 'pet.points',
+    values: Record<string, string | number>,
+  ): string => {
+    const format = panel?.stats?.[slot] ?? props.t(i18nKey, values)
+    if (panel?.stats?.[slot] === undefined) return format
+    // The host whitelists {rank}/{n}/{points} in every stat slot, so a pack
+    // format may reference any of them; substitute all three live values
+    // (the slot's own value plus the siblings) instead of only the slot's.
+    const all: Record<string, string | number> = {
+      rank: snapshot?.affinity.rank ?? '?',
+      n: snapshot?.treats.stocked ?? 0,
+      points: snapshot?.affinity.points ?? 0,
+    }
+    let text = format
+    for (const [name, value] of Object.entries(all)) text = text.replaceAll('{' + name + '}', String(value))
+    return text
+  }
+  const panelShows = (action: 'feed' | 'rename' | 'hide'): boolean =>
+    panel?.actions === undefined || panel.actions.includes(action)
 
   // Load the atlas once; the definition carries the authoritative per-row
   // frame counts and per-track durations, so nothing else is fetched. A
@@ -287,6 +398,8 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
   const whisper = feedback === null ? snapshot?.whisper : undefined
   const bubblePresent = feedback !== null || sessionBubbles.length > 0 || statusBubble !== undefined || whisper !== undefined
   const displayName = snapshot?.name ?? definition.displayName
+  // The host-served status decoration (M5, #567); absent = text-only bubbles.
+  const decoration = snapshot?.decoration
 
   // A settled session list can no longer stay pinned open.
   useEffect(() => {
@@ -408,6 +521,9 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
                 title={props.t('pet.openSessionHint')}
                 onClick={() => { props.onOpenSession(session.sessionId) }}
               >
+                {index === 0 && !speaksWhisper && decoration !== undefined && (
+                  <StatusOrnament decoration={decoration} phase={phase} />
+                )}
                 {speaksWhisper ? whisper : session.bubble}
               </button>
             )
@@ -446,6 +562,9 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
               role="status"
               aria-live="polite"
             >
+              {whisper === undefined && decoration !== undefined && (
+                <StatusOrnament decoration={decoration} phase={phase} />
+              )}
               {whisper ?? statusBubble}
             </div>
           )}
@@ -507,39 +626,45 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
                   }
                 }}
               >
-                {props.t('pet.confirm')}
+                {panelLabel('confirm', props.t('pet.confirm'))}
               </button>
             </div>
           ) : (
             <>
               <div className={styles.rankRow}>
                 <span className={styles.nameCell}>{displayName}</span>
-                <span className={styles.statRank}>{props.t('pet.rank', { rank: snapshot?.affinity.rank ?? '?' })}</span>
+                <span className={styles.statRank}>{panelStat('rank', 'pet.rank', { rank: snapshot?.affinity.rank ?? '?' })}</span>
               </div>
               <div className={styles.rankRow}>
-                <span className={styles.statTreats}>{props.t('pet.treats', { n: snapshot?.treats.stocked ?? 0 })}</span>
-                <span className={styles.statPoints}>{props.t('pet.points', { points: snapshot?.affinity.points ?? 0 })}</span>
+                <span className={styles.statTreats}>{panelStat('treats', 'pet.treats', { n: snapshot?.treats.stocked ?? 0 })}</span>
+                <span className={styles.statPoints}>{panelStat('points', 'pet.points', { points: snapshot?.affinity.points ?? 0 })}</span>
               </div>
               <div className={styles.actions}>
-                <button type="button" className={styles.action} onClick={props.onFeed}>
-                  {props.t('pet.feed')}
-                </button>
-                <button
-                  type="button"
-                  className={styles.action}
-                  onClick={() => {
-                    // Cancel any pending hide so the rename box cannot
-                    // unmount right as the user starts typing (#303).
-                    clearHideTimer()
-                    setNameDraft(displayName)
-                    setRenaming(true)
-                  }}
-                >
-                  {props.t('pet.rename')}
-                </button>
-                <button type="button" className={styles.action} onClick={props.onHide}>
-                  {props.t('pet.hide')}
-                </button>
+                {panelShows('feed') && (
+                  <button type="button" className={styles.action} onClick={props.onFeed}>
+                    {panelLabel('feed', props.t('pet.feed'))}
+                  </button>
+                )}
+                {panelShows('rename') && (
+                  <button
+                    type="button"
+                    className={styles.action}
+                    onClick={() => {
+                      // Cancel any pending hide so the rename box cannot
+                      // unmount right as the user starts typing (#303).
+                      clearHideTimer()
+                      setNameDraft(displayName)
+                      setRenaming(true)
+                    }}
+                  >
+                    {panelLabel('rename', props.t('pet.rename'))}
+                  </button>
+                )}
+                {panelShows('hide') && (
+                  <button type="button" className={styles.action} onClick={props.onHide}>
+                    {panelLabel('hide', props.t('pet.hide'))}
+                  </button>
+                )}
               </div>
             </>
           )}

package/src/client/locales.ts

@@ -34,6 +34,8 @@ export const zh = {
   'settings.petHint': '选择显示哪只宠物；每只宠物独立命名，可在宠物悬浮面板改名。',
   'settings.enabled': '启用宠物',
   'settings.enabledHint': '关闭后隐藏宠物并停止轮询，可在设置里重新启用。',
+  'settings.decoration': '状态装饰',
+  'settings.decorationHint': '在宠物状态气泡里显示喷水鲸鱼等状态装饰；关闭后气泡只剩文字。',
   'settings.visible': '显示宠物',
   'settings.visibleHint': '关闭后宠物隐藏，可从聊天输入区重新召唤。',
   'settings.size': '大小（px）',
@@ -87,6 +89,8 @@ export const en = {
   'settings.petHint': 'Choose which pet shows. Names are stored per pet; rename from the pet hover panel.',
   'settings.enabled': 'Enable the pet',
   'settings.enabledHint': 'When off, the pet hides and polling stops; re-enable it here.',
+  'settings.decoration': 'Status decoration',
+  'settings.decorationHint': 'Show ornaments like the spouting whale inside the pet status bubbles; when off, bubbles stay text-only.',
   'settings.visible': 'Show the pet',
   'settings.visibleHint': 'When off, the pet hides; summon it again from the input row.',
   'settings.size': 'Size (px)',

package/src/client/renderers/live2d/Live2dVisualMount.test.tsx

@@ -0,0 +1,72 @@
+// @vitest-environment jsdom
+import { act, cleanup, render } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
+import type { PetRenderer, PetRendererContext } from '../../../contracts/renderer.ts'
+import type { PetDefinition } from '../../../registry.ts'
+import { defaultPetRendererRegistry } from '../registry.ts'
+import type { Live2dErrorCode } from '../live2d.ts'
+import { Live2dVisualMount } from './Live2dVisualMount.tsx'
+
+const t = ((key: string) => key) as PropsLocale<'pet'>['t']
+const noop = (): void => {}
+
+function definition(id: string): PetDefinition {
+  return {
+    id,
+    displayName: id,
+    description: '',
+    renderer: 'live2d',
+    live2d: { modelPath: id + '.model3.json', modelUrl: '/pet/' + id + '/' + id + '.model3.json', motions: { idle: 'Idle' } },
+  } as unknown as PetDefinition
+}
+
+describe('Live2dVisualMount', () => {
+  afterEach(() => {
+    cleanup()
+    defaultPetRendererRegistry.clear()
+  })
+
+  it('clears a failed activation error when switching to another pet', () => {
+    const errorSinks: ((code: Live2dErrorCode) => void)[] = []
+    const disposes: ReturnType<typeof vi.fn>[] = []
+    defaultPetRendererRegistry.register({
+      id: 'live2d',
+      apiVersion: 'test',
+      validateConfig: (config) => config,
+      mount: (ctx: PetRendererContext) => {
+        const canvas = document.createElement('canvas')
+        ctx.container.appendChild(canvas)
+        const dispose = vi.fn(() => { canvas.remove() })
+        disposes.push(dispose)
+        return {
+          dispose,
+          tap: () => {},
+          onError: (listener: (code: Live2dErrorCode) => void) => { errorSinks.push(listener) },
+        }
+      },
+    } as PetRenderer)
+
+    const first = definition('broken')
+    const second = definition('healthy')
+    const { container, rerender, unmount } = render(<Live2dVisualMount definition={first} phase="idle" onPet={noop} t={t} />)
+    expect(container.querySelectorAll('canvas')).toHaveLength(1)
+    act(() => { errorSinks[0]?.('load-failed') })
+    expect(container.querySelector('[data-dsh-pet-live2d-error="load-failed"]')).toBeTruthy()
+
+    rerender(<Live2dVisualMount definition={second} phase="idle" onPet={noop} t={t} />)
+    expect(disposes[0]).toHaveBeenCalledTimes(1)
+    expect(container.querySelector('[data-dsh-pet-live2d="healthy"]')).toBeTruthy()
+    expect(container.querySelector('[data-dsh-pet-live2d-error]')).toBeNull()
+    expect(container.querySelectorAll('canvas')).toHaveLength(1)
+
+    rerender(<Live2dVisualMount definition={first} phase="idle" onPet={noop} t={t} />)
+    expect(disposes[1]).toHaveBeenCalledTimes(1)
+    expect(container.querySelector('[data-dsh-pet-live2d="broken"]')).toBeTruthy()
+    expect(container.querySelector('[data-dsh-pet-live2d-error]')).toBeNull()
+    expect(container.querySelectorAll('canvas')).toHaveLength(1)
+    unmount()
+    expect(disposes[2]).toHaveBeenCalledTimes(1)
+    expect(container.querySelectorAll('canvas')).toHaveLength(0)
+  })
+})

package/src/client/renderers/live2d/Live2dVisualMount.tsx

@@ -33,6 +33,7 @@ export function Live2dVisualMount(props: {
 
   // One activation per pet definition: build the contract context and mount.
   useEffect(() => {
+    setError(null)
     const container = containerRef.current
     const live2d = props.definition.live2d
     if (container === null || live2d === undefined) return undefined

package/src/client/renderers/live2d/runtime.ts

@@ -21,13 +21,18 @@ const VENDOR_URL = '/api/pet/runtime/live2d-vendor.js'
 export interface Live2dVendorApp {
   canvas: HTMLCanvasElement
   stage: { addChild(child: unknown): unknown }
-  renderer: { readonly width: number; readonly height: number }
+  renderer: {
+    readonly width: number
+    readonly height: number
+    resize(width: number, height: number): void
+  }
   init(options: Record<string, unknown>): Promise<void>
-  destroy(removeView?: boolean, options?: Record<string, unknown>): void
+  destroy(rendererOptions?: boolean | { removeView?: boolean; releaseGlobalResources?: boolean }, options?: Record<string, unknown>): void
 }
 
 /** The Live2DModel slice the renderer uses. */
 export interface Live2dVendorModel {
+  automator: { autoUpdate: boolean }
   anchor: { set(x: number, y?: number): void }
   position: { set(x: number, y: number): void }
   scale: { set(x: number, y?: number): void }
@@ -43,6 +48,7 @@ export interface Live2dVendorModel {
   expression(name?: string): unknown
   hitTest(x: number, y: number): string[]
   on(event: string, fn: () => void): unknown
+  destroy(options?: { children?: boolean; texture?: boolean; baseTexture?: boolean }): void
 }
 
 /** The vendor bundle global (window.__dshPetLive2d). */