dsh-offwork 1.0.1 → 1.1.1

package/pet-interactions.js

@@ -0,0 +1,138 @@
+// Ephemeral UI navigation only. Business data stays in its existing stores.
+export const PET_EDITOR_SCREENS = ['water', 'schedule', 'appearance'];
+export const initialPetUI = { screen: null, back: null, menu: null, pending: null };
+export function petUIReducer(state, action) {
+  switch (action.type) {
+    case 'menu':
+      return { ...state, menu: action.position };
+    case 'dismiss-menu':
+      return { ...state, menu: null };
+    case 'stay':
+      return { ...state, pending: null };
+    case 'navigate': {
+      if (![null, 'home', 'income', 'earnings', ...PET_EDITOR_SCREENS].includes(action.screen))
+        return state;
+      if (state.screen === action.screen)
+        return { ...state, back: action.root ? null : state.back, menu: null, pending: null };
+      if (action.dirty && !action.discard)
+        return {
+          ...state,
+          menu: null,
+          pending: { screen: action.screen, ...(action.root ? { root: true } : {}) },
+        };
+      const back = action.root
+        ? null
+        : PET_EDITOR_SCREENS.includes(action.screen)
+          ? PET_EDITOR_SCREENS.includes(state.screen)
+            ? state.back
+            : state.screen
+          : state.back;
+      return { screen: action.screen, back, menu: null, pending: null };
+    }
+    default:
+      return state;
+  }
+}
+export function appearanceValues(view) {
+  return {
+    companion: view.companion,
+    companionMotion: view.companionMotion,
+    petSize: view.petSize,
+    petModel: view.petModel,
+    opacity: view.opacity,
+  };
+}
+export const PET_INTERACTION_MESSAGES = {
+  zh: {
+    petHome: '喝水',
+    petWaterCard: '喝水',
+    petCountdownCard: '下班倒计时',
+    petEarningsCard: '收入',
+    petWaterAlert: '喝水提醒已到，可从右键菜单打开喝水卡片',
+    petPausedHint: '本班已暂停，可手动恢复。',
+    petMenu: '宠物菜单',
+    petBack: '返回',
+    petCloseAll: '关闭面板',
+    petWorkSettings: '作息与薪资',
+    petWaterSettings: '提醒设置',
+    petAppearance: '外观',
+    petRecord: '喝了一杯',
+    petQuiet30: '免打扰 30 分钟',
+    petQuiet60: '免打扰 1 小时',
+    petUnsaved: '有未保存的修改',
+    petUnsavedHint: '保存后继续，或放弃这次修改。',
+    petSaveContinue: '保存并继续',
+    petDiscard: '放弃修改',
+    petKeepEditing: '继续编辑',
+    petApplyAppearance: '应用外观',
+    petAppearanceHint: '大小和透明度可实时预览。应用后保存；取消会还原。',
+    petQuietActive: '喝水提醒已静音',
+    petHomeHint: '喝水、歇一会儿，都在这里。',
+    petQuietHint: '按自然时间，到期自动恢复。',
+    petResume: '恢复本班提醒',
+    petDismissReminder: '稍后处理',
+  },
+  en: {
+    petHome: 'Water',
+    petWaterCard: 'Water',
+    petCountdownCard: 'Shift countdown',
+    petEarningsCard: 'Earnings',
+    petWaterAlert: 'Water is due; open Water from the context menu',
+    petPausedHint: 'Paused for this shift. Resume when ready.',
+    petMenu: 'Pet menu',
+    petBack: 'Back',
+    petCloseAll: 'Close panel',
+    petWorkSettings: 'Schedule and pay',
+    petWaterSettings: 'Reminders',
+    petAppearance: 'Appearance',
+    petRecord: 'Had a glass',
+    petQuiet30: 'Quiet for 30 minutes',
+    petQuiet60: 'Quiet for 1 hour',
+    petUnsaved: 'Unsaved changes',
+    petUnsavedHint: 'Save to continue, or discard these changes.',
+    petSaveContinue: 'Save and continue',
+    petDiscard: 'Discard changes',
+    petKeepEditing: 'Keep editing',
+    petApplyAppearance: 'Apply appearance',
+    petAppearanceHint:
+      'Preview size and opacity now. Apply to save; Cancel restores the previous appearance.',
+    petQuietActive: 'Water reminders are muted',
+    petHomeHint: 'A drink or a little break, right here.',
+    petQuietHint: 'Uses clock time and resumes automatically.',
+    petResume: 'Resume reminders',
+    petDismissReminder: 'Handle later',
+  },
+};
+export const PET_INTERACTION_STYLE = `
+.owc-pet-workspace .owc-glass{opacity:var(--owc-alpha)}
+.owc-pet-water-card.owc-water-due{border-radius:14px}
+.owc-pet-water-alert{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-radius:12px;cursor:default;position:fixed!important;width:140px;box-sizing:border-box;min-height:30px!important;border:1px solid var(--owc-accent)!important;background:var(--dsw-alias-bg-overlay)!important;box-shadow:0 4px 12px #18354b18;font-size:11px!important;z-index:2}
+.owc-pet-panel.owc-pet-workspace{display:flex;flex-direction:column;overflow:hidden}
+.owc-pet-workspace>.owc-head{position:relative;flex:none;min-height:46px;padding:8px 12px;box-sizing:border-box}
+.owc-pet-workspace>.owc-pet-scroll{position:relative;min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
+.owc-pet-scroll::-webkit-scrollbar{display:none}
+.owc-pet-scroll .owc-save{position:sticky;bottom:0;background:var(--dsw-alias-bg-overlay);padding:10px 0;margin-bottom:0;z-index:2}
+.owc-pet-scroll .owc-appearance legend{display:none}
+.owc-pet-home{padding:14px}
+.owc-pet-home-clock{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--dsw-alias-label-secondary);margin-bottom:12px}
+.owc-pet-home-clock strong{font-size:24px;color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums}
+.owc-pet-water-card{padding:12px;border:1px solid color-mix(in srgb,var(--owc-accent) 16%,transparent);border-radius:14px;background:color-mix(in srgb,var(--owc-accent) 4%,transparent)}
+.owc-pet-water-card .owc-water-status{font-size:12px;font-variant-numeric:tabular-nums;height:34px;display:flex;align-items:center;overflow:hidden;margin:0 0 9px}
+.owc-pet-water-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;gap:10px}
+.owc-pet-water-row .owc-primary{flex:1;min-height:40px}
+.owc-pet-quiet-row{display:flex;gap:6px;margin-top:12px}
+.owc-pet-quiet-row button{flex:1;border:1px solid color-mix(in srgb,var(--owc-accent) 18%,transparent);font-size:11px;min-height:34px}
+.owc-pet-quiet-status{min-height:32px;display:flex;align-items:center;justify-content:space-between;font-size:10.5px;gap:5px;color:var(--dsw-alias-label-secondary)}
+.owc-pet-feedback{height:32px;overflow:hidden;display:flex;align-items:center;margin:6px 0 4px;font-size:11px;line-height:1.5;color:var(--owc-accent)}
+.owc-pet-home-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
+.owc-pet-home-links button{font-size:11px;min-height:32px;background:color-mix(in srgb,var(--dsw-alias-label-primary) 4%,transparent)}
+.owc-pet-context{position:fixed;z-index:3;padding:6px;border:1px solid color-mix(in srgb,var(--owc-accent) 18%,transparent);background:var(--dsw-alias-bg-overlay);border-radius:12px;box-shadow:0 10px 28px #132c4626;box-sizing:border-box;overflow:auto;cursor:default;touch-action:manipulation}
+.owc-pet-context button{display:flex;width:100%;justify-content:flex-start;min-height:34px;font-size:12px;padding:7px 10px}
+.owc-pet-context button:focus-visible{outline-offset:-2px}
+.owc-pet-context hr{border:0;border-top:1px solid color-mix(in srgb,var(--owc-accent) 12%,transparent);margin:5px 3px}
+.owc-pet-unsaved{padding:20px 16px;line-height:1.6}
+.owc-pet-unsaved h3{font-size:15px;margin:0 0 8px}
+.owc-pet-unsaved p{font-size:12px;color:var(--dsw-alias-label-secondary)}
+.owc-pet-unsaved button{width:100%;margin-top:8px;min-height:36px}
+.owc-pet-toast{position:fixed;width:208px;padding:9px 12px;box-sizing:border-box;border-radius:12px;background:var(--dsw-alias-bg-overlay);border:1px solid color-mix(in srgb,var(--owc-accent) 18%,transparent);font-size:11px;line-height:1.5;box-shadow:0 5px 16px #18354b18;pointer-events:none}
+`;

package/pet-motion.js

@@ -0,0 +1,110 @@
+// Independent, decorative motion only. Never writes preferences or drinking records.
+const PET_ACTIONS = {
+  look: { duration: 650, transforms: ['none', 'rotate(-1deg) translateY(-1px)', 'none'] },
+  greet: {
+    duration: 900,
+    transforms: ['none', 'translateY(2px) rotate(-2deg)', 'translateY(-4px) rotate(1deg)', 'none'],
+  },
+  celebrate: {
+    duration: 1200,
+    transforms: [
+      'none',
+      'translateY(-7px) rotate(-1deg)',
+      'translateY(1px)',
+      'translateY(-3px) rotate(1deg)',
+      'none',
+    ],
+  },
+  settle: {
+    duration: 550,
+    transforms: ['none', 'translateY(2px) scaleY(.985)', 'translateY(-2px)', 'none'],
+  },
+};
+
+export function createPetMotion(element, host, options = {}) {
+  const document = host.document;
+  const reduced = host.matchMedia?.('(prefers-reduced-motion: reduce)');
+  let enabled = options.enabled ?? true;
+  let resting = options.resting ?? false;
+  let animation = null;
+  let destroyed = false;
+  const allowed = () => !destroyed && enabled && !document.hidden && !reduced?.matches;
+  function stop() {
+    const previous = animation;
+    animation = null;
+    previous?.cancel();
+    delete element.dataset.action;
+    element.style.transform = '';
+  }
+  function sync() {
+    if (!allowed()) stop();
+    element.dataset.motion = allowed() && !resting ? 'idle' : 'off';
+  }
+  function play(action) {
+    if (!allowed() || !Object.hasOwn(PET_ACTIONS, action) || !element.animate) return false;
+    if (element.dataset.action === 'drag') return false;
+    if (action === 'look' && element.dataset.action) return false;
+    if (action === 'greet' && element.dataset.action === 'celebrate') return false;
+    stop();
+    const spec = PET_ACTIONS[action];
+    element.dataset.action = action;
+    try {
+      const running = element.animate(
+        spec.transforms.map((transform) => ({ transform })),
+        {
+          duration: spec.duration,
+          easing: 'ease-in-out',
+        },
+      );
+      animation = running;
+      running.finished.then(
+        () => {
+          if (animation === running) {
+            animation = null;
+            delete element.dataset.action;
+          }
+        },
+        () => {
+          if (animation === running) {
+            animation = null;
+            delete element.dataset.action;
+          }
+        },
+      );
+      return true;
+    } catch {
+      stop();
+      return false;
+    }
+  }
+  document.addEventListener('visibilitychange', sync);
+  reduced?.addEventListener?.('change', sync);
+  sync();
+  return {
+    play,
+    configure(next) {
+      if (next.resting && !resting) stop();
+      enabled = next.enabled;
+      resting = next.resting;
+      sync();
+    },
+    drag(direction) {
+      if (!allowed()) return;
+      stop();
+      element.dataset.action = 'drag';
+      element.style.transform = `translateY(-2px) rotate(${direction < 0 ? -2 : 2}deg)`;
+    },
+    release(cancelled = false) {
+      const dragged = element.dataset.action === 'drag';
+      stop();
+      if (dragged && !cancelled) play('settle');
+    },
+    destroy() {
+      destroyed = true;
+      stop();
+      element.dataset.motion = 'off';
+      document.removeEventListener('visibilitychange', sync);
+      reduced?.removeEventListener?.('change', sync);
+    },
+  };
+}

package/pet-surfaces.js

@@ -0,0 +1,194 @@
+// Shared layout for our own pet cards and context menu.
+export function petViewport(host) {
+  const visual = host.visualViewport;
+  return {
+    width: Math.max(1, Math.min(host.innerWidth, visual?.width ?? host.innerWidth)),
+    height: Math.max(1, Math.min(host.innerHeight, visual?.height ?? host.innerHeight)),
+    left: Math.max(0, visual?.offsetLeft ?? 0),
+    top: Math.max(0, visual?.offsetTop ?? 0),
+  };
+}
+export function petSurfaceWidth(screen, viewport) {
+  const ideal =
+    {
+      income: 320,
+      earnings: 320,
+      home: 336,
+      water: 360,
+      appearance: 360,
+      schedule: 400,
+      menu: 224,
+      reminder: 304,
+    }[screen] ?? 336;
+  return Math.max(1, Math.min(ideal, viewport.width - 24));
+}
+export function placePetSurface(
+  anchor,
+  viewport,
+  { width, height, kind = 'card', previous = null, point = null, obstacles = [] },
+) {
+  const edge = Math.min(
+      12,
+      Math.max(0, (viewport.width - 1) / 2),
+      Math.max(0, (viewport.height - 1) / 2),
+    ),
+    gap = 12;
+  const left = (viewport.left ?? 0) + edge,
+    top = (viewport.top ?? 0) + edge;
+  const right = (viewport.left ?? 0) + viewport.width - edge;
+  const bottom = (viewport.top ?? 0) + viewport.height - edge;
+  const w = Math.max(1, Math.min(width, right - left));
+  const natural = Math.max(1, height),
+    available = Math.max(1, bottom - top);
+  const full = Math.min(natural, available);
+  const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+  const candidates = [];
+  const add = (x, y, h, side) => {
+    h = Math.max(1, Math.min(h, available));
+    x = clamp(x, left, right - w);
+    y = clamp(y, top, bottom - h);
+    const intersection = (rect) =>
+      Math.max(0, Math.min(x + w, rect.x + rect.width) - Math.max(x, rect.x)) *
+      Math.max(0, Math.min(y + h, rect.y + rect.height) - Math.max(y, rect.y));
+    const overlap =
+      intersection(anchor) +
+      obstacles.reduce(
+        (sum, rect) =>
+          sum + intersection({ x: rect.left, y: rect.top, width: rect.width, height: rect.height }),
+        0,
+      );
+    const distance = previous ? Math.abs(previous.left - x) + Math.abs(previous.top - y) : 0;
+    candidates.push({
+      left: x,
+      top: y,
+      width: w,
+      height: h,
+      maxHeight: h,
+      side: overlap ? 'overlay' : side,
+      overlap,
+      clipped: natural - h,
+      distance,
+      order: candidates.length,
+    });
+  };
+  if (previous && Math.abs(previous.width - w) < 1)
+    add(previous.left, previous.top, full, previous.side);
+  if (kind === 'menu' && point) {
+    add(point.x + 8, point.y + 8, full, 'context-right');
+    add(point.x - w - 8, point.y + 8, full, 'context-left');
+    add(point.x + 8, point.y - full - 8, full, 'context-above-right');
+    add(point.x - w - 8, point.y - full - 8, full, 'context-above-left');
+  }
+  const preferredY = kind === 'menu' && point ? point.y + 6 : anchor.y + anchor.height - full;
+  add(anchor.x - w - gap, preferredY, full, 'left');
+  add(anchor.x + anchor.width + gap, preferredY, full, 'right');
+  const centered = anchor.x + anchor.width / 2 - w / 2;
+  add(centered, anchor.y - gap - full, full, 'above');
+  add(centered, anchor.y + anchor.height + gap, full, 'below');
+  const above = anchor.y - gap - top,
+    below = bottom - anchor.y - anchor.height - gap;
+  const minimum = Math.min(full, kind === 'menu' ? 160 : 240);
+  if (above >= minimum && above < full) add(centered, top, above, 'above');
+  if (below >= minimum && below < full)
+    add(centered, anchor.y + anchor.height + gap, below, 'below');
+  candidates.sort(
+    (a, b) =>
+      Number(a.overlap > 0) - Number(b.overlap > 0) ||
+      a.overlap - b.overlap ||
+      a.clipped - b.clipped ||
+      a.distance - b.distance ||
+      a.order - b.order,
+  );
+  const { overlap, clipped, distance, order, ...result } = candidates[0];
+  return result;
+}
+export const PET_SURFACE_MESSAGES = {
+  zh: {
+    petAppearancePreview: '角色预览',
+    petWaterBadge: '该喝水啦',
+    petClassicPreview: '应用后使用计时卡片',
+    petSurfaceHint: '内容较长时可用滚轮或触控滚动',
+  },
+  en: {
+    petAppearancePreview: 'Character preview',
+    petWaterBadge: 'Time for water',
+    petClassicPreview: 'Apply to use the clock card',
+    petSurfaceHint: 'Scroll with the wheel or touch when content is longer',
+  },
+};
+export const PET_SURFACE_STYLE = `
+.owc-v2{--owc-accent:#2563eb;--owc-on-accent:#fff;--owc-surface:var(--dsw-alias-bg-overlay,#fff);--owc-text:var(--dsw-alias-label-primary,#172033);--owc-muted:var(--dsw-alias-label-secondary,#526074);--owc-border:color-mix(in srgb,var(--owc-text) 13%,transparent);--owc-subtle:color-mix(in srgb,var(--owc-text) 4%,var(--owc-surface));--owc-hover:color-mix(in srgb,var(--owc-accent) 8%,var(--owc-surface));--owc-radius:16px;--owc-control-radius:10px;--owc-shadow:0 10px 32px color-mix(in srgb,var(--owc-text) 13%,transparent);--owc-control-height:36px;color:var(--owc-text);line-height:1.5}
+.owc-v2 .owc-content{max-height:var(--owc-viewport-height,calc(100dvh - 24px))}
+.owc-v2:not(.owc-pet-shell) .owc-head{position:sticky;top:0;z-index:2;background:var(--owc-surface)}
+.owc-v2:not(.owc-pet-shell) .owc-save{position:sticky;bottom:0;z-index:2;background:var(--owc-surface);padding:12px 0}
+.owc-v2 .owc-pet-toast{overflow-wrap:anywhere;overflow:auto;scrollbar-width:none}
+.owc-v2 .owc-pet-water-alert{border-color:var(--owc-accent)!important;color:var(--owc-accent)}
+.owc-v2 .owc-glass{background:var(--owc-surface);border:1px solid var(--owc-border);box-shadow:var(--owc-shadow);opacity:var(--owc-alpha,.94)}
+.owc-v2 .owc-pet-workspace{border-radius:var(--owc-radius);container-type:inline-size}
+.owc-v2 .owc-head{margin:0;padding:10px 16px;gap:8px;min-height:52px;border-bottom:1px solid var(--owc-border);box-sizing:border-box}
+.owc-v2 [data-pet-page-title]{font-size:14px!important;line-height:1.4;min-width:0;overflow-wrap:anywhere;font-weight:600}
+.owc-v2 [data-pet-page-title]:focus{outline:none}
+.owc-v2 :is(.owc-pet-workspace,.owc-pet-context) button{min-height:var(--owc-control-height);padding:7px 10px;font-size:13px;line-height:1.4;border-radius:var(--owc-control-radius);box-sizing:border-box}
+.owc-v2 :is(.owc-pet-workspace,.owc-pet-context) button:hover:not(:disabled){background:var(--owc-hover)}
+.owc-v2 button.owc-primary{min-height:40px;background:var(--owc-accent);color:var(--owc-on-accent);border-radius:var(--owc-control-radius);font-size:13px}
+.owc-v2 button.owc-primary:hover:not(:disabled){background:color-mix(in srgb,var(--owc-accent) 88%,#000)}
+.owc-v2 :is(button,input,select,summary):focus-visible{outline:2px solid var(--owc-accent);outline-offset:2px}
+.owc-v2 .owc-icon{flex:none;min-width:36px;padding:7px}
+.owc-v2 .owc-main,.owc-v2 .owc-form,.owc-v2 .owc-water-form,.owc-v2 .owc-pet-home{padding:16px;min-width:0;box-sizing:border-box}
+.owc-v2 .owc-main .owc-time{font-size:clamp(28px,10cqw,40px);font-weight:500;letter-spacing:-.5px;overflow-wrap:anywhere}
+.owc-v2 .owc-money{font-size:clamp(24px,9cqw,34px);overflow-wrap:anywhere;line-height:1.35}
+.owc-v2 :is(.owc-hint,.owc-muted,.owc-meta span,.owc-field>span,.owc-stats span,.owc-status,.owc-error,.owc-note){font-size:12px;line-height:1.55;color:var(--owc-muted)}
+.owc-v2 .owc-error{color:var(--dsw-alias-state-error-primary,#dc2626)}
+.owc-v2 .owc-meta span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
+.owc-v2 .owc-row-actions{flex-wrap:wrap;gap:4px;margin:12px 0 0}
+.owc-v2 .owc-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border-color:var(--owc-border)}
+.owc-v2 .owc-stats>div{min-width:0;background:var(--owc-subtle);border:1px solid var(--owc-border);border-radius:12px;padding:12px}
+.owc-v2 .owc-stats strong{font-size:14px;overflow-wrap:anywhere}
+.owc-v2 .owc-setting-group{padding:14px 12px 4px;background:var(--owc-subtle);border-color:var(--owc-border);border-radius:12px}
+.owc-v2 .owc-setting-group legend{font-size:13px}
+.owc-v2 .owc-field{margin-bottom:12px;min-width:0}
+.owc-v2 .owc-row2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
+.owc-v2 :is(input[type=text],input[type=time],input[type=number],select){max-width:100%;min-width:0;min-height:var(--owc-control-height);font-size:13px;border-color:var(--owc-border);border-radius:var(--owc-control-radius);background:var(--owc-surface);color:var(--owc-text)}
+.owc-v2 :is(input[type=checkbox],input[type=radio],input[type=range]){accent-color:var(--owc-accent)}
+.owc-v2 .owc-check{min-height:30px;font-size:13px;gap:9px}
+.owc-v2 .owc-private{flex-wrap:wrap;border-color:var(--owc-border);background:var(--owc-surface);border-radius:var(--owc-control-radius)}
+.owc-v2 .owc-days{gap:4px}
+.owc-v2 .owc-days button{min-width:0;padding:5px 2px;font-size:12px}
+.owc-v2 .owc-seg button{min-width:0}
+.owc-v2 .owc-water-presets{gap:8px}
+.owc-v2 .owc-water-presets button{font-size:12px;padding:7px 4px;border-color:var(--owc-border);white-space:normal}
+.owc-v2 .owc-water-form p{font-size:12px;line-height:1.55;overflow-wrap:anywhere}
+.owc-v2 .owc-water-card,.owc-v2 .owc-pet-water-card{padding:14px;border-color:var(--owc-border);background:var(--owc-subtle);border-radius:12px}
+.owc-v2 .owc-pet-water-card .owc-water-status{height:auto;min-height:40px;overflow:visible;font-size:13px;line-height:1.5;overflow-wrap:anywhere;margin-bottom:10px}
+.owc-v2 .owc-pet-water-row{font-size:12px;flex-wrap:wrap}
+.owc-v2 .owc-pet-water-row .owc-primary{min-width:120px}
+.owc-v2 .owc-pet-quiet-row{gap:8px;margin-top:14px}
+.owc-v2 .owc-pet-quiet-row button{min-width:0;font-size:12px;white-space:normal;border-color:var(--owc-border)}
+.owc-v2 .owc-pet-quiet-status{min-height:38px;height:auto;flex-wrap:wrap;font-size:12px;line-height:1.5;color:var(--owc-muted)}
+.owc-v2 .owc-pet-feedback{height:auto;min-height:36px;overflow:visible;font-size:12px;line-height:1.5;margin:8px 0;overflow-wrap:anywhere}
+.owc-v2 .owc-pet-home-links{gap:8px}
+.owc-v2 .owc-pet-home-links button{font-size:12px;background:var(--owc-subtle);border:1px solid var(--owc-border)}
+.owc-v2 .owc-pet-scroll{scrollbar-width:none;scroll-padding-block:12px 64px}
+.owc-v2 .owc-pet-natural{display:flow-root;min-width:0;width:100%}
+.owc-v2 .owc-pet-natural>.owc-form:last-child,.owc-v2 .owc-pet-natural>.owc-water-form:last-child{padding-bottom:0}
+.owc-v2 .owc-pet-scroll .owc-save{background:var(--owc-surface);padding:12px 0;border-top:1px solid var(--owc-border);gap:8px;flex-wrap:wrap}
+.owc-v2 .owc-save button{min-width:72px}
+.owc-v2 .owc-appearance-preview{height:260px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--owc-subtle);margin-bottom:16px;overflow:hidden}
+.owc-v2 .owc-appearance-preview .owc-pet-art{flex:none;animation:none}
+.owc-v2 .owc-appearance-preview .owc-pet-art *{animation:none!important}
+.owc-v2 .owc-appearance-preview p{font-size:13px;color:var(--owc-muted);padding:16px;text-align:center}
+.owc-v2 .owc-pet-context{padding:0;background:var(--owc-surface);border:1px solid var(--owc-border);border-radius:var(--owc-radius);box-shadow:var(--owc-shadow);scrollbar-width:none}
+.owc-v2 .owc-pet-context::-webkit-scrollbar{display:none}
+.owc-v2 .owc-menu-natural{padding:6px;display:flow-root;box-sizing:border-box;min-width:0}
+.owc-v2 .owc-pet-context button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;justify-content:flex-start;font-size:13px}
+.owc-v2 .owc-pet-context hr{border-color:var(--owc-border);margin:6px 4px}
+.owc-v2 .owc-pet-toast,.owc-v2 .owc-pet-clock,.owc-v2 .owc-pet-water-alert{background:var(--owc-surface)!important;color:var(--owc-text);border:1px solid var(--owc-border)!important;box-shadow:var(--owc-shadow)}
+.owc-v2 .owc-pet-toast{border-radius:12px;font-size:12px}
+.owc-v2 .owc-pet-unsaved{padding:20px 16px}
+.owc-v2 .owc-pet-unsaved p{font-size:13px;overflow-wrap:anywhere}
+@container (max-width:310px){.owc-v2 .owc-row2{grid-template-columns:1fr}.owc-v2 .owc-stats{gap:8px}.owc-v2 .owc-days{gap:2px}.owc-v2 .owc-days button{font-size:11px}}
+@media (pointer:coarse){.owc-v2{--owc-control-height:44px}.owc-v2 .owc-icon{min-width:44px}.owc-v2 button.owc-primary{min-height:44px}.owc-v2 :is(input[type=text],input[type=time],input[type=number],select){font-size:16px}.owc-v2 input[type=range]{min-height:36px}.owc-v2 .owc-check{min-height:44px}}
+@media (max-height:600px){.owc-v2 .owc-appearance-preview{height:120px}.owc-v2 .owc-appearance-preview svg{transform:scale(.55)}.owc-v2 .owc-appearance-preview img{transform:scale(.45)}}
+@media (prefers-contrast:more){.owc-v2{--owc-border:var(--owc-text)}.owc-v2 .owc-glass{opacity:1!important}}
+@media (prefers-reduced-transparency:reduce){.owc-v2 .owc-glass{opacity:1!important;backdrop-filter:none;-webkit-backdrop-filter:none}}
+`;

package/pet-video.js

@@ -0,0 +1,231 @@
+// Independent transparent-video playback. Presentation only; never records an action.
+const PET_VIDEO_SUPPORT = new WeakMap();
+
+export function petVideoAlphaSupported(host, source) {
+  if (PET_VIDEO_SUPPORT.has(host)) return PET_VIDEO_SUPPORT.get(host);
+  const result = new Promise((resolve) => {
+    const video = host.document.createElement('video');
+    let timer;
+    const finish = (supported) => {
+      host.clearTimeout(timer);
+      video.onloadeddata = video.onerror = null;
+      video.pause();
+      video.removeAttribute('src');
+      video.load();
+      resolve(supported);
+    };
+    if (!source || !video.canPlayType('video/webm; codecs="vp9"')) return finish(false);
+    video.muted = true;
+    video.playsInline = true;
+    video.preload = 'auto';
+    video.onloadeddata = () => {
+      try {
+        const canvas = host.document.createElement('canvas');
+        canvas.width = canvas.height = 16;
+        const context = canvas.getContext('2d', { willReadFrequently: true });
+        context.drawImage(video, 0, 0, 16, 16);
+        finish(
+          context.getImageData(1, 1, 1, 1).data[3] > 240 &&
+            context.getImageData(14, 14, 1, 1).data[3] < 8,
+        );
+      } catch {
+        finish(false);
+      }
+    };
+    video.onerror = () => finish(false);
+    timer = host.setTimeout(() => finish(false), 3000);
+    video.src = source;
+    video.load();
+  });
+  PET_VIDEO_SUPPORT.set(host, result);
+  return result;
+}
+
+export function createPetVideoMotion(element, host, base, clips, probeSource) {
+  const layer = element.querySelector('.owc-pet-video-layer');
+  if (!layer || !clips) return base;
+  const document = host.document;
+  const reduced = host.matchMedia?.('(prefers-reduced-motion: reduce)');
+  const capability = petVideoAlphaSupported(host, probeSource);
+  const failed = new Set();
+  const retired = new Map();
+  let enabled = false,
+    resting = false,
+    dragging = false,
+    unsupported = false,
+    idleTimer = null,
+    destroyed = false,
+    current = null;
+  const allowed = () => enabled && !destroyed && !document.hidden && !reduced?.matches;
+  function clearIdleTimer() {
+    host.clearTimeout(idleTimer);
+    idleTimer = null;
+  }
+  function startIdle() {
+    if (
+      allowed() &&
+      !resting &&
+      !dragging &&
+      !current &&
+      !unsupported &&
+      Object.hasOwn(clips, 'idle') &&
+      !failed.has('idle')
+    )
+      play('idle');
+  }
+  function scheduleIdle(delay = 0) {
+    clearIdleTimer();
+    if (!Object.hasOwn(clips, 'idle') || failed.has('idle') || unsupported || destroyed) return;
+    idleTimer = host.setTimeout(() => {
+      idleTimer = null;
+      startIdle();
+    }, delay);
+  }
+  function dispose(video) {
+    video.onplaying = video.onended = video.onerror = video.onwaiting = video.onstalled = null;
+    video.pause();
+    video.removeAttribute('src');
+    video.load();
+    video.remove();
+  }
+  function stop(fade = false) {
+    clearIdleTimer();
+    const run = current;
+    if (!run) return;
+    current = null;
+    host.clearTimeout(run.timer);
+    delete element.dataset.videoPlaying;
+    if (element.dataset.action === run.action) delete element.dataset.action;
+    if (!run.video) return;
+    const video = run.video;
+    video.onplaying = video.onended = video.onerror = video.onwaiting = video.onstalled = null;
+    video.pause();
+    video.style.opacity = '0';
+    if (fade && allowed()) {
+      const timer = host.setTimeout(() => {
+        retired.delete(video);
+        dispose(video);
+      }, 150);
+      retired.set(video, timer);
+    } else dispose(video);
+  }
+  function fallback(run, broken = false) {
+    if (current !== run) return;
+    if (broken) failed.add(run.action);
+    stop();
+    if (allowed() && run.action !== 'idle') {
+      base.play(run.action);
+      scheduleIdle(1400);
+    }
+  }
+  function play(action) {
+    if (!allowed() || dragging || element.dataset.action === 'drag') return false;
+    if (action === 'idle' && (resting || current || unsupported)) return false;
+    if (
+      current &&
+      (action === 'look' ||
+        current.action === action ||
+        (current.action === 'celebrate' && action === 'greet'))
+    )
+      return false;
+    if (!Object.hasOwn(clips, action) || failed.has(action) || unsupported) {
+      if (action === 'idle') return false;
+      if (current?.action === 'idle') stop();
+      const played = base.play(action);
+      if (played) scheduleIdle(1400);
+      return played;
+    }
+    stop();
+    base.release(true);
+    const run = { action, video: null, timer: null };
+    current = run;
+    element.dataset.action = action;
+    run.timer = host.setTimeout(() => fallback(run, true), 9000);
+    capability.then((supported) => {
+      if (current !== run || !allowed()) return;
+      if (!supported) {
+        unsupported = true;
+        return fallback(run);
+      }
+      const video = document.createElement('video');
+      run.video = video;
+      video.muted = true;
+      video.defaultMuted = true;
+      video.playsInline = true;
+      video.loop = action === 'idle';
+      video.disablePictureInPicture = true;
+      video.preload = 'auto';
+      video.setAttribute('aria-hidden', 'true');
+      video.setAttribute('playsinline', '');
+      video.onplaying = () => {
+        if (current !== run || !allowed()) return;
+        if (!Number.isFinite(video.duration) || video.duration <= 0 || video.duration > 15)
+          return fallback(run, true);
+        host.clearTimeout(run.timer);
+        run.timer =
+          action === 'idle'
+            ? null
+            : host.setTimeout(() => fallback(run, true), video.duration * 1000 + 2000);
+        element.dataset.videoPlaying = 'true';
+      };
+      video.onwaiting = video.onstalled = () => {
+        if (current !== run) return;
+        host.clearTimeout(run.timer);
+        run.timer = host.setTimeout(() => fallback(run, true), 4000);
+      };
+      video.onended = () => {
+        if (current === run) {
+          stop(true);
+          scheduleIdle();
+        }
+      };
+      video.onerror = () => fallback(run, true);
+      video.src = clips[action];
+      layer.appendChild(video);
+      try {
+        Promise.resolve(video.play()).catch(() => fallback(run, true));
+      } catch {
+        fallback(run, true);
+      }
+    });
+    return true;
+  }
+  const visibility = () => {
+    if (!allowed()) stop();
+    else scheduleIdle();
+  };
+  document.addEventListener('visibilitychange', visibility);
+  reduced?.addEventListener?.('change', visibility);
+  return {
+    play,
+    configure(next) {
+      if (!next.enabled || (next.resting && !resting)) stop();
+      enabled = next.enabled;
+      resting = next.resting;
+      base.configure(next);
+      startIdle();
+    },
+    drag(direction) {
+      dragging = true;
+      stop();
+      base.drag(direction);
+    },
+    release(cancelled) {
+      dragging = false;
+      base.release(cancelled);
+      scheduleIdle(cancelled ? 0 : 650);
+    },
+    destroy() {
+      destroyed = true;
+      stop();
+      for (const [video, timer] of retired) {
+        host.clearTimeout(timer);
+        dispose(video);
+      }
+      retired.clear();
+      document.removeEventListener('visibilitychange', visibility);
+      reduced?.removeEventListener?.('change', visibility);
+      base.destroy();
+    },
+  };
+}