@morscherlab/mint-sdk 1.2.0-beta.3 → 1.2.0-beta.5

package/src/__tests__/composables/useProtocolTemplates.test.ts

@@ -0,0 +1,64 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useProtocolTemplates } from '../../composables/useProtocolTemplates'
+
+const STORAGE_KEY = 'mint-custom-protocol-templates'
+
+function installLocalStorage() {
+  const storage: Record<string, string> = {}
+  vi.stubGlobal('localStorage', {
+    get length() {
+      return Object.keys(storage).length
+    },
+    key: vi.fn((index: number) => Object.keys(storage)[index] ?? null),
+    getItem: vi.fn((key: string) => storage[key] ?? null),
+    setItem: vi.fn((key: string, value: string) => {
+      storage[key] = value
+    }),
+    removeItem: vi.fn((key: string) => {
+      delete storage[key]
+    }),
+    clear: vi.fn(() => {
+      for (const key of Object.keys(storage)) delete storage[key]
+    }),
+  } as unknown as Storage)
+}
+
+describe('useProtocolTemplates', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+    vi.unstubAllGlobals()
+    installLocalStorage()
+  })
+
+  it('ignores corrupted custom template storage', () => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({ invalid: true }))
+
+    const templates = useProtocolTemplates()
+
+    expect(templates.customTemplates.value).toEqual([])
+    expect(templates.allTemplates.value.length).toBeGreaterThan(0)
+  })
+
+  it('filters invalid custom template entries', () => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify([
+      { id: 'bad', name: 'Missing parameters', type: 'custom' },
+      {
+        id: 'custom-valid',
+        name: 'Valid custom step',
+        type: 'custom',
+        parameters: [],
+      },
+    ]))
+
+    const templates = useProtocolTemplates()
+
+    expect(templates.customTemplates.value).toEqual([
+      {
+        id: 'custom-valid',
+        name: 'Valid custom step',
+        type: 'custom',
+        parameters: [],
+      },
+    ])
+  })
+})

package/src/__tests__/composables/useRequestSyncState.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, it } from 'vitest'
+
+import { useRequestSyncState } from '../../composables/useRequestSyncState'
+
+describe('useRequestSyncState', () => {
+  it('starts with idle request state', () => {
+    const state = useRequestSyncState()
+
+    expect(state.loading.value).toBe(false)
+    expect(state.error.value).toBeNull()
+    expect(state.lastLoadedAt.value).toBeNull()
+    expect(state.lastSavedAt.value).toBeNull()
+    expect(state.lastRunAt.value).toBeNull()
+  })
+
+  it('normalizes errors and supports explicit clearing', () => {
+    const state = useRequestSyncState('Default failure')
+
+    expect(state.setError(new Error('Backend rejected request'))).toBe(
+      'Backend rejected request',
+    )
+    expect(state.error.value).toBe('Backend rejected request')
+
+    expect(state.setError('String failure')).toBe('String failure')
+    expect(state.error.value).toBe('String failure')
+
+    expect(state.setError({ message: 'Validation failed' })).toBe('Validation failed')
+    expect(state.error.value).toBe('Validation failed')
+
+    expect(state.setError({ reason: 'unknown' })).toBe('Default failure')
+    state.clearError()
+    expect(state.error.value).toBeNull()
+  })
+
+  it('marks load, save, and run timestamps', () => {
+    const state = useRequestSyncState()
+    const loadedAt = new Date('2026-05-07T09:00:00Z')
+    const savedAt = new Date('2026-05-07T09:01:00Z')
+    const runAt = new Date('2026-05-07T09:02:00Z')
+
+    state.markLoaded(loadedAt)
+    state.markSaved(savedAt)
+    state.markRun(runAt)
+
+    expect(state.lastLoadedAt.value).toBe(loadedAt)
+    expect(state.lastSavedAt.value).toBe(savedAt)
+    expect(state.lastRunAt.value).toBe(runAt)
+  })
+
+  it('wraps successful operations and marks requested sync timestamps', async () => {
+    const state = useRequestSyncState()
+
+    const result = await state.run(async () => {
+      expect(state.loading.value).toBe(true)
+      return { ok: true }
+    }, { success: 'load' })
+
+    expect(result).toEqual({ ok: true })
+    expect(state.loading.value).toBe(false)
+    expect(state.error.value).toBeNull()
+    expect(state.lastLoadedAt.value).toBeInstanceOf(Date)
+    expect(state.lastSavedAt.value).toBeNull()
+    expect(state.lastRunAt.value).toBeNull()
+  })
+
+  it('wraps successful run operations and marks lastRunAt', async () => {
+    const state = useRequestSyncState()
+
+    const result = await state.run(async () => 'done', { success: 'run' })
+
+    expect(result).toBe('done')
+    expect(state.lastLoadedAt.value).toBeNull()
+    expect(state.lastSavedAt.value).toBeNull()
+    expect(state.lastRunAt.value).toBeInstanceOf(Date)
+  })
+
+  it('wraps failed operations, sets error, and rethrows', async () => {
+    const state = useRequestSyncState()
+    const failure = new Error('Network down')
+
+    await expect(state.run(async () => {
+      expect(state.loading.value).toBe(true)
+      throw failure
+    }, { success: 'save' })).rejects.toThrow('Network down')
+
+    expect(state.loading.value).toBe(false)
+    expect(state.error.value).toBe('Network down')
+    expect(state.lastLoadedAt.value).toBeNull()
+    expect(state.lastSavedAt.value).toBeNull()
+    expect(state.lastRunAt.value).toBeNull()
+  })
+})

package/src/__tests__/composables/useResourceCrud.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest'
+
+import { useResourceCrud } from '../../composables/useResourceCrud'
+
+interface Item {
+  id: string
+  name: string
+}
+
+describe('useResourceCrud', () => {
+  it('loads and mutates local resource state through an adapter', async () => {
+    const remote: Item[] = [{ id: 'a', name: 'Alpha' }]
+    const resource = useResourceCrud<Item, Pick<Item, 'name'>, Partial<Item>, string>({
+      adapter: {
+        list: async () => [...remote],
+        create: async payload => {
+          const item = { id: payload.name.toLowerCase(), name: payload.name }
+          remote.push(item)
+          return item
+        },
+        update: async (id, payload) => {
+          const item = { id, name: payload.name ?? 'Untitled' }
+          remote.splice(remote.findIndex(candidate => candidate.id === id), 1, item)
+          return item
+        },
+        remove: async id => {
+          remote.splice(remote.findIndex(candidate => candidate.id === id), 1)
+        },
+      },
+    })
+
+    await resource.load()
+    expect(resource.items.value).toEqual([{ id: 'a', name: 'Alpha' }])
+
+    await resource.createItem({ name: 'Beta' })
+    expect(resource.items.value.map(item => item.name)).toEqual(['Alpha', 'Beta'])
+
+    await resource.updateItem('beta', { name: 'Bravo' })
+    expect(resource.items.value.find(item => item.id === 'beta')?.name).toBe('Bravo')
+
+    await resource.deleteItem('a')
+    expect(resource.items.value.map(item => item.id)).toEqual(['beta'])
+  })
+
+  it('normalizes adapter errors', async () => {
+    const resource = useResourceCrud<Item>({
+      adapter: {
+        list: async () => { throw new Error('nope') },
+      },
+    })
+
+    await expect(resource.load()).rejects.toThrow('nope')
+    expect(resource.error.value).toBe('nope')
+    expect(resource.loading.value).toBe(false)
+  })
+})

package/src/__tests__/composables/useRuntimeAlignment.test.ts

@@ -0,0 +1,145 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, nextTick } from 'vue'
+import { mount } from '@vue/test-utils'
+
+import { useRuntimeAlignment } from '../../composables/useRuntimeAlignment'
+
+class MemoryStorage implements Pick<Storage, 'getItem' | 'setItem'> {
+  private readonly values = new Map<string, string>()
+
+  getItem(key: string): string | null {
+    return this.values.get(key) ?? null
+  }
+
+  setItem(key: string, value: string): void {
+    this.values.set(key, value)
+  }
+}
+
+function mountRuntime(options: Parameters<typeof useRuntimeAlignment>[0]) {
+  let runtime: ReturnType<typeof useRuntimeAlignment> | undefined
+  const wrapper = mount(defineComponent({
+    setup() {
+      runtime = useRuntimeAlignment(options)
+      return () => null
+    },
+  }))
+  return { wrapper, get runtime() { return runtime! } }
+}
+
+describe('useRuntimeAlignment', () => {
+  afterEach(() => vi.restoreAllMocks())
+
+  it('should offer a reload when a visible tab observes a different revision', async () => {
+    const replace = vi.fn()
+    const { runtime } = mountRuntime({
+      currentRevision: 'sha256:old',
+      visibility: () => 'visible',
+      replace,
+      storage: new MemoryStorage(),
+    })
+
+    runtime.observe({ frontend_revision: 'sha256:new' })
+    await nextTick()
+
+    expect(runtime.updateAvailable.value).toBe(true)
+  })
+
+  it('should reload a hidden stale tab automatically', () => {
+    const replace = vi.fn()
+    const { runtime } = mountRuntime({
+      currentRevision: 'sha256:old',
+      visibility: () => 'hidden',
+      replace,
+      storage: new MemoryStorage(),
+      currentUrl: () => 'https://mint.example/leaf/analysis',
+    })
+
+    runtime.observe({ frontend_revision: 'sha256:new' })
+
+    expect(replace).toHaveBeenCalledWith(
+      'https://mint.example/leaf/analysis?__mint_revision=sha256%3Anew',
+    )
+  })
+
+  it('should reload before reuse when a tab became stale while hidden', () => {
+    const replace = vi.fn()
+    let state: DocumentVisibilityState = 'visible'
+    let visibilityListener: EventListener | undefined
+    const runtime = mountRuntime({
+      currentRevision: 'sha256:before-hide',
+      visibility: () => state,
+      replace,
+      storage: new MemoryStorage(),
+      currentUrl: () => 'https://mint.example/leaf/analysis',
+      visibilityTarget: {
+        addEventListener: (_type, listener) => { visibilityListener = listener },
+        removeEventListener: () => {},
+      },
+    }).runtime
+    state = 'hidden'
+    visibilityListener?.(new Event('visibilitychange'))
+    state = 'visible'
+
+    runtime.observe({ frontend_revision: 'sha256:after-hide' })
+
+    expect(replace).toHaveBeenCalledTimes(1)
+  })
+
+  it('should make only one recovery reload for the same missing chunk', () => {
+    const replace = vi.fn()
+    const storage = new MemoryStorage()
+    const first = mountRuntime({
+      currentRevision: 'sha256:old',
+      visibility: () => 'visible',
+      replace,
+      storage,
+      currentUrl: () => 'https://mint.example/',
+    })
+    const second = mountRuntime({
+      currentRevision: 'sha256:old',
+      visibility: () => 'visible',
+      replace,
+      storage,
+      currentUrl: () => 'https://mint.example/',
+    })
+
+    first.runtime.recoverMissingChunk()
+    second.runtime.recoverMissingChunk()
+
+    expect(replace).toHaveBeenCalledTimes(1)
+  })
+
+  it('should make only one recovery reload when session storage is unavailable', () => {
+    const replace = vi.fn()
+    const runtime = mountRuntime({
+      currentRevision: 'sha256:no-storage',
+      visibility: () => 'visible',
+      replace,
+      storage: null,
+      currentUrl: () => 'https://mint.example/',
+    }).runtime
+
+    runtime.recoverMissingChunk()
+    runtime.recoverMissingChunk()
+
+    expect(replace).toHaveBeenCalledTimes(1)
+  })
+
+  it('should not repeat chunk recovery after the cache-busted page reloads', () => {
+    const replace = vi.fn()
+    const runtime = mountRuntime({
+      currentRevision: 'sha256:already-reloaded',
+      visibility: () => 'visible',
+      replace,
+      storage: null,
+      currentUrl: () => (
+        'https://mint.example/?__mint_revision=sha256%3Aalready-reloaded'
+      ),
+    }).runtime
+
+    runtime.recoverMissingChunk()
+
+    expect(replace).not.toHaveBeenCalled()
+  })
+})

package/src/__tests__/composables/useSampleGroups.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest'
+import { ref } from 'vue'
+import { useSampleGroups } from '../../composables/useSampleGroups'
+import type { SampleGroup } from '../../types'
+
+const groups: SampleGroup[] = [
+  { name: 'Control/A', color: '#3B82F6', samples: ['S1', 'S2'] },
+  { name: 'Control/B', color: '#06B6D4', samples: ['S3'] },
+  { name: 'Treatment/A', color: '#F43F5E', samples: ['S4'] },
+]
+
+describe('useSampleGroups', () => {
+  it('derives major groups, display colors, hierarchy state, and ungrouped samples', () => {
+    const sampleGroups = useSampleGroups({
+      samples: ['S1', 'S2', 'S3', 'S4', 'S5'],
+      groups,
+    })
+
+    expect(sampleGroups.separator.value).toBe('/')
+    expect(sampleGroups.showHierarchy.value).toBe(true)
+    expect(sampleGroups.ungroupedSamples.value).toEqual(['S5'])
+    expect(sampleGroups.hierarchicalGroups.value.map(group => group.name)).toEqual(['Control', 'Treatment'])
+    expect(sampleGroups.hierarchicalGroups.value[0].allSamples).toEqual(['S1', 'S2', 'S3'])
+    expect(sampleGroups.hierarchicalGroups.value[0].subGroups[0]).toMatchObject({
+      name: 'Control/A',
+      displayBg: expect.stringMatching(/20$/),
+      displayBorder: expect.stringMatching(/40$/),
+    })
+  })
+
+  it('keeps flat groups flat when major names do not introduce hierarchy', () => {
+    const sampleGroups = useSampleGroups({
+      samples: ['S1'],
+      groups: [
+        { name: 'Control', color: '#3B82F6', samples: ['S1'] },
+      ],
+    })
+
+    expect(sampleGroups.separator.value).toBe('_')
+    expect(sampleGroups.showHierarchy.value).toBe(false)
+    expect(sampleGroups.hierarchicalGroups.value[0].name).toBe('Control')
+  })
+
+  it('supports explicit separators, fallback colors, and reactive group sources', () => {
+    const reactiveGroups = ref<SampleGroup[]>([
+      { name: 'Vehicle_DMSO', color: '', samples: ['S1'] },
+    ])
+    const sampleGroups = useSampleGroups({
+      samples: () => ['S1', 'S2'],
+      groups: reactiveGroups,
+      separator: '_',
+      fallbackColor: '#111111',
+    })
+
+    expect(sampleGroups.hierarchicalGroups.value[0].name).toBe('Vehicle')
+    expect(sampleGroups.getGroupColor('Vehicle_DMSO')).toBe('#111111')
+
+    reactiveGroups.value = [
+      ...reactiveGroups.value,
+      { name: 'Drug_1uM', color: '#F43F5E', samples: ['S2'] },
+    ]
+
+    expect(sampleGroups.ungroupedSamples.value).toEqual([])
+    expect(sampleGroups.findGroup('Drug_1uM')?.samples).toEqual(['S2'])
+  })
+})

package/src/__tests__/composables/useSampleGroups.tree.test.ts

@@ -0,0 +1,145 @@
+import { describe, expect, it } from 'vitest'
+import { useSampleGroups } from '../../composables/useSampleGroups'
+import type { SampleGroup } from '../../types'
+
+/**
+ * `groupTree` is the full N-layer display model behind the sample selector:
+ * interior nodes are path prefixes, leaves carry the concrete `SampleGroup`
+ * (whose `name` stays the full path, since every mutation keys off it).
+ */
+
+function labelsAtDepth(nodes: ReturnType<typeof useSampleGroups>['groupTree']['value'], depth: number): string[] {
+  let level = nodes
+  for (let i = 0; i < depth; i++) level = level.flatMap(n => n.children)
+  return level.map(n => n.label)
+}
+
+describe('useSampleGroups groupTree', () => {
+  const threeLayer: SampleGroup[] = [
+    { name: 'Liver / High / 5min', color: '#3B82F6', samples: ['L1', 'L2'] },
+    { name: 'Liver / High / 10min', color: '#3B82F6', samples: ['L3'] },
+    { name: 'Liver / Low / 5min', color: '#3B82F6', samples: ['L4'] },
+    { name: 'Kidney / High / 5min', color: '#F43F5E', samples: ['K1'] },
+  ]
+
+  it('should build one level per name segment', () => {
+    const { groupTree } = useSampleGroups({ groups: threeLayer })
+    expect(labelsAtDepth(groupTree.value, 0)).toEqual(['Liver', 'Kidney'])
+    expect(labelsAtDepth(groupTree.value, 1)).toEqual(['High', 'Low', 'High'])
+    expect(labelsAtDepth(groupTree.value, 2)).toEqual(['5min', '10min', '5min', '5min'])
+  })
+
+  it('should label each node with its own segment rather than the full path', () => {
+    const { groupTree } = useSampleGroups({ groups: threeLayer })
+    expect(groupTree.value[0].children[0].label).toBe('High')
+  })
+
+  it('should keep the full path on the leaf group so mutations still resolve it', () => {
+    const { groupTree } = useSampleGroups({ groups: threeLayer })
+    expect(groupTree.value[0].children[0].children[0].group?.name).toBe('Liver / High / 5min')
+  })
+
+  it('should aggregate every descendant sample onto an interior node', () => {
+    const { groupTree } = useSampleGroups({ groups: threeLayer })
+    expect(groupTree.value[0].allSamples).toEqual(['L1', 'L2', 'L3', 'L4'])
+    expect(groupTree.value[0].children[0].allSamples).toEqual(['L1', 'L2', 'L3'])
+  })
+
+  it('should mark only childless nodes as leaves', () => {
+    const { groupTree } = useSampleGroups({ groups: threeLayer })
+    expect(groupTree.value[0].children).not.toHaveLength(0)
+    expect(groupTree.value[0].group).toBeUndefined()
+    expect(groupTree.value[0].children[0].children[0].children).toHaveLength(0)
+  })
+
+  it('should give every node a unique key so expansion state cannot collide', () => {
+    const { groupTree } = useSampleGroups({ groups: threeLayer })
+    const keys: string[] = []
+    const walk = (nodes: typeof groupTree.value) => {
+      for (const n of nodes) {
+        keys.push(n.key)
+        walk(n.children)
+      }
+    }
+    walk(groupTree.value)
+    expect(new Set(keys).size).toBe(keys.length)
+  })
+
+  it('should keep two-segment names at two levels', () => {
+    const { groupTree } = useSampleGroups({
+      groups: [{ name: 'Control/A', color: '#3B82F6', samples: ['S1'] }],
+    })
+    expect(labelsAtDepth(groupTree.value, 0)).toEqual(['Control'])
+    expect(labelsAtDepth(groupTree.value, 1)).toEqual(['A'])
+    expect(labelsAtDepth(groupTree.value, 2)).toEqual([])
+  })
+
+  it('should keep an unsegmented name as a single root leaf', () => {
+    const { groupTree } = useSampleGroups({
+      groups: [{ name: 'Control', color: '#3B82F6', samples: ['S1'] }],
+    })
+    expect(groupTree.value).toHaveLength(1)
+    expect(groupTree.value[0].children).toHaveLength(0)
+    expect(groupTree.value[0].group?.name).toBe('Control')
+  })
+
+  it('should nest mixed-depth siblings under the same parent', () => {
+    const { groupTree } = useSampleGroups({
+      groups: [
+        { name: 'Liver / High / 5min', color: '#3B82F6', samples: ['S1'] },
+        { name: 'Liver / Low', color: '#3B82F6', samples: ['S2'] },
+      ],
+    })
+    expect(labelsAtDepth(groupTree.value, 1)).toEqual(['High', 'Low'])
+    // "Low" is a leaf at depth 1; "High" is interior with a leaf beneath it.
+    expect(groupTree.value[0].children[1].group?.name).toBe('Liver / Low')
+    expect(groupTree.value[0].children[0].children[0].group?.name).toBe('Liver / High / 5min')
+  })
+
+  it('should expose a group whose path duplicates an interior node as its own leaf', () => {
+    // "Liver" is both a standalone group and the prefix of another: the
+    // standalone group must stay reachable as a leaf, or its samples vanish.
+    const { groupTree } = useSampleGroups({
+      groups: [
+        { name: 'Liver', color: '#3B82F6', samples: ['S1'] },
+        { name: 'Liver / High', color: '#3B82F6', samples: ['S2'] },
+      ],
+    })
+    const allLeafGroups: string[] = []
+    const walk = (nodes: typeof groupTree.value) => {
+      for (const n of nodes) {
+        if (n.group) allLeafGroups.push(n.group.name)
+        walk(n.children)
+      }
+    }
+    walk(groupTree.value)
+    expect(allLeafGroups.sort()).toEqual(['Liver', 'Liver / High'])
+  })
+
+  it('should tolerate whitespace around separators when segmenting', () => {
+    const { groupTree } = useSampleGroups({
+      groups: [{ name: 'Liver / High', color: '#3B82F6', samples: ['S1'] }],
+    })
+    expect(groupTree.value[0].label).toBe('Liver')
+    expect(groupTree.value[0].children[0].label).toBe('High')
+  })
+})
+
+describe('useSampleGroups hierarchy depth', () => {
+  it('should report the deepest layer count', () => {
+    const { maxDepth } = useSampleGroups({
+      groups: [
+        { name: 'Liver / High / 5min', color: '#3B82F6', samples: ['S1'] },
+        { name: 'Kidney / Low', color: '#F43F5E', samples: ['S2'] },
+      ],
+    })
+    expect(maxDepth.value).toBe(3)
+  })
+
+  it('should report depth 1 for flat groups', () => {
+    const { maxDepth } = useSampleGroups({
+      groups: [{ name: 'Control', color: '#3B82F6', samples: ['S1'] }],
+    })
+    expect(maxDepth.value).toBe(1)
+  })
+})

package/src/__tests__/composables/useScheduleCalendarLayout.test.ts

@@ -0,0 +1,89 @@
+import { ref } from 'vue'
+import { describe, expect, it } from 'vitest'
+import type { ScheduleEvent, ScheduleView } from '../../types/components'
+import {
+  SCHEDULE_SLOT_HEIGHT,
+  getWeekStart,
+  parseScheduleModelDate,
+  useScheduleCalendarLayout,
+} from '../../composables/useScheduleCalendarLayout'
+
+function dateKey(date: Date): string {
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${date.getFullYear()}-${month}-${day}`
+}
+
+function makeLayout(overrides: Partial<Parameters<typeof useScheduleCalendarLayout>[0]> = {}) {
+  const events: ScheduleEvent[] = [
+    {
+      id: 'run-1',
+      title: 'LCMS run',
+      start: '2024-05-15T07:00:00',
+      end: '2024-05-15T08:30:00',
+      status: 'in-progress',
+    },
+  ]
+
+  return useScheduleCalendarLayout({
+    currentView: ref<ScheduleView>('week'),
+    currentDate: ref(new Date('2024-05-15T12:00:00')),
+    now: ref(new Date('2024-05-15T07:30:00')),
+    events: ref(events),
+    blockedSlots: ref([
+      {
+        start: '2024-05-15T09:00:00',
+        end: '2024-05-15T09:30:00',
+        label: 'maintenance',
+      },
+    ]),
+    dayStartHour: ref(6),
+    dayEndHour: ref(10),
+    slotDuration: ref(30),
+    weekStartsOn: ref<0 | 1>(1),
+    locale: ref('en-US'),
+    showNowIndicator: ref(true),
+    slotHeight: ref(SCHEDULE_SLOT_HEIGHT),
+    ...overrides,
+  })
+}
+
+describe('useScheduleCalendarLayout', () => {
+  it('builds week ranges and time labels from calendar settings', () => {
+    const layout = makeLayout()
+
+    expect(layout.totalSlots.value).toBe(8)
+    expect(layout.timeLabels.value.slice(0, 3)).toEqual(['06:00', '06:30', '07:00'])
+    expect(dateKey(layout.visibleDays.value[0])).toBe('2024-05-13')
+    expect(dateKey(layout.visibleDays.value[6])).toBe('2024-05-19')
+  })
+
+  it('computes timed event, blocked slot, and now indicator styles', () => {
+    const layout = makeLayout()
+    const event = layout.getEventsForDate(new Date('2024-05-15T00:00:00'))[0]
+
+    expect(layout.getEventStyle(event, new Date('2024-05-15T00:00:00'))).toEqual({
+      top: '80px',
+      height: '120px',
+    })
+    expect(layout.getBlockedStyle(layout.getBlockedForDay(new Date('2024-05-15T00:00:00'))[0])).toEqual({
+      top: '240px',
+      height: '40px',
+    })
+    expect(layout.getNowIndicatorStyle()).toEqual({ top: '120px' })
+  })
+
+  it('builds month cells and weekday labels according to the week start', () => {
+    const layout = makeLayout({ currentView: ref<ScheduleView>('month') })
+
+    expect(layout.monthDays.value).toHaveLength(42)
+    expect(dateKey(layout.monthDays.value[0].date)).toBe('2024-04-29')
+    expect(layout.monthWeekdayLabels.value[0]).toBe('Mon')
+    expect(layout.headerTitle.value).toBe('May 2024')
+  })
+
+  it('parses model dates and honors alternate week starts', () => {
+    expect(parseScheduleModelDate('2024-05-15T00:00:00').getFullYear()).toBe(2024)
+    expect(dateKey(getWeekStart(new Date('2024-05-15T00:00:00'), 0))).toBe('2024-05-12')
+  })
+})