dsh-offwork 1.0.1 → 1.1.1

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-surfaces.test.mjs

@@ -0,0 +1,128 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { petViewport, petSurfaceWidth, placePetSurface } from '../pet-surfaces.js';
+import { petLayout } from '../pet-view.js';
+import { clampPosition } from '../ui-utils.js';
+const overlap = (a, b) =>
+  Math.max(0, Math.min(a.left + a.width, b.x + b.width) - Math.max(a.left, b.x)) *
+  Math.max(0, Math.min(a.top + a.height, b.y + b.height) - Math.max(a.top, b.y));
+
+test('visual viewport bounds include keyboard and zoom offsets, with a desktop fallback', () => {
+  assert.deepEqual(petViewport({ innerWidth: 1440, innerHeight: 900 }), {
+    width: 1440,
+    height: 900,
+    left: 0,
+    top: 0,
+  });
+  assert.deepEqual(
+    petViewport({
+      innerWidth: 800,
+      innerHeight: 900,
+      visualViewport: { width: 390, height: 310, offsetLeft: 20, offsetTop: 240 },
+    }),
+    { width: 390, height: 310, left: 20, top: 240 },
+  );
+});
+test('card widths match content needs and shrink to the available viewport', () => {
+  const wide = { width: 1440, height: 900 };
+  assert.ok(petSurfaceWidth('schedule', wide) > petSurfaceWidth('income', wide));
+  assert.ok(petSurfaceWidth('menu', wide) < petSurfaceWidth('home', wide));
+  for (const name of ['home', 'income', 'earnings', 'water', 'appearance', 'schedule'])
+    assert.equal(petSurfaceWidth(name, { width: 320, height: 568 }), 296);
+});
+test('measured surfaces stay inside every viewport and preserve natural height when there is room', () => {
+  for (const viewport of [
+    { width: 1440, height: 900 },
+    { width: 768, height: 1024 },
+    { width: 320, height: 568 },
+    { width: 640, height: 320 },
+    { width: 240, height: 140 },
+    { width: 390, height: 280, left: 80, top: 220 },
+  ])
+    for (const position of [null, { x: 0, y: 0 }, { x: 9999, y: 9999 }])
+      for (const size of [80, 180])
+        for (const height of [42, 230, 480, 1500])
+          for (const kind of ['card', 'menu']) {
+            const p = petLayout(position, viewport, size);
+            const anchor = { x: p.x, y: p.y, width: p.petWidth, height: p.petHeight };
+            const r = placePetSurface(anchor, viewport, {
+              width: petSurfaceWidth(kind === 'menu' ? 'menu' : 'schedule', viewport),
+              height,
+              kind,
+              point: { x: p.x, y: p.y },
+            });
+            assert.ok(r.left >= (viewport.left ?? 0) && r.top >= (viewport.top ?? 0));
+            assert.ok(r.left + r.width <= (viewport.left ?? 0) + viewport.width + 0.01);
+            assert.ok(r.top + r.height <= (viewport.top ?? 0) + viewport.height + 0.01);
+            assert.ok(r.height <= height);
+          }
+  const r = placePetSurface(
+    { x: 1100, y: 500, width: 160, height: 176 },
+    { width: 1440, height: 900 },
+    { width: 320, height: 230 },
+  );
+  assert.equal(r.height, 230);
+});
+test('cards and menus avoid the character whenever a clear side is available', () => {
+  const viewport = { width: 1440, height: 900 };
+  for (const anchor of [
+    { x: 1100, y: 650, width: 160, height: 176 },
+    { x: 12, y: 12, width: 160, height: 176 },
+  ])
+    for (const kind of ['card', 'menu']) {
+      const r = placePetSurface(anchor, viewport, {
+        width: 360,
+        height: 500,
+        kind,
+        point: { x: anchor.x + 80, y: anchor.y + 80 },
+      });
+      assert.equal(overlap(r, anchor), 0);
+    }
+});
+test('content changes keep the header in place until bounds require movement', () => {
+  const anchor = { x: 1100, y: 600, width: 160, height: 176 },
+    viewport = { width: 1440, height: 1000 };
+  const first = placePetSurface(anchor, viewport, { width: 336, height: 200 });
+  const larger = placePetSurface(anchor, viewport, { width: 336, height: 240, previous: first });
+  assert.equal(larger.top, first.top);
+  assert.equal(larger.left, first.left);
+  assert.equal(larger.height, 240);
+  const tall = placePetSurface(anchor, viewport, { width: 336, height: 1400, previous: larger });
+  assert.ok(tall.top + tall.height <= 988);
+});
+test('menus open near a clicked card rather than jumping back to the pet', () => {
+  const r = placePetSurface(
+    { x: 1100, y: 700, width: 148, height: 176 },
+    { width: 1440, height: 1000 },
+    { width: 224, height: 240, kind: 'menu', point: { x: 300, y: 100 } },
+  );
+  assert.equal(r.left, 308);
+  assert.equal(r.top, 108);
+});
+
+test('water notices avoid the open card as well as the pet', () => {
+  const viewport = { width: 320, height: 568 };
+  const anchor = { x: 140, y: 414, width: 148, height: 118 };
+  const card = { left: 12, top: 12, width: 296, height: 390 };
+  const notice = placePetSurface(anchor, viewport, {
+    width: 116,
+    height: 34,
+    kind: 'menu',
+    obstacles: [card],
+  });
+  assert.equal(overlap(notice, anchor), 0);
+  assert.equal(
+    overlap(notice, { x: card.left, y: card.top, width: card.width, height: card.height }),
+    0,
+  );
+});
+
+test('pet drag clamping and surface placement use the same offset coordinate space', () => {
+  const viewport = { width: 390, height: 310, left: 80, top: 240 };
+  const position = clampPosition({ x: -50, y: 9999 }, viewport, { width: 148, height: 176 });
+  assert.equal(position.x, 92);
+  assert.equal(position.y, 362);
+  const pet = petLayout(position, viewport, 132);
+  assert.equal(pet.x, 92);
+  assert.equal(pet.y, 362);
+});

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/tests/pet-view.test.mjs

@@ -0,0 +1,48 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { petLayout } from '../pet-view.js';
+import { normalizeView } from '../ui-utils.js';
+
+test('pet and popover stay on screen at edges, across sizes and narrow viewports', () => {
+  for (const viewport of [
+    { width: 1440, height: 900 },
+    { width: 390, height: 844 },
+    { width: 320, height: 568 },
+    { width: 280, height: 360 },
+    { width: 320, height: 160 },
+    { width: 800, height: 120 },
+  ]) {
+    for (const size of [80, 132, 180])
+      for (const position of [null, { x: -500, y: -500 }, { x: 9999, y: 9999 }, { x: 120, y: 80 }])
+        for (const height of [120, 420, 900]) {
+          const r = petLayout(position, viewport, size, height);
+          assert.ok(r.x >= 0 && r.x + r.petWidth <= viewport.width);
+          assert.ok(r.y >= 0 && r.y + r.petHeight <= viewport.height);
+          assert.ok(r.panel.left >= 0 && r.panel.left + r.panel.width <= viewport.width);
+          assert.ok(
+            r.panel.top >= 0 &&
+              r.panel.top + Math.min(height, r.panel.maxHeight) <= viewport.height,
+          );
+        }
+  }
+});
+
+test('popover flips to the available side and stacks on a phone', () => {
+  assert.equal(petLayout(null, { width: 1440, height: 900 }).panel.side, 'left');
+  assert.equal(petLayout({ x: 12, y: 200 }, { width: 1440, height: 900 }).panel.side, 'right');
+  assert.equal(petLayout(null, { width: 320, height: 568 }).panel.side, 'above');
+  assert.equal(petLayout({ x: 12, y: 12 }, { width: 320, height: 568 }).panel.side, 'below');
+});
+
+test('pet preferences retain the original clock position and bound invalid size input', () => {
+  const old = { position: { x: 40, y: 50 }, masked: true, companion: true, opacity: 0.6 };
+  const next = normalizeView(old);
+  assert.deepEqual(next.position, old.position);
+  assert.equal(next.petPosition, null);
+  assert.equal(next.petSize, 132);
+  const saved = normalizeView({ ...next, petPosition: { x: 200, y: 300 }, petSize: 148 });
+  assert.deepEqual(normalizeView(JSON.parse(JSON.stringify(saved))), saved);
+  assert.equal(normalizeView({ petSize: 9000 }).petSize, 180);
+  assert.equal(normalizeView({ petSize: NaN }).petSize, 132);
+  assert.equal(normalizeView({ petPosition: { x: 'bad', y: 4 } }).petPosition, null);
+});

package/tests/ui.test.mjs

@@ -27,24 +27,44 @@ test('position stays visible when viewport shrinks', () => {
     y: 12,
   });
 });
-test('view defaults: compact, salary hidden, 82% glass', () => {
+test('view defaults: compact, salary hidden, 82% glass and companion enabled', () => {
   assert.deepEqual(normalizeView(null), {
+    petModel: 'whale-dress',
+    petSize: 132,
+    petPosition: null,
     mini: true,
     masked: true,
+    companion: true,
+    companionMotion: true,
     opacity: 0.82,
     position: null,
   });
   assert.deepEqual(
     normalizeView({ mini: false, masked: false, opacity: 0.5, position: { x: 1, y: 2 } }),
-    { mini: false, masked: false, opacity: 0.5, position: { x: 1, y: 2 } },
+    {
+      petSize: 132,
+      petModel: 'whale-dress',
+      petPosition: null,
+      mini: false,
+      masked: false,
+      companion: true,
+      companionMotion: true,
+      opacity: 0.5,
+      position: { x: 1, y: 2 },
+    },
   );
   assert.equal(normalizeView({ mini: 'yes' }).mini, true);
   assert.equal(normalizeView({ masked: 'false' }).masked, true);
 });
 test('malformed positions and opacity are repaired, not trusted', () => {
   assert.deepEqual(normalizeView({ mini: 'yes', masked: true, position: { x: 'oops', y: 2 } }), {
+    petModel: 'whale-dress',
+    petSize: 132,
+    petPosition: null,
     mini: true,
     masked: true,
+    companion: true,
+    companionMotion: true,
     opacity: 0.82,
     position: null,
   });