@linxin666/dsh-pet 0.3.5 → 0.3.9

package/src/client/locales.ts

@@ -15,6 +15,15 @@ export const zh = {
   'pet.namePlaceholder': '输入新名字',
   'pet.summon': '召唤{name}',
   'pet.rank': '亲密度 {rank}',
+  'pet.rank.name.幼鲸': '幼鲸',
+  'pet.rank.name.伙伴': '伙伴',
+  'pet.rank.name.挚友': '挚友',
+  'pet.rank.name.深海羁绊': '深海羁绊',
+  'pet.rank.name.心有灵犀': '心有灵犀',
+  'pet.rank.name.传说羁绊': '传说羁绊',
+  'pet.rank.name.神话羁绊': '神话羁绊',
+  'pet.rank.name.永恒之契': '永恒之契',
+  'pet.rank.name.鲸生共渡': '鲸生共渡',
   'pet.points': '{points} 点',
   'pet.treats': '小鱼干 ×{n}',
   'pet.state.loading': '宠物正在赶来…',
@@ -67,7 +76,7 @@ export const zh = {
   'settings.off': '关',
   'settings.overridden': '已覆盖',
   'settings.reset': '恢复默认',
-  'settings.notExposed': '当前 DSH 版本未向设置页暴露本插件的配置命名空间，表单不可用。可编辑 ~/.dsh/settings.yaml 直接配置，或为 dsh-host-apiproxy 的 WEB_SETTINGS_NAMESPACES 白名单补充本命名空间后重启。',
+  'settings.notExposed': '当前 DSH 版本未向设置页暴露本插件的配置命名空间，表单不可用。可编辑 $DSH_HOME/settings.yaml 直接配置，或确认提供该命名空间的插件已挂载其设置域并重启。',
   'settings.readOnly': '当前部署的设置只读。',
   'settings.expand': '展开设置',
   'settings.collapse': '收起设置',
@@ -88,6 +97,15 @@ export const en = {
   'pet.namePlaceholder': 'Enter a new name',
   'pet.summon': 'Summon {name}',
   'pet.rank': 'Affinity {rank}',
+  'pet.rank.name.幼鲸': 'Baby Whale',
+  'pet.rank.name.伙伴': 'Companion',
+  'pet.rank.name.挚友': 'Close Friend',
+  'pet.rank.name.深海羁绊': 'Deep Sea Bond',
+  'pet.rank.name.心有灵犀': 'Kindred Spirit',
+  'pet.rank.name.传说羁绊': 'Legendary Bond',
+  'pet.rank.name.神话羁绊': 'Mythic Bond',
+  'pet.rank.name.永恒之契': 'Eternal Covenant',
+  'pet.rank.name.鲸生共渡': 'Lifelong Companion',
   'pet.points': '{points} pts',
   'pet.treats': 'Treats ×{n}',
   'pet.state.loading': 'The pet is on its way…',
@@ -140,7 +158,7 @@ export const en = {
   'settings.off': 'Off',
   'settings.overridden': 'Overridden',
   'settings.reset': 'Reset to default',
-  'settings.notExposed': 'This DSH version does not expose this plugin\'s settings namespace to the configuration page, so the form is unavailable. Edit ~/.dsh/settings.yaml directly, or add the namespace to dsh-host-apiproxy\'s WEB_SETTINGS_NAMESPACES allowlist and restart.',
+  'settings.notExposed': 'This DSH version does not expose this plugin\'s settings namespace to the configuration page, so the form is unavailable. Edit $DSH_HOME/settings.yaml directly, or confirm that the plugin owning the namespace is mounted with its settings domain and restart.',
   'settings.readOnly': 'This deployment stores settings read-only.',
   'settings.expand': 'Show settings',
   'settings.collapse': 'Hide settings',

package/src/client/pet-store.ts

@@ -6,8 +6,8 @@
  * @module @linxin666/dsh-pet/client/pet-store
  */
 
-import { defineStore } from '@deepseek-ai/dsh-client-runtime/client'
-import type { EngineStoreHandle, EngineStoreInstance } from '@deepseek-ai/dsh-client-runtime/client'
+import { defineStore } from '@deepseek-ai/dsh-client-store'
+import type { EngineStoreHandle, EngineStoreInstance } from '@deepseek-ai/dsh-client-store'
 import type { PetGameplayStateView, PetStateView } from '../service.ts'
 import type { PetInteraction } from '../affinity.ts'
 import type { PetDefinition } from '../registry.ts'

package/src/client/pet.module.css

@@ -604,3 +604,107 @@
   }
 }
 
+
+/* 公告气泡（dsh-usage 联动）：兄弟插件推送的结构化事实（余额 / 套餐用量）。
+   与状态气泡同一片蓝黑玻璃家族，但自有版式：标题 + 数值两端对齐，
+   套餐窗口带微型计量条，色调按 ok/warn/low 染描边与计量条。
+   自带长驻动画（进场后保持），不走 2.6s 反馈气泡的淡出轨道。 */
+.bubbleUsage {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 3px;
+  min-width: 128px;
+  max-width: min(280px, calc(100vw - 24px));
+  padding: 6px 12px;
+  white-space: nowrap;
+  background: linear-gradient(160deg, rgba(19, 28, 54, 0.92), rgba(7, 11, 26, 0.95));
+  border: 1px solid rgba(126, 152, 255, 0.45);
+  box-shadow:
+    0 4px 12px rgba(2, 6, 23, 0.35),
+    inset 0 1px 0 rgba(226, 232, 255, 0.1),
+    0 0 12px rgba(77, 107, 254, 0.18);
+  backdrop-filter: blur(8px);
+  letter-spacing: 0.02em;
+  animation: pet-usage-in 280ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.bubbleUsageHead {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.bubbleUsageTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  opacity: 0.85;
+}
+
+.bubbleUsageValue {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+
+.bubbleUsageNote {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 10px;
+  opacity: 0.55;
+}
+
+.bubbleUsageMeter {
+  display: block;
+  height: 4px;
+  border-radius: 999px;
+  background: rgba(226, 232, 255, 0.14);
+  overflow: hidden;
+}
+
+.bubbleUsageMeterFill {
+  display: block;
+  height: 100%;
+  border-radius: 999px;
+  background: #6ee7b7;
+  transition: width 300ms ease;
+}
+
+/* 色调：ok 沿用品牌蓝描边；warn 琥珀、low 珊瑚红，染描边与计量条。 */
+.bubbleUsageOk {
+  border-color: rgba(126, 152, 255, 0.45);
+}
+
+.bubbleUsageWarn {
+  border-color: rgba(251, 191, 36, 0.55);
+}
+
+.bubbleUsageWarn .bubbleUsageMeterFill {
+  background: #fbbf24;
+}
+
+.bubbleUsageLow {
+  border-color: rgba(248, 113, 113, 0.6);
+}
+
+.bubbleUsageLow .bubbleUsageMeterFill {
+  background: #f87171;
+}
+
+@keyframes pet-usage-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bubbleUsage {
+    animation: none;
+  }
+}

package/src/client/renderers/frames2d.test.ts

@@ -135,3 +135,104 @@ describe('frames2dRenderer', () => {
     expect(container.querySelector('img')).toBeNull()
   })
 })
+
+describe('frames2dRenderer canvas bitmap path', () => {
+  // The canvas branch needs createImageBitmap + fetch + a real 2D context;
+  // jsdom has none of them, so each test installs fakes and restores after.
+  const flush = async (): Promise<void> => {
+    await Promise.resolve()
+    await Promise.resolve()
+    await Promise.resolve()
+  }
+
+  let draws = 0
+  const bitmaps: { width: number; height: number; close: ReturnType<typeof vi.fn> }[] = []
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    document.body.innerHTML = ''
+    draws = 0
+    bitmaps.length = 0
+    vi.stubGlobal('fetch', vi.fn(async () => ({ ok: true, blob: async () => ({}) })))
+    vi.stubGlobal('createImageBitmap', vi.fn(async () => {
+      const bmp = { width: 32, height: 32, close: vi.fn() }
+      bitmaps.push(bmp)
+      return bmp
+    }))
+    ;(HTMLCanvasElement.prototype as unknown as { getContext: unknown }).getContext = () => ({
+      clearRect: () => {},
+      drawImage: () => {
+        draws += 1
+      },
+    })
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+    Reflect.deleteProperty(HTMLCanvasElement.prototype as unknown as Record<string, unknown>, 'getContext')
+    vi.useRealTimers()
+  })
+
+  function canvasSetup() {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const ctx: PetRendererContext = {
+      petId: 'miku',
+      assetBase: '/pet/miku',
+      container,
+      phase: createPhaseStream('idle'),
+      interact: () => {},
+      onCleanup: () => {},
+    }
+    return { ctx, container }
+  }
+
+  it('mounts a canvas instead of an img and paints advanced frames via drawImage', async () => {
+    const { ctx, container } = canvasSetup()
+    const handle = frames2dRenderer.mount(ctx, frames2dRenderer.validateConfig(CONFIG)) as Frames2dRendererHandle
+    expect(container.querySelector('canvas')).not.toBeNull()
+    expect(container.querySelector('img')).toBeNull()
+    await flush()
+    // Warm pass decoded every configured frame exactly once; the first frame
+    // of the idle track painted during mount.
+    expect(bitmaps.length).toBe(6)
+    const paintsAtMount = draws
+    expect(paintsAtMount).toBeGreaterThanOrEqual(1)
+    vi.advanceTimersByTime(100)
+    await flush()
+    expect(draws).toBeGreaterThan(paintsAtMount)
+    handle.dispose()
+  })
+
+  it('sizes the backing store from decoded dimensions and releases bitmaps on dispose', async () => {
+    const { ctx, container } = canvasSetup()
+    const handle = frames2dRenderer.mount(ctx, frames2dRenderer.validateConfig(CONFIG)) as Frames2dRendererHandle
+    await flush()
+    const canvas = container.querySelector('canvas')!
+    expect(canvas.width).toBe(32)
+    expect(canvas.height).toBe(32)
+    handle.dispose()
+    await flush()
+    for (const bmp of bitmaps) expect(bmp.close).toHaveBeenCalled()
+  })
+
+  it('keeps painting through a phase switch without touching the DOM tree', async () => {
+    const { container } = canvasSetup()
+    const stream = createPhaseStream('idle')
+    const ctx: PetRendererContext = {
+      petId: 'miku', assetBase: '/pet/miku', container, phase: stream, interact: () => {}, onCleanup: () => {},
+    }
+    const handle = frames2dRenderer.mount(ctx, frames2dRenderer.validateConfig(CONFIG)) as Frames2dRendererHandle
+    await flush()
+    const nodesBefore = container.querySelectorAll('*').length
+    stream.push('thinking' as ActivityPhase)
+    expect(handle.currentTrack()).toBe('work')
+    await flush()
+    vi.advanceTimersByTime(100)
+    await flush()
+    // Steady-state playback is DOM-mutation-free: no element added or removed.
+    expect(container.querySelectorAll('*').length).toBe(nodesBefore)
+    expect(draws).toBeGreaterThanOrEqual(3)
+    handle.dispose()
+  })
+})

package/src/client/renderers/frames2d.ts

@@ -8,6 +8,18 @@
  * phase-mapped track. Rendering never throws: a broken track list degrades
  * to the first decodable frame, and the 1.2 s stall watchdog re-kicks the
  * playback chain after timer throttling.
+ *
+ * Frame presentation has two modes picked once at mount by capability
+ * probing:
+ * - Canvas bitmap buffer (default where createImageBitmap/fetch/2D context
+ *   exist): every frame is decoded exactly once into an ImageBitmap during
+ *   the warm pass and drawn onto one <canvas> - steady-state playback issues
+ *   zero DOM mutations and zero re-decodes (measured hotspot: swapping
+ *   <img>.src per frame drove image decode + invalidation every tick).
+ * - Classic <img> fallback (jsdom/tests or missing APIs): identical to the
+ *   historical behavior - cache-warm Image elements plus guarded src swaps,
+ *   so environments without modern decoding keep working unchanged.
+ *
  * @module @linxin666/dsh-pet/client/renderers/frames2d
  */
 
@@ -69,6 +81,12 @@ function validateFrames2dConfig(config: unknown): PetFrames2dConfig {
   return { tracks, phases: phases as PetFrames2dConfig['phases'] }
 }
 
+interface DecodedFrame {
+  source: ImageBitmap | HTMLImageElement
+  width: number
+  height: number
+}
+
 export const frames2dRenderer: PetRenderer<PetFrames2dConfig> = {
   id: 'frames2d',
   apiVersion: PET_RENDERER_API_VERSION,
@@ -79,23 +97,78 @@ export const frames2dRenderer: PetRenderer<PetFrames2dConfig> = {
       && typeof window.matchMedia === 'function'
       && window.matchMedia('(prefers-reduced-motion: reduce)').matches
 
-    const img = document.createElement('img')
-    img.dataset.dshPetFrames2d = ctx.petId
-    img.alt = ''
-    img.draggable = false
-    img.style.width = '100%'
-    img.style.height = '100%'
-    img.style.objectFit = 'contain'
-    img.style.pointerEvents = 'none'
-    ctx.container.appendChild(img)
-
-    // Warm the browser cache for every frame up front (same-origin, small
-    // webp files); playback itself swaps img.src without React state.
-    for (const track of Object.values(config.tracks)) {
-      for (const url of track.frames) {
-        const pre = new Image()
-        pre.src = url
+    // Capability probe: the canvas path needs decode-to-bitmap, same-origin
+    // fetch, and a real 2D context (jsdom returns null and falls back below).
+    let canvas: HTMLCanvasElement | null = null
+    let context2d: CanvasRenderingContext2D | null = null
+    let img: HTMLImageElement | null = null
+    try {
+      if (typeof createImageBitmap === 'function' && typeof fetch === 'function') {
+        const probe = document.createElement('canvas')
+        const c2d = probe.getContext('2d')
+        if (c2d !== null) {
+          canvas = probe
+          context2d = c2d
+        }
       }
+    } catch {
+      canvas = null
+      context2d = null
+    }
+
+    if (canvas !== null && context2d !== null) {
+      canvas.dataset.dshPetFrames2d = ctx.petId
+      canvas.draggable = false
+      canvas.style.width = '100%'
+      canvas.style.height = '100%'
+      canvas.style.objectFit = 'contain'
+      canvas.style.pointerEvents = 'none'
+      ctx.container.appendChild(canvas)
+    } else {
+      img = document.createElement('img')
+      img.dataset.dshPetFrames2d = ctx.petId
+      img.alt = ''
+      img.draggable = false
+      img.style.width = '100%'
+      img.style.height = '100%'
+      img.style.objectFit = 'contain'
+      img.style.pointerEvents = 'none'
+      ctx.container.appendChild(img)
+    }
+
+    // Decode cache: one concurrent decode per URL, memoized forever (frames
+    // are tiny same-origin webp files; failures resolve undefined and keep
+    // the last painted frame instead of breaking playback).
+    const decoding = new Map<string, Promise<DecodedFrame | undefined>>()
+    const decodedAll: Promise<void>[] = []
+    const loadFrame = (url: string): Promise<DecodedFrame | undefined> => {
+      const cached = decoding.get(url)
+      if (cached !== undefined) return cached
+      const job: Promise<DecodedFrame | undefined> = (async () => {
+        try {
+          const response = await fetch(url)
+          if (!response.ok) throw new Error('http ' + response.status)
+          const bitmap = await createImageBitmap(await response.blob())
+          return { source: bitmap, width: bitmap.width, height: bitmap.height }
+        } catch {
+          // Fail-open: classic Image decode keeps non-modern runtimes alive.
+          return await new Promise<DecodedFrame | undefined>((resolve) => {
+            try {
+              const pre = new Image()
+              pre.onload = (): void => {
+                resolve(pre.naturalWidth > 0 ? { source: pre, width: pre.naturalWidth, height: pre.naturalHeight } : undefined)
+              }
+              pre.onerror = (): void => resolve(undefined)
+              pre.src = url
+            } catch {
+              resolve(undefined)
+            }
+          })
+        }
+      })()
+      decoding.set(url, job)
+      decodedAll.push(job.then(() => undefined, () => undefined))
+      return job
     }
 
     let disposed = false
@@ -105,16 +178,42 @@ export const frames2dRenderer: PetRenderer<PetFrames2dConfig> = {
     let frameIndex = 0
     let lastAdvance = Date.now()
     let override: string | undefined
+    let drawToken = 0
+    let lastDrawnUrl: string | undefined
 
     const trackForPhase = (phase: ActivityPhase): string => {
       const mapped = config.phases[phase]
       return mapped !== undefined && config.tracks[mapped] !== undefined ? mapped : config.phases.idle
     }
 
+    /** Canvas path: paints the newest requested frame; stale draws drop out. */
+    const paintCanvas = (url: string): void => {
+      if (context2d === null || canvas === null) return
+      const myToken = ++drawToken
+      void loadFrame(url).then((frame) => {
+        if (disposed || frame === undefined || myToken !== drawToken) return
+        if (lastDrawnUrl === url) return
+        lastDrawnUrl = url
+        // Resizing clears the canvas, so size only when it actually differs.
+        if (canvas.width !== frame.width || canvas.height !== frame.height) {
+          canvas.width = frame.width
+          canvas.height = frame.height
+        } else {
+          context2d.clearRect(0, 0, canvas.width, canvas.height)
+        }
+        context2d.drawImage(frame.source as CanvasImageSource, 0, 0)
+      }).catch(() => { /* keep last frame */ })
+    }
+
     const show = (trackId: string, index: number): void => {
       const def = config.tracks[trackId]
       const url = def?.frames[index]
-      if (url !== undefined && img.getAttribute('src') !== url) img.src = url
+      if (url === undefined) return
+      if (img !== null) {
+        if (img.getAttribute('src') !== url) img.src = url
+        return
+      }
+      paintCanvas(url)
     }
 
     const schedule = (ms: number): void => {
@@ -180,6 +279,13 @@ export const frames2dRenderer: PetRenderer<PetFrames2dConfig> = {
       }, WATCHDOG_MS)
     }
 
+    // Warm pass: decode every frame up front (tiny same-origin webp files)
+    // so loops and phase switches never wait on a first decode - same intent
+    // as the historical Image-cache warm loop, now feeding the decode cache.
+    for (const warmTrack of Object.values(config.tracks)) {
+      for (const warmUrl of warmTrack.frames) void loadFrame(warmUrl)
+    }
+
     play(track)
 
     let disposedOnce = false
@@ -190,7 +296,21 @@ export const frames2dRenderer: PetRenderer<PetFrames2dConfig> = {
       unsubscribe()
       if (timer !== undefined) clearTimeout(timer)
       if (watchdog !== undefined) clearInterval(watchdog)
-      img.remove()
+      // Release decoded bitmaps after pending decodes settle; close() is
+      // browser-only, so guard it for exotic hosts.
+      void Promise.allSettled(decodedAll).then(() => {
+        for (const job of decoding.values()) {
+          void job.then((frame) => {
+            try {
+              const maybeClose = (frame?.source as { close?: () => void } | undefined)?.close
+              if (typeof maybeClose === 'function' && frame !== undefined) maybeClose.call(frame.source)
+            } catch { /* already released */ }
+          }).catch(() => { /* never rejects anyway */ })
+        }
+        decoding.clear()
+      })
+      canvas?.remove()
+      img?.remove()
     }
     ctx.onCleanup(dispose)