@linxin666/dsh-pet 0.2.4 → 0.2.6

package/src/access.ts

@@ -0,0 +1,40 @@
+/**
+ * Pet trust fence: loopback (the desktop) always passes; a live paired-device
+ * cookie is an additional allow path when remote-web-ui is loaded. The pet
+ * never depends on that plugin — without the service the fence stays
+ * loopback-only (same pattern as skill-explorer / aionui-panel).
+ */
+import type { IncomingMessage } from 'node:http'
+import type { Context } from '@deepseek-ai/cordis'
+import { isLoopbackRequest } from './loopback.ts'
+
+/** Structural pairing lookup (no package dependency on remote-web-ui). */
+interface PairingAccess {
+  isPairedDevice(request: IncomingMessage): boolean
+}
+
+/** ctx.get is optional on the test harness; production Context always has it. */
+type LookupCtx = Context & {
+  get?(name: string, strict?: boolean): unknown
+  remoteWebUiPairing?: PairingAccess
+}
+
+/**
+ * Whether this request may enter any /api/pet or /pet asset route.
+ * @param ctx - host context; may expose remoteWebUiPairing.
+ * @param request - the incoming HTTP request.
+ * @returns true for loopback, or a live paired-device cookie.
+ */
+export function isPetAllowed(ctx: Context, request: IncomingMessage): boolean {
+  if (isLoopbackRequest(request)) return true
+  const bag = ctx as LookupCtx
+  const fromGet = typeof bag.get === 'function' ? bag.get('remoteWebUiPairing', false) : undefined
+  const pairing = (isPairingAccess(fromGet) ? fromGet : bag.remoteWebUiPairing)
+  return pairing?.isPairedDevice(request) === true
+}
+
+function isPairingAccess(value: unknown): value is PairingAccess {
+  return value !== undefined
+    && value !== null
+    && typeof (value as PairingAccess).isPairedDevice === 'function'
+}

package/src/client/PetSettingsCard.tsx

@@ -116,8 +116,14 @@ export class PetSettingsCardController {
       choiceField('petId', this.petChoices),
     ])
     this.store = this.form.bind(() => this.projection())
-    void this.loadPets()
-    void this.loadDiagnostics()
+    // Client plugins are applied synchronously during shell startup. Defer
+    // the first registry request until that pass completes so transport
+    // plugins (notably remote-web-ui on a paired non-loopback origin) can
+    // install their fetch channel before /api/pet/pets is issued.
+    window.setTimeout(() => {
+      void this.loadPets()
+      void this.loadDiagnostics()
+    }, 0)
   }
 
   /** Fetch registry diagnostics once (soft-fail: an empty list on error). */

package/src/client/PetSprite.test.tsx

@@ -755,6 +755,77 @@ describe('PetSprite status decoration (pet-center M5, #567)', () => {
     expect(el.style.backgroundPosition).toBe('-72px 0px')
   })
 
+  it('does not schedule a frame loop for a single-frame segment even when looping', () => {
+    vi.spyOn(window, 'matchMedia').mockReturnValue({
+      matches: false,
+      media: '(prefers-reduced-motion: reduce)',
+      onchange: null,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      addListener: () => {},
+      removeListener: () => {},
+      dispatchEvent: () => false,
+    })
+    vi.spyOn(performance, 'now').mockReturnValue(0)
+    const frames: FrameRequestCallback[] = []
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation(callback => {
+      frames.push(callback)
+      return frames.length
+    })
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {})
+    // failed binds the single frame 3 of a 24px-wide frame; loop stays true.
+    renderPet({
+      snapshot: {
+        ...snapshot,
+        bubble: '失败',
+        phase: 'failed',
+        decoration: { ...decoration, phases: { ...decoration.phases, failed: { from: 3, to: 3 } } },
+      },
+    })
+    const el = ornament()!
+    // The ornament settles on its only frame, exactly like the reduced-motion
+    // hold — no rAF loop may start, so only the sprite's idle loop is pending.
+    expect(el.style.backgroundPosition).toBe('-72px 0px')
+    expect(frames).toHaveLength(1)
+    const step = (ts: number): void => { for (const callback of frames.splice(0)) callback(ts) }
+    act(() => { step(161) })
+    act(() => { step(322) })
+    // The frame never moves and the ornament never reschedules itself.
+    expect(el.style.backgroundPosition).toBe('-72px 0px')
+    expect(frames).toHaveLength(1)
+  })
+
+  it('does not advance the background while a frame is still in play', () => {
+    vi.spyOn(window, 'matchMedia').mockReturnValue({
+      matches: false,
+      media: '(prefers-reduced-motion: reduce)',
+      onchange: null,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      addListener: () => {},
+      removeListener: () => {},
+      dispatchEvent: () => false,
+    })
+    vi.spyOn(performance, 'now').mockReturnValue(0)
+    const frames: FrameRequestCallback[] = []
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation(callback => {
+      frames.push(callback)
+      return frames.length
+    })
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {})
+    renderPet({ snapshot: { ...snapshot, bubble: '正在思考', phase: 'thinking', decoration } })
+    const el = ornament()!
+    const step = (ts: number): void => { for (const callback of frames.splice(0)) callback(ts) }
+    // thinking binds frames 0..3 at 160 ms/frame. The effect holds frame 0;
+    // a step at 80 ms — inside the first frame — must not move the ornament,
+    // and only crossing the 160 ms boundary advances to the next frame.
+    expect(el.style.backgroundPosition).toBe('0px 0px')
+    act(() => { step(80) })
+    expect(el.style.backgroundPosition).toBe('0px 0px')
+    act(() => { step(161) })
+    expect(el.style.backgroundPosition).toBe('-24px 0px')
+  })
+
   it('does not restart the frame loop when an equal-content decoration re-renders', () => {
     vi.spyOn(window, 'matchMedia').mockReturnValue({
       matches: false,

package/src/client/PetSprite.tsx

@@ -93,7 +93,11 @@ function StatusOrnament(props: { decoration: DecorationView; phase: ActivityPhas
     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)
-    if (reduceMotion) return
+    // 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
@@ -107,8 +111,12 @@ function StatusOrnament(props: { decoration: DecorationView; phase: ActivityPhas
         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)
       }
-      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

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). */

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

@@ -20,7 +20,10 @@ import { createPhaseStream, type PhaseStream } from '../phase-stream.ts'
 import type { PetRendererContext } from '../../contracts/renderer.ts'
 
 interface FakeModel {
+  automator: { autoUpdate: boolean }
   calls: unknown[][]
+  destroyCalls: Record<string, unknown>[]
+  destroyed: number
   listeners: Record<string, () => void>
   width: number
   height: number
@@ -32,21 +35,58 @@ interface FakeModel {
   expression(name?: string): void
   hitTest(x: number, y: number): string[]
   on(event: string, fn: () => void): void
+  destroy(options?: Record<string, unknown>): void
 }
 
 interface FakeApp {
   canvas: HTMLCanvasElement
   stage: { addChild(child: unknown): void }
-  renderer: { width: number; height: number }
+  renderer: { width: number; height: number; resize(width: number, height: number): void }
   init(options: Record<string, unknown>): Promise<void>
-  destroy(): void
+  destroy(rendererOptions?: boolean | { removeView?: boolean; releaseGlobalResources?: boolean }, options?: Record<string, unknown>): void
   destroyed: number
+  destroyCalls: unknown[][]
   added: unknown
+  resizeCalls: [number, number][]
+}
+
+class FakeResizeObserver {
+  static instances: FakeResizeObserver[] = []
+
+  readonly targets = new Set<Element>()
+  disconnected = false
+
+  constructor(private readonly callback: ResizeObserverCallback) {
+    FakeResizeObserver.instances.push(this)
+  }
+
+  observe(target: Element): void {
+    this.targets.add(target)
+  }
+
+  unobserve(target: Element): void {
+    this.targets.delete(target)
+  }
+
+  disconnect(): void {
+    this.disconnected = true
+    this.targets.clear()
+  }
+
+  emit(target: Element, width: number, height: number): void {
+    this.callback([{
+      target,
+      contentRect: { width, height },
+    } as ResizeObserverEntry], this as unknown as ResizeObserver)
+  }
 }
 
 function fakeModel(motions: Record<string, unknown[]> = { Idle: [{}, {}], TapBody: [{}] }): FakeModel {
   const model: FakeModel = {
+    automator: { autoUpdate: false },
     calls: [],
+    destroyCalls: [],
+    destroyed: 0,
     listeners: {},
     width: 1000,
     height: 1200,
@@ -58,19 +98,50 @@ function fakeModel(motions: Record<string, unknown[]> = { Idle: [{}, {}], TapBod
     expression: (name) => { model.calls.push(['expression', name]) },
     hitTest: (x, y) => { model.calls.push(['hitTest', x, y]); return ['Body'] },
     on: (event, fn) => { model.listeners[event] = fn },
+    destroy: (options = {}) => {
+      model.destroyed += 1
+      model.destroyCalls.push(options)
+      model.automator.autoUpdate = false
+    },
   }
   return model
 }
 
 function fakeApp(): FakeApp {
+  const canvas = document.createElement('canvas')
   const app: FakeApp = {
-    canvas: document.createElement('canvas'),
+    canvas,
     stage: { addChild: (child) => { app.added = child } },
-    renderer: { width: 160, height: 174 },
-    init: () => Promise.resolve(),
-    destroy: () => { app.destroyed += 1 },
+    renderer: {
+      width: 160,
+      height: 174,
+      resize: (width, height) => {
+        app.renderer.width = width
+        app.renderer.height = height
+        canvas.width = width
+        canvas.height = height
+        app.resizeCalls.push([width, height])
+      },
+    },
+    init: (options) => {
+      app.renderer.width = Number(options.width)
+      app.renderer.height = Number(options.height)
+      canvas.width = app.renderer.width
+      canvas.height = app.renderer.height
+      return Promise.resolve()
+    },
+    destroy: (rendererOptions, options) => {
+      app.destroyed += 1
+      app.destroyCalls.push([rendererOptions, options])
+      if (rendererOptions === true || (typeof rendererOptions === 'object' && rendererOptions.removeView === true)) app.canvas.remove()
+      if (options?.children === true && typeof (app.added as { destroy?: unknown } | undefined)?.destroy === 'function') {
+        ;(app.added as { destroy(options?: Record<string, unknown>): void }).destroy(options)
+      }
+    },
     destroyed: 0,
+    destroyCalls: [],
     added: undefined,
+    resizeCalls: [],
   }
   return app
 }
@@ -78,7 +149,10 @@ function fakeApp(): FakeApp {
 function fakeVendor(
   model: FakeModel,
   app: FakeApp,
-  from: (source: string, options?: Record<string, unknown>) => Promise<FakeModel> = () => Promise.resolve(model),
+  from: (source: string, options?: Record<string, unknown>) => Promise<FakeModel> = (_source, options) => {
+    model.calls.push(['from', options])
+    return Promise.resolve(model)
+  },
 ): unknown {
   return {
     Application: class { constructor() { return app } },
@@ -91,12 +165,27 @@ function fakeVendor(
 
 const CONFIG = { modelUrl: '/pet/haru/haru.model3.json', motions: { idle: 'Idle', thinking: 'TapBody' } }
 
-function makeCtx(): { ctx: PetRendererContext; stream: PhaseStream; container: HTMLDivElement } {
+function makeCtx(width = 0, height = 0): {
+  ctx: PetRendererContext
+  stream: PhaseStream
+  container: HTMLDivElement
+  setSize(nextWidth: number, nextHeight: number): void
+} {
   const container = document.createElement('div')
+  let clientWidth = width
+  let clientHeight = height
+  Object.defineProperties(container, {
+    clientWidth: { configurable: true, get: () => clientWidth },
+    clientHeight: { configurable: true, get: () => clientHeight },
+  })
   const stream = createPhaseStream('idle')
   return {
     container,
     stream,
+    setSize(nextWidth, nextHeight) {
+      clientWidth = nextWidth
+      clientHeight = nextHeight
+    },
     ctx: {
       petId: 'haru',
       assetBase: '/pet/haru',
@@ -115,9 +204,12 @@ async function flush(): Promise<void> {
 describe('live2dRenderer', () => {
   beforeEach(() => {
     runtime.core = true
+    FakeResizeObserver.instances = []
+    vi.stubGlobal('ResizeObserver', FakeResizeObserver)
     resetLive2dRenderer()
   })
   afterEach(() => {
+    vi.unstubAllGlobals()
     vi.restoreAllMocks()
   })
 
@@ -131,6 +223,8 @@ describe('live2dRenderer', () => {
     await flush()
     expect(container.querySelector('canvas')).toBeTruthy()
     expect(app.added).toBe(model)
+    expect(model.calls).toContainEqual(['from', expect.objectContaining({ autoUpdate: false, autoHitTest: false, autoFocus: false })])
+    expect(model.automator.autoUpdate).toBe(true)
     // idle plays on boot: group 'Idle', random index floor(0.99 * 2) = 1.
     expect(model.calls).toContainEqual(['motion', 'Idle', 1])
     // auto-fit: min(160/1000, 174/1200) * 0.92 = 0.1334
@@ -142,8 +236,14 @@ describe('live2dRenderer', () => {
     expect(model.calls.filter(call => call[0] === 'motion').at(-1)).toEqual(['motion', 'Idle', 1])
     handle.dispose()
     expect(app.destroyed).toBe(1)
+    expect(app.destroyCalls[0]?.[0]).toEqual({ removeView: true })
+    expect(model.destroyed).toBe(1)
+    expect(model.destroyCalls).toContainEqual({ children: true })
+    expect(model.automator.autoUpdate).toBe(false)
     handle.dispose() // idempotent
     expect(app.destroyed).toBe(1)
+    expect(app.destroyCalls[0]?.[0]).toEqual({ removeView: true })
+    expect(model.destroyed).toBe(1)
   })
 
   it('uses one automatic texture LOD instead of the default full mip chain', async () => {
@@ -157,12 +257,79 @@ describe('live2dRenderer', () => {
     await flush()
 
     expect(from).toHaveBeenCalledWith(CONFIG.modelUrl, {
+      autoUpdate: false,
       autoHitTest: false,
       autoFocus: false,
       textureOptions: { lod: 'single-auto' },
     })
   })
 
+  it('keeps the Pixi canvas and model layout in sync with display-size changes', async () => {
+    const model = fakeModel()
+    const app = fakeApp()
+    runtime.vendor = fakeVendor(model, app)
+    const { ctx, container, setSize } = makeCtx(148, 160)
+
+    const handle = live2dRenderer.mount(ctx, live2dRenderer.validateConfig(CONFIG)) as Live2dRendererHandle
+    await flush()
+    expect(app.canvas.width).toBe(148)
+    expect(app.canvas.height).toBe(160)
+    expect(model.calls).toContainEqual(['position', 74, 80])
+
+    model.calls.length = 0
+    setSize(295, 320)
+    FakeResizeObserver.instances[0]?.emit(container, 295, 320)
+
+    expect(app.resizeCalls).toEqual([[295, 320]])
+    expect(app.canvas.width).toBe(295)
+    expect(app.canvas.height).toBe(320)
+    expect(model.calls).toContainEqual(['scale', expect.closeTo(0.245333, 5)])
+    expect(model.calls).toContainEqual(['position', 147.5, 160])
+    handle.tap(147.5, 160)
+    expect(model.calls).toContainEqual(['hitTest', 147.5, 160])
+
+    handle.dispose()
+    expect(FakeResizeObserver.instances[0]?.disconnected).toBe(true)
+  })
+
+  it('uses the latest renderer size when the model finishes loading', async () => {
+    const model = fakeModel()
+    const app = fakeApp()
+    let resolveModel!: (value: FakeModel) => void
+    const pendingModel = new Promise<FakeModel>((resolve) => { resolveModel = resolve })
+    runtime.vendor = fakeVendor(model, app, () => pendingModel)
+    const { ctx, container, setSize } = makeCtx(148, 160)
+
+    live2dRenderer.mount(ctx, live2dRenderer.validateConfig(CONFIG))
+    await flush()
+    setSize(295, 320)
+    FakeResizeObserver.instances[0]?.emit(container, 295, 320)
+    resolveModel(model)
+    await flush()
+
+    expect(app.resizeCalls).toEqual([[295, 320]])
+    expect(model.calls).toContainEqual(['position', 147.5, 160])
+    expect(model.calls).toContainEqual(['scale', expect.closeTo(0.245333, 5)])
+  })
+
+  it('ignores zero-size observations and stops resizing after disposal', async () => {
+    const model = fakeModel()
+    const app = fakeApp()
+    runtime.vendor = fakeVendor(model, app)
+    const { ctx, container } = makeCtx(148, 160)
+    const handle = live2dRenderer.mount(ctx, live2dRenderer.validateConfig(CONFIG))
+    await flush()
+    const observer = FakeResizeObserver.instances[0]
+
+    observer?.emit(container, 0, 0)
+    observer?.emit(container, 148, 160)
+    expect(app.resizeCalls).toEqual([])
+
+    handle.dispose()
+    observer?.emit(container, 295, 320)
+    expect(app.resizeCalls).toEqual([])
+  })
+
   it('falls back to the idle group when a mapped group is absent from the model', async () => {
     const model = fakeModel({ Idle: [{}] })
     runtime.vendor = fakeVendor(model, fakeApp())
@@ -239,7 +406,43 @@ describe('live2dRenderer', () => {
     handle.onError((next) => { code = next })
     await flush()
     expect(code).toBe('load-failed')
+    expect(app.destroyed).toBe(1)
+    expect(ctx.container.querySelector('canvas')).toBeNull()
     handle.dispose()
+    expect(app.destroyed).toBe(1)
+  })
+
+  it('destroys both sides exactly once when disposed while model loading is pending', async () => {
+    const model = fakeModel()
+    const app = fakeApp()
+    let resolveModel!: (value: FakeModel) => void
+    const pendingModel = new Promise<FakeModel>((resolve) => { resolveModel = resolve })
+    const from = vi.fn(() => pendingModel)
+    runtime.vendor = {
+      Application: class { constructor() { return app } },
+      extensions: { add: () => {} },
+      Live2DPlugin: {},
+      configureCubismSDK: () => {},
+      Live2DModel: { from },
+    }
+    const { ctx, container } = makeCtx()
+    const handle = live2dRenderer.mount(ctx, live2dRenderer.validateConfig(CONFIG))
+    let error: string | undefined
+    ;(handle as Live2dRendererHandle).onError((code) => { error = code })
+    await flush()
+    expect(from).toHaveBeenCalledTimes(1)
+    expect(container.querySelector('canvas')).toBeTruthy()
+    handle.dispose()
+    expect(app.destroyed).toBe(1)
+    expect(container.querySelector('canvas')).toBeNull()
+    resolveModel(model)
+    await flush()
+    expect(app.destroyed).toBe(1)
+    expect(model.destroyed).toBe(1)
+    expect(model.destroyCalls).toContainEqual({ children: true })
+    expect(model.automator.autoUpdate).toBe(false)
+    expect(app.added).toBeUndefined()
+    expect(error).toBeUndefined()
   })
 
   it('never appends a canvas when disposed mid-boot', async () => {