dsh-offwork 1.0.1 → 1.1.0

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: 'View water reminder',
+    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{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-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 button.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 button.owc-pet-clock,.owc-v2 button.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-view.js

@@ -0,0 +1,272 @@
+// Independent Harness pet presentation. No third-party pet code or assets.
+export const PET_MODEL = Object.freeze({ id: 'xiaoxie-original', renderer: 'svg', license: 'MIT' });
+
+export const PET_MODELS = Object.freeze({
+  'whale-dress': {
+    id: 'whale-dress',
+    renderer: 'image',
+    widthScale: 1.3125,
+    heightScale: 2.1,
+    label: 'petWhaleDress',
+  },
+  'whale-ornate': {
+    id: 'whale-ornate',
+    renderer: 'image',
+    widthScale: 1.3125,
+    heightScale: 2.1,
+    label: 'petWhaleOrnate',
+  },
+  'xiaoxie-original': { ...PET_MODEL, widthScale: 1, heightScale: 1.1, label: 'petDroplet' },
+});
+export function petModel(id) {
+  return Object.hasOwn(PET_MODELS, id) ? PET_MODELS[id] : PET_MODELS['whale-dress'];
+}
+
+export function petLayout(
+  position,
+  viewport,
+  size = 132,
+  contentHeight = 420,
+  modelId = 'xiaoxie-original',
+) {
+  const model = petModel(modelId);
+  const originX = viewport.left ?? 0,
+    originY = viewport.top ?? 0;
+  const edge = 12,
+    gap = 12;
+  const width = Math.max(1, viewport.width),
+    height = Math.max(1, viewport.height);
+  const artworkSize = Math.max(
+    1,
+    Math.min(
+      size,
+      Math.max(1, (width - edge * 2) / model.widthScale),
+      Math.max(1, Math.floor((height - edge * 2 - 30) / model.heightScale)),
+    ),
+  );
+  const petWidth = Math.min(
+    Math.max(1, width - edge * 2),
+    Math.max(148, artworkSize * model.widthScale),
+  );
+  const petHeight = Math.ceil(artworkSize * model.heightScale) + 30;
+  const bound = (n, max) => Math.max(Math.min(edge, max), Math.min(n, max));
+  const x = bound(
+    Number.isFinite(position?.x) ? position.x - originX : width - petWidth - 32,
+    Math.max(0, width - petWidth - edge),
+  );
+  const y = bound(
+    Number.isFinite(position?.y) ? position.y - originY : height - petHeight - 36,
+    Math.max(0, height - petHeight - edge),
+  );
+  const panelWidth = Math.min(296, Math.max(1, width - edge * 2));
+  let side =
+    x >= panelWidth + gap + edge
+      ? 'left'
+      : width - x - petWidth >= panelWidth + gap + edge
+        ? 'right'
+        : 'stack';
+  let maxHeight = Math.max(60, height - edge * 2);
+  let left = side === 'left' ? x - gap - panelWidth : x + petWidth + gap;
+  let top;
+  if (side === 'stack') {
+    left = Math.max(edge, Math.min(x + petWidth - panelWidth, width - panelWidth - edge));
+    const above = y - gap - edge;
+    const below = height - y - petHeight - gap - edge;
+    if (Math.max(above, below) < 48) {
+      side = 'overlay';
+      maxHeight = Math.max(1, height - edge * 2);
+      top = Math.min(edge, height / 2);
+    } else {
+      side = above >= below ? 'above' : 'below';
+      maxHeight = Math.max(48, side === 'above' ? above : below);
+      top = side === 'above' ? y - gap - Math.min(contentHeight, maxHeight) : y + petHeight + gap;
+    }
+  } else {
+    top = Math.max(
+      edge,
+      Math.min(y + petHeight - contentHeight, height - Math.min(contentHeight, maxHeight) - edge),
+    );
+  }
+  return {
+    x: x + originX,
+    y: y + originY,
+    petWidth,
+    artworkSize,
+    petHeight,
+    panel: {
+      left: left + originX,
+      top: Math.max(0, top) + originY,
+      width: panelWidth,
+      maxHeight,
+      side,
+    },
+  };
+}
+
+// Original full-body Xiaoxie: droplet body, small feet and a scarf.
+export function petArtwork(
+  h,
+  presentation,
+  size,
+  reaction = '',
+  modelId = 'xiaoxie-original',
+  sprites = {},
+) {
+  const { pose, animate } = presentation;
+  const model = petModel(modelId);
+  if (model.renderer === 'image' && sprites[model.id])
+    return h('img', {
+      key: model.id + ':' + pose + ':' + reaction,
+      src: sprites[model.id],
+      alt: '',
+      'aria-hidden': true,
+      draggable: false,
+      width: size * model.widthScale,
+      height: size * model.heightScale,
+      className: 'owc-pet-art owc-pet-portrait',
+      '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,
+      viewBox: '0 0 160 176',
+      width: size,
+      height: size * 1.1,
+      className: 'owc-pet-art',
+      'data-pose': pose,
+      'data-animate': animate,
+      'aria-hidden': true,
+      focusable: false,
+    },
+    h('ellipse', { cx: 80, cy: 160, rx: 42, ry: 6, fill: '#183b65', opacity: 0.13 }),
+    h(
+      'g',
+      {
+        className: 'owc-pet-body',
+        stroke: '#315b82',
+        strokeWidth: 2.2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+      },
+      h('ellipse', { cx: 58, cy: 148, rx: 12, ry: 8, fill: '#92cce2' }),
+      h('ellipse', { cx: 102, cy: 148, rx: 12, ry: 8, fill: '#92cce2' }),
+      path(
+        pose === 'happy' ? 'M36 86Q14 91 15 65Q28 65 43 76Z' : 'M36 87Q15 87 19 109Q31 113 44 99Z',
+        { fill: '#a4dcea' },
+      ),
+      path(
+        pose === 'happy'
+          ? 'M124 86Q146 91 145 65Q132 65 117 76Z'
+          : 'M124 87Q145 87 141 109Q129 113 116 99Z',
+        { fill: '#a4dcea' },
+      ),
+      path(
+        'M80 12C67 34 38 47 34 81C29 117 46 149 80 149C114 149 131 117 126 81C122 47 93 34 80 12Z',
+        { fill: '#c7eaf3' },
+      ),
+      path('M64 37Q48 53 44 69', { fill: 'none', stroke: '#fff', strokeWidth: 6, opacity: 0.8 }),
+      path('M46 113Q80 126 114 113L109 128Q79 137 51 127Z', { fill: '#fff1bc', stroke: '#b49454' }),
+      path('M102 123L113 145L100 147L92 127Z', { fill: '#ffe39b', stroke: '#b49454' }),
+      h('ellipse', { cx: 80, cy: 111, rx: 8, ry: 5, fill: '#e5f6fa', stroke: 'none' }),
+      asleep
+        ? path('M51 79Q59 85 67 79M93 79Q101 85 109 79', {
+            fill: 'none',
+            stroke: '#24425d',
+            strokeWidth: 3,
+          })
+        : h(
+            'g',
+            { fill: '#24425d', stroke: 'none' },
+            h('ellipse', { cx: 59, cy: 78, rx: 3.5, ry: 5 }),
+            h('ellipse', { cx: 101, cy: 78, rx: 3.5, ry: 5 }),
+          ),
+      path(
+        pose === 'happy'
+          ? 'M69 91Q80 108 91 91Z'
+          : pose === 'offline'
+            ? 'M74 95H86'
+            : 'M72 93Q80 101 88 93',
+        { fill: pose === 'happy' ? '#f19baf' : 'none', stroke: '#24425d', strokeWidth: 2.5 },
+      ),
+      h(
+        'g',
+        { fill: '#f0a2af', stroke: 'none', opacity: 0.65 },
+        h('ellipse', { cx: 46, cy: 91, rx: 8, ry: 4 }),
+        h('ellipse', { cx: 114, cy: 91, rx: 8, ry: 4 }),
+      ),
+      pose === 'drink' &&
+        h(
+          'g',
+          { fill: '#fff', stroke: '#44728f' },
+          path('M113 103H139L135 133H117Z'),
+          path('M140 108H146Q154 121 138 122', { fill: 'none' }),
+          path('M119 115H134', { stroke: '#6dc9e2', strokeWidth: 5 }),
+        ),
+      pose === 'quiet' &&
+        path('M122 32H135L122 44H135', { fill: 'none', stroke: '#67899c', strokeWidth: 3 }),
+    ),
+  );
+}
+
+export const PET_MESSAGES = {
+  zh: {
+    petOpen: '打开宠物面板',
+    petCharacter: '角色形象',
+    petWhaleDress: '鲸蓝少女 · 长裙',
+    petWhaleOrnate: '鲸蓝少女 · 礼裙',
+    petDroplet: '小歇 · 水滴',
+    petClose: '收起宠物面板',
+    petQuick: '日常陪伴',
+    petDetails: '下班与收入',
+    petSize: '宠物大小',
+    petHint: '左键喝水 · 右键菜单 · 拖动移动',
+    petMode: '宠物模式',
+    petClock: '下班倒计时',
+  },
+  en: {
+    petOpen: 'Open pet panel',
+    petCharacter: 'Character',
+    petWhaleDress: 'Blue whale · Long dress',
+    petWhaleOrnate: 'Blue whale · Ornate dress',
+    petDroplet: 'Xiaoxie · Droplet',
+    petClose: 'Close pet panel',
+    petQuick: 'Daily companion',
+    petDetails: 'Clock and earnings',
+    petSize: 'Pet size',
+    petHint: 'Click for water · right-click for menu · drag to move',
+    petMode: 'Pet mode',
+    petClock: 'Shift countdown',
+  },
+};
+
+export const PET_STYLE = `
+.owc-v2.owc-pet-shell{border-radius:0;touch-action:none;cursor:default;overflow:visible}
+.owc-pet-stage{display:flex;flex-direction:column;align-items:center;position:relative}
+.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-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}
+@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}
+@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-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)}
+.owc-pet-panel>.owc-content{max-height:inherit}
+.owc-pet-panel .owc-glass{opacity:max(var(--owc-alpha),.94)}
+.owc-pet-tabs{display:flex;gap:5px;padding:8px 14px 0}
+.owc-pet-tabs button{flex:1;font-size:11px}
+.owc-pet-tabs button[aria-pressed=true]{color:var(--owc-accent);background:color-mix(in srgb,var(--owc-accent) 10%,transparent)}
+.owc-pet-time{padding:12px 17px 0;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--dsw-alias-label-secondary);font-size:11px}
+.owc-pet-time strong{font-size:21px;color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums}
+.owc-pet-speech{padding:12px 16px;font-size:12px;line-height:1.65}
+.owc-pet-speech strong{display:block;font-size:11px;color:var(--dsw-alias-label-secondary);margin-bottom:4px}
+@media(prefers-reduced-motion:reduce){.owc-pet-art,.owc-pet-art *{animation:none!important;transition:none!important}}
+`;