@linxin666/dsh-pet 0.1.20 → 0.2.1

package/src/client/index.test.tsx

@@ -0,0 +1,95 @@
+// @vitest-environment jsdom
+/**
+ * The global pet entry container opts into the L2 semantic attributes
+ * (issue #506): the apply body mounts [data-dsh-pet-root] with
+ * data-dsh-plugin="pet" so skins can target the pet subtree.
+ */
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+// The npm SDK's client half is a closure-factory bundle for the GUI's
+// __ModuleLoader__ (not importable under vitest); provide defineStore /
+// createSnapshotStore (same fake-store pattern as the settings-card tests).
+vi.mock('@deepseek-ai/dsh-client-runtime/client', () => ({
+  defineStore: (spec: {
+    init: () => unknown
+    actions: Record<string, (draft: never, ...args: never[]) => void>
+  }) => ({
+    create: () => {
+      let value = spec.init()
+      const listeners = new Set<() => void>()
+      const actions: Record<string, (...args: unknown[]) => void> = {}
+      for (const [name, fn] of Object.entries(spec.actions)) {
+        actions[name] = (...args: unknown[]) => {
+          fn(value as never, ...(args as never[]))
+          for (const listener of listeners) listener()
+        }
+      }
+      return {
+        getSnapshot: () => value,
+        subscribe: (listener: () => void) => {
+          listeners.add(listener)
+          return () => { listeners.delete(listener) }
+        },
+        actions,
+      }
+    },
+  }),
+  createSnapshotStore: (init: unknown) => {
+    let value = init
+    const listeners = new Set<() => void>()
+    return {
+      getSnapshot: () => value,
+      set: (next: unknown) => { value = next; for (const listener of listeners) listener() },
+      update: (mutator: (draft: never) => void) => { mutator(value as never); for (const listener of listeners) listener() },
+      subscribe: (listener: () => void) => { listeners.add(listener); return () => { listeners.delete(listener) } },
+    }
+  },
+}))
+import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+import { apply } from './index.ts'
+
+beforeAll(() => {
+  document.documentElement.lang = 'zh'
+})
+
+afterEach(() => {
+  document.body.replaceChildren()
+})
+
+/** A minimal client root context: ready settings scope, no-op slot system. */
+function fakeContext(): ClientContext {
+  const scope = {
+    getSnapshot: () => ({
+      status: 'ready',
+      writable: true,
+      value: undefined,
+      base: undefined,
+      user: {},
+      revision: 1,
+      mode: 'host',
+    }),
+    subscribe: () => () => {},
+  }
+  return {
+    effect: (fn: () => unknown) => {
+      const dispose = fn()
+      return typeof dispose === 'function' ? dispose : () => {}
+    },
+    locale: { register: () => () => {} },
+    get: () => undefined,
+    settingsScope: { bind: () => scope },
+    slots: {
+      inject: (_name: string, callback: () => () => void) => callback(),
+      register: () => () => {},
+    },
+    sessions: undefined,
+  } as unknown as ClientContext
+}
+
+describe('pet client apply L2 semantic attributes (#506)', () => {
+  it('mounts the pet root container with data-dsh-plugin="pet"', () => {
+    apply(fakeContext())
+    const root = document.body.querySelector('[data-dsh-pet-root]')
+    expect(root).not.toBeNull()
+    expect(root!.getAttribute('data-dsh-plugin')).toBe('pet')
+  })
+})

package/src/client/index.ts

@@ -292,6 +292,7 @@ export function apply(ctx: ClientContext): void {
       // when visible, and the hidden-state summon button is fixed-positioned.
       const container = document.createElement('div')
       container.dataset.dshPetRoot = ''
+      container.dataset.dshPlugin = 'pet'
       document.body.appendChild(container)
       const petRoot = createRoot(container)
       petRoot.render(createElement(PetDockEntry, { ...injected(), t }))

package/src/client/locales.ts

@@ -20,6 +20,8 @@ export const zh = {
   'pet.state.loading': '宠物正在赶来…',
   'pet.state.error': '宠物迷路了（连接失败）',
   'pet.openSessionHint': '点击跳转到对应会话',
+  'pet.moreSessions': '展开其余 {n} 个会话的气泡',
+  'pet.collapseSessions': '收起会话气泡',
   // 一级设置页（settings.section 席位）。
   'settings.title': '宠物',
   'settings.description': '选择宠物并调整它的显示布局。',
@@ -66,6 +68,8 @@ export const en = {
   'pet.state.loading': 'The pet is on its way…',
   'pet.state.error': 'The pet is lost (connection failed)',
   'pet.openSessionHint': 'Click to jump to this session',
+  'pet.moreSessions': 'Expand {n} more session bubbles',
+  'pet.collapseSessions': 'Collapse session bubbles',
   // First-level settings section (the `settings.section` seat).
   'settings.title': 'Pet',
   'settings.description': 'Pick a pet and tune its display layout.',

package/src/client/pet-css.test.ts

@@ -0,0 +1,54 @@
+import { readFileSync } from 'node:fs'
+import { describe, expect, it } from 'vitest'
+
+const css = readFileSync(new URL('./pet.module.css', import.meta.url), 'utf8')
+
+describe('pet hover panel css', () => {
+  it('anchors the panel below the pet', () => {
+    const panel = css.match(/\.panel\s*\{([^}]*)\}/)?.[1] ?? ''
+    expect(panel).toContain('top: 100%')
+    expect(panel).toContain('margin-top: 8px')
+    expect(panel).not.toContain('right: 100%')
+  })
+
+  it('extends the hover bridge upward across the panel gap', () => {
+    const bridge = css.match(/\.panel::after\s*\{([^}]*)\}/)?.[1] ?? ''
+    expect(bridge).toContain('bottom: 100%')
+    expect(bridge).toContain('height: 14px')
+  })
+
+  it('keeps the whisper on the shared bubble glass for a unified palette', () => {
+    const whisper = css.match(/\.bubbleWhisper\s*\{([^}]*)\}/)?.[1] ?? ''
+    // Unified palette: the whisper inherits background/border/shadow/color
+    // from .bubble/.bubbleStatus, so a whispering bubble and a status bubble
+    // stacked side by side share the same DeepSeek-blue glass; only the mood
+    // (quotes, letter-spacing, entrance) is overridden.
+    expect(whisper).not.toContain('background')
+    expect(whisper).not.toContain('border')
+    expect(whisper).not.toContain('box-shadow')
+    expect(whisper).not.toContain('color')
+    expect(whisper).toContain('animation: pet-whisper-in')
+    expect(whisper).not.toContain('font-style: italic')
+    expect(whisper).not.toContain('pointer-events')
+    expect(whisper).not.toContain('position:')
+    expect(css).toContain('@keyframes pet-whisper-in')
+    // The mood overrides must be declared after .bubbleStatus to win the cascade.
+    expect(css.indexOf('.bubbleWhisper {')).toBeGreaterThan(css.indexOf('.bubbleStatus {'))
+  })
+
+  it('gives the panel and status bubbles entrance animations', () => {
+    expect(css).toContain('@keyframes pet-panel-in')
+    expect(css).toContain('@keyframes pet-bubble-in')
+    const panel = css.match(/\.panel\s*\{([^}]*)\}/)?.[1] ?? ''
+    expect(panel).toContain('animation: pet-panel-in')
+  })
+
+  it('can place the panel above and bridge the lower gap', () => {
+    const panel = css.match(/\.panelAbove\s*\{([^}]*)\}/)?.[1] ?? ''
+    expect(panel).toContain('bottom: 100%')
+    expect(panel).toContain('margin-bottom: 8px')
+    const bridge = css.match(/\.panelAbove::after\s*\{([^}]*)\}/)?.[1] ?? ''
+    expect(bridge).toContain('top: 100%')
+    expect(bridge).toContain('bottom: auto')
+  })
+})

package/src/client/pet.module.css

@@ -23,42 +23,115 @@
   border-radius: 999px;
   font-size: 12px;
   line-height: 1.4;
-  color: #fff;
+  color: #f4f7ff;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
   animation: pet-bubble-pop 2.6s ease-out forwards;
   pointer-events: none;
 }
 
+/* 互动反馈气泡：同属蓝色家族 —— 抚摸是 DeepSeek 品牌蓝，
+   喂食是深海晴空蓝，与状态气泡的蓝黑玻璃保持和谐。 */
 .bubblePet {
-  background: rgba(244, 114, 182, 0.92);
+  background: rgba(77, 107, 254, 0.95);
 }
 
 .bubbleFeed {
-  background: rgba(56, 189, 248, 0.92);
+  background: rgba(3, 105, 161, 0.95);
 }
 
+/* 状态气泡：虎鲸蓝黑渐变玻璃 + DeepSeek 蓝描边微光 + 进场浮现。
+   碎碎念不再单独渲染第二只气泡，也不换色调，而是以 .bubbleWhisper
+   接管这同一只气泡的文案，气泡栈内所有气泡共用同一片玻璃。 */
 .bubbleStatus {
   max-width: min(280px, calc(100vw - 24px));
   overflow: hidden;
   text-overflow: ellipsis;
-  background: rgba(15, 23, 42, 0.9);
-  border: 1px solid rgba(125, 211, 252, 0.5);
-  animation: none;
+  padding: 5px 12px;
+  background: linear-gradient(160deg, rgba(19, 28, 54, 0.9), rgba(7, 11, 26, 0.94));
+  border: 1px solid rgba(126, 152, 255, 0.45);
+  box-shadow:
+    0 4px 12px rgba(2, 6, 23, 0.35),
+    inset 0 1px 0 rgba(226, 232, 255, 0.1),
+    0 0 12px rgba(77, 107, 254, 0.18);
+  backdrop-filter: blur(8px);
+  letter-spacing: 0.02em;
+  animation: pet-bubble-in 240ms ease-out;
+}
+
+/* 碎碎念（与 .bubbleStatus 叠加使用）：同一只气泡、同一片蓝黑玻璃，
+   仅以「」引号、字距与入场动画表现内心独白 —— 弃用旧的深紫粉色调，
+   多会话气泡栈里状态气泡与碎碎念气泡颜色保持统一，不再出现色差。
+   规则顺序在 .bubbleStatus 之后，动画与字距声明方可胜出。 */
+.bubbleWhisper {
+  letter-spacing: 0.03em;
+  animation: pet-whisper-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.bubbleWhisper::before {
+  content: '「';
+  margin-right: 2px;
+  opacity: 0.7;
 }
 
-/* 多会话气泡栈：并行会话各自一个气泡，自精灵头顶向上堆叠，
-   最近更新的会话在最上。栈内气泡改流入列布局，不再绝对定位
-   互相覆盖。气泡可点击：点击跳转到对应会话。 */
+.bubbleWhisper::after {
+  content: '」';
+  margin-left: 2px;
+  opacity: 0.7;
+}
+
+/* 多会话气泡栈：默认收起为「主会话一只气泡 + 右上角 +N 角标」，
+   悬停或点按角标才展开整栈。反向列布局让 DOM 首位的主气泡钉在栈底
+   （紧贴精灵），展开时其余气泡从它上方向上生长，主气泡与角标原地
+   不动，悬停目标不会抖动。气泡可点击：点击跳转到对应会话。 */
 .bubbleStack {
   position: absolute;
   bottom: 100%;
   display: flex;
-  flex-direction: column;
+  flex-direction: column-reverse;
   align-items: center;
   gap: 4px;
   pointer-events: auto;
 }
 
+/* 主气泡的定位锚：+N 角标相对它定位，展开整栈时随之固定不动。 */
+.bubbleAnchor {
+  position: relative;
+  display: inline-flex;
+}
+
+/* +N 角标：收起态提示其余在忙会话数，点击/轻触展开或收起整栈。 */
+.bubbleMore {
+  position: absolute;
+  top: -9px;
+  right: -10px;
+  z-index: 1;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border: 1px solid rgba(126, 152, 255, 0.55);
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  color: #eef2ff;
+  background: linear-gradient(160deg, rgba(74, 104, 245, 0.95), rgba(47, 68, 184, 0.95));
+  box-shadow: 0 2px 6px rgba(2, 6, 23, 0.4);
+  cursor: pointer;
+  transition: filter 120ms ease;
+}
+
+.bubbleMore:hover {
+  filter: brightness(1.15);
+}
+
+.bubbleMore:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(126, 152, 255, 0.9);
+}
+
 .bubbleStack .bubble {
   position: relative;
   bottom: auto;
@@ -80,8 +153,44 @@
 
 .bubbleClickable:focus-visible {
   outline: none;
-  /* 2px accent ring on the pet's own palette, theme-agnostic. */
-  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.85);
+  /* 2px DeepSeek-blue ring on the pet's own palette, theme-agnostic. */
+  box-shadow: 0 0 0 2px rgba(126, 152, 255, 0.9);
+}
+
+@keyframes pet-bubble-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes pet-whisper-in {
+  0% {
+    opacity: 0;
+    transform: translateY(8px) scale(0.9);
+  }
+  60% {
+    transform: translateY(-1px) scale(1.02);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes pet-panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
 @keyframes pet-bubble-pop {
@@ -105,39 +214,56 @@
   }
 }
 
-/* 悬浮面板位于精灵左侧（bottom 对齐），不再占据精灵上方的空间：
+/* 悬浮面板默认位于精灵脚下，不再占据精灵上方的空间：
    会话气泡栈独占精灵头顶区域，两者互不遮挡 —— 气泡因此可以始终
-   显示并保持可点击，不必在 hover 时让位给面板。 */
+   显示并保持可点击，不必在 hover 时让位给面板。仅当视口底部空间
+   不足时，面板才回退到精灵上方。 */
 .panel {
   position: absolute;
-  bottom: 0;
-  right: 100%;
-  margin-right: 8px;
-  background: rgba(15, 23, 42, 0.92);
-  border: 1px solid rgba(148, 163, 184, 0.35);
-  border-radius: 10px;
-  padding: 8px 10px;
-  color: #e2e8f0;
+  top: 100%;
+  margin-top: 8px;
+  background: linear-gradient(165deg, rgba(19, 28, 54, 0.95), rgba(7, 11, 26, 0.97));
+  border: 1px solid rgba(126, 152, 255, 0.3);
+  border-radius: 12px;
+  padding: 10px 12px;
+  color: #e6ebf8;
   font-size: 12px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
-  backdrop-filter: blur(6px);
+  box-shadow:
+    0 8px 24px rgba(2, 6, 23, 0.45),
+    0 0 0 1px rgba(77, 107, 254, 0.1),
+    inset 0 1px 0 rgba(226, 232, 255, 0.08);
+  backdrop-filter: blur(10px);
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  min-width: 132px;
+  gap: 7px;
+  min-width: 148px;
+  animation: pet-panel-in 200ms cubic-bezier(0.22, 1, 0.36, 1);
+  transform-origin: 50% 0;
 }
 
-/* 面板右缘与图标左缘之间的 hover 桥接（issue #49 的水平版）：
-   面板在图标左侧留有 8px 间隙，指针滑过间隙时会触发容器的
-   pointerleave，面板会在指针抵达按钮前收起。这段透明伪元素把命中区
-   向右延伸、覆盖间隙，使指针在图标与按钮之间始终停留在 hover 区域。 */
+/* 面板顶边与精灵底边之间的 hover 桥接（issue #49）：
+   面板在精灵下方留有 8px 间隙，透明伪元素向上覆盖间隙，
+   使指针在精灵与按钮之间始终停留在 hover 区域。 */
 .panel::after {
   content: '';
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 100%;
-  width: 14px;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  height: 14px;
+}
+
+.panelAbove {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 8px;
+  transform-origin: 50% 100%;
+}
+
+.panelAbove::after {
+  top: 100%;
+  bottom: auto;
 }
 
 .rankRow {
@@ -149,6 +275,28 @@
 
 .nameCell {
   font-weight: 600;
+  letter-spacing: 0.02em;
+  background: linear-gradient(90deg, #a9c1ff, #6c8bff 60%, #4d6bfe);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* 面板数值的专属配色：称号浅品牌蓝、小鱼干清蓝、亲密度暖金 ——
+   与 DeepSeek 蓝同族，仅留一枚金色点缀，两行数据扫一眼就能分辨。 */
+.statRank {
+  color: #9db4ff;
+  font-weight: 600;
+}
+
+.statTreats {
+  color: #7dd3fc;
+  font-weight: 600;
+}
+
+.statPoints {
+  color: #fcd34d;
+  font-weight: 600;
 }
 
 .renameRow {
@@ -160,19 +308,19 @@
 .nameInput {
   flex: 1;
   min-width: 0;
-  border: 1px solid rgba(125, 211, 252, 0.5);
+  border: 1px solid rgba(126, 152, 255, 0.5);
   border-radius: 6px;
-  background: rgba(30, 41, 59, 0.9);
-  color: #e2e8f0;
+  background: rgba(19, 28, 54, 0.9);
+  color: #e6ebf8;
   font-size: 12px;
   padding: 3px 6px;
   outline: none;
 }
 
 .nameInput:focus {
-  border-color: #38bdf8;
-  /* 2px accent ring (theme-agnostic) replacing the removed default outline. */
-  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.45);
+  border-color: #4d6bfe;
+  /* 2px DeepSeek-blue ring (theme-agnostic) replacing the removed default outline. */
+  box-shadow: 0 0 0 2px rgba(77, 107, 254, 0.45);
 }
 
 .actions {
@@ -186,31 +334,37 @@
   border-radius: 6px;
   padding: 4px 8px;
   font-size: 12px;
+  font-weight: 600;
   cursor: pointer;
-  color: #0f172a;
-  background: linear-gradient(180deg, #7dd3fc, #38bdf8);
-  transition: filter 120ms ease, box-shadow 120ms ease;
+  color: #fff;
+  background: linear-gradient(180deg, #4a68f5, #3a55e0);
+  box-shadow: 0 2px 6px rgba(77, 107, 254, 0.3);
+  transition: filter 120ms ease, box-shadow 120ms ease, transform 120ms ease;
 }
 
 .action:hover {
   filter: brightness(1.08);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 10px rgba(77, 107, 254, 0.4);
 }
 
 .action:active {
   filter: brightness(0.94);
+  transform: translateY(0);
+  box-shadow: 0 1px 4px rgba(77, 107, 254, 0.3);
 }
 
 .action:focus-visible {
   outline: none;
-  /* 2px accent ring on the pet's own palette; stays visible on the dark
-     glass panel regardless of the GUI theme (theme-agnostic). */
-  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.85);
+  /* 2px DeepSeek-blue ring on the pet's own palette; stays visible on the
+     dark glass panel regardless of the GUI theme (theme-agnostic). */
+  box-shadow: 0 0 0 2px rgba(126, 152, 255, 0.9);
 }
 
 .summon {
-  border: 1px dashed rgba(125, 211, 252, 0.6);
-  background: rgba(15, 23, 42, 0.75);
-  color: #7dd3fc;
+  border: 1px dashed rgba(126, 152, 255, 0.6);
+  background: rgba(7, 11, 26, 0.75);
+  color: #8ea6ff;
   border-radius: 999px;
   padding: 2px 10px;
   font-size: 11px;
@@ -220,31 +374,35 @@
 }
 
 .summon:hover {
-  border-color: rgba(125, 211, 252, 0.95);
-  color: #bae6fd;
-  background: rgba(15, 23, 42, 0.9);
+  border-color: rgba(126, 152, 255, 0.95);
+  color: #c3d3ff;
+  background: rgba(7, 11, 26, 0.9);
 }
 
 .summon:active {
-  color: #7dd3fc;
-  border-color: rgba(125, 211, 252, 0.8);
+  color: #8ea6ff;
+  border-color: rgba(126, 152, 255, 0.8);
 }
 
 .summon:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.85);
+  box-shadow: 0 0 0 2px rgba(126, 152, 255, 0.9);
 }
 
 /* Reduced motion: freeze the reaction bubble and kill the overlay transitions
    so the pet's motion is static or minimal without hiding interaction. */
 @media (prefers-reduced-motion: reduce) {
-  .bubble {
+  .bubble,
+  .bubbleStatus,
+  .bubbleWhisper,
+  .panel {
     animation: none;
     opacity: 1;
   }
 
   .action,
-  .summon {
+  .summon,
+  .bubbleMore {
     transition: none;
   }
 }

package/src/client/sequences.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest'
+import type { PetTrackDef } from '../registry.ts'
+import type { PetAnimation } from '../state.ts'
+import { sequenceFrameAt } from './sequences.ts'
+
+const track = (durations: number[]): PetTrackDef => ({
+  frames: durations.map((_, index) => index),
+  durations,
+  loop: true,
+})
+
+const tracks = {
+  running: track([100, 200]),
+  waiting: track([300, 100]),
+} as Record<PetAnimation, PetTrackDef>
+
+describe('sequenceFrameAt', () => {
+  const sequence: PetAnimation[] = ['running', 'waiting']
+
+  it('finishes every frame of one track before advancing', () => {
+    expect(sequenceFrameAt(sequence, tracks, 0)).toEqual({ animation: 'running', frameIndex: 0 })
+    expect(sequenceFrameAt(sequence, tracks, 100)).toEqual({ animation: 'running', frameIndex: 1 })
+    expect(sequenceFrameAt(sequence, tracks, 299)).toEqual({ animation: 'running', frameIndex: 1 })
+    expect(sequenceFrameAt(sequence, tracks, 300)).toEqual({ animation: 'waiting', frameIndex: 0 })
+    expect(sequenceFrameAt(sequence, tracks, 600)).toEqual({ animation: 'waiting', frameIndex: 1 })
+  })
+
+  it('loops the whole sequence and preserves overshoot', () => {
+    expect(sequenceFrameAt(sequence, tracks, 700)).toEqual({ animation: 'running', frameIndex: 0 })
+    expect(sequenceFrameAt(sequence, tracks, 850)).toEqual({ animation: 'running', frameIndex: 1 })
+    expect(sequenceFrameAt(sequence, tracks, 1_420)).toEqual({ animation: 'running', frameIndex: 0 })
+  })
+})

package/src/client/sequences.ts

@@ -0,0 +1,33 @@
+/** Pure timing helpers for manifest-defined scene animation sequences. */
+
+import type { PetTrackDef } from '../registry.ts'
+import type { PetAnimation } from '../state.ts'
+
+export interface SequenceFrame {
+  animation: PetAnimation
+  frameIndex: number
+}
+
+/** Resolve the active track and frame after elapsed milliseconds of a looping sequence. */
+export function sequenceFrameAt(
+  sequence: readonly PetAnimation[],
+  tracks: Record<PetAnimation, PetTrackDef>,
+  elapsedMs: number,
+): SequenceFrame {
+  const itemDurations = sequence.map(animation => tracks[animation].durations.reduce((sum, value) => sum + value, 0))
+  const sequenceDuration = itemDurations.reduce((sum, value) => sum + value, 0)
+  let offset = Math.max(0, elapsedMs) % sequenceDuration
+  let itemIndex = 0
+  while (itemIndex < sequence.length - 1 && offset >= itemDurations[itemIndex]!) {
+    offset -= itemDurations[itemIndex]!
+    itemIndex += 1
+  }
+  const animation = sequence[itemIndex]!
+  const track = tracks[animation]
+  let frameIndex = 0
+  while (frameIndex < track.frames.length - 1 && offset >= track.durations[frameIndex]!) {
+    offset -= track.durations[frameIndex]!
+    frameIndex += 1
+  }
+  return { animation, frameIndex }
+}