dsh-offwork 1.1.0 → 1.1.1

package/pet-view.js

@@ -2,6 +2,20 @@
 export const PET_MODEL = Object.freeze({ id: 'xiaoxie-original', renderer: 'svg', license: 'MIT' });
 
 export const PET_MODELS = Object.freeze({
+  'whale-ornate-actions': {
+    id: 'whale-ornate-actions',
+    renderer: 'video',
+    widthScale: 1.3125,
+    heightScale: 2.1,
+    label: 'petWhaleOrnateActions',
+  },
+  'whale-actions': {
+    id: 'whale-actions',
+    renderer: 'video',
+    widthScale: 1.3125,
+    heightScale: 2.1,
+    label: 'petWhaleActions',
+  },
   'whale-dress': {
     id: 'whale-dress',
     renderer: 'image',
@@ -111,12 +125,34 @@ export function petArtwork(
   reaction = '',
   modelId = 'xiaoxie-original',
   sprites = {},
+  interactive = false,
 ) {
   const { pose, animate } = presentation;
   const model = petModel(modelId);
-  if (model.renderer === 'image' && sprites[model.id])
+  if (['image', 'video'].includes(model.renderer) && sprites[model.id]) {
+    if (model.renderer === 'video' && interactive)
+      return h(
+        'span',
+        {
+          key: model.id,
+          className: 'owc-pet-art owc-pet-video-art',
+          'aria-hidden': true,
+          'data-interactive': true,
+          'data-pose': pose,
+          'data-animate': animate,
+          style: { width: size * model.widthScale, height: size * model.heightScale },
+        },
+        h('img', {
+          src: sprites[model.id],
+          alt: '',
+          draggable: false,
+          className: 'owc-pet-video-poster',
+        }),
+        h('span', { className: 'owc-pet-video-layer' }),
+      );
     return h('img', {
-      key: model.id + ':' + pose + ':' + reaction,
+      key: interactive ? model.id : model.id + ':' + pose + ':' + reaction,
+      'data-interactive': interactive || undefined,
       src: sprites[model.id],
       alt: '',
       'aria-hidden': true,
@@ -127,12 +163,14 @@ export function petArtwork(
       'data-pose': pose,
       'data-animate': animate,
     });
+  }
   const asleep = ['quiet', 'rest'].includes(pose);
   const path = (d, props = {}) => h('path', { d, ...props });
   return h(
     'svg',
     {
-      key: pose + ':' + reaction,
+      key: interactive ? model.id : pose + ':' + reaction,
+      'data-interactive': interactive || undefined,
       viewBox: '0 0 160 176',
       width: size,
       height: size * 1.1,
@@ -214,8 +252,10 @@ export function petArtwork(
 
 export const PET_MESSAGES = {
   zh: {
-    petOpen: '打开宠物面板',
+    petGreet: '与角色互动',
     petCharacter: '角色形象',
+    petWhaleActions: '鲸蓝少女 · 长裙动态',
+    petWhaleOrnateActions: '鲸蓝少女 · 短裙动态',
     petWhaleDress: '鲸蓝少女 · 长裙',
     petWhaleOrnate: '鲸蓝少女 · 礼裙',
     petDroplet: '小歇 · 水滴',
@@ -223,13 +263,15 @@ export const PET_MESSAGES = {
     petQuick: '日常陪伴',
     petDetails: '下班与收入',
     petSize: '宠物大小',
-    petHint: '左键喝水 · 右键菜单 · 拖动移动',
+    petHint: '左键互动 · 右键菜单 · 拖动移动',
     petMode: '宠物模式',
     petClock: '下班倒计时',
   },
   en: {
-    petOpen: 'Open pet panel',
+    petGreet: 'Interact with character',
     petCharacter: 'Character',
+    petWhaleActions: 'Blue whale · Animated long dress',
+    petWhaleOrnateActions: 'Blue whale · Animated short dress',
     petWhaleDress: 'Blue whale · Long dress',
     petWhaleOrnate: 'Blue whale · Ornate dress',
     petDroplet: 'Xiaoxie · Droplet',
@@ -237,7 +279,7 @@ export const PET_MESSAGES = {
     petQuick: 'Daily companion',
     petDetails: 'Clock and earnings',
     petSize: 'Pet size',
-    petHint: 'Click for water · right-click for menu · drag to move',
+    petHint: 'Click to interact · right-click for menu · drag to move',
     petMode: 'Pet mode',
     petClock: 'Shift countdown',
   },
@@ -249,13 +291,22 @@ export const PET_STYLE = `
 .owc-v2 button.owc-pet-handle{padding:0;background:none!important;border-radius:50%;min-height:0;display:block;cursor:grab;touch-action:none;line-height:0}
 .owc-v2 button.owc-pet-handle:active{cursor:grabbing}
 .owc-pet-art{overflow:visible;pointer-events:none;filter:drop-shadow(0 3px 5px #32557418)}
+.owc-pet-video-art{display:block;position:relative}
+.owc-pet-video-poster,.owc-pet-video-layer,.owc-pet-video-layer video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
+.owc-pet-video-poster{opacity:1;transition:opacity .12s linear}
+.owc-pet-video-layer video{opacity:0;transition:opacity .12s linear}
+.owc-pet-video-art[data-video-playing=true] .owc-pet-video-poster{opacity:0}
+.owc-pet-video-art[data-video-playing=true] .owc-pet-video-layer video{opacity:1}
 .owc-pet-portrait{display:block;object-fit:contain;transform-origin:50% 90%}
-.owc-pet-portrait[data-animate=true]{animation:owc-portrait-thanks .65s ease-in-out 2}
+.owc-pet-portrait[data-animate=true]:not([data-interactive=true]){animation:owc-portrait-thanks .65s ease-in-out 2}
+.owc-pet-art[data-interactive=true]{transform-origin:50% 90%}
+.owc-pet-art[data-interactive=true][data-motion=idle]:not([data-action]){animation:owc-pet-breathe 4.5s ease-in-out infinite}
+@keyframes owc-pet-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.006)}}
 @keyframes owc-portrait-thanks{0%,100%{transform:translateY(0)}45%{transform:translateY(-3px) rotate(-1deg)}75%{transform:rotate(1deg)}}
 .owc-pet-art[data-pose=offline]{opacity:.65}
-.owc-pet-art[data-animate=true] .owc-pet-body{transform-origin:80px 150px;animation:owc-pet-thanks .65s ease-in-out 2}
+.owc-pet-art[data-animate=true]:not([data-interactive=true]) .owc-pet-body{transform-origin:80px 150px;animation:owc-pet-thanks .65s ease-in-out 2}
 @keyframes owc-pet-thanks{0%,100%{transform:translateY(0)}45%{transform:translateY(-4px) rotate(-3deg)}75%{transform:rotate(2deg)}}
-.owc-v2 button.owc-pet-clock{padding:4px 10px;min-height:26px;gap:5px;white-space:nowrap;border-radius:999px;font-size:11px;background:var(--dsw-alias-bg-overlay);border:1px solid color-mix(in srgb,var(--owc-accent) 25%,transparent);box-shadow:0 3px 12px #142e4812;font-variant-numeric:tabular-nums;max-width:100%;box-sizing:border-box;overflow:hidden}
+.owc-v2 .owc-pet-clock{display:flex;align-items:center;color:var(--owc-text);line-height:1.5;cursor:default;padding:4px 10px;min-height:26px;gap:5px;white-space:nowrap;border-radius:999px;font-size:11px;background:var(--dsw-alias-bg-overlay);border:1px solid color-mix(in srgb,var(--owc-accent) 25%,transparent);box-shadow:0 3px 12px #142e4812;font-variant-numeric:tabular-nums;max-width:100%;box-sizing:border-box;overflow:hidden}
 .owc-pet-clock-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
 .owc-pet-clock strong{flex:none}
 .owc-pet-panel{position:fixed;border-radius:20px;cursor:default;touch-action:manipulation;max-width:calc(100vw - 24px)}

package/tests/pet-character.test.mjs

@@ -15,7 +15,13 @@ test('existing preferences gain the long dress without losing privacy, position
   const next = normalizeView(old);
   assert.equal(next.petModel, 'whale-dress');
   for (const k of Object.keys(old)) assert.deepEqual(next[k], old[k]);
-  for (const id of ['whale-dress', 'whale-ornate', 'xiaoxie-original'])
+  for (const id of [
+    'whale-dress',
+    'whale-ornate',
+    'whale-actions',
+    'whale-ornate-actions',
+    'xiaoxie-original',
+  ])
     assert.equal(normalizeView({ ...next, petModel: id }).petModel, id);
   for (const id of ['unknown', '__proto__', 'toString']) {
     assert.equal(normalizeView({ petModel: id }).petModel, 'whale-dress');
@@ -23,7 +29,7 @@ test('existing preferences gain the long dress without losing privacy, position
   }
 });
 test('portrait layout fits the complete figure and badge in narrow, short and offset viewports', () => {
-  for (const id of ['whale-dress', 'whale-ornate'])
+  for (const id of ['whale-dress', 'whale-ornate', 'whale-actions', 'whale-ornate-actions'])
     for (const size of [80, 132, 180])
       for (const viewport of [
         { width: 1440, height: 1000 },

package/tests/pet-motion.test.mjs

@@ -0,0 +1,139 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { createPetMotion } from '../pet-motion.js';
+import { petArtwork } from '../pet-view.js';
+
+function fixture(options) {
+  const document = Object.assign(new EventTarget(), { hidden: false });
+  const media = Object.assign(new EventTarget(), { matches: false });
+  const runs = [];
+  const element = {
+    dataset: {},
+    style: {},
+    animate(frames, timing) {
+      let finish, reject;
+      const finished = new Promise((resolve, fail) => {
+        finish = resolve;
+        reject = fail;
+      });
+      const run = {
+        frames,
+        timing,
+        finished,
+        finish,
+        cancelled: false,
+        cancel() {
+          this.cancelled = true;
+          reject(new Error('cancelled'));
+        },
+      };
+      runs.push(run);
+      return run;
+    },
+  };
+  const controller = createPetMotion(element, { document, matchMedia: () => media }, options);
+  return { document, media, runs, element, controller };
+}
+
+test('explicit reactions interrupt safely and old completion cannot clear the next action', async () => {
+  const { controller: c, element: e, runs } = fixture();
+  assert.equal(e.dataset.motion, 'idle');
+  assert.equal(c.play('look'), true);
+  assert.equal(c.play('greet'), true);
+  await Promise.resolve();
+  assert.equal(runs[0].cancelled, true);
+  assert.equal(e.dataset.action, 'greet');
+  c.play('celebrate');
+  assert.equal(c.play('look'), false);
+  assert.equal(c.play('greet'), false);
+  await Promise.resolve();
+  assert.equal(e.dataset.action, 'celebrate');
+  runs.at(-1).finish();
+  await Promise.resolve();
+  assert.equal(e.dataset.action, undefined);
+  assert.equal(e.dataset.motion, 'idle');
+  c.destroy();
+});
+
+test('motion preference, visibility and live reduced-motion changes stop actions without replay', async () => {
+  const { controller: c, element: e, document: d, media, runs } = fixture();
+  c.play('celebrate');
+  d.hidden = true;
+  d.dispatchEvent(new Event('visibilitychange'));
+  assert.equal(e.dataset.motion, 'off');
+  assert.equal(e.dataset.action, undefined);
+  assert.equal(runs[0].cancelled, true);
+  d.hidden = false;
+  d.dispatchEvent(new Event('visibilitychange'));
+  assert.equal(e.dataset.motion, 'idle');
+  assert.equal(runs.length, 1);
+  media.matches = true;
+  media.dispatchEvent(new Event('change'));
+  assert.equal(c.play('greet'), false);
+  assert.equal(e.dataset.motion, 'off');
+  media.matches = false;
+  media.dispatchEvent(new Event('change'));
+  c.configure({ enabled: false, resting: false });
+  assert.equal(c.play('celebrate'), false);
+  c.configure({ enabled: true, resting: false });
+  c.play('celebrate');
+  c.configure({ enabled: true, resting: true });
+  assert.equal(e.dataset.action, undefined);
+  assert.equal(e.dataset.motion, 'off');
+  assert.equal(c.play('greet'), true);
+  c.destroy();
+  d.dispatchEvent(new Event('visibilitychange'));
+  assert.equal(e.dataset.motion, 'off');
+  assert.equal(c.play('greet'), false);
+  await Promise.resolve();
+});
+
+test('drag cancels reactions, release settles once, cancellation stays still', async () => {
+  const { controller: c, element: e, runs } = fixture();
+  c.play('greet');
+  c.drag(-20);
+  assert.equal(runs[0].cancelled, true);
+  assert.equal(e.dataset.action, 'drag');
+  assert.match(e.style.transform, /rotate\(-2deg\)/);
+  assert.equal(c.play('look'), false);
+  c.release();
+  assert.equal(e.style.transform, '');
+  assert.equal(e.dataset.action, 'settle');
+  c.drag(20);
+  c.release(true);
+  assert.equal(e.dataset.action, undefined);
+  assert.equal(runs.length, 2);
+  c.destroy();
+  await Promise.resolve();
+});
+
+test('missing or failed animation API retains usable static artwork', () => {
+  const { controller: c, element: e } = fixture();
+  e.animate = undefined;
+  assert.equal(c.play('greet'), false);
+  e.animate = () => {
+    throw new Error('unavailable');
+  };
+  assert.equal(c.play('greet'), false);
+  assert.equal(e.dataset.action, undefined);
+  assert.equal(c.play('__proto__'), false);
+  c.destroy();
+});
+
+test('interactive artwork keeps its DOM identity across clock poses and drinking feedback', () => {
+  const h = (type, props) => ({ type, props });
+  for (const model of ['whale-dress', 'xiaoxie-original']) {
+    const render = (pose, token) =>
+      petArtwork(
+        h,
+        { pose, animate: true },
+        132,
+        token,
+        model,
+        { 'whale-dress': 'data:image/webp;base64,test' },
+        true,
+      );
+    assert.equal(render('calm', '').props.key, render('happy', 'drink-1').props.key);
+    assert.equal(render('calm', '').props['data-interactive'], true);
+  }
+});

package/tests/pet-video.test.mjs

@@ -0,0 +1,337 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { createPetVideoMotion, petVideoAlphaSupported } from '../pet-video.js';
+
+const flush = async () => {
+  for (let i = 0; i < 5; i++) await Promise.resolve();
+};
+function fixture({ alpha = true, rejectPlay = false, idle = false } = {}) {
+  const media = Object.assign(new EventTarget(), { matches: false });
+  const document = Object.assign(new EventTarget(), { hidden: false });
+  const videos = [],
+    timers = new Map(),
+    calls = [];
+  let nextTimer = 0;
+  document.createElement = (tag) => {
+    if (tag === 'canvas')
+      return {
+        getContext: () => ({
+          drawImage() {},
+          getImageData: (x) => ({ data: [0, 0, 0, x === 1 || !alpha ? 255 : 0] }),
+        }),
+      };
+    const video = {
+      style: {},
+      paused: false,
+      duration: 5,
+      removed: false,
+      canPlayType: () => 'probably',
+      setAttribute() {},
+      removeAttribute(name) {
+        delete this[name];
+      },
+      pause() {
+        this.paused = true;
+      },
+      load() {
+        if (this.src === 'probe') queueMicrotask(() => this.onloadeddata?.());
+      },
+      play() {
+        return rejectPlay ? Promise.reject(new Error('blocked')) : Promise.resolve();
+      },
+      remove() {
+        this.removed = true;
+      },
+    };
+    videos.push(video);
+    return video;
+  };
+  const host = {
+    document,
+    matchMedia: () => media,
+    setTimeout(fn, ms) {
+      const id = ++nextTimer;
+      timers.set(id, { fn, ms });
+      return id;
+    },
+    clearTimeout(id) {
+      timers.delete(id);
+    },
+  };
+  const element = { dataset: {}, querySelector: () => ({ appendChild() {} }) };
+  const base = {
+    play(action) {
+      calls.push(action);
+      return true;
+    },
+    configure() {},
+    release() {
+      delete element.dataset.action;
+    },
+    drag() {
+      element.dataset.action = 'drag';
+    },
+    destroy() {
+      calls.push('destroy');
+    },
+  };
+  const motion = createPetVideoMotion(
+    element,
+    host,
+    base,
+    { greet: 'greet-data', celebrate: 'drink-data', ...(idle ? { idle: 'idle-data' } : {}) },
+    'probe',
+  );
+  motion.configure({ enabled: true, resting: false });
+  return { host, document, media, element, base, motion, videos, timers, calls };
+}
+
+test('alpha support checks decoded pixels rather than trusting WebM codec support', async () => {
+  for (const alpha of [true, false]) {
+    const f = fixture({ alpha });
+    assert.equal(await petVideoAlphaSupported(f.host, 'probe'), alpha);
+    assert.equal(f.videos.length, 1);
+    assert.equal(f.videos[0].src, undefined);
+    assert.equal(f.timers.size, 0);
+    f.motion.destroy();
+  }
+});
+
+test('clips reveal only after playing; accepted drinking interrupts greeting and stale events cannot stop it', async () => {
+  const f = fixture();
+  f.motion.play('greet');
+  await flush();
+  const greet = f.videos.at(-1),
+    staleEnd = greet.onended;
+  assert.equal(f.element.dataset.videoPlaying, undefined);
+  greet.onplaying();
+  assert.equal(f.element.dataset.videoPlaying, 'true');
+  assert.equal(greet.muted, true);
+  assert.equal(greet.playsInline, true);
+  assert.equal(f.motion.play('greet'), false);
+  f.motion.play('celebrate');
+  await flush();
+  const drink = f.videos.at(-1);
+  drink.onplaying();
+  assert.equal(greet.removed, true);
+  staleEnd();
+  assert.equal(f.element.dataset.action, 'celebrate');
+  assert.equal(f.motion.play('greet'), false);
+  assert.equal(f.motion.play('look'), false);
+  drink.onended();
+  assert.equal(f.element.dataset.videoPlaying, undefined);
+  assert.equal(f.element.dataset.action, undefined);
+  for (const timer of [...f.timers.values()]) if (timer.ms === 150) timer.fn();
+  assert.equal(drink.removed, true);
+  f.motion.destroy();
+});
+
+test('motion changes and disposal cancel pending probes without late playback', async () => {
+  const f = fixture();
+  f.motion.play('greet');
+  f.motion.configure({ enabled: false, resting: false });
+  await flush();
+  assert.equal(f.videos.length, 1);
+  assert.equal(f.element.dataset.action, undefined);
+  f.motion.configure({ enabled: true, resting: false });
+  f.motion.play('greet');
+  await flush();
+  const oldPlaying = f.videos.at(-1).onplaying;
+  f.motion.destroy();
+  oldPlaying();
+  assert.equal(f.element.dataset.videoPlaying, undefined);
+  assert.equal(f.timers.size, 0);
+  assert.equal(f.motion.play('greet'), false);
+});
+
+test('background, reduced motion, quiet time and dragging stop media without replay', async () => {
+  const f = fixture();
+  await flush();
+  for (const kind of ['hidden', 'reduce', 'quiet', 'drag']) {
+    f.motion.configure({ enabled: true, resting: false });
+    f.motion.play('celebrate');
+    await flush();
+    const video = f.videos.at(-1);
+    video.onplaying();
+    if (kind === 'hidden') {
+      f.document.hidden = true;
+      f.document.dispatchEvent(new Event('visibilitychange'));
+    }
+    if (kind === 'reduce') {
+      f.media.matches = true;
+      f.media.dispatchEvent(new Event('change'));
+    }
+    if (kind === 'quiet') f.motion.configure({ enabled: true, resting: true });
+    if (kind === 'drag') f.motion.drag(10);
+    assert.equal(video.removed, true);
+    assert.equal(f.element.dataset.videoPlaying, undefined);
+    const count = f.videos.length;
+    f.document.hidden = false;
+    f.media.matches = false;
+    f.document.dispatchEvent(new Event('visibilitychange'));
+    f.media.dispatchEvent(new Event('change'));
+    f.motion.release(true);
+    await flush();
+    assert.equal(f.videos.length, count);
+  }
+  f.motion.destroy();
+});
+
+test('unsupported alpha, rejected playback and a stalled clip fall back without repeatedly loading bad media', async () => {
+  for (const options of [{ alpha: false }, { rejectPlay: true }, {}]) {
+    const f = fixture(options);
+    f.motion.play('greet');
+    await flush();
+    if (!options.alpha && options.alpha !== false && !options.rejectPlay) {
+      const watchdog = [...f.timers.values()].find((t) => t.ms === 9000);
+      watchdog.fn();
+      await flush();
+    }
+    assert.deepEqual(f.calls, ['greet']);
+    assert.equal(f.element.dataset.videoPlaying, undefined);
+    const count = f.videos.length;
+    f.motion.play('greet');
+    await flush();
+    assert.equal(f.videos.length, count);
+    assert.deepEqual(f.calls, ['greet', 'greet']);
+    f.motion.destroy();
+    assert.equal(f.timers.size, 0);
+  }
+});
+
+async function fireTimer(f, milliseconds) {
+  const found = [...f.timers].find(([, timer]) => timer.ms === milliseconds);
+  assert.ok(found, `Expected ${milliseconds}ms timer`);
+  f.timers.delete(found[0]);
+  found[1].fn();
+  await flush();
+}
+
+test('idle loops are interrupted by actions and resume once after action completion', async () => {
+  const f = fixture({ idle: true });
+  await flush();
+  const idle = f.videos.at(-1);
+  idle.onplaying();
+  assert.equal(idle.loop, true);
+  assert.equal(f.timers.size, 0);
+  assert.equal(f.motion.play('look'), false);
+  f.motion.play('greet');
+  await flush();
+  const greet = f.videos.at(-1);
+  greet.onplaying();
+  assert.equal(idle.removed, true);
+  assert.equal(greet.loop, false);
+  const oldEnd = greet.onended;
+  f.motion.play('celebrate');
+  await flush();
+  const drink = f.videos.at(-1);
+  drink.duration = 7.5;
+  drink.onplaying();
+  assert.ok([...f.timers.values()].some((t) => t.ms === 9500));
+  oldEnd();
+  assert.equal(f.element.dataset.action, 'celebrate');
+  drink.onended();
+  await fireTimer(f, 0);
+  assert.equal(f.videos.at(-1).src, 'idle-data');
+  assert.equal(f.videos.at(-1).loop, true);
+  f.motion.destroy();
+  assert.equal(f.timers.size, 0);
+});
+
+test('returning from hidden or reduced-motion state starts idle rather than replaying an action', async () => {
+  const f = fixture({ idle: true });
+  await flush();
+  f.motion.play('greet');
+  await flush();
+  f.document.hidden = true;
+  f.document.dispatchEvent(new Event('visibilitychange'));
+  assert.equal(f.element.dataset.action, undefined);
+  f.document.hidden = false;
+  f.document.dispatchEvent(new Event('visibilitychange'));
+  await fireTimer(f, 0);
+  assert.equal(f.videos.at(-1).src, 'idle-data');
+  f.media.matches = true;
+  f.media.dispatchEvent(new Event('change'));
+  const count = f.videos.length;
+  f.motion.configure({ enabled: true, resting: false });
+  await flush();
+  assert.equal(f.videos.length, count);
+  f.media.matches = false;
+  f.media.dispatchEvent(new Event('change'));
+  await fireTimer(f, 0);
+  assert.equal(f.videos.at(-1).src, 'idle-data');
+  f.motion.destroy();
+  assert.equal(f.timers.size, 0);
+});
+
+test('quiet state and a held drag suppress idle until they finish', async () => {
+  const f = fixture({ idle: true });
+  await flush();
+  f.motion.configure({ enabled: true, resting: true });
+  const count = f.videos.length;
+  await flush();
+  assert.equal(f.videos.length, count);
+  f.motion.play('greet');
+  await flush();
+  f.videos.at(-1).onended();
+  await fireTimer(f, 0);
+  assert.equal(f.element.dataset.action, undefined);
+  f.motion.configure({ enabled: true, resting: false });
+  await flush();
+  f.motion.drag(1);
+  const before = f.videos.length;
+  f.motion.configure({ enabled: true, resting: false });
+  await flush();
+  assert.equal(f.videos.length, before);
+  assert.equal(f.element.dataset.action, 'drag');
+  f.motion.release(false);
+  await fireTimer(f, 650);
+  assert.equal(f.videos.at(-1).src, 'idle-data');
+  f.motion.destroy();
+  assert.equal(f.timers.size, 0);
+});
+
+test('a stalled idle clip fails closed without disabling usable action clips', async () => {
+  const f = fixture({ idle: true });
+  await flush();
+  const idle = f.videos.at(-1);
+  idle.onplaying();
+  idle.onwaiting();
+  await fireTimer(f, 4000);
+  assert.equal(idle.removed, true);
+  const count = f.videos.length;
+  f.motion.configure({ enabled: true, resting: false });
+  await flush();
+  assert.equal(f.videos.length, count);
+  f.motion.play('greet');
+  await flush();
+  const greet = f.videos.at(-1);
+  greet.onplaying();
+  greet.onended();
+  await flush();
+  assert.equal(f.element.dataset.action, undefined);
+  f.motion.destroy();
+  assert.equal(f.timers.size, 0);
+});
+
+test('failed action fallback suspends idle during CSS feedback and then returns to idle', async () => {
+  const f = fixture({ idle: true });
+  await flush();
+  f.motion.play('greet');
+  await flush();
+  f.videos.at(-1).onerror();
+  assert.deepEqual(f.calls, ['greet']);
+  await fireTimer(f, 1400);
+  const idle = f.videos.at(-1);
+  idle.onplaying();
+  const count = f.videos.length;
+  f.motion.play('greet');
+  await flush();
+  assert.equal(idle.removed, true);
+  assert.equal(f.videos.length, count);
+  assert.deepEqual(f.calls, ['greet', 'greet']);
+  await fireTimer(f, 1400);
+  assert.equal(f.videos.at(-1).src, 'idle-data');
+  f.motion.destroy();
+  assert.equal(f.timers.size, 0);
+});

package/tools/build.mjs

@@ -7,6 +7,8 @@ const moduleNames = [
   'ui-utils.js',
   'companion.js',
   'pet-view.js',
+  'pet-motion.js',
+  'pet-video.js',
   'pet-interactions.js',
   'pet-surfaces.js',
   'hydration.js',
@@ -32,7 +34,7 @@ const spriteMarker = '/* PET_SPRITES */';
 if (entry.split(spriteMarker).length !== 2) throw new Error('Expected one sprite marker');
 const sprites = Object.fromEntries(
   await Promise.all(
-    ['whale-dress', 'whale-ornate'].map(async (id) => {
+    ['whale-dress', 'whale-ornate', 'whale-actions', 'whale-ornate-actions'].map(async (id) => {
       const bytes = await readFile(new URL(`assets/characters/${id}.webp`, root));
       if (bytes.toString('ascii', 8, 12) !== 'WEBP' || bytes.length > 200000)
         throw new Error(`Invalid sprite: ${id}`);
@@ -40,11 +42,35 @@ const sprites = Object.fromEntries(
     }),
   ),
 );
+const clipMarker = '/* PET_CLIPS */';
+if (entry.split(clipMarker).length !== 2) throw new Error('Expected one clip marker');
+async function clip(name, maximum) {
+  const bytes = await readFile(new URL(`assets/animations/${name}.webm`, root));
+  if (bytes.readUInt32BE(0) !== 0x1a45dfa3 || bytes.length > maximum)
+    throw new Error(`Invalid or oversized WebM: ${name}`);
+  return 'data:video/webm;base64,' + bytes.toString('base64');
+}
+const [probe, greet, celebrate, ornateIdle, ornateGreet, ornateDrink] = await Promise.all([
+  clip('alpha-probe', 10000),
+  clip('whale-greet', 2000000),
+  clip('whale-drink', 2000000),
+  clip('ornate-idle', 2000000),
+  clip('ornate-greet', 2000000),
+  clip('ornate-drink', 2000000),
+]);
+const clips = {
+  probe,
+  models: {
+    'whale-actions': { greet, celebrate },
+    'whale-ornate-actions': { idle: ornateIdle, greet: ornateGreet, celebrate: ornateDrink },
+  },
+};
 const result =
   banner +
   entry
     .replace(marker, pure)
-    .replace(spriteMarker, `const PET_SPRITES = ${JSON.stringify(sprites)};`);
+    .replace(spriteMarker, () => `const PET_SPRITES = ${JSON.stringify(sprites)};`)
+    .replace(clipMarker, () => `const PET_CLIPS = ${JSON.stringify(clips)};`);
 const output = new URL('client.js', root);
 
 if (process.argv.includes('--check')) {