@linxin666/dsh-pet 0.3.22 → 0.3.23

package/src/client/PetSprite.tsx

@@ -14,7 +14,7 @@ import type { CSSProperties, PointerEvent as ReactPointerEvent, ReactElement, Re
 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 { bubbleScaleFor, type PetDisplayConfig } from '../persist.ts'
 import type { PetStateView } from '../service.ts'
 import { announcementFresh, type PetAnnouncement } from '../announce.ts'
 import type { PetDefinition } from '../registry.ts'
@@ -315,15 +315,39 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
   // custom visual (pet-center M3) replaces the atlas entirely.
   useEffect(() => {
     if (props.visual !== undefined) return
+    setImageReady(false)
     let cancelled = false
-    const img = new Image()
-    img.onload = () => {
-      if (!cancelled) setImageReady(true)
+    let retryTimer: ReturnType<typeof setTimeout> | undefined
+    let attempt = 0
+    const maxAttempts = 3
+    let activeImg: HTMLImageElement | null = null
+
+    const loadAtlas = () => {
+      const img = new Image()
+      activeImg = img
+      img.onload = () => {
+        if (!cancelled) setImageReady(true)
+      }
+      img.onerror = () => {
+        if (cancelled) return
+        if (attempt < maxAttempts) {
+          attempt += 1
+          const delay = Math.min(1000 * Math.pow(2, attempt - 1), 8000)
+          retryTimer = setTimeout(loadAtlas, delay)
+        }
+      }
+      img.src = definition.atlasUrl
     }
-    img.src = definition.atlasUrl
+
+    loadAtlas()
+
     return () => {
       cancelled = true
-      img.onload = null
+      if (retryTimer !== undefined) clearTimeout(retryTimer)
+      if (activeImg !== null) {
+        activeImg.onload = null
+        activeImg.onerror = null
+      }
     }
   }, [definition.atlasUrl, props.visual])
 
@@ -488,6 +512,9 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
   const pos = dragPos ?? { right: display.right, bottom: display.bottom }
   const spriteWidth = Math.round(cell.width * spriteScale)
   const spriteHeight = Math.round(cell.height * spriteScale)
+  // Bubble typography follows the sprite's own scale (#1549), bounded so a
+  // shrunk pet never carries unreadably small text.
+  const bubbleScale = bubbleScaleFor(display)
 
   // Concurrent sessions share one bubble slot: only the display session
   // speaks by default, and the rest hide behind a '+N' badge until the stack
@@ -553,7 +580,13 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
     <div
       ref={floatRef}
       className={styles.float}
-      style={{ right: pos.right, bottom: pos.bottom, zIndex: 2147483000 }}
+      style={{
+        right: pos.right,
+        bottom: pos.bottom,
+        zIndex: 2147483000,
+        // Read by .bubble / .bubbleStatus in pet.module.css.
+        ...({ '--pet-bubble-scale': String(bubbleScale) } as CSSProperties),
+      }}
       onPointerEnter={() => {
         clearHideTimer()
         setHovered(true)

package/src/client/gameplay-hud.test.tsx

@@ -117,7 +117,7 @@ function snapshot(view: PetGameplayStateView, skin?: string): PetStateView {
     sessionActive: false,
     sessions: [],
     affinity: { points: 0, rank: '幼鲸', rankEmoji: '*', pets: 0, feeds: 0, turns: 0, petCooldown: false, feedCooldown: false },
-    display: { visible: true, size: 160, right: 24, bottom: 20 },
+    display: { visible: true, size: 160, right: 24, bottom: 20, bubbleScale: 1 },
     pet: { id: 'miku', displayName: 'Miku', description: '' },
     name: 'Miku',
     treats: { stocked: 0, max: 5 },

package/src/client/locales.ts

@@ -69,6 +69,8 @@ export const zh = {
   'settings.visibleHint': '关闭后宠物隐藏，可从聊天输入区重新召唤。',
   'settings.size': '大小（px）',
   'settings.sizeHint': '精灵单元高度，范围 32–1024。',
+  'settings.bubbleScale': '气泡字号倍率',
+  'settings.bubbleScaleHint': '状态、碎碎念与用量气泡的字号会随宠物大小自动缩放；这一项是在此基础上再乘一个倍率（0.5–2，默认 1）。字号本身不小于 10px、不大于 24px。',
   'settings.right': '距右侧（px）',
   'settings.rightHint': '距视口右边缘的水平内缩距离。',
   'settings.bottom': '距底部（px）',
@@ -153,6 +155,8 @@ export const en = {
   'settings.visibleHint': 'When off, the pet hides; summon it again from the input row.',
   'settings.size': 'Size (px)',
   'settings.sizeHint': 'Sprite cell height, 32\u20131024.',
+  'settings.bubbleScale': 'Bubble text multiplier',
+  'settings.bubbleScaleHint': 'Status, whisper, and usage bubbles scale with the pet automatically; this multiplies that result (0.5\u20132, default 1). The rendered text stays between 10px and 24px.',
   'settings.right': 'Right inset (px)',
   'settings.rightHint': 'Horizontal inset from the viewport right edge.',
   'settings.bottom': 'Bottom inset (px)',

package/src/client/pet-css.test.ts

@@ -3,6 +3,20 @@ import { describe, expect, it } from 'vitest'
 
 const css = readFileSync(new URL('./pet.module.css', import.meta.url), 'utf8')
 
+describe('pet bubble typography (#1549)', () => {
+  it('scales the bubble text and padding from the sprite-supplied variable', () => {
+    const bubble = css.match(/\.bubble\s*\{([^}]*)\}/)?.[1] ?? ''
+    expect(bubble).toContain('font-size: calc(12px * var(--pet-bubble-scale, 1))')
+    expect(bubble).toContain('padding: calc(4px * var(--pet-bubble-scale, 1)) calc(10px * var(--pet-bubble-scale, 1))')
+    expect(bubble).not.toContain('font-size: 12px')
+  })
+
+  it('keeps the status bubble width in proportion with its text', () => {
+    const status = css.match(/\.bubbleStatus\s*\{([^}]*)\}/)?.[1] ?? ''
+    expect(status).toContain('max-width: min(calc(280px * var(--pet-bubble-scale, 1)), calc(100vw - 24px))')
+  })
+})
+
 describe('pet hover panel css', () => {
   it('anchors the panel below the pet', () => {
     const panel = css.match(/\.panel\s*\{([^}]*)\}/)?.[1] ?? ''

package/src/client/pet-store.test.ts

@@ -21,7 +21,7 @@ const snapshot = (over: Partial<PetStateView> = {}): PetStateView => ({
     petCooldown: false,
     feedCooldown: false,
   },
-  display: { visible: true, size: 160, right: 24, bottom: 120 },
+  display: { visible: true, size: 160, right: 24, bottom: 120, bubbleScale: 1 },
   pet: { id: 'whale-girl', displayName: 'Whale', description: '' },
   name: 'Whale',
   treats: { stocked: 2, max: 10 },

package/src/client/pet.module.css

@@ -26,9 +26,12 @@
   bottom: 100%;
   margin-bottom: 6px;
   white-space: nowrap;
-  padding: 4px 10px;
+  /* Bubble typography follows the pet's own scale (#1549): the sprite sets
+     --pet-bubble-scale from its display config, and 1 keeps the 12px baseline
+     this stylesheet was drawn for. */
+  padding: calc(4px * var(--pet-bubble-scale, 1)) calc(10px * var(--pet-bubble-scale, 1));
   border-radius: 999px;
-  font-size: 12px;
+  font-size: calc(12px * var(--pet-bubble-scale, 1));
   line-height: 1.4;
   color: #f4f7ff;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
@@ -50,10 +53,10 @@
    碎碎念不再单独渲染第二只气泡，也不换色调，而是以 .bubbleWhisper
    接管这同一只气泡的文案，气泡栈内所有气泡共用同一片玻璃。 */
 .bubbleStatus {
-  max-width: min(280px, calc(100vw - 24px));
+  max-width: min(calc(280px * var(--pet-bubble-scale, 1)), calc(100vw - 24px));
   overflow: hidden;
   text-overflow: ellipsis;
-  padding: 5px 12px;
+  padding: calc(5px * var(--pet-bubble-scale, 1)) calc(12px * var(--pet-bubble-scale, 1));
   background: linear-gradient(160deg, rgba(19, 28, 54, 0.9), rgba(7, 11, 26, 0.94));
   border: 1px solid rgba(126, 152, 255, 0.45);
   box-shadow:

package/src/index.ts

@@ -18,7 +18,7 @@ import z from 'schemastery'
 import { PetService, PET_SETTINGS_NAMESPACE, type PetConfig, type PetSettingsSection } from './service.ts'
 import { makePetRoutes } from './routes.ts'
 import { loadPetRegistry, petPackageRoot } from './registry.ts'
-import { DISPLAY_INSET_MAX, DISPLAY_SIZE_MAX, DISPLAY_SIZE_MIN } from './persist.ts'
+import { BUBBLE_SCALE_MAX, BUBBLE_SCALE_MIN, DISPLAY_INSET_MAX, DISPLAY_SIZE_MAX, DISPLAY_SIZE_MIN } from './persist.ts'
 import { mountOnce } from './mount-once.ts'
 
 export { PetService, MAX_SESSION_BUBBLES } from './service.ts'
@@ -132,6 +132,7 @@ export function makePetSettingsSchema(fallbackPetId: string) {
     size: z.number().step(1).min(DISPLAY_SIZE_MIN).max(DISPLAY_SIZE_MAX).default(160),
     right: z.number().step(1).min(0).max(DISPLAY_INSET_MAX).default(24),
     bottom: z.number().step(1).min(0).max(DISPLAY_INSET_MAX).default(20),
+    bubbleScale: z.number().step(0.05).min(BUBBLE_SCALE_MIN).max(BUBBLE_SCALE_MAX).default(1),
     petId: z.string().default(fallbackPetId),
     enabled: z.boolean().default(true),
     decorationEnabled: z.boolean().default(true),

package/src/persist.test.ts

@@ -5,6 +5,11 @@ import { join } from 'node:path'
 import { AFFINITY_MAX, emptyAffinity } from './affinity.ts'
 import { defaultTreatConfig, emptyTreatLedger } from './treats.ts'
 import {
+  BUBBLE_FONT_MAX_PX,
+  BUBBLE_FONT_MIN_PX,
+  BUBBLE_SCALE_MAX,
+  BUBBLE_SCALE_MIN,
+  bubbleScaleFor,
   DEFAULT_PET_ID,
   DISPLAY_INSET_MAX,
   DISPLAY_SIZE_MAX,
@@ -52,7 +57,7 @@ describe('loadPetPersist', () => {
         skins: { otter: 'lanhainishang' },
         affinity: { ...emptyAffinity(), points: 42, pets: 3, feeds: 1, turns: 10 },
         treats: { ...emptyTreatLedger(), treats: 7, lastTreatGrantAt: 1234, turnsAtLastTreatGrant: 9 },
-        display: { visible: false, size: 200, right: 10, bottom: 40 },
+        display: { visible: false, size: 200, right: 10, bottom: 40, bubbleScale: 1.25 },
         gameplay: {
           otter: { stats: { hunger: 55.5 }, currencies: { coins: 12 }, mode: 'work' as const, settledAt: 777 },
         },
@@ -164,6 +169,53 @@ describe('loadPetPersist', () => {
     }
   })
 
+  it('defaults the bubble scale to the untouched baseline (#1549)', () => {
+    const dir = tempDir()
+    try {
+      expect(loadPetPersist(dir).display.bubbleScale).toBe(1)
+    } finally {
+      rmSync(dir, { recursive: true, force: true })
+    }
+  })
+
+  it('clamps a persisted bubble scale into the supported range (#1549)', () => {
+    const dir = tempDir()
+    try {
+      writeFileSync(join(dir, 'pet.json'), JSON.stringify({ display: { visible: true, size: 160, right: 0, bottom: 0, bubbleScale: 99 } }), 'utf8')
+      expect(loadPetPersist(dir).display.bubbleScale).toBe(BUBBLE_SCALE_MAX)
+      writeFileSync(join(dir, 'pet.json'), JSON.stringify({ display: { visible: true, size: 160, right: 0, bottom: 0, bubbleScale: 'big' } }), 'utf8')
+      expect(loadPetPersist(dir).display.bubbleScale).toBe(defaultDisplayConfig.bubbleScale)
+      writeFileSync(join(dir, 'pet.json'), JSON.stringify({ display: { visible: true, size: 160, right: 0, bottom: 0, bubbleScale: -3 } }), 'utf8')
+      expect(loadPetPersist(dir).display.bubbleScale).toBe(BUBBLE_SCALE_MIN)
+    } finally {
+      rmSync(dir, { recursive: true, force: true })
+    }
+  })
+
+  it('follows the pet size and stays inside the readable band (#1549)', () => {
+    // The baseline the stylesheet was drawn for: 12px at the default 160px pet.
+    expect(bubbleScaleFor({ size: 160, bubbleScale: 1 })).toBe(1)
+    // A shrunk pet shrinks the bubble, but never below the floor (the ratio
+    // is rounded to two decimals so the same config always paints the same).
+    expect(bubbleScaleFor({ size: 100, bubbleScale: 1 })).toBe(0.83)
+    expect(bubbleScaleFor({ size: 32, bubbleScale: 1 })).toBe(0.83)
+    // An enlarged pet caps the bubble instead of growing it without bound.
+    expect(bubbleScaleFor({ size: 1024, bubbleScale: 1 })).toBe(BUBBLE_FONT_MAX_PX / 12)
+    // The user's multiplier rides on top of the automatic following.
+    expect(bubbleScaleFor({ size: 160, bubbleScale: 2 })).toBe(2)
+    expect(bubbleScaleFor({ size: 160, bubbleScale: 0.5 })).toBe(0.83)
+  })
+
+  it('keeps the baseline when a host omits or corrupts the bubble scale (#1549)', () => {
+    // A host that predates the field serves no bubbleScale. NaN would reach
+    // --pet-bubble-scale and collapse every bubble's text to zero.
+    expect(bubbleScaleFor({ size: 160 })).toBe(1)
+    expect(bubbleScaleFor({ size: 160, bubbleScale: Number.NaN })).toBe(1)
+    expect(bubbleScaleFor({ size: Number.NaN, bubbleScale: 1 })).toBe(1)
+    // A corrupt size must not leak through either; the multiplier still applies.
+    expect(bubbleScaleFor({ size: Number.POSITIVE_INFINITY, bubbleScale: 2 })).toBe(2)
+  })
+
   it('clamps oversized display size to the max', () => {
     const dir = tempDir()
     try {

package/src/persist.ts

@@ -25,6 +25,13 @@ export interface PetDisplayConfig {
   right: number
   /** Vertical inset from the viewport bottom edge, px. */
   bottom: number
+  /**
+   * Multiplier on the bubble typography's automatic size following (#1549).
+   * The rendered bubble scale is `size / 160 * bubbleScale`, bounded by
+   * {@link BUBBLE_FONT_MIN_PX}..{@link BUBBLE_FONT_MAX_PX}, so 1 keeps the
+   * 12px baseline the stylesheet was drawn for at the default 160px pet.
+   */
+  bubbleScale: number
 }
 
 export const defaultDisplayConfig: PetDisplayConfig = {
@@ -32,6 +39,7 @@ export const defaultDisplayConfig: PetDisplayConfig = {
   size: 160,
   right: 24,
   bottom: 120,
+  bubbleScale: 1,
 }
 
 /** Display value bounds (shared by load-time validation and setConfig). */
@@ -39,6 +47,42 @@ export const DISPLAY_SIZE_MIN = 32
 export const DISPLAY_SIZE_MAX = 1024
 export const DISPLAY_INSET_MAX = 10_000
 
+/** Bubble typography bounds (issue #1549). */
+export const BUBBLE_SCALE_MIN = 0.5
+export const BUBBLE_SCALE_MAX = 2
+/** Pixel size the bubble stylesheet was drawn for, at the default pet size. */
+export const BUBBLE_BASE_FONT_PX = 12
+/** Pet size that baseline matches; other sizes scale the bubble with them. */
+export const BUBBLE_BASE_SIZE_PX = 160
+/** Readability floor and layout ceiling of the scaled bubble text. */
+export const BUBBLE_FONT_MIN_PX = 10
+export const BUBBLE_FONT_MAX_PX = 24
+
+/**
+ * Bubble typography scale for one display config (issue #1549): the bubble
+ * follows the pet's own size so a shrunk pet does not carry a full-size
+ * bubble, and the user's multiplier rides on top. The result is a CSS ratio
+ * against {@link BUBBLE_BASE_FONT_PX}, bounded so the text never drops below
+ * the readability floor or outgrows the pet. `bubbleScale` is optional at
+ * runtime: a host that predates the field (a rolling update, or any snapshot
+ * that omits it) falls back to the baseline, because a NaN ratio written into
+ * `--pet-bubble-scale` collapses every bubble's text to zero.
+ * @param display - display config; `bubbleScale` may be absent on older hosts.
+ * @returns the ratio written to `--pet-bubble-scale` (always finite).
+ */
+export function bubbleScaleFor(display: Pick<PetDisplayConfig, 'size'> & { bubbleScale?: number }): number {
+  // Guard the arithmetic, not just the clamp: Math.min/max propagate NaN, so a
+  // missing or non-finite field would otherwise reach the stylesheet.
+  const size = Number.isFinite(display.size) ? display.size : BUBBLE_BASE_SIZE_PX
+  const multiplier = typeof display.bubbleScale === 'number' && Number.isFinite(display.bubbleScale)
+    ? display.bubbleScale
+    : 1
+  const scaled = (size / BUBBLE_BASE_SIZE_PX) * multiplier
+  const min = BUBBLE_FONT_MIN_PX / BUBBLE_BASE_FONT_PX
+  const max = BUBBLE_FONT_MAX_PX / BUBBLE_BASE_FONT_PX
+  return Math.round(Math.min(max, Math.max(min, scaled)) * 100) / 100
+}
+
 /** Everything persisted for the pet. */
 export interface PetPersist {
   /** Selected pet id (a registry entry; clamped at service startup). */
@@ -198,6 +242,8 @@ export function loadPetPersist(dir: string = petHomeDir()): PetPersist {
       size: Math.round(Math.min(DISPLAY_SIZE_MAX, Math.max(DISPLAY_SIZE_MIN, finiteNum(rawDisplay.size, base.display.size)))),
       right: Math.round(clamp(finiteNum(rawDisplay.right, base.display.right), DISPLAY_INSET_MAX)),
       bottom: Math.round(clamp(finiteNum(rawDisplay.bottom, base.display.bottom), DISPLAY_INSET_MAX)),
+      // Fractional on purpose: the multiplier is a ratio, not a pixel count.
+      bubbleScale: Math.min(BUBBLE_SCALE_MAX, Math.max(BUBBLE_SCALE_MIN, finiteNum(rawDisplay.bubbleScale, base.display.bubbleScale))),
     }
     const petId = typeof parsed.petId === 'string' && parsed.petId.trim() !== ''
       ? parsed.petId.trim()

package/src/service.ts

@@ -31,6 +31,8 @@ import {
   DEFAULT_PET_NAME,
   DISPLAY_INSET_MAX,
   DISPLAY_SIZE_MAX,
+  BUBBLE_SCALE_MAX,
+  BUBBLE_SCALE_MIN,
   DISPLAY_SIZE_MIN,
   PET_NAME_MAX_LENGTH,
   loadPetPersist,
@@ -111,6 +113,8 @@ export interface PetSettingsSection {
   right: number
   /** Vertical inset from the viewport bottom edge, px. */
   bottom: number
+  /** Bubble typography multiplier (#1549); see PetDisplayConfig. */
+  bubbleScale?: number
   /** Master switch for the plugin (browser half + host routes). */
   enabled?: boolean
   /**
@@ -756,12 +760,13 @@ export class PetService extends Service {
     return { ok: true, skin }
   }
 
-  /** RPC: update display config (size / position). Values are clamped to whole pixels. */
+  /** RPC: update display config (size / position / bubble scale). Pixel values are clamped to whole pixels. */
   async setConfig(patch: Partial<PetDisplayConfig>): Promise<{ ok: true; display: PetDisplayConfig }> {
     const next = { ...this.ledger.snapshot.display, ...patch }
     next.size = Math.round(Math.min(DISPLAY_SIZE_MAX, Math.max(DISPLAY_SIZE_MIN, next.size)))
     next.right = Math.round(Math.min(DISPLAY_INSET_MAX, Math.max(0, next.right)))
     next.bottom = Math.round(Math.min(DISPLAY_INSET_MAX, Math.max(0, next.bottom)))
+    next.bubbleScale = Math.min(BUBBLE_SCALE_MAX, Math.max(BUBBLE_SCALE_MIN, next.bubbleScale))
     this.ledger.setDisplay(next)
     this.flush()
     this.syncSettingsFromPet()
@@ -800,6 +805,7 @@ export class PetService extends Service {
     next.size = Math.round(Math.min(DISPLAY_SIZE_MAX, Math.max(DISPLAY_SIZE_MIN, section.size)))
     next.right = Math.round(Math.min(DISPLAY_INSET_MAX, Math.max(0, section.right)))
     next.bottom = Math.round(Math.min(DISPLAY_INSET_MAX, Math.max(0, section.bottom)))
+    next.bubbleScale = Math.min(BUBBLE_SCALE_MAX, Math.max(BUBBLE_SCALE_MIN, section.bubbleScale ?? next.bubbleScale))
     this.ledger.setDisplay(next)
     this.flush()
   }