@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/index.ts

@@ -0,0 +1,118 @@
+// Base components
+export { default as BaseButton } from './BaseButton.vue'
+export { default as BaseInput } from './BaseInput.vue'
+export { default as BaseTextarea } from './BaseTextarea.vue'
+export { default as BaseSelect } from './BaseSelect.vue'
+export { default as BaseCheckbox } from './BaseCheckbox.vue'
+export { default as BaseToggle } from './BaseToggle.vue'
+export { default as BaseRadioGroup } from './BaseRadioGroup.vue'
+export { default as BaseSlider } from './BaseSlider.vue'
+export { default as ColorSlider } from './ColorSlider.vue'
+export { default as BaseTabs } from './BaseTabs.vue'
+export { default as BaseModal } from './BaseModal.vue'
+export { default as SegmentedControl } from './SegmentedControl.vue'
+export { default as MultiSelect } from './MultiSelect.vue'
+export { default as BasePill } from './BasePill.vue'
+export { default as DropdownButton } from './DropdownButton.vue'
+export { default as Calendar } from './Calendar.vue'
+export { default as DataFrame } from './DataFrame.vue'
+
+// Form components
+export { default as FormField } from './FormField.vue'
+export { default as DatePicker } from './DatePicker.vue'
+export { default as TimePicker } from './TimePicker.vue'
+export { default as TagsInput } from './TagsInput.vue'
+export { default as NumberInput } from './NumberInput.vue'
+export { default as FileUploader } from './FileUploader.vue'
+
+// Feedback components
+export { default as AlertBox } from './AlertBox.vue'
+export { default as ToastNotification } from './ToastNotification.vue'
+export { default as AppToastContainer } from './ToastNotification.vue'
+
+// Action components
+export { default as IconButton } from './IconButton.vue'
+export { default as ThemeToggle } from './ThemeToggle.vue'
+export { default as SettingsButton } from './SettingsButton.vue'
+
+// Layout components
+export { default as CollapsibleCard } from './CollapsibleCard.vue'
+export { default as AppTopBar } from './AppTopBar.vue'
+export { default as AppPageSelector } from './AppPageSelector.vue'
+export { default as AppPillNav } from './AppPillNav.vue'
+export { default as AppAvatarMenu } from './AppAvatarMenu.vue'
+export { default as AppPluginSwitcher } from './AppPluginSwitcher.vue'
+export { default as AppSidebar } from './AppSidebar.vue'
+export { default as AppLayout } from './AppLayout.vue'
+export { default as AppContainer } from './AppContainer.vue'
+
+// Utility components
+export { default as Skeleton } from './Skeleton.vue'
+export { default as LoadingSpinner } from './LoadingSpinner.vue'
+export { default as Divider } from './Divider.vue'
+export { default as StatusIndicator } from './StatusIndicator.vue'
+export { default as ProgressBar } from './ProgressBar.vue'
+export { default as Avatar } from './Avatar.vue'
+export { default as EmptyState } from './EmptyState.vue'
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as Tooltip } from './Tooltip.vue'
+export { default as ConfirmDialog } from './ConfirmDialog.vue'
+export { default as ChartContainer } from './ChartContainer.vue'
+export { default as SettingsModal } from './SettingsModal.vue'
+
+// Biological experiment components
+export { default as WellPlate } from './WellPlate.vue'
+export { default as RackEditor } from './RackEditor.vue'
+export { default as SampleLegend } from './SampleLegend.vue'
+export { default as PlateMapEditor } from './PlateMapEditor.vue'
+export { default as ExperimentTimeline } from './ExperimentTimeline.vue'
+
+// Sample management components
+export { default as SampleSelector } from './SampleSelector.vue'
+export { default as GroupingModal } from './GroupingModal.vue'
+export { default as AutoGroupModal } from './AutoGroupModal.vue'
+export { default as GroupAssigner } from './GroupAssigner.vue'
+
+// Lab/Experiment components
+export { default as MoleculeInput } from './MoleculeInput.vue'
+export { default as ConcentrationInput } from './ConcentrationInput.vue'
+export { default as DoseCalculator } from './DoseCalculator.vue'
+export { default as ReagentEditor, type ReagentDefinition } from './ReagentEditor.vue'
+export { default as ReagentList } from './ReagentList.vue'
+export { default as SampleHierarchyTree } from './SampleHierarchyTree.vue'
+export { default as ProtocolStepEditor } from './ProtocolStepEditor.vue'
+
+// Scientific display components
+export { default as ScientificNumber } from './ScientificNumber.vue'
+export { default as ChemicalFormula } from './ChemicalFormula.vue'
+
+// Scientific input components
+export { default as FormulaInput } from './FormulaInput.vue'
+export { default as SequenceInput } from './SequenceInput.vue'
+export { default as UnitInput } from './UnitInput.vue'
+
+// Workflow components
+export { default as StepWizard } from './StepWizard.vue'
+export { default as AuditTrail } from './AuditTrail.vue'
+export { default as BatchProgressList } from './BatchProgressList.vue'
+
+// Form builder components
+export { default as FormBuilder } from './FormBuilder.vue'
+export { default as FormSection } from './FormSection.vue'
+export { default as FormActions } from './FormActions.vue'
+export { default as FormFieldRenderer } from './FormFieldRenderer.vue'
+
+// Experiment data display components
+export { default as ExperimentDataViewer } from './ExperimentDataViewer.vue'
+export { default as ExperimentCodeBadge } from './ExperimentCodeBadge.vue'
+
+// Scheduling / booking components
+export { default as DateTimePicker } from './DateTimePicker.vue'
+export { default as TimeRangeInput } from './TimeRangeInput.vue'
+export { default as ScheduleCalendar } from './ScheduleCalendar.vue'
+export { default as ResourceCard } from './ResourceCard.vue'
+
+// Experiment / analysis components
+export { default as ExperimentSelectorModal } from './ExperimentSelectorModal.vue'
+export { default as ExperimentPopover } from './ExperimentPopover.vue'
+export { default as FitPanel } from './FitPanel.vue'

package/src/composables/experiment-utils.ts

@@ -0,0 +1,57 @@
+import type { DatePreset, ExperimentStatus, SelectOption, PillVariant } from '../types'
+
+export function formatExperimentDate(dateStr: string): string {
+  try {
+    return new Date(dateStr).toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    })
+  } catch {
+    return dateStr
+  }
+}
+
+export function datePresetToISO(preset: DatePreset): string {
+  const now = new Date()
+  const days = preset === 'last_7_days' ? 7 : preset === 'last_30_days' ? 30 : 90
+  const d = new Date(now.getTime() - days * 86_400_000)
+  return d.toISOString()
+}
+
+export const EXPERIMENT_STATUS_OPTIONS: SelectOption<string>[] = [
+  { value: '', label: 'All statuses' },
+  { value: 'planned', label: 'Planned' },
+  { value: 'ongoing', label: 'Ongoing' },
+  { value: 'completed', label: 'Completed' },
+  { value: 'cancelled', label: 'Cancelled' },
+]
+
+export const EXPERIMENT_STATUS_VARIANT_MAP: Record<ExperimentStatus, PillVariant> = {
+  planned: 'default',
+  ongoing: 'primary',
+  completed: 'success',
+  cancelled: 'error',
+}
+
+export const EXPERIMENT_STATUS_LABELS: Record<ExperimentStatus, string> = {
+  planned: 'Planned',
+  ongoing: 'Ongoing',
+  completed: 'Completed',
+  cancelled: 'Cancelled',
+}
+
+export const DATE_PRESET_OPTIONS: SelectOption<string>[] = [
+  { value: '', label: 'Any time' },
+  { value: 'last_7_days', label: 'Last 7 days' },
+  { value: 'last_30_days', label: 'Last 30 days' },
+  { value: 'last_90_days', label: 'Last 90 days' },
+]
+
+export const SORT_OPTIONS: SelectOption<string>[] = [
+  { value: 'created_at:desc', label: 'Newest first' },
+  { value: 'created_at:asc', label: 'Oldest first' },
+  { value: 'updated_at:desc', label: 'Recently updated' },
+  { value: 'name:asc', label: 'Name A\u2013Z' },
+  { value: 'name:desc', label: 'Name Z\u2013A' },
+]

package/src/composables/formBuilderRegistry.ts

@@ -0,0 +1,79 @@
+import type { Component } from 'vue'
+import type { FormFieldType } from '../types/form-builder'
+
+import BaseInput from '../components/BaseInput.vue'
+import BaseTextarea from '../components/BaseTextarea.vue'
+import BaseSelect from '../components/BaseSelect.vue'
+import MultiSelect from '../components/MultiSelect.vue'
+import BaseCheckbox from '../components/BaseCheckbox.vue'
+import BaseToggle from '../components/BaseToggle.vue'
+import BaseRadioGroup from '../components/BaseRadioGroup.vue'
+import BaseSlider from '../components/BaseSlider.vue'
+import TagsInput from '../components/TagsInput.vue'
+import NumberInput from '../components/NumberInput.vue'
+import DatePicker from '../components/DatePicker.vue'
+import TimePicker from '../components/TimePicker.vue'
+import DateTimePicker from '../components/DateTimePicker.vue'
+import FileUploader from '../components/FileUploader.vue'
+import FormulaInput from '../components/FormulaInput.vue'
+import SequenceInput from '../components/SequenceInput.vue'
+import MoleculeInput from '../components/MoleculeInput.vue'
+import ConcentrationInput from '../components/ConcentrationInput.vue'
+import UnitInput from '../components/UnitInput.vue'
+
+export interface RegistryEntry {
+  component: Component
+  /** Default props applied to the component. */
+  defaults: Record<string, unknown>
+  /** Whether the component uses v-model (false for event-only components like FileUploader). */
+  vModel: boolean
+}
+
+const registry: Record<FormFieldType, RegistryEntry> = {
+  text: { component: BaseInput, defaults: { type: 'text' }, vModel: true },
+  email: { component: BaseInput, defaults: { type: 'email' }, vModel: true },
+  password: { component: BaseInput, defaults: { type: 'password' }, vModel: true },
+  tel: { component: BaseInput, defaults: { type: 'tel' }, vModel: true },
+  url: { component: BaseInput, defaults: { type: 'url' }, vModel: true },
+  search: { component: BaseInput, defaults: { type: 'search' }, vModel: true },
+  number: { component: NumberInput, defaults: {}, vModel: true },
+  textarea: { component: BaseTextarea, defaults: {}, vModel: true },
+  select: { component: BaseSelect, defaults: {}, vModel: true },
+  multiselect: { component: MultiSelect, defaults: {}, vModel: true },
+  checkbox: { component: BaseCheckbox, defaults: {}, vModel: true },
+  toggle: { component: BaseToggle, defaults: {}, vModel: true },
+  radio: { component: BaseRadioGroup, defaults: {}, vModel: true },
+  slider: { component: BaseSlider, defaults: {}, vModel: true },
+  tags: { component: TagsInput, defaults: {}, vModel: true },
+  date: { component: DatePicker, defaults: {}, vModel: true },
+  time: { component: TimePicker, defaults: {}, vModel: true },
+  datetime: { component: DateTimePicker, defaults: {}, vModel: true },
+  file: { component: FileUploader, defaults: {}, vModel: false },
+  formula: { component: FormulaInput, defaults: {}, vModel: true },
+  sequence: { component: SequenceInput, defaults: {}, vModel: true },
+  molecule: { component: MoleculeInput, defaults: {}, vModel: true },
+  concentration: { component: ConcentrationInput, defaults: {}, vModel: true },
+  unit: { component: UnitInput, defaults: {}, vModel: true },
+}
+
+/** Return the registry entry for a given field type. Throws if the type is unregistered. */
+export function getFieldRegistryEntry(type: FormFieldType): RegistryEntry {
+  return registry[type]
+}
+
+/** Get the default empty value for a given field type. */
+export function getTypeDefault(type: FormFieldType): unknown {
+  switch (type) {
+    case 'checkbox':
+    case 'toggle':
+      return false
+    case 'number':
+    case 'slider':
+      return undefined
+    case 'multiselect':
+    case 'tags':
+      return []
+    default:
+      return ''
+  }
+}

package/src/composables/index.ts

@@ -0,0 +1,140 @@
+export { useApi, type ApiClientOptions } from './useApi'
+export { useAuth } from './useAuth'
+export { usePasskey } from './usePasskey'
+export { useTheme } from './useTheme'
+export { useToast } from './useToast'
+export { usePlatformContext } from './usePlatformContext'
+export {
+  useForm,
+  type ValidationRule,
+  type FieldRules,
+  type FieldState,
+  type UseFormReturn,
+} from './useForm'
+export {
+  useAsync,
+  useAsyncBatch,
+  type AsyncError,
+  type AsyncState,
+  type UseAsyncReturn,
+  type UseAsyncOptions,
+} from './useAsync'
+export {
+  useWellPlateEditor,
+  type UseWellPlateEditorOptions,
+  type UseWellPlateEditorReturn,
+} from './useWellPlateEditor'
+export {
+  useConcentrationUnits,
+  type ConcentrationValue,
+  type ConcentrationUnit,
+  type MolarityUnit,
+  type MassVolumeUnit,
+  type PercentageUnit,
+  type UnitCategory,
+  type UseConcentrationUnitsReturn,
+} from './useConcentrationUnits'
+export {
+  useDoseCalculator,
+  type VolumeUnit,
+  type VolumeValue,
+  type DilutionParams,
+  type DilutionResult,
+  type SerialDilutionParams,
+  type SerialDilutionStep,
+  type SerialDilutionResult,
+  type WellConcentration,
+  type UseDoseCalculatorReturn,
+} from './useDoseCalculator'
+export {
+  useProtocolTemplates,
+  type ParameterDefinition,
+  type StepTemplate,
+  type ValidationResult,
+  type UseProtocolTemplatesReturn,
+} from './useProtocolTemplates'
+export {
+  useRackEditor,
+  type UseRackEditorOptions,
+  type UseRackEditorReturn,
+} from './useRackEditor'
+export {
+  useChemicalFormula,
+  ATOMIC_WEIGHTS,
+  type ParsedElement,
+  type FormulaParseResult,
+  type FormulaPart,
+  type FormulaPartType,
+} from './useChemicalFormula'
+export {
+  useSequenceUtils,
+  type SequenceType,
+  type SequenceStats,
+} from './useSequenceUtils'
+export {
+  useTimeUtils,
+  parseTime,
+  formatTime,
+  generateTimeSlots,
+  rangesOverlap,
+  durationMinutes,
+  formatDuration,
+  isTimeInRange,
+  findAvailableSlots,
+  snapToSlot,
+  addMinutes,
+  compareTime,
+} from './useTimeUtils'
+export { useScheduleDrag } from './useScheduleDrag'
+export { useFormBuilder, evaluateCondition } from './useFormBuilder'
+export { useAutoGroup, DEFAULT_COLORS, extractSamplesFromDesignData } from './useAutoGroup'
+export {
+  useReagentSeries,
+  generateDilutionSeries,
+  DEFAULT_PRESETS,
+  DEFAULT_UNITS,
+  type LevelEntry,
+  type DilutionPreset,
+  type UseReagentSeriesReturn,
+} from './useReagentSeries'
+export { usePluginConfig, type UsePluginConfigReturn } from './usePluginConfig'
+export {
+  useExperimentSelector,
+  type UseExperimentSelectorOptions,
+  type UseExperimentSelectorReturn,
+} from './useExperimentSelector'
+export {
+  formatExperimentDate,
+  datePresetToISO,
+  EXPERIMENT_STATUS_OPTIONS,
+  EXPERIMENT_STATUS_VARIANT_MAP,
+  EXPERIMENT_STATUS_LABELS,
+  DATE_PRESET_OPTIONS,
+  SORT_OPTIONS,
+} from './experiment-utils'
+export {
+  useExperimentData,
+  type UseExperimentDataOptions,
+  type UseExperimentDataReturn,
+} from './useExperimentData'
+export {
+  getFieldRegistryEntry,
+  getTypeDefault,
+  type RegistryEntry,
+} from './formBuilderRegistry'
+export {
+  useAppExperiment,
+  APP_EXPERIMENT_KEY,
+  type UseAppExperimentOptions,
+  type UseAppExperimentReturn,
+  type AppExperimentState,
+} from './useAppExperiment'
+export {
+  useExperimentSave,
+  type UseExperimentSaveOptions,
+  type UseExperimentSaveReturn,
+} from './useExperimentSave'
+export {
+  usePluginApi,
+  type UsePluginApiOptions,
+} from './usePluginApi'

package/src/composables/useApi.ts

@@ -0,0 +1,167 @@
+import axios, { type AxiosInstance, type AxiosRequestConfig } from 'axios'
+import { useSettingsStore } from '../stores/settings'
+import { useAuthStore } from '../stores/auth'
+
+let apiClientInstance: AxiosInstance | null = null
+let interceptorAttached = false
+
+function getApiClient(): AxiosInstance {
+  if (!apiClientInstance) {
+    apiClientInstance = axios.create({
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+  }
+  return apiClientInstance
+}
+
+export interface ApiClientOptions {
+  baseUrl?: string
+  timeout?: number
+  withAuth?: boolean
+}
+
+export interface UseApiReturn {
+  client: AxiosInstance
+  get: <T>(url: string, config?: AxiosRequestConfig) => Promise<T>
+  post: <T>(url: string, data?: unknown, config?: AxiosRequestConfig) => Promise<T>
+  put: <T>(url: string, data?: unknown, config?: AxiosRequestConfig) => Promise<T>
+  patch: <T>(url: string, data?: unknown, config?: AxiosRequestConfig) => Promise<T>
+  delete: <T>(url: string, config?: AxiosRequestConfig) => Promise<T>
+  upload: <T>(url: string, file: File, fieldName?: string, additionalData?: Record<string, unknown>) => Promise<T>
+  download: (url: string, filename?: string) => Promise<string>
+  buildUrl: (path: string) => string
+  buildWsUrl: (path: string) => string
+}
+
+/** Axios-based API client that injects the plugin base URL and JWT auth header on every request. */
+export function useApi(options: ApiClientOptions = {}): UseApiReturn {
+  const settingsStore = useSettingsStore()
+  const authStore = useAuthStore()
+  const apiClient = getApiClient()
+
+  // Ensure auth store is initialized (reads token from localStorage)
+  if (!authStore.isInitialized) {
+    authStore.initialize()
+  }
+
+  // Attach auth interceptor only once (reads token dynamically, not from closure)
+  if (!interceptorAttached) {
+    apiClient.interceptors.request.use((config) => {
+      if (authStore.token && config.headers && !config.headers.Authorization) {
+        config.headers.Authorization = `Bearer ${authStore.token}`
+      }
+      return config
+    })
+    interceptorAttached = true
+  }
+
+  // Build per-request config that applies this caller's options
+  function requestConfig(config?: AxiosRequestConfig): AxiosRequestConfig {
+    const base: AxiosRequestConfig = {
+      baseURL: options.baseUrl ?? settingsStore.getApiBaseUrl(),
+      timeout: options.timeout ?? settingsStore.requestTimeout,
+      ...config,
+    }
+    // Strip auth header if explicitly disabled
+    if (options.withAuth === false) {
+      base.headers = { ...base.headers, Authorization: undefined }
+    }
+    return base
+  }
+
+  // Generic request methods
+  async function get<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    const response = await apiClient.get<T>(url, requestConfig(config))
+    return response.data
+  }
+
+  async function post<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    const response = await apiClient.post<T>(url, data, requestConfig(config))
+    return response.data
+  }
+
+  async function put<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    const response = await apiClient.put<T>(url, data, requestConfig(config))
+    return response.data
+  }
+
+  async function patch<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    const response = await apiClient.patch<T>(url, data, requestConfig(config))
+    return response.data
+  }
+
+  async function del<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    const response = await apiClient.delete<T>(url, requestConfig(config))
+    return response.data
+  }
+
+  // File upload helper
+  async function upload<T>(url: string, file: File, fieldName = 'file', additionalData?: Record<string, unknown>): Promise<T> {
+    const formData = new FormData()
+    formData.append(fieldName, file)
+
+    if (additionalData) {
+      Object.entries(additionalData).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+          formData.append(key, typeof value === 'object' ? JSON.stringify(value) : String(value))
+        }
+      })
+    }
+
+    const response = await apiClient.post<T>(url, formData, requestConfig({
+      // Let Axios set Content-Type with the correct multipart boundary
+      headers: { 'Content-Type': undefined },
+    }))
+    return response.data
+  }
+
+  // Download helper - returns blob URL
+  async function download(url: string, filename?: string): Promise<string> {
+    const response = await apiClient.get(url, requestConfig({ responseType: 'blob' }))
+    const blob = new Blob([response.data])
+    const blobUrl = URL.createObjectURL(blob)
+
+    // Optionally trigger download
+    if (filename) {
+      const link = document.createElement('a')
+      link.href = blobUrl
+      link.download = filename
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      // Revoke after a short delay to allow download to start;
+      // return empty string since the URL will be invalidated
+      setTimeout(() => URL.revokeObjectURL(blobUrl), 100)
+      return ''
+    }
+
+    // Caller is responsible for revoking when no filename is provided
+    return blobUrl
+  }
+
+  // Build full URL for external use (e.g., <a href="...">)
+  function buildUrl(path: string): string {
+    const baseUrl = options.baseUrl ?? settingsStore.getApiBaseUrl()
+    return `${baseUrl}${path}`
+  }
+
+  // WebSocket URL builder
+  function buildWsUrl(path: string): string {
+    return `${settingsStore.getWsBaseUrl()}${path}`
+  }
+
+  return {
+    client: apiClient,
+    get,
+    post,
+    put,
+    patch,
+    delete: del,
+    upload,
+    download,
+    buildUrl,
+    buildWsUrl,
+  }
+}