@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/composables/useTheme.ts

@@ -0,0 +1,58 @@
+import { computed, onUnmounted, getCurrentInstance, type Ref } from 'vue'
+import { useSettingsStore } from '../stores/settings'
+
+export interface UseThemeReturn {
+  isDark: Ref<boolean>
+  toggleTheme: () => void
+  setTheme: (theme: 'light' | 'dark') => void
+}
+
+/** Reads and toggles the active theme (light/dark/system) with reactivity to OS preference changes. */
+export function useTheme(): UseThemeReturn {
+  const settings = useSettingsStore()
+
+  // Load persisted theme from localStorage (idempotent — safe to call multiple times)
+  settings.initialize()
+
+  const mql = typeof window !== 'undefined'
+    ? window.matchMedia('(prefers-color-scheme: dark)')
+    : null
+
+  const isDark = computed(() => {
+    if (settings.theme === 'system') {
+      return mql?.matches ?? false
+    }
+    return settings.theme === 'dark'
+  })
+
+  // React to system preference changes when in 'system' mode
+  function onSystemChange() {
+    if (settings.theme === 'system') {
+      // Force reactivity by toggling theme to itself — the computed re-evaluates
+      // because mql.matches changed, but Vue needs a trigger. We nudge the store.
+      settings.theme = 'system'
+    }
+  }
+
+  mql?.addEventListener('change', onSystemChange)
+
+  if (getCurrentInstance()) {
+    onUnmounted(() => {
+      mql?.removeEventListener('change', onSystemChange)
+    })
+  }
+
+  function toggleTheme() {
+    settings.theme = isDark.value ? 'light' : 'dark'
+  }
+
+  function setTheme(theme: 'light' | 'dark') {
+    settings.theme = theme
+  }
+
+  return {
+    isDark,
+    toggleTheme,
+    setTheme,
+  }
+}

package/src/composables/useTimeUtils.ts

@@ -0,0 +1,131 @@
+import type { TimeRange } from '../types/components'
+
+export function parseTime(time: string): { hour: number; minute: number } {
+  const [h, m] = time.split(':').map(Number)
+  return { hour: h, minute: m }
+}
+
+export function formatTime(hour: number, minute: number, format: '12h' | '24h' = '24h'): string {
+  if (format === '24h') {
+    return `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`
+  }
+  const period = hour >= 12 ? 'PM' : 'AM'
+  const h12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour
+  return `${h12}:${String(minute).padStart(2, '0')} ${period}`
+}
+
+export function generateTimeSlots(start: string, end: string, stepMinutes: number): string[] {
+  const slots: string[] = []
+  const s = parseTime(start)
+  const e = parseTime(end)
+  const startMin = s.hour * 60 + s.minute
+  const endMin = e.hour * 60 + e.minute
+
+  for (let m = startMin; m <= endMin; m += stepMinutes) {
+    const hour = Math.floor(m / 60)
+    const minute = m % 60
+    if (hour >= 24) break
+    slots.push(formatTime(hour, minute))
+  }
+  return slots
+}
+
+export function rangesOverlap(a: TimeRange, b: TimeRange): boolean {
+  const aStart = toMinutes(a.start)
+  const aEnd = toMinutes(a.end)
+  const bStart = toMinutes(b.start)
+  const bEnd = toMinutes(b.end)
+  return aStart < bEnd && bStart < aEnd
+}
+
+export function durationMinutes(start: string, end: string): number {
+  return toMinutes(end) - toMinutes(start)
+}
+
+export function formatDuration(minutes: number): string {
+  if (minutes < 0) return '-' + formatDuration(-minutes)
+  const h = Math.floor(minutes / 60)
+  const m = minutes % 60
+  if (h === 0) return `${m}m`
+  if (m === 0) return `${h}h`
+  return `${h}h ${m}m`
+}
+
+export function isTimeInRange(time: string, start: string, end: string): boolean {
+  const t = toMinutes(time)
+  return t >= toMinutes(start) && t <= toMinutes(end)
+}
+
+export function findAvailableSlots(
+  dayStart: string,
+  dayEnd: string,
+  occupied: TimeRange[],
+  minDuration: number,
+): TimeRange[] {
+  const sorted = [...occupied].sort((a, b) => toMinutes(a.start) - toMinutes(b.start))
+  const available: TimeRange[] = []
+  let cursor = toMinutes(dayStart)
+  const end = toMinutes(dayEnd)
+
+  for (const slot of sorted) {
+    const slotStart = toMinutes(slot.start)
+    const slotEnd = toMinutes(slot.end)
+    if (slotStart > cursor && slotStart - cursor >= minDuration) {
+      available.push({ start: fromMinutes(cursor), end: fromMinutes(slotStart) })
+    }
+    cursor = Math.max(cursor, slotEnd)
+  }
+
+  if (end > cursor && end - cursor >= minDuration) {
+    available.push({ start: fromMinutes(cursor), end: fromMinutes(end) })
+  }
+
+  return available
+}
+
+export function snapToSlot(time: string, stepMinutes: number): string {
+  const total = toMinutes(time)
+  const snapped = Math.round(total / stepMinutes) * stepMinutes
+  return fromMinutes(snapped)
+}
+
+export function addMinutes(time: string, minutes: number): string {
+  const total = toMinutes(time) + minutes
+  return fromMinutes(Math.max(0, Math.min(total, 24 * 60 - 1)))
+}
+
+export function compareTime(a: string, b: string): number {
+  const ma = toMinutes(a)
+  const mb = toMinutes(b)
+  if (ma < mb) return -1
+  if (ma > mb) return 1
+  return 0
+}
+
+function toMinutes(time: string): number {
+  const { hour, minute } = parseTime(time)
+  return hour * 60 + minute
+}
+
+function fromMinutes(total: number): string {
+  const hour = Math.floor(total / 60) % 24
+  const minute = total % 60
+  return formatTime(hour, minute)
+}
+
+/** Time utility helpers for parsing, formatting, comparing, and snapping HH:MM strings. */
+export function useTimeUtils() {
+  return {
+    parseTime,
+    formatTime,
+    generateTimeSlots,
+    rangesOverlap,
+    durationMinutes,
+    formatDuration,
+    isTimeInRange,
+    findAvailableSlots,
+    snapToSlot,
+    addMinutes,
+    compareTime,
+  }
+}

package/src/composables/useToast.ts

@@ -0,0 +1,40 @@
+import { ref } from 'vue'
+import type { Toast } from '../types'
+
+const toasts = ref<Toast[]>([])
+let nextId = 0
+
+/** Reactive global toast queue with success/error/warning/info variants and auto-dismiss timers. */
+export function useToast() {
+  function show(message: string, type: Toast['type'] = 'success', duration = 3500) {
+    const id = nextId++
+    toasts.value.push({ id, message, type, duration })
+    setTimeout(() => dismiss(id), duration)
+  }
+
+  function success(message: string, duration = 3500) {
+    show(message, 'success', duration)
+  }
+
+  function error(message: string, duration = 5000) {
+    show(message, 'error', duration)
+  }
+
+  function warning(message: string, duration = 4000) {
+    show(message, 'warning', duration)
+  }
+
+  function info(message: string, duration = 3500) {
+    show(message, 'info', duration)
+  }
+
+  function dismiss(id: number) {
+    toasts.value = toasts.value.filter(t => t.id !== id)
+  }
+
+  function clear() {
+    toasts.value = []
+  }
+
+  return { toasts, show, success, error, warning, info, dismiss, clear }
+}

package/src/composables/useWellPlateEditor.ts

@@ -0,0 +1,421 @@
+import { ref, computed, type ComputedRef } from 'vue'
+import type {
+  PlateMapEditorState,
+  PlateMap,
+  SampleType,
+  WellPlateFormat,
+} from '../types'
+
+const DEFAULT_PALETTE = [
+  '#3B82F6', // blue
+  '#10B981', // green
+  '#EF4444', // red
+  '#F59E0B', // amber
+  '#8B5CF6', // purple
+  '#F97316', // orange
+  '#06B6D4', // cyan
+  '#14B8A6', // teal
+  '#6B7280', // gray
+]
+
+const MAX_HISTORY = 50
+
+interface HistoryEntry {
+  plates: PlateMap[]
+  samples: SampleType[]
+}
+
+export interface UseWellPlateEditorOptions {
+  maxHistory?: number
+  defaultFormat?: WellPlateFormat
+}
+
+export interface UseWellPlateEditorReturn {
+  state: ComputedRef<PlateMapEditorState>
+  plates: ComputedRef<PlateMap[]>
+  activePlate: ComputedRef<PlateMap | undefined>
+  samples: ComputedRef<SampleType[]>
+  selectedWells: ComputedRef<string[]>
+  activeSampleId: ComputedRef<string | undefined>
+  canUndo: ComputedRef<boolean>
+  canRedo: ComputedRef<boolean>
+  setActivePlate: (plateId: string) => void
+  setActiveSample: (sampleId: string | undefined) => void
+  setSelectedWells: (wellIds: string[]) => void
+  addPlate: (name?: string, format?: WellPlateFormat) => PlateMap
+  removePlate: (plateId: string) => void
+  addSample: (name: string, color?: string) => SampleType
+  removeSample: (sampleId: string) => void
+  assignSample: (wellIds: string[], sampleId: string | undefined) => void
+  clearWells: (wellIds: string[]) => void
+  undo: () => void
+  redo: () => void
+  exportData: (format: 'json' | 'csv') => string
+  importData: (data: string, format: 'json' | 'csv') => boolean
+  loadState: (state: Partial<PlateMapEditorState>) => void
+  reset: () => void
+}
+
+function createEmptyPlate(
+  name: string,
+  format: WellPlateFormat,
+  id?: string
+): PlateMap {
+  return {
+    id: id || `plate-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+    name,
+    format,
+    wells: {},
+  }
+}
+
+function generateSampleId(): string {
+  return `sample-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
+}
+
+/** Manages multi-plate well-plate state with sample assignment, selection, and undo/redo history. */
+export function useWellPlateEditor(
+  initialState?: Partial<PlateMapEditorState>,
+  options: UseWellPlateEditorOptions = {}
+): UseWellPlateEditorReturn {
+  const { maxHistory = MAX_HISTORY, defaultFormat = 96 } = options
+
+  const defaultPlate = createEmptyPlate('Plate 1', defaultFormat)
+
+  const internalState = ref<PlateMapEditorState>({
+    plates: initialState?.plates || [defaultPlate],
+    activePlateId: initialState?.activePlateId || defaultPlate.id,
+    samples: initialState?.samples || [],
+    selectedWells: initialState?.selectedWells || [],
+    activeSampleId: initialState?.activeSampleId,
+  })
+
+  const history = ref<HistoryEntry[]>([])
+  const historyIndex = ref(-1)
+
+  const state = computed(() => internalState.value)
+  const plates = computed(() => internalState.value.plates)
+  const activePlate = computed(() =>
+    internalState.value.plates.find(p => p.id === internalState.value.activePlateId)
+  )
+  const samples = computed(() => internalState.value.samples)
+  const selectedWells = computed(() => internalState.value.selectedWells)
+  const activeSampleId = computed(() => internalState.value.activeSampleId)
+
+  const canUndo = computed(() => historyIndex.value >= 0)
+  const canRedo = computed(() => historyIndex.value < history.value.length - 1)
+
+  function saveToHistory() {
+    const entry: HistoryEntry = {
+      plates: structuredClone(internalState.value.plates),
+      samples: structuredClone(internalState.value.samples),
+    }
+
+    if (historyIndex.value < history.value.length - 1) {
+      history.value = history.value.slice(0, historyIndex.value + 1)
+    }
+
+    history.value.push(entry)
+
+    if (history.value.length > maxHistory) {
+      history.value.shift()
+    } else {
+      historyIndex.value++
+    }
+  }
+
+  function setActivePlate(plateId: string) {
+    if (internalState.value.plates.some(p => p.id === plateId)) {
+      internalState.value.activePlateId = plateId
+      internalState.value.selectedWells = []
+    }
+  }
+
+  function setActiveSample(sampleId: string | undefined) {
+    internalState.value.activeSampleId = sampleId
+  }
+
+  function setSelectedWells(wellIds: string[]) {
+    internalState.value.selectedWells = wellIds
+  }
+
+  function addPlate(name?: string, format?: WellPlateFormat): PlateMap {
+    saveToHistory()
+    const plateNumber = internalState.value.plates.length + 1
+    const plate = createEmptyPlate(
+      name || `Plate ${plateNumber}`,
+      format || defaultFormat
+    )
+    internalState.value.plates.push(plate)
+    internalState.value.activePlateId = plate.id
+    internalState.value.selectedWells = []
+    return plate
+  }
+
+  function removePlate(plateId: string) {
+    if (internalState.value.plates.length <= 1) return
+
+    saveToHistory()
+    const index = internalState.value.plates.findIndex(p => p.id === plateId)
+    if (index === -1) return
+
+    internalState.value.plates.splice(index, 1)
+    if (internalState.value.activePlateId === plateId) {
+      internalState.value.activePlateId = internalState.value.plates[0].id
+      internalState.value.selectedWells = []
+    }
+  }
+
+  function addSample(name: string, color?: string): SampleType {
+    saveToHistory()
+    const sample: SampleType = {
+      id: generateSampleId(),
+      name,
+      color: color || DEFAULT_PALETTE[internalState.value.samples.length % DEFAULT_PALETTE.length],
+      count: 0,
+    }
+    internalState.value.samples.push(sample)
+    return sample
+  }
+
+  function removeSample(sampleId: string) {
+    saveToHistory()
+    const index = internalState.value.samples.findIndex(s => s.id === sampleId)
+    if (index === -1) return
+
+    internalState.value.samples.splice(index, 1)
+
+    for (const plate of internalState.value.plates) {
+      for (const well of Object.values(plate.wells)) {
+        if (well.sampleType === sampleId) {
+          delete well.sampleType
+          well.state = 'empty'
+        }
+      }
+    }
+
+    if (internalState.value.activeSampleId === sampleId) {
+      internalState.value.activeSampleId = undefined
+    }
+
+    updateSampleCounts()
+  }
+
+  function assignSample(wellIds: string[], sampleId: string | undefined) {
+    if (wellIds.length === 0) return
+
+    saveToHistory()
+    const plate = activePlate.value
+    if (!plate) return
+
+    for (const wellId of wellIds) {
+      const well = plate.wells[wellId] || {
+        id: wellId,
+        row: wellId.charCodeAt(0) - 65,
+        col: parseInt(wellId.slice(1)) - 1,
+        state: 'empty',
+      }
+
+      if (sampleId) {
+        well.sampleType = sampleId
+        well.state = 'filled'
+      } else {
+        delete well.sampleType
+        well.state = 'empty'
+      }
+
+      plate.wells[wellId] = well
+    }
+    updateSampleCounts()
+  }
+
+  function clearWells(wellIds: string[]) {
+    assignSample(wellIds, undefined)
+  }
+
+  function updateSampleCounts() {
+    const counts: Record<string, number> = {}
+
+    for (const plate of internalState.value.plates) {
+      for (const well of Object.values(plate.wells)) {
+        if (well.sampleType) {
+          counts[well.sampleType] = (counts[well.sampleType] || 0) + 1
+        }
+      }
+    }
+
+    for (const sample of internalState.value.samples) {
+      sample.count = counts[sample.id] || 0
+    }
+  }
+
+  function undo() {
+    if (!canUndo.value) return
+
+    const entry = history.value[historyIndex.value]
+    historyIndex.value--
+
+    internalState.value.plates = structuredClone(entry.plates)
+    internalState.value.samples = structuredClone(entry.samples)
+
+    const activePlateExists = internalState.value.plates.some(p => p.id === internalState.value.activePlateId)
+    if (!activePlateExists) {
+      internalState.value.activePlateId = internalState.value.plates[0]?.id || ''
+    }
+    internalState.value.selectedWells = []
+  }
+
+  function redo() {
+    if (!canRedo.value) return
+
+    historyIndex.value++
+    const entry = history.value[historyIndex.value]
+
+    internalState.value.plates = structuredClone(entry.plates)
+    internalState.value.samples = structuredClone(entry.samples)
+    internalState.value.selectedWells = []
+  }
+
+  function exportData(format: 'json' | 'csv'): string {
+    if (format === 'json') {
+      return JSON.stringify({
+        plates: internalState.value.plates,
+        samples: internalState.value.samples,
+      }, null, 2)
+    }
+
+    const sampleMap = new Map(internalState.value.samples.map(s => [s.id, s.name]))
+    const rows = ['Plate,Well,Sample Type,Sample Name']
+
+    for (const plate of internalState.value.plates) {
+      for (const [wellId, well] of Object.entries(plate.wells)) {
+        if (well.sampleType) {
+          const sampleName = sampleMap.get(well.sampleType) || ''
+          rows.push(`"${plate.name}","${wellId}","${well.sampleType}","${sampleName}"`)
+        }
+      }
+    }
+
+    return rows.join('\n')
+  }
+
+  function importData(data: string, format: 'json' | 'csv'): boolean {
+    try {
+      saveToHistory()
+
+      if (format === 'json') {
+        const parsed = JSON.parse(data)
+        if (parsed.plates && Array.isArray(parsed.plates)) {
+          internalState.value.plates = parsed.plates
+          internalState.value.activePlateId = parsed.plates[0]?.id || ''
+        }
+        if (parsed.samples && Array.isArray(parsed.samples)) {
+          internalState.value.samples = parsed.samples
+        }
+        internalState.value.selectedWells = []
+        updateSampleCounts()
+        return true
+      }
+
+      const lines = data.trim().split('\n')
+      if (lines.length < 2) return false
+
+      const plateMap = new Map<string, PlateMap>()
+      const sampleMap = new Map<string, SampleType>()
+
+      for (let i = 1; i < lines.length; i++) {
+        const parts = lines[i].match(/(?:[^",]+|"[^"]*")+/g)
+        if (!parts || parts.length < 4) continue
+
+        const plateName = parts[0].replace(/^"|"$/g, '')
+        const wellId = parts[1].replace(/^"|"$/g, '')
+        const sampleId = parts[2].replace(/^"|"$/g, '')
+        const sampleName = parts[3].replace(/^"|"$/g, '')
+
+        if (!plateMap.has(plateName)) {
+          plateMap.set(plateName, createEmptyPlate(plateName, defaultFormat))
+        }
+
+        if (sampleId && !sampleMap.has(sampleId)) {
+          sampleMap.set(sampleId, {
+            id: sampleId,
+            name: sampleName || sampleId,
+            color: DEFAULT_PALETTE[sampleMap.size % DEFAULT_PALETTE.length],
+            count: 0,
+          })
+        }
+
+        const plate = plateMap.get(plateName)!
+        plate.wells[wellId] = {
+          id: wellId,
+          row: wellId.charCodeAt(0) - 65,
+          col: parseInt(wellId.slice(1)) - 1,
+          state: sampleId ? 'filled' : 'empty',
+          sampleType: sampleId || undefined,
+        }
+      }
+
+      internalState.value.plates = Array.from(plateMap.values())
+      internalState.value.samples = Array.from(sampleMap.values())
+      internalState.value.activePlateId = internalState.value.plates[0]?.id || ''
+      internalState.value.selectedWells = []
+      updateSampleCounts()
+      return true
+    } catch {
+      return false
+    }
+  }
+
+  function loadState(state: Partial<PlateMapEditorState>) {
+    saveToHistory()
+    if (state.plates && state.plates.length > 0) {
+      internalState.value.plates = structuredClone(state.plates)
+      internalState.value.activePlateId = state.activePlateId ?? state.plates[0].id
+    }
+    if (state.samples) {
+      internalState.value.samples = structuredClone(state.samples)
+    }
+    internalState.value.selectedWells = state.selectedWells ?? []
+    internalState.value.activeSampleId = state.activeSampleId
+    updateSampleCounts()
+  }
+
+  function reset() {
+    const plate = createEmptyPlate('Plate 1', defaultFormat)
+    internalState.value = {
+      plates: [plate],
+      activePlateId: plate.id,
+      samples: [],
+      selectedWells: [],
+      activeSampleId: undefined,
+    }
+    history.value = []
+    historyIndex.value = -1
+  }
+
+  return {
+    state,
+    plates,
+    activePlate,
+    samples,
+    selectedWells,
+    activeSampleId,
+    canUndo,
+    canRedo,
+    setActivePlate,
+    setActiveSample,
+    setSelectedWells,
+    addPlate,
+    removePlate,
+    addSample,
+    removeSample,
+    assignSample,
+    clearWells,
+    undo,
+    redo,
+    exportData,
+    importData,
+    loadState,
+    reset,
+  }
+}

package/src/histoire.setup.ts

@@ -0,0 +1,17 @@
+import { defineSetupVue3 } from '@histoire/plugin-vue'
+import { createPinia } from 'pinia'
+import './styles/index.css'
+
+export const setupVue3 = defineSetupVue3(({ app }) => {
+  app.use(createPinia())
+
+  // Sync Histoire dark mode toggle to html.dark class (drives CSS variables)
+  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+    const mq = window.matchMedia('(prefers-color-scheme: dark)')
+    const sync = (dark: boolean) => {
+      document.documentElement.classList.toggle('dark', dark)
+    }
+    sync(mq.matches)
+    mq.addEventListener('change', (e) => sync(e.matches))
+  }
+})