@morscherlab/mint-sdk 1.0.0-rc.4 → 1.0.0-rc.6

package/src/components/ScheduleCalendar.vue

@@ -5,10 +5,13 @@ import type {
   ScheduleView,
   ScheduleEvent,
   ScheduleBlockedSlot,
-  ScheduleEventStatus,
 } from '../types/components'
-import { formatTime } from '../composables/useTimeUtils'
 import { useScheduleDrag } from '../composables/useScheduleDrag'
+import {
+  SCHEDULE_SLOT_HEIGHT,
+  parseScheduleModelDate,
+  useScheduleCalendarLayout,
+} from '../composables/useScheduleCalendarLayout'
 
 interface Props {
   modelValue?: Date | string
@@ -52,21 +55,26 @@ const emit = defineEmits<{
   'navigate': [context: { direction: string; date: Date }]
 }>()
 
-const SLOT_HEIGHT = 40
+const SLOT_HEIGHT = SCHEDULE_SLOT_HEIGHT
 const currentView = ref<ScheduleView>(props.view)
-const currentDate = ref<Date>(parseModelDate(props.modelValue))
+const currentDate = ref<Date>(parseScheduleModelDate(props.modelValue))
 const nowTimer = ref<ReturnType<typeof setInterval>>()
 const now = ref(new Date())
 const bodyRef = ref<HTMLDivElement>()
 
 watch(() => props.view, (v) => { currentView.value = v })
-watch(() => props.modelValue, (v) => { if (v) currentDate.value = parseModelDate(v) })
+watch(() => props.modelValue, (v) => { if (v) currentDate.value = parseScheduleModelDate(v) })
 
 const slotHeightRef = computed(() => SLOT_HEIGHT)
 const slotDurationRef = computed(() => props.slotDuration)
 const dayStartRef = computed(() => props.dayStartHour)
 const dayEndRef = computed(() => props.dayEndHour)
 const readonlyRef = computed(() => props.readonly)
+const eventsRef = computed(() => props.events)
+const blockedSlotsRef = computed(() => props.blockedSlots)
+const weekStartsOnRef = computed(() => props.weekStartsOn)
+const localeRef = computed(() => props.locale)
+const showNowIndicatorRef = computed(() => props.showNowIndicator)
 
 const { isDragging, ghost, startCreate, startMove, startResize } = useScheduleDrag({
   slotDuration: slotDurationRef,
@@ -85,124 +93,39 @@ const { isDragging, ghost, startCreate, startMove, startResize } = useScheduleDr
   },
 })
 
-const totalSlots = computed(() => {
-  return ((props.dayEndHour - props.dayStartHour) * 60) / props.slotDuration
-})
-
-const timeLabels = computed(() => {
-  const labels: string[] = []
-  for (let i = 0; i <= totalSlots.value; i++) {
-    const totalMinutes = props.dayStartHour * 60 + i * props.slotDuration
-    const hour = Math.floor(totalMinutes / 60)
-    const minute = totalMinutes % 60
-    labels.push(formatTime(hour, minute, '24h'))
-  }
-  return labels
-})
-
-const weekDays = computed(() => {
-  const days: Date[] = []
-  const start = getWeekStart(currentDate.value)
-  for (let i = 0; i < 7; i++) {
-    const d = new Date(start)
-    d.setDate(d.getDate() + i)
-    days.push(d)
-  }
-  return days
-})
-
-const visibleDays = computed(() => {
-  if (currentView.value === 'day') return [currentDate.value]
-  if (currentView.value === 'week') return weekDays.value
-  return []
-})
-
-const headerTitle = computed(() => {
-  if (currentView.value === 'day') {
-    return currentDate.value.toLocaleDateString(props.locale, {
-      weekday: 'long',
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    })
-  }
-  if (currentView.value === 'week') {
-    const days = weekDays.value
-    const first = days[0]
-    const last = days[6]
-    const sameMonth = first.getMonth() === last.getMonth()
-    if (sameMonth) {
-      return `${first.toLocaleDateString(props.locale, { month: 'short', day: 'numeric' })} - ${last.getDate()}, ${last.getFullYear()}`
-    }
-    return `${first.toLocaleDateString(props.locale, { month: 'short', day: 'numeric' })} - ${last.toLocaleDateString(props.locale, { month: 'short', day: 'numeric' })}, ${last.getFullYear()}`
-  }
-  return currentDate.value.toLocaleDateString(props.locale, { year: 'numeric', month: 'long' })
-})
-
-// Month view computations
-const monthDays = computed(() => {
-  const year = currentDate.value.getFullYear()
-  const month = currentDate.value.getMonth()
-  const firstDay = new Date(year, month, 1)
-  const lastDay = new Date(year, month + 1, 0)
-
-  const days: { date: Date; isCurrentMonth: boolean }[] = []
-
-  // Adjust for weekStartsOn
-  let startPadding = firstDay.getDay() - props.weekStartsOn
-  if (startPadding < 0) startPadding += 7
-
-  for (let i = startPadding - 1; i >= 0; i--) {
-    const date = new Date(year, month, -i)
-    days.push({ date, isCurrentMonth: false })
-  }
-
-  for (let i = 1; i <= lastDay.getDate(); i++) {
-    days.push({ date: new Date(year, month, i), isCurrentMonth: true })
-  }
-
-  const remaining = 42 - days.length
-  for (let i = 1; i <= remaining; i++) {
-    days.push({ date: new Date(year, month + 1, i), isCurrentMonth: false })
-  }
-
-  return days
-})
-
-const monthWeekdayLabels = computed(() => {
-  const labels: string[] = []
-  const base = new Date(2024, 0, props.weekStartsOn === 1 ? 1 : 7) // A known Monday or Sunday
-  for (let i = 0; i < 7; i++) {
-    const d = new Date(base)
-    d.setDate(d.getDate() + i)
-    labels.push(d.toLocaleDateString(props.locale, { weekday: 'short' }))
-  }
-  return labels
+const {
+  totalSlots,
+  timeLabels,
+  visibleDays,
+  headerTitle,
+  monthDays,
+  monthWeekdayLabels,
+  isToday,
+  isSameDay,
+  getEventStyle,
+  getEventsForDay,
+  getEventsForDate,
+  getBlockedForDay,
+  getBlockedStyle,
+  getNowIndicatorStyle,
+  getStatusClass,
+  getMonthStatusClass,
+  formatEventTime,
+} = useScheduleCalendarLayout({
+  currentView,
+  currentDate,
+  now,
+  events: eventsRef,
+  blockedSlots: blockedSlotsRef,
+  dayStartHour: dayStartRef,
+  dayEndHour: dayEndRef,
+  slotDuration: slotDurationRef,
+  weekStartsOn: weekStartsOnRef,
+  locale: localeRef,
+  showNowIndicator: showNowIndicatorRef,
+  slotHeight: slotHeightRef,
 })
 
-function parseModelDate(value?: Date | string): Date {
-  if (!value) return new Date()
-  if (value instanceof Date) return value
-  const d = new Date(value)
-  return isNaN(d.getTime()) ? new Date() : d
-}
-
-function getWeekStart(date: Date): Date {
-  const d = new Date(date)
-  const day = d.getDay()
-  const diff = (day - props.weekStartsOn + 7) % 7
-  d.setDate(d.getDate() - diff)
-  return d
-}
-
-function isToday(date: Date): boolean {
-  return date.toDateString() === now.value.toDateString()
-}
-
-function isSameDay(a: Date, b: Date): boolean {
-  return a.toDateString() === b.toDateString()
-}
-
 function navigate(direction: 'prev' | 'next' | 'today') {
   const d = new Date(currentDate.value)
   if (direction === 'today') {
@@ -223,78 +146,6 @@ function setView(view: ScheduleView) {
   emit('update:view', view)
 }
 
-function getEventStyle(event: ScheduleEvent, dayDate: Date) {
-  const eventStart = new Date(event.start)
-  const eventEnd = new Date(event.end)
-  if (!isSameDay(eventStart, dayDate) && !isSameDay(eventEnd, dayDate)) return null
-
-  const dayStartMin = props.dayStartHour * 60
-  const startMin = Math.max(eventStart.getHours() * 60 + eventStart.getMinutes(), dayStartMin) - dayStartMin
-  const endMin = Math.min(eventEnd.getHours() * 60 + eventEnd.getMinutes(), props.dayEndHour * 60) - dayStartMin
-
-  const pixelsPerMin = SLOT_HEIGHT / props.slotDuration
-  return {
-    top: `${startMin * pixelsPerMin}px`,
-    height: `${Math.max((endMin - startMin) * pixelsPerMin, SLOT_HEIGHT / 2)}px`,
-  }
-}
-
-function getEventsForDay(day: Date): ScheduleEvent[] {
-  return props.events.filter((e) => {
-    const start = new Date(e.start)
-    return isSameDay(start, day)
-  })
-}
-
-function getEventsForDate(date: Date): ScheduleEvent[] {
-  return props.events.filter((e) => {
-    const start = new Date(e.start)
-    return isSameDay(start, date)
-  })
-}
-
-function getBlockedForDay(day: Date): ScheduleBlockedSlot[] {
-  return props.blockedSlots.filter((b) => {
-    const start = new Date(b.start)
-    return isSameDay(start, day)
-  })
-}
-
-function getBlockedStyle(slot: ScheduleBlockedSlot) {
-  const start = new Date(slot.start)
-  const end = new Date(slot.end)
-  const dayStartMin = props.dayStartHour * 60
-  const startMin = Math.max(start.getHours() * 60 + start.getMinutes(), dayStartMin) - dayStartMin
-  const endMin = Math.min(end.getHours() * 60 + end.getMinutes(), props.dayEndHour * 60) - dayStartMin
-
-  const pixelsPerMin = SLOT_HEIGHT / props.slotDuration
-  return {
-    top: `${startMin * pixelsPerMin}px`,
-    height: `${(endMin - startMin) * pixelsPerMin}px`,
-  }
-}
-
-function getNowIndicatorStyle(): Record<string, string> | null {
-  if (!props.showNowIndicator) return null
-  const nowMin = now.value.getHours() * 60 + now.value.getMinutes()
-  const dayStartMin = props.dayStartHour * 60
-  const dayEndMin = props.dayEndHour * 60
-  if (nowMin < dayStartMin || nowMin > dayEndMin) return null
-
-  const pixelsPerMin = SLOT_HEIGHT / props.slotDuration
-  return { top: `${(nowMin - dayStartMin) * pixelsPerMin}px` }
-}
-
-function getStatusClass(status?: ScheduleEventStatus): string {
-  if (!status) return 'mint-schedule__event--confirmed'
-  return `mint-schedule__event--${status}`
-}
-
-function getMonthStatusClass(status?: ScheduleEventStatus): string {
-  if (!status) return 'mint-schedule__month-event--confirmed'
-  return `mint-schedule__month-event--${status}`
-}
-
 function onEventClick(event: ScheduleEvent, e: MouseEvent) {
   e.stopPropagation()
   emit('event-click', event)
@@ -335,12 +186,6 @@ function onMonthDayClick(date: Date) {
   setView('day')
 }
 
-function formatEventTime(event: ScheduleEvent): string {
-  const start = new Date(event.start)
-  const end = new Date(event.end)
-  return `${formatTime(start.getHours(), start.getMinutes())} - ${formatTime(end.getHours(), end.getMinutes())}`
-}
-
 onMounted(() => {
   nowTimer.value = setInterval(() => { now.value = new Date() }, 60000)
 

package/src/components/SettingsModal.schema.ts

@@ -0,0 +1,71 @@
+import type {
+  FormSchema,
+  FormSectionSchema,
+  SettingsGroup,
+  SettingsModalSchema,
+  SettingsTab,
+  SettingsTabInput,
+} from '../types'
+import type { AccessControlled } from '../permissions'
+import { normalizeItemInput } from '../utils/items'
+
+export const APPEARANCE_TAB_ID = 'appearance'
+
+export const APPEARANCE_TAB: SettingsTab = {
+  id: APPEARANCE_TAB_ID,
+  label: 'Appearance',
+  description: 'Theme, color palette, and table density',
+}
+
+// Map settings groups onto the form-builder's flat-section shape.
+// `title: ''` because the rail/pane header already shows the group name.
+export function buildFlatSettingsSchema(schema: SettingsModalSchema): FormSchema {
+  return {
+    sections: schema.groups.map<FormSectionSchema>((group) => ({
+      id: group.id,
+      title: '',
+      fields: group.fields,
+      columns: group.columns,
+      condition: group.condition,
+    })),
+  }
+}
+
+export function filterSettingsSchemaByAccess(
+  schema: SettingsModalSchema,
+  canShow: (item: AccessControlled) => boolean
+): SettingsModalSchema {
+  const groups = schema.groups.flatMap((group) => {
+    if (!canShow(group)) return []
+
+    const fields = group.fields.filter(canShow)
+    if (fields.length === 0) return []
+
+    return [{ ...group, fields }]
+  })
+
+  return { groups }
+}
+
+export function settingsGroupToTab(group: SettingsGroup): SettingsTab {
+  return {
+    id: group.id,
+    label: group.label,
+    icon: group.icon,
+    description: group.description,
+  }
+}
+
+export function normalizeVisibleSettingsTabs(
+  tabs: SettingsTabInput[],
+  canShow: (item: AccessControlled) => boolean
+): SettingsTab[] {
+  return tabs.map(normalizeItemInput).filter(canShow)
+}
+
+export function buildSettingsTabs(
+  baseTabs: SettingsTab[],
+  showAppearance: boolean
+): SettingsTab[] {
+  return showAppearance ? [...baseTabs, APPEARANCE_TAB] : baseTabs
+}

package/src/components/SettingsModal.vue

@@ -24,8 +24,8 @@ import FormFieldRendererInternal from './internal/FormFieldRendererInternal.vue'
 import { useFormBuilder } from '../composables/useFormBuilder'
 import {
   controlsToSettingsSchema,
-  defineControlModel,
   mergeControlWorkspaceOptions,
+  resolveControlModel,
   type ControlModel,
   type ControlModelBinding,
   type ControlSchema,
@@ -50,26 +50,17 @@ import type {
   SettingsModalLayout,
   SettingsModalSchema,
   SettingsUserType,
-  FormSchema,
-  FormSectionSchema,
   FormEnhancements,
 } from '../types'
 import type { AccessControlled, PermissionUser } from '../permissions'
-import { normalizeItemInput } from '../utils/items'
-
-// Map our settings groups onto the form-builder's flat-section shape.
-// `title: ''` because the rail/pane header already shows the group name.
-function buildFlatSchema(schema: SettingsModalSchema): FormSchema {
-  return {
-    sections: schema.groups.map<FormSectionSchema>((g) => ({
-      id: g.id,
-      title: '',
-      fields: g.fields,
-      columns: g.columns,
-      condition: g.condition,
-    })),
-  }
-}
+import {
+  APPEARANCE_TAB_ID,
+  buildFlatSettingsSchema,
+  buildSettingsTabs,
+  filterSettingsSchemaByAccess,
+  normalizeVisibleSettingsTabs,
+  settingsGroupToTab,
+} from './SettingsModal.schema'
 
 interface Props {
   modelValue: boolean
@@ -114,14 +105,6 @@ const settings = useSettingsStore()
 const auth = useAuthStore()
 const { user: platformUser } = usePlatformContext()
 
-const APPEARANCE_TAB_ID = 'appearance'
-
-const APPEARANCE_TAB: SettingsTab = {
-  id: APPEARANCE_TAB_ID,
-  label: 'Appearance',
-  description: 'Theme, color palette, and table density',
-}
-
 const isVertical = computed(() => props.layout === 'vertical')
 
 // Per-instance prefix for ARIA tab/tabpanel id wiring. Stable across renders.
@@ -130,8 +113,7 @@ const tabId = (id: string) => `${uid}-tab-${id}`
 const panelId = (id: string) => `${uid}-panel-${id}`
 
 const resolvedModel = computed<ControlModelBinding | undefined>(() => {
-  if (props.model === undefined) return undefined
-  return isControlModelBinding(props.model) ? props.model : defineControlModel(props.model)
+  return resolveControlModel(props.model)
 })
 const resolvedControls = computed<ControlSchema | undefined>(() =>
   props.controls ?? resolvedModel.value?.controls,
@@ -157,15 +139,7 @@ const isAccessUserAuthenticated = computed(() =>
 )
 const settingsSchema = computed<SettingsModalSchema | undefined>(() => {
   if (!sourceSettingsSchema.value) return undefined
-  const groups = sourceSettingsSchema.value.groups.flatMap((group) => {
-    if (!canShowForCurrentUser(group)) return []
-
-    const fields = group.fields.filter(canShowForCurrentUser)
-    if (fields.length === 0) return []
-
-    return [{ ...group, fields }]
-  })
-  return { groups }
+  return filterSettingsSchemaByAccess(sourceSettingsSchema.value, canShowForCurrentUser)
 })
 const isSchemaDriven = computed(() => !!settingsSchema.value)
 const resolvedValues = computed<Record<string, unknown>>(() => ({
@@ -176,7 +150,7 @@ const resolvedValues = computed<Record<string, unknown>>(() => ({
 // Schema-driven mode keeps one form-builder instance and syncs schema changes
 // into it, so callers can swap groups/fields without remounting the modal.
 const builder = useFormBuilder(
-  settingsSchema.value ? buildFlatSchema(settingsSchema.value) : { sections: [] },
+  settingsSchema.value ? buildFlatSettingsSchema(settingsSchema.value) : { sections: [] },
   resolvedValues.value,
   props.enhancements,
 )
@@ -189,7 +163,7 @@ watch(
       return
     }
 
-    const flatSchema = buildFlatSchema(schema)
+    const flatSchema = buildFlatSettingsSchema(schema)
     const fieldNames = formSchemaFieldNames(flatSchema)
     const sourceValues = props.values === undefined
       ? {
@@ -232,14 +206,14 @@ const visibleSchemaGroups = computed(() =>
 )
 
 const manualTabs = computed<SettingsTab[]>(() =>
-  props.tabs.map(normalizeItemInput).filter(canShowForCurrentUser)
+  normalizeVisibleSettingsTabs(props.tabs, canShowForCurrentUser)
 )
 
 const allTabs = computed<SettingsTab[]>(() => {
   const base: SettingsTab[] = settingsSchema.value
-    ? visibleSchemaGroups.value.map((g) => ({ id: g.id, label: g.label, icon: g.icon, description: g.description }))
+    ? visibleSchemaGroups.value.map(settingsGroupToTab)
     : manualTabs.value
-  return props.showAppearance ? [...base, APPEARANCE_TAB] : base
+  return buildSettingsTabs(base, props.showAppearance)
 })
 
 const activeTab = ref(allTabs.value[0]?.id || APPEARANCE_TAB_ID)
@@ -285,10 +259,6 @@ function builderFieldNames(): string[] {
   return builder.fields.map(field => field.name)
 }
 
-function isControlModelBinding(model: ControlModel | ControlModelBinding): model is ControlModelBinding {
-  return 'controls' in model && 'controlOptions' in model
-}
-
 function canShowForCurrentUser(item: AccessControlled): boolean {
   return canAccessByPolicy(
     currentAccessUser.value,

package/src/components/WellPlate.colors.ts

@@ -0,0 +1,56 @@
+import type { HeatmapConfig } from '../types'
+
+export const DEFAULT_SAMPLE_TYPE_COLORS: Record<string, { bg: string; border: string }> = {
+  sample: { bg: 'rgba(16, 185, 129, 0.15)', border: 'rgba(16, 185, 129, 0.4)' },
+  control: { bg: 'rgba(59, 130, 246, 0.15)', border: 'rgba(59, 130, 246, 0.4)' },
+  blank: { bg: 'rgba(249, 115, 22, 0.15)', border: 'rgba(249, 115, 22, 0.4)' },
+  qc: { bg: 'rgba(139, 92, 246, 0.15)', border: 'rgba(139, 92, 246, 0.4)' },
+  iqc: { bg: 'rgba(236, 72, 153, 0.15)', border: 'rgba(236, 72, 153, 0.4)' },
+}
+
+export const HEATMAP_COLORS: Record<string, string[]> = {
+  viridis: ['#440154', '#482878', '#3e4989', '#31688e', '#26828e', '#1f9e89', '#35b779', '#6ece58', '#b5de2b', '#fde725'],
+  plasma: ['#0d0887', '#46039f', '#7201a8', '#9c179e', '#bd3786', '#d8576b', '#ed7953', '#fb9f3a', '#fdca26', '#f0f921'],
+  turbo: ['#30123b', '#4145ab', '#4675ed', '#39a2fc', '#1bcfd4', '#24e79e', '#71f05f', '#c1f034', '#f1c83c', '#f99538', '#e45a31', '#ba2512', '#7a0403'],
+}
+
+export function conditionGradientStyle(
+  color: string,
+  concentration: number,
+  concentrations: number[],
+): Record<string, string> {
+  const min = Math.min(...concentrations)
+  const max = Math.max(...concentrations)
+  const t = max <= min ? 1 : (concentration - min) / (max - min)
+  const opacity = 0.25 + t * 0.50
+  const r = parseInt(color.slice(1, 3), 16)
+  const g = parseInt(color.slice(3, 5), 16)
+  const b = parseInt(color.slice(5, 7), 16)
+  const er = 255 * (1 - opacity) + r * opacity
+  const eg = 255 * (1 - opacity) + g * opacity
+  const eb = 255 * (1 - opacity) + b * opacity
+  const luminance = (0.299 * er + 0.587 * eg + 0.114 * eb) / 255
+  return {
+    backgroundColor: `rgba(${r}, ${g}, ${b}, ${opacity})`,
+    color: luminance > 0.55 ? '#1e293b' : '#ffffff',
+  }
+}
+
+export function formatConcentration(value: number): string {
+  if (value >= 1000) return `${value / 1000}k`
+  if (value < 0.01) return value.toExponential(0)
+  return String(value)
+}
+
+export function getHeatmapColor(config: HeatmapConfig | undefined, value: number | undefined): string | null {
+  if (!config?.enabled || value === undefined) return null
+
+  const min = config.min ?? 0
+  const max = config.max ?? 1
+  const normalized = Math.max(0, Math.min(1, (value - min) / (max - min)))
+  const colors = config.colorScale === 'custom' && config.customColors?.length
+    ? config.customColors
+    : HEATMAP_COLORS[config.colorScale || 'viridis']
+  const index = Math.min(Math.floor(normalized * (colors.length - 1)), colors.length - 1)
+  return colors[index]
+}

package/src/components/WellPlate.conditions.ts

@@ -0,0 +1,100 @@
+import type { ColumnCondition, RowCondition } from '../types'
+
+export interface ConditionEntry<TCondition> {
+  condition: TCondition
+  indexInGroup: number
+}
+
+export type ColumnConditionSpan =
+  | { condition: ColumnCondition; colspan: number }
+  | { gap: true; colspan: number }
+
+export type RowConditionSpan =
+  | { condition: RowCondition; rowspan: number; startRow: number }
+  | { gap: true; rowspan: number; startRow: number }
+
+export function createColumnConditionMap(
+  conditions: ColumnCondition[],
+): Map<number, ConditionEntry<ColumnCondition>> {
+  const map = new Map<number, ConditionEntry<ColumnCondition>>()
+  for (const condition of conditions) {
+    condition.cols.forEach((col, indexInGroup) => {
+      map.set(col, { condition, indexInGroup })
+    })
+  }
+  return map
+}
+
+export function createRowConditionMap(
+  conditions: RowCondition[],
+): Map<string, ConditionEntry<RowCondition>> {
+  const map = new Map<string, ConditionEntry<RowCondition>>()
+  for (const condition of conditions) {
+    condition.rows.forEach((row, indexInGroup) => {
+      map.set(row, { condition, indexInGroup })
+    })
+  }
+  return map
+}
+
+export function createColumnConditionSpans(
+  cols: number[],
+  conditionMap: ReadonlyMap<number, ConditionEntry<ColumnCondition>>,
+): ColumnConditionSpan[] {
+  const spans: ColumnConditionSpan[] = []
+  let index = 0
+
+  while (index < cols.length) {
+    const entry = conditionMap.get(cols[index])
+    if (entry?.indexInGroup === 0) {
+      spans.push({ condition: entry.condition, colspan: entry.condition.cols.length })
+      index += entry.condition.cols.length
+      continue
+    }
+
+    let gapCount = 0
+    while (index + gapCount < cols.length && !conditionMap.has(cols[index + gapCount])) {
+      gapCount++
+    }
+    spans.push({ gap: true, colspan: gapCount || 1 })
+    index += gapCount || 1
+  }
+
+  return spans
+}
+
+export function createRowConditionSpans(
+  rows: string[],
+  conditionMap: ReadonlyMap<string, ConditionEntry<RowCondition>>,
+): RowConditionSpan[] {
+  const spans: RowConditionSpan[] = []
+  let index = 0
+
+  while (index < rows.length) {
+    const entry = conditionMap.get(rows[index])
+    if (entry?.indexInGroup === 0) {
+      spans.push({ condition: entry.condition, rowspan: entry.condition.rows.length, startRow: index })
+      index += entry.condition.rows.length
+      continue
+    }
+
+    let gapCount = 0
+    while (index + gapCount < rows.length && !conditionMap.has(rows[index + gapCount])) {
+      gapCount++
+    }
+    spans.push({ gap: true, rowspan: gapCount || 1, startRow: index })
+    index += gapCount || 1
+  }
+
+  return spans
+}
+
+export function createRowConditionSpanByRow(
+  spans: RowConditionSpan[],
+): Map<number, RowConditionSpan> {
+  const map = new Map<number, RowConditionSpan>()
+  for (const span of spans) {
+    map.set(span.startRow, span)
+  }
+  return map
+}