@morscherlab/mld-sdk 0.6.0

package/src/index.ts

@@ -0,0 +1,283 @@
+// Styles (import to ensure bundling)
+import './styles/index.css'
+
+// Vue Plugin for global component registration
+export { MLDSdk, default } from './install'
+
+// Components
+export {
+  BaseButton,
+  BaseInput,
+  BaseTextarea,
+  BaseSelect,
+  BaseCheckbox,
+  BaseToggle,
+  BaseRadioGroup,
+  BaseSlider,
+  ColorSlider,
+  BaseTabs,
+  BaseModal,
+  FormField,
+  DatePicker,
+  TimePicker,
+  TagsInput,
+  NumberInput,
+  FileUploader,
+  AlertBox,
+  ToastNotification,
+  IconButton,
+  ThemeToggle,
+  SettingsButton,
+  CollapsibleCard,
+  AppTopBar,
+  AppSidebar,
+  AppLayout,
+  AppContainer,
+  Skeleton,
+  // Biological experiment components
+  WellPlate,
+  RackEditor,
+  SampleLegend,
+  PlateMapEditor,
+  ExperimentTimeline,
+  // Sample management components
+  SampleSelector,
+  GroupingModal,
+  GroupAssigner,
+  // Lab/Experiment components
+  MoleculeInput,
+  ConcentrationInput,
+  DoseCalculator,
+  ReagentList,
+  SampleHierarchyTree,
+  ProtocolStepEditor,
+  // Selection components
+  SegmentedControl,
+  MultiSelect,
+  // Pill / Dropdown components
+  BasePill,
+  DropdownButton,
+  Calendar,
+  DataFrame,
+  // Utility / UI primitives
+  LoadingSpinner,
+  Divider,
+  StatusIndicator,
+  ProgressBar,
+  Avatar,
+  EmptyState,
+  Breadcrumb,
+  Tooltip,
+  ConfirmDialog,
+  ChartContainer,
+  SettingsModal,
+  // Scientific display components
+  ScientificNumber,
+  ChemicalFormula,
+  // Scientific input components
+  FormulaInput,
+  SequenceInput,
+  UnitInput,
+  // Workflow components
+  StepWizard,
+  AuditTrail,
+  BatchProgressList,
+  // Scheduling / booking components
+  DateTimePicker,
+  TimeRangeInput,
+  ScheduleCalendar,
+  ResourceCard,
+} from './components'
+
+// Composables
+export {
+  useApi,
+  useAuth,
+  usePasskey,
+  useTheme,
+  useToast,
+  usePlatformContext,
+  useWellPlateEditor,
+  useConcentrationUnits,
+  useDoseCalculator,
+  useProtocolTemplates,
+  useRackEditor,
+  useChemicalFormula,
+  ATOMIC_WEIGHTS,
+  useSequenceUtils,
+  type ApiClientOptions,
+  type UseWellPlateEditorOptions,
+  type UseWellPlateEditorReturn,
+  type UseRackEditorOptions,
+  type UseRackEditorReturn,
+  type ConcentrationValue,
+  type ConcentrationUnit,
+  type VolumeValue,
+  type VolumeUnit,
+  type StepTemplate,
+  type FormulaParseResult,
+  type FormulaPart,
+  type SequenceType,
+  type SequenceStats,
+  // Time utilities
+  parseTime,
+  formatTime,
+  generateTimeSlots,
+  rangesOverlap,
+  durationMinutes,
+  formatDuration,
+  isTimeInRange,
+  findAvailableSlots,
+  snapToSlot,
+  addMinutes,
+  compareTime,
+  // Schedule drag
+  useScheduleDrag,
+} from './composables'
+
+// Stores
+export {
+  useAuthStore,
+  useSettingsStore,
+  colorPalettes,
+  type SettingsState,
+} from './stores'
+
+// Types
+export type {
+  // Component types
+  ContainerDirection,
+  ButtonVariant,
+  ButtonSize,
+  InputType,
+  ModalSize,
+  AlertType,
+  Toast,
+  TabItem,
+  SelectOption,
+  RadioOption,
+  FormFieldProps,
+  SidebarToolSection,
+  CollapsibleState,
+  TopBarVariant,
+  TopBarPage,
+  TopBarTab,
+  TopBarTabOption,
+  TopBarSettingsConfig,
+  // Well Plate types
+  WellPlateFormat,
+  WellState,
+  WellPlateSelectionMode,
+  Well,
+  HeatmapColorScale,
+  HeatmapConfig,
+  // Well Plate editing types
+  SlotPosition,
+  WellExtendedData,
+  WellEditData,
+  WellEditField,
+  WellLegendItem,
+  Rack,
+  // Sample Legend types
+  SampleType,
+  // Plate Map Editor types
+  PlateMap,
+  PlateMapEditorState,
+  // Experiment Timeline types
+  ProtocolStepType,
+  ProtocolStepStatus,
+  ProtocolStep,
+  // Sample management types
+  SampleGroup,
+  GroupItem,
+  FileUploaderMode,
+  // SegmentedControl types
+  SegmentedOption,
+  SegmentedControlVariant,
+  SegmentedControlSize,
+  // MultiSelect types
+  MultiSelectOption,
+  MultiSelectSize,
+  // Pill types
+  PillVariant,
+  PillSize,
+  // Calendar types
+  CalendarSelectionMode,
+  CalendarMarker,
+  CalendarDayContext,
+  // DataFrame types
+  SortDirection,
+  SortState,
+  DataFrameColumn,
+  PaginationState,
+  // LoadingSpinner types
+  SpinnerSize,
+  SpinnerVariant,
+  // Divider types
+  DividerSpacing,
+  // StatusIndicator types
+  StatusType,
+  // ProgressBar types
+  ProgressVariant,
+  ProgressSize,
+  // Avatar types
+  AvatarSize,
+  // EmptyState types
+  EmptyStateColor,
+  EmptyStateSize,
+  // Breadcrumb types
+  BreadcrumbItem,
+  // Tooltip types
+  TooltipPosition,
+  // ConfirmDialog types
+  ConfirmVariant,
+  // SettingsModal types
+  SettingsTab,
+  // ScientificNumber types
+  NumberNotation,
+  // TimePicker types
+  TimePickerFormat,
+  TimeRange,
+  // Schedule types
+  ScheduleView,
+  ScheduleEventStatus,
+  ScheduleEvent,
+  ScheduleBlockedSlot,
+  ScheduleSlotContext,
+  ScheduleEventCreateContext,
+  ScheduleEventUpdateContext,
+  // Resource types
+  ResourceStatus,
+  ResourceSpec,
+  // UnitInput types
+  UnitOption,
+  // StepWizard types
+  WizardStep,
+  WizardStepState,
+  // AuditTrail types
+  AuditEntryType,
+  AuditEntry,
+  // BatchProgressList types
+  BatchItemStatus,
+  BatchItem,
+  BatchSummary,
+  // Auth types
+  AuthConfig,
+  UserInfo,
+  LoginResponse,
+  TokenVerifyResponse,
+  RegisterRequest,
+  UpdateProfileRequest,
+  CredentialInfo,
+  // Platform types
+  PluginInfo,
+  PluginNavItem,
+  PluginSettings,
+  PluginSettingField,
+  PlatformContext,
+  PlatformEventType,
+  PlatformEvent,
+  ThemeMode,
+  ColorPalette,
+  TableDensity,
+} from './types'

package/src/install.ts

@@ -0,0 +1,32 @@
+import type { App, Plugin } from 'vue'
+import * as components from './components'
+
+/**
+ * Vue plugin that registers all MLD SDK components globally.
+ *
+ * @example
+ * ```typescript
+ * import { createApp } from 'vue'
+ * import { MLDSdk } from '@estrellaxd/mld-sdk'
+ * import '@estrellaxd/mld-sdk/styles'
+ *
+ * const app = createApp(App)
+ * app.use(MLDSdk)
+ * ```
+ */
+export const MLDSdk: Plugin = {
+  install(app: App) {
+    for (const [name, component] of Object.entries(components)) {
+      // Check if it's a valid Vue component (has setup, render, or template)
+      if (
+        component &&
+        typeof component === 'object' &&
+        ('setup' in component || 'render' in component || '__name' in component)
+      ) {
+        app.component(name, component as Parameters<typeof app.component>[1])
+      }
+    }
+  },
+}
+
+export default MLDSdk

package/src/stores/auth.ts

@@ -0,0 +1,144 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type { AuthConfig, UserInfo } from '../types'
+
+const AUTH_TOKEN_KEY = 'mld-auth-token'
+const AUTH_EXPIRES_KEY = 'mld-auth-expires'
+
+export const useAuthStore = defineStore('mld-auth', () => {
+  // State
+  const token = ref<string | null>(null)
+  const tokenExpires = ref<Date | null>(null)
+  const username = ref<string | null>(null)
+  const userInfo = ref<UserInfo | null>(null)
+  const authConfig = ref<AuthConfig>({
+    authRequired: true,
+    passkeyEnabled: false,
+    passkeyRegistered: false,
+    registrationEnabled: false,
+    databaseMode: 'none',
+  })
+  const isInitialized = ref(false)
+  const isLoading = ref(false)
+  const error = ref<string | null>(null)
+
+  // Computed
+  const isAuthenticated = computed(() => {
+    if (!authConfig.value.authRequired) {
+      return true
+    }
+    if (!token.value) {
+      return false
+    }
+    if (tokenExpires.value && tokenExpires.value < new Date()) {
+      return false
+    }
+    return true
+  })
+
+  const needsAuth = computed(() => {
+    return authConfig.value.authRequired && !isAuthenticated.value
+  })
+
+  const isAdmin = computed(() => {
+    return userInfo.value?.role === 'admin'
+  })
+
+  const canRegister = computed(() => {
+    return authConfig.value.registrationEnabled
+  })
+
+  // Actions
+  function initialize() {
+    const storedToken = localStorage.getItem(AUTH_TOKEN_KEY)
+    const storedExpires = localStorage.getItem(AUTH_EXPIRES_KEY)
+
+    if (storedToken) {
+      token.value = storedToken
+
+      if (storedExpires) {
+        const expires = new Date(storedExpires)
+        if (expires > new Date()) {
+          tokenExpires.value = expires
+        } else {
+          clearToken()
+        }
+      }
+    }
+
+    isInitialized.value = true
+  }
+
+  function setToken(accessToken: string, expiresIn: number) {
+    token.value = accessToken
+    const expires = new Date(Date.now() + expiresIn * 1000)
+    tokenExpires.value = expires
+
+    localStorage.setItem(AUTH_TOKEN_KEY, accessToken)
+    localStorage.setItem(AUTH_EXPIRES_KEY, expires.toISOString())
+  }
+
+  function clearToken() {
+    token.value = null
+    tokenExpires.value = null
+    username.value = null
+    userInfo.value = null
+
+    localStorage.removeItem(AUTH_TOKEN_KEY)
+    localStorage.removeItem(AUTH_EXPIRES_KEY)
+  }
+
+  function setUserInfo(info: UserInfo) {
+    userInfo.value = info
+    username.value = info.username
+  }
+
+  function setAuthConfig(config: AuthConfig) {
+    authConfig.value = config
+  }
+
+  function setUsername(name: string) {
+    username.value = name
+  }
+
+  function setError(message: string | null) {
+    error.value = message
+  }
+
+  function setLoading(loading: boolean) {
+    isLoading.value = loading
+  }
+
+  function logout() {
+    clearToken()
+  }
+
+  return {
+    // State
+    token,
+    tokenExpires,
+    username,
+    userInfo,
+    authConfig,
+    isInitialized,
+    isLoading,
+    error,
+
+    // Computed
+    isAuthenticated,
+    needsAuth,
+    isAdmin,
+    canRegister,
+
+    // Actions
+    initialize,
+    setToken,
+    clearToken,
+    setAuthConfig,
+    setUsername,
+    setUserInfo,
+    setError,
+    setLoading,
+    logout,
+  }
+})

package/src/stores/index.ts

@@ -0,0 +1,2 @@
+export { useAuthStore } from './auth'
+export { useSettingsStore, colorPalettes, type SettingsState } from './settings'

package/src/stores/settings.ts

@@ -0,0 +1,229 @@
+import { defineStore } from 'pinia'
+import { ref, watch } from 'vue'
+import type { ThemeMode, ColorPalette, TableDensity } from '../types'
+
+declare global {
+  interface ImportMetaEnv {
+    readonly VITE_API_PREFIX?: string
+  }
+
+  interface ImportMeta {
+    readonly env: ImportMetaEnv
+  }
+}
+
+export interface SettingsState {
+  serverHost: string
+  serverPort: number
+  requestTimeout: number
+  wsAutoReconnect: boolean
+  wsReconnectInterval: number
+  theme: ThemeMode
+  colorPalette: ColorPalette
+  tableDensity: TableDensity
+}
+
+const STORAGE_KEY = 'mld-settings'
+
+function getDefaultServerHost(): string {
+  if (typeof window !== 'undefined' && window.location.hostname !== 'localhost') {
+    return window.location.hostname
+  }
+  return 'localhost'
+}
+
+function getDefaultServerPort(): number {
+  if (typeof window !== 'undefined' && window.location.port) {
+    return parseInt(window.location.port, 10)
+  }
+  return 8000
+}
+
+const defaultSettings: SettingsState = {
+  serverHost: getDefaultServerHost(),
+  serverPort: getDefaultServerPort(),
+  requestTimeout: 120000,
+  wsAutoReconnect: true,
+  wsReconnectInterval: 5000,
+  theme: 'system',
+  colorPalette: 'default',
+  tableDensity: 'normal',
+}
+
+export const colorPalettes: Record<ColorPalette, { name: string; hues: [number, number] }> = {
+  default: { name: 'Default (Cyan-Pink)', hues: [180, 320] },
+  colorblind: { name: 'Colorblind-friendly', hues: [45, 260] },
+  viridis: { name: 'Viridis', hues: [280, 80] },
+  pastel: { name: 'Pastel', hues: [200, 340] },
+}
+
+function loadSettings(): SettingsState {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (stored) {
+      const parsed = JSON.parse(stored)
+      return { ...defaultSettings, ...parsed }
+    }
+  } catch (e) {
+    console.warn('Failed to load settings from localStorage:', e)
+  }
+  return { ...defaultSettings }
+}
+
+function saveSettings(settings: SettingsState): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings))
+  } catch (e) {
+    console.warn('Failed to save settings to localStorage:', e)
+  }
+}
+
+export const useSettingsStore = defineStore('mld-settings', () => {
+  // State
+  const serverHost = ref(defaultSettings.serverHost)
+  const serverPort = ref(defaultSettings.serverPort)
+  const requestTimeout = ref(defaultSettings.requestTimeout)
+  const wsAutoReconnect = ref(defaultSettings.wsAutoReconnect)
+  const wsReconnectInterval = ref(defaultSettings.wsReconnectInterval)
+  const theme = ref<ThemeMode>(defaultSettings.theme)
+  const colorPalette = ref<ColorPalette>(defaultSettings.colorPalette)
+  const tableDensity = ref<TableDensity>(defaultSettings.tableDensity)
+
+  // API prefix - can be configured via env variable VITE_API_PREFIX
+  const apiPrefix: string = (import.meta.env?.VITE_API_PREFIX as string | undefined) ?? '/api'
+
+  function getApiBaseUrl(): string {
+    const currentHost = typeof window !== 'undefined' ? window.location.hostname : 'localhost'
+    const currentPort = typeof window !== 'undefined' ? window.location.port : '8000'
+
+    if (serverHost.value === currentHost && String(serverPort.value) === currentPort) {
+      return apiPrefix
+    }
+
+    if (serverHost.value === 'localhost' && currentHost !== 'localhost') {
+      return apiPrefix
+    }
+
+    return `http://${serverHost.value}:${serverPort.value}${apiPrefix}`
+  }
+
+  function getWsBaseUrl(): string {
+    const currentHost = typeof window !== 'undefined' ? window.location.hostname : 'localhost'
+    const currentPort = typeof window !== 'undefined' ? window.location.port : '8000'
+    const protocol = typeof window !== 'undefined' && window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+
+    if (serverHost.value === currentHost && String(serverPort.value) === currentPort) {
+      return `${protocol}//${currentHost}:${currentPort}${apiPrefix}`
+    }
+
+    if (serverHost.value === 'localhost' && currentHost !== 'localhost') {
+      return `${protocol}//${currentHost}:${currentPort}${apiPrefix}`
+    }
+
+    return `ws://${serverHost.value}:${serverPort.value}${apiPrefix}`
+  }
+
+  function initialize() {
+    const loaded = loadSettings()
+    serverHost.value = loaded.serverHost
+    serverPort.value = loaded.serverPort
+    requestTimeout.value = loaded.requestTimeout
+    wsAutoReconnect.value = loaded.wsAutoReconnect
+    wsReconnectInterval.value = loaded.wsReconnectInterval
+    theme.value = loaded.theme
+    colorPalette.value = loaded.colorPalette
+    tableDensity.value = loaded.tableDensity
+
+    applyTheme()
+  }
+
+  function applyTheme() {
+    let isDark = false
+
+    if (theme.value === 'system') {
+      isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    } else {
+      isDark = theme.value === 'dark'
+    }
+
+    if (isDark) {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+  }
+
+  watch(theme, () => {
+    applyTheme()
+    persistSettings()
+  })
+
+  if (typeof window !== 'undefined') {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      if (theme.value === 'system') {
+        applyTheme()
+      }
+    })
+  }
+
+  function persistSettings() {
+    saveSettings({
+      serverHost: serverHost.value,
+      serverPort: serverPort.value,
+      requestTimeout: requestTimeout.value,
+      wsAutoReconnect: wsAutoReconnect.value,
+      wsReconnectInterval: wsReconnectInterval.value,
+      theme: theme.value,
+      colorPalette: colorPalette.value,
+      tableDensity: tableDensity.value,
+    })
+  }
+
+  watch([serverHost, serverPort, requestTimeout, wsAutoReconnect, wsReconnectInterval, colorPalette, tableDensity], () => {
+    persistSettings()
+  })
+
+  function resetToDefaults() {
+    serverHost.value = defaultSettings.serverHost
+    serverPort.value = defaultSettings.serverPort
+    requestTimeout.value = defaultSettings.requestTimeout
+    wsAutoReconnect.value = defaultSettings.wsAutoReconnect
+    wsReconnectInterval.value = defaultSettings.wsReconnectInterval
+    theme.value = defaultSettings.theme
+    colorPalette.value = defaultSettings.colorPalette
+    tableDensity.value = defaultSettings.tableDensity
+  }
+
+  function getPaletteHues(): [number, number] {
+    return colorPalettes[colorPalette.value].hues
+  }
+
+  function isDark(): boolean {
+    if (theme.value === 'system') {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches
+    }
+    return theme.value === 'dark'
+  }
+
+  return {
+    // State
+    serverHost,
+    serverPort,
+    requestTimeout,
+    wsAutoReconnect,
+    wsReconnectInterval,
+    theme,
+    colorPalette,
+    tableDensity,
+
+    // Actions
+    initialize,
+    applyTheme,
+    persistSettings,
+    resetToDefaults,
+    getPaletteHues,
+    isDark,
+    getApiBaseUrl,
+    getWsBaseUrl,
+  }
+})