@morscherlab/mint-sdk 1.0.0-beta.2 → 1.0.0-beta.4

package/src/composables/useWellPlateEditor.ts

@@ -1,4 +1,4 @@
-import { ref, computed, type ComputedRef } from 'vue'
+import { ref, computed, toRaw, type ComputedRef } from 'vue'
 import type {
   PlateMapEditorState,
   PlateMap,
@@ -73,6 +73,10 @@ function generateSampleId(): string {
   return `sample-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
 }
 
+function cloneValue<T>(value: T): T {
+  return structuredClone(toRaw(value))
+}
+
 /** Manages multi-plate well-plate state with sample assignment, selection, and undo/redo history. */
 export function useWellPlateEditor(
   initialState?: Partial<PlateMapEditorState>,
@@ -107,8 +111,8 @@ export function useWellPlateEditor(
 
   function saveToHistory() {
     const entry: HistoryEntry = {
-      plates: structuredClone(internalState.value.plates),
-      samples: structuredClone(internalState.value.samples),
+      plates: cloneValue(internalState.value.plates),
+      samples: cloneValue(internalState.value.samples),
     }
 
     if (historyIndex.value < history.value.length - 1) {
@@ -255,8 +259,8 @@ export function useWellPlateEditor(
     const entry = history.value[historyIndex.value]
     historyIndex.value--
 
-    internalState.value.plates = structuredClone(entry.plates)
-    internalState.value.samples = structuredClone(entry.samples)
+    internalState.value.plates = cloneValue(entry.plates)
+    internalState.value.samples = cloneValue(entry.samples)
 
     const activePlateExists = internalState.value.plates.some(p => p.id === internalState.value.activePlateId)
     if (!activePlateExists) {
@@ -271,8 +275,8 @@ export function useWellPlateEditor(
     historyIndex.value++
     const entry = history.value[historyIndex.value]
 
-    internalState.value.plates = structuredClone(entry.plates)
-    internalState.value.samples = structuredClone(entry.samples)
+    internalState.value.plates = cloneValue(entry.plates)
+    internalState.value.samples = cloneValue(entry.samples)
     internalState.value.selectedWells = []
   }
 
@@ -369,11 +373,11 @@ export function useWellPlateEditor(
   function loadState(state: Partial<PlateMapEditorState>) {
     saveToHistory()
     if (state.plates && state.plates.length > 0) {
-      internalState.value.plates = structuredClone(state.plates)
+      internalState.value.plates = cloneValue(state.plates)
       internalState.value.activePlateId = state.activePlateId ?? state.plates[0].id
     }
     if (state.samples) {
-      internalState.value.samples = structuredClone(state.samples)
+      internalState.value.samples = cloneValue(state.samples)
     }
     internalState.value.selectedWells = state.selectedWells ?? []
     internalState.value.activeSampleId = state.activeSampleId

package/src/index.ts

@@ -5,191 +5,19 @@ import './styles/index.css'
 export { MINTSdk, default } from './install'
 
 // Components
-export {
-  BaseButton,
-  BaseInput,
-  BaseTextarea,
-  BaseSelect,
-  BaseCheckbox,
-  BaseToggle,
-  BaseRadioGroup,
-  BaseSlider,
-  ColorSlider,
-  BaseTabs,
-  BaseModal,
-  FormField,
-  DatePicker,
-  TimePicker,
-  TagsInput,
-  NumberInput,
-  FileUploader,
-  AlertBox,
-  ToastNotification,
-  AppToastContainer,
-  IconButton,
-  ThemeToggle,
-  SettingsButton,
-  CollapsibleCard,
-  AppTopBar,
-  AppPageSelector,
-  AppPillNav,
-  AppAvatarMenu,
-  AppPluginSwitcher,
-  AppSidebar,
-  AppLayout,
-  AppContainer,
-  PluginIcon,
-  Skeleton,
-  // Biological experiment components
-  WellPlate,
-  RackEditor,
-  SampleLegend,
-  PlateMapEditor,
-  ExperimentTimeline,
-  // Sample management components
-  SampleSelector,
-  GroupingModal,
-  AutoGroupModal,
-  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,
-  // Experiment data display components
-  ExperimentDataViewer,
-  ExperimentCodeBadge,
-  // Scheduling / booking components
-  DateTimePicker,
-  TimeRangeInput,
-  ScheduleCalendar,
-  ResourceCard,
-  // Experiment / analysis components
-  ExperimentSelectorModal,
-  ExperimentPopover,
-  FitPanel,
-} from './components'
+export * from './components'
 
 // Composables
+export * from './composables'
+// Resolve names shared by composables and templates so root exports stay unambiguous.
 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,
-  // Plugin config
-  usePluginConfig,
-  type UsePluginConfigReturn,
-  // Auto-group
-  useAutoGroup,
-  DEFAULT_COLORS,
-  // Experiment selector
-  useExperimentSelector,
-  type UseExperimentSelectorOptions,
-  type UseExperimentSelectorReturn,
-  // Experiment utilities
-  formatExperimentDate,
-  datePresetToISO,
-  EXPERIMENT_STATUS_OPTIONS,
-  EXPERIMENT_STATUS_VARIANT_MAP,
-  EXPERIMENT_STATUS_LABELS,
-  DATE_PRESET_OPTIONS,
-  SORT_OPTIONS,
-  // Experiment data
-  useExperimentData,
-  type UseExperimentDataOptions,
-  type UseExperimentDataReturn,
-  // App experiment (provide/inject for AppTopBar)
-  useAppExperiment,
-  APP_EXPERIMENT_KEY,
-  type UseAppExperimentOptions,
-  type UseAppExperimentReturn,
-  // Experiment save (unified save/load for plugins)
-  useExperimentSave,
-  type UseExperimentSaveOptions,
-  type UseExperimentSaveReturn,
-  // Plugin API (auto base URL detection)
-  usePluginApi,
-  type UsePluginApiOptions,
+  getBioTemplateComponentProps,
+  toBioTemplateComponentPropsByComponent,
+  type ControlDefinition,
 } from './composables'
 
 // Stores
-export {
-  useAuthStore,
-  useSettingsStore,
-  colorPalettes,
-  type SettingsState,
-} from './stores'
+export * from './stores'
 
 // Utils
 export {
@@ -199,173 +27,8 @@ export {
   type Hsl,
 } from './utils/color'
 
+// Biology data templates
+export * from './templates'
+
 // Types
-export type {
-  // Component types
-  ContainerDirection,
-  ButtonVariant,
-  ButtonSize,
-  InputType,
-  ModalSize,
-  AlertType,
-  Toast,
-  TabItem,
-  SelectOption,
-  RadioOption,
-  FormFieldProps,
-  SidebarToolSection,
-  CollapsibleState,
-  TopBarVariant,
-  TopBarPage,
-  TopBarTab,
-  TopBarTabOption,
-  TopBarSettingsConfig,
-  PillNavItem,
-  PageSelectorItem,
-  PluginSwitcherPlugin,
-  PluginSwitcherInfo,
-  AccountMenuItem,
-  // 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,
-  // Auto-group types
-  OutlierAction,
-  InputMode,
-  OutlierInfo,
-  ColumnInfo,
-  MetadataRow,
-  AutoGroupResult,
-  ParsedCsvData,
-  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,
-  SettingsModalLayout,
-  SettingsGroup,
-  SettingsModalSchema,
-  // ScientificNumber types
-  NumberNotation,
-  // TimePicker types
-  TimePickerFormat,
-  TimeRange,
-  // Schedule types
-  ScheduleView,
-  ScheduleEventStatus,
-  ScheduleEvent,
-  ScheduleBlockedSlot,
-  ScheduleSlotContext,
-  ScheduleEventCreateContext,
-  ScheduleEventUpdateContext,
-  // Resource types
-  ResourceStatus,
-  ResourceSpec,
-  // Experiment selector types
-  ExperimentStatus,
-  ExperimentSummary,
-  ExperimentListResponse,
-  ExperimentFilters,
-  // FitPanel types
-  FitState,
-  FitResultSummary,
-  // 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,
-  // Summary types
-  SummaryData,
-  SummarySection,
-  SummarySectionItem,
-  // Tree types
-  TreeNode,
-  TreeNodeType,
-  // Platform types
-  PluginInfo,
-  PluginNavItem,
-  PluginSettings,
-  PluginSettingField,
-  PlatformContext,
-  PlatformEventType,
-  PlatformEvent,
-  ThemeMode,
-  ColorPalette,
-  TableDensity,
-  UserSummary,
-} from './types'
+export type * from './types'

package/src/install.ts

@@ -1,6 +1,13 @@
-import type { App, Plugin } from 'vue'
 import * as components from './components'
 
+type ComponentRegistryApp = {
+  component: (name: string, component: any) => unknown
+}
+
+export interface MINTSdkPlugin {
+  install(app: ComponentRegistryApp): void
+}
+
 /**
  * Vue plugin that registers all MINT SDK components globally.
  *
@@ -14,8 +21,8 @@ import * as components from './components'
  * app.use(MINTSdk)
  * ```
  */
-export const MINTSdk: Plugin = {
-  install(app: App) {
+export const MINTSdk: MINTSdkPlugin = {
+  install(app) {
     for (const [name, component] of Object.entries(components)) {
       // Check if it's a valid Vue component (has setup, render, or template)
       if (
@@ -23,7 +30,7 @@ export const MINTSdk: Plugin = {
         typeof component === 'object' &&
         ('setup' in component || 'render' in component || '__name' in component)
       ) {
-        app.component(name, component as Parameters<typeof app.component>[1])
+        app.component(name, component)
       }
     }
   },

package/src/stores/settings.ts

@@ -82,6 +82,11 @@ function saveSettings(settings: SettingsState): void {
   }
 }
 
+function getSystemPrefersDark(): boolean {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+}
+
 export const useSettingsStore = defineStore('mint-settings', () => {
   // State
   const serverHost = ref(defaultSettings.serverHost)
@@ -90,6 +95,7 @@ export const useSettingsStore = defineStore('mint-settings', () => {
   const wsAutoReconnect = ref(defaultSettings.wsAutoReconnect)
   const wsReconnectInterval = ref(defaultSettings.wsReconnectInterval)
   const theme = ref<ThemeMode>(defaultSettings.theme)
+  const systemPrefersDark = ref(getSystemPrefersDark())
   const colorPalette = ref<ColorPalette>(defaultSettings.colorPalette)
   const tableDensity = ref<TableDensity>(defaultSettings.tableDensity)
 
@@ -139,9 +145,8 @@ export const useSettingsStore = defineStore('mint-settings', () => {
   }
 
   function applyTheme() {
-    const dark = theme.value === 'system'
-      ? window.matchMedia('(prefers-color-scheme: dark)').matches
-      : theme.value === 'dark'
+    if (typeof document === 'undefined') return
+    const dark = theme.value === 'system' ? systemPrefersDark.value : theme.value === 'dark'
     document.documentElement.classList.toggle('dark', dark)
   }
 
@@ -150,8 +155,9 @@ export const useSettingsStore = defineStore('mint-settings', () => {
     persistSettings()
   })
 
-  if (typeof window !== 'undefined') {
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
+      systemPrefersDark.value = event.matches
       if (theme.value === 'system') {
         applyTheme()
       }
@@ -191,10 +197,7 @@ export const useSettingsStore = defineStore('mint-settings', () => {
   }
 
   function isDark(): boolean {
-    if (theme.value === 'system') {
-      return window.matchMedia('(prefers-color-scheme: dark)').matches
-    }
-    return theme.value === 'dark'
+    return theme.value === 'system' ? systemPrefersDark.value : theme.value === 'dark'
   }
 
   return {
@@ -204,6 +207,7 @@ export const useSettingsStore = defineStore('mint-settings', () => {
     wsAutoReconnect,
     wsReconnectInterval,
     theme,
+    systemPrefersDark,
     colorPalette,
     tableDensity,
     initialize,

package/src/styles/components/app-layout.css

@@ -15,6 +15,7 @@
   display: flex;
   flex: 1;
   min-height: 0;
+  position: relative;
 }
 
 .mint-layout--sidebar-right .mint-layout__body {
@@ -43,6 +44,11 @@
   flex-direction: column;
 }
 
+.mint-layout__sidebar-toggle,
+.mint-layout__sidebar-backdrop {
+  display: none;
+}
+
 /* Strip topbar card variant inside layout — layout handles containment */
 .mint-layout .mint-topbar--card {
   margin: 0;
@@ -96,3 +102,79 @@
   border-radius: var(--radius-lg, 0.75rem);
   box-shadow: none;
 }
+
+@media (max-width: 1023.98px) {
+  .mint-layout--responsive-sidebar .mint-layout__sidebar {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 42;
+    width: min(20rem, calc(100vw - 3rem));
+    max-width: calc(100vw - 3rem);
+    transform: translateX(calc(-100% - 1rem));
+    transition: transform 180ms ease;
+  }
+
+  .mint-layout--responsive-sidebar.mint-layout--sidebar-right .mint-layout__sidebar {
+    right: 0;
+    left: auto;
+    transform: translateX(calc(100% + 1rem));
+  }
+
+  .mint-layout--responsive-sidebar.mint-layout--sidebar-open .mint-layout__sidebar {
+    transform: translateX(0);
+  }
+
+  .mint-layout--responsive-sidebar .mint-layout__sidebar-toggle {
+    position: absolute;
+    top: 0.75rem;
+    left: 0.75rem;
+    z-index: 43;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.75rem;
+    height: 2.75rem;
+    border: 1px solid var(--border-color, var(--mint-border, #e5e7eb));
+    border-radius: var(--radius-md, 0.5rem);
+    color: var(--text-secondary, var(--mint-text-secondary, #475569));
+    background: var(--bg-secondary, var(--mint-bg-secondary, #f8f9fb));
+    box-shadow: var(--shadow-md, 0 4px 8px rgba(0, 0, 0, 0.1));
+    cursor: pointer;
+  }
+
+  .mint-layout--responsive-sidebar.mint-layout--sidebar-right .mint-layout__sidebar-toggle {
+    right: 0.75rem;
+    left: auto;
+  }
+
+  .mint-layout--responsive-sidebar .mint-layout__sidebar-toggle:hover {
+    color: var(--text-primary, var(--mint-text-primary, #0f172a));
+    background: var(--bg-card, var(--mint-bg-card, #fff));
+  }
+
+  .mint-layout--responsive-sidebar .mint-layout__sidebar-toggle:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring, 0 0 0 3px rgba(99, 102, 241, 0.4));
+  }
+
+  .mint-layout__sidebar-toggle-icon {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+
+  .mint-layout--responsive-sidebar .mint-layout__sidebar-backdrop {
+    position: absolute;
+    inset: 0;
+    z-index: 41;
+    display: block;
+    background: rgba(15, 23, 42, 0.42);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mint-layout--responsive-sidebar .mint-layout__sidebar {
+    transition: none;
+  }
+}

package/src/styles/components/app-page-selector.css

@@ -69,6 +69,17 @@
   height: 0.875rem;
 }
 
+.mint-page-selector__icon--metadata {
+  background: transparent;
+  color: inherit;
+}
+
+.mint-page-selector__trigger-metadata-icon.mint-plugin-icon--sm {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 0.375rem;
+}
+
 .mint-page-selector__icon-fallback {
   font-size: 0.6875rem;
   font-weight: 600;
@@ -175,11 +186,23 @@
   color: var(--color-primary);
 }
 
+.mint-page-selector__item-icon--metadata,
+.mint-page-selector__item--active .mint-page-selector__item-icon--metadata {
+  background: transparent;
+  color: inherit;
+}
+
 .mint-page-selector__item-icon svg {
   width: 0.8125rem;
   height: 0.8125rem;
 }
 
+.mint-page-selector__metadata-icon.mint-plugin-icon--sm {
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 0.3125rem;
+}
+
 .mint-page-selector__item-label {
   flex: 1;
 }