@morscherlab/mint-sdk 1.0.0-beta.1 → 1.0.0-beta.3

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

@@ -17,6 +17,7 @@ export {
   ColorSlider,
   BaseTabs,
   BaseModal,
+  FormBuilder,
   FormField,
   DatePicker,
   TimePicker,
@@ -24,11 +25,9 @@ export {
   NumberInput,
   FileUploader,
   AlertBox,
-  ToastNotification,
   AppToastContainer,
   IconButton,
   ThemeToggle,
-  SettingsButton,
   CollapsibleCard,
   AppTopBar,
   AppPageSelector,
@@ -37,7 +36,9 @@ export {
   AppPluginSwitcher,
   AppSidebar,
   AppLayout,
+  ControlWorkspaceView,
   AppContainer,
+  PluginIcon,
   Skeleton,
   // Biological experiment components
   WellPlate,
@@ -47,7 +48,6 @@ export {
   ExperimentTimeline,
   // Sample management components
   SampleSelector,
-  GroupingModal,
   AutoGroupModal,
   GroupAssigner,
   // Lab/Experiment components
@@ -100,8 +100,21 @@ export {
   ExperimentSelectorModal,
   ExperimentPopover,
   FitPanel,
+  BioTemplateRenderer,
+  BioTemplateExperimentWorkspaceView,
+  BioTemplatePackWorkspaceView,
+  BioTemplatePresetWorkspaceView,
 } from './components'
 
+/** @deprecated Use AppToastContainer instead. */
+export { ToastNotification } from './components'
+
+/** @deprecated Use AppTopBar settingsConfig or SettingsModal instead. */
+export { SettingsButton } from './components'
+
+/** @deprecated Use AutoGroupModal instead. */
+export { GroupingModal } from './components'
+
 // Composables
 export {
   useApi,
@@ -127,6 +140,14 @@ export {
   type ConcentrationUnit,
   type VolumeValue,
   type VolumeUnit,
+  type DilutionParams,
+  type DilutionResult,
+  type SerialDilutionParams,
+  type SerialDilutionStep,
+  type SerialDilutionResult,
+  type ConversionResult,
+  type WellConcentration,
+  type UseDoseCalculatorReturn,
   type StepTemplate,
   type FormulaParseResult,
   type FormulaPart,
@@ -146,6 +167,16 @@ export {
   compareTime,
   // Schedule drag
   useScheduleDrag,
+  // DOM events
+  useEventListener,
+  type EventListenerEnabled,
+  type EventFor,
+  type EventListenerStop,
+  type EventMapFor,
+  type EventTargetGetter,
+  type EventTargetLike,
+  type UseEventListenerObjectOptions,
+  type UseEventListenerOptions,
   // Plugin config
   usePluginConfig,
   type UsePluginConfigReturn,
@@ -177,7 +208,169 @@ export {
   useExperimentSave,
   type UseExperimentSaveOptions,
   type UseExperimentSaveReturn,
-  // Plugin API (auto base URL detection)
+  // Template collection persistence
+  useTemplateCollection,
+  type TemplateCollectionInput,
+  type UseTemplateCollectionOptions,
+  type UseTemplateCollectionReturn,
+  useRequestSyncState,
+  type RequestSyncRunOptions,
+  type RequestSyncSuccessKind,
+  type UseRequestSyncStateReturn,
+  useSelectionLimit,
+  type SelectionLimitSource,
+  type UseSelectionLimitOptions,
+  type UseSelectionLimitReturn,
+  useListSelection,
+  type ListSelectionSource,
+  type ListSelectionValue,
+  type UseListSelectionOptions,
+  type UseListSelectionReturn,
+  type WidenListSelectionValue,
+  useGroupAssignment,
+  type GroupAssignmentSource,
+  type GroupAssignmentState,
+  type GroupAssignmentZone,
+  type UseGroupAssignmentOptions,
+  type UseGroupAssignmentReturn,
+  useSampleGroups,
+  type DisplaySampleSubGroup,
+  type SampleGroupSource,
+  type SampleMajorGroup,
+  type UseSampleGroupsOptions,
+  type UseSampleGroupsReturn,
+  useExpansionSet,
+  type ExpansionSetSource,
+  type UseExpansionSetOptions,
+  type UseExpansionSetReturn,
+  compareSortValues,
+  useSortedItems,
+  type CompareSortValuesOptions,
+  type SortComparator,
+  type SortComparatorContext,
+  type SortDescriptor,
+  type SortedItemsSource,
+  type SortOrder,
+  type UseSortedItemsOptions,
+  type UseSortedItemsReturn,
+  candidateMatchesSearch,
+  normalizeSearchQuery,
+  useTextSearch,
+  type TextSearchCandidate,
+  type TextSearchSource,
+  type UseTextSearchOptions,
+  type UseTextSearchReturn,
+  // Schema-driven controls
+  controlsToFormSchema,
+  controlsToSectionFormSchema,
+  controlsToSectionFormSchemas,
+  controlsToSidebarPanels,
+  controlsToSettingsSchema,
+  controlsToTopBarSettingsConfig,
+  controlsToTopBarTabs,
+  controlsToViewIds,
+  controlsToViewItems,
+  controlValuesToComponentProps,
+  defineControlModel,
+  defineDoseDesignControlModel,
+  defineDoseCalculatorControlProps,
+  defineControls,
+  defineWellPlateControlProps,
+  defineWellPlateDoseControlProps,
+  getDefaultControlView,
+  getControlDefaults,
+  useControlSchema,
+  useControlWorkspace,
+  type ControlDefinition,
+  type ControlWorkspaceAppTopBarPillBinding,
+  type ControlWorkspaceAppTopBarTabsBinding,
+  type ControlWorkspaceComponentBindings,
+  type ControlComponentPropSource,
+  type ControlComponentPropsByIdMap,
+  type ControlComponentPropsMap,
+  type DoseDesignControlModelOptions,
+  type DoseCalculatorControlPropsOptions,
+  type ControlFormSchema,
+  type ControlInput,
+  type ControlModel,
+  type ControlModelBinding,
+  type ControlModelSectionConfig,
+  type ControlModelViewConfig,
+  type ControlOption,
+  type ControlOptionValue,
+  type ControlPrimitive,
+  type ControlSchema,
+  type ControlSchemaOptions,
+  type ControlShorthand,
+  type ControlWorkspaceOptions,
+  type ControlFormBinding,
+  type ControlSettingsBinding,
+  type ControlSidebarBinding,
+  type ControlSectionConfig,
+  type ControlSidebarConfig,
+  type ControlTopBarSettingsBinding,
+  type ControlViewConfig,
+  type ControlValues,
+  type UseControlSchemaReturn,
+  type ControlWorkspaceFormBinding,
+  type ControlWorkspacePillNavBinding,
+  type ControlWorkspaceSidebarBinding,
+  type ControlWorkspaceTopBarBinding,
+  type ControlWorkspaceTopBarSettingsBinding,
+  type UseControlWorkspaceReturn,
+  type WellPlateControlPropsOptions,
+  type WellPlateDoseControlPropsOptions,
+  useBioTemplateControls,
+  getBioTemplateControlSchema,
+  requireBioTemplateControlSchema,
+  type BioTemplateControlSchema,
+  type BioTemplateControlTarget,
+  useBioTemplateComponents,
+  getBioTemplateComponentProps,
+  getBioTemplateComponentBindings,
+  toBioTemplateComponentProps,
+  toBioTemplateComponentPropsByComponent,
+  toBioTemplateComponentPropsById,
+  type BioTemplateComponentBinding,
+  type BioTemplateComponentPropsByComponent,
+  type BioTemplateComponentPropsBinding,
+  type BioTemplateComponentPropsById,
+  type BioTemplateComponentPropsLookupOptions,
+  type BioTemplateComponentTarget,
+  type UseBioTemplateComponentsReturn,
+  useBioTemplateWorkspace,
+  type BioTemplateRendererBinding,
+  type BioTemplateWorkspaceBindings,
+  type BioTemplateWorkspaceTarget,
+  type UseBioTemplateWorkspaceReturn,
+  useBioTemplatePresetWorkspace,
+  type BioTemplatePresetWorkspaceBindings,
+  type UseBioTemplatePresetWorkspaceOptions,
+  type UseBioTemplatePresetWorkspaceReturn,
+  useBioTemplatePackWorkspace,
+  type UseBioTemplatePackWorkspaceOptions,
+  type UseBioTemplatePackWorkspaceReturn,
+  // Generated plugin clients
+  buildPluginEndpointUrl,
+  createPluginClient,
+  resolvePluginBaseUrl,
+  usePluginClient,
+  usePluginSettings,
+  useCurrentExperiment,
+  type BuildPluginEndpointUrlOptions,
+  type PluginContract,
+  type PluginEndpointContract,
+  type PluginEndpointDefinition,
+  type PluginHttpMethod,
+  type PluginNavItemContract,
+  type CreatePluginClientOptions,
+  type UseCurrentExperimentOptions,
+  type UseCurrentExperimentReturn,
+} from './composables'
+
+// Legacy plugin API compatibility
+/** @deprecated Use generated plugin clients from `mint sdk generate` instead. */
+export {
   usePluginApi,
   type UsePluginApiOptions,
 } from './composables'
@@ -198,6 +391,9 @@ export {
   type Hsl,
 } from './utils/color'
 
+// Biology data templates
+export * from './templates'
+
 // Types
 export type {
   // Component types
@@ -209,18 +405,27 @@ export type {
   AlertType,
   Toast,
   TabItem,
+  TabItemInput,
+  OptionPrimitive,
   SelectOption,
+  SelectOptionInput,
   RadioOption,
+  RadioOptionInput,
   FormFieldProps,
   SidebarToolSection,
   CollapsibleState,
   TopBarVariant,
   TopBarPage,
+  TopBarPageInput,
   TopBarTab,
+  TopBarTabInput,
   TopBarTabOption,
+  TopBarTabOptionInput,
   TopBarSettingsConfig,
   PillNavItem,
+  PillNavItemInput,
   PageSelectorItem,
+  PageSelectorItemInput,
   PluginSwitcherPlugin,
   PluginSwitcherInfo,
   AccountMenuItem,
@@ -261,10 +466,12 @@ export type {
   FileUploaderMode,
   // SegmentedControl types
   SegmentedOption,
+  SegmentedOptionInput,
   SegmentedControlVariant,
   SegmentedControlSize,
   // MultiSelect types
   MultiSelectOption,
+  MultiSelectOptionInput,
   MultiSelectSize,
   // Pill types
   PillVariant,
@@ -295,12 +502,29 @@ export type {
   EmptyStateSize,
   // Breadcrumb types
   BreadcrumbItem,
+  BreadcrumbItemInput,
   // Tooltip types
   TooltipPosition,
   // ConfirmDialog types
   ConfirmVariant,
   // SettingsModal types
   SettingsTab,
+  SettingsTabInput,
+  SettingsModalLayout,
+  SettingsGroup,
+  SettingsModalSchema,
+  // FormBuilder types
+  FormFieldType,
+  FieldCondition,
+  FieldValidation,
+  FormFieldSchema,
+  FormOptionInput,
+  FormSectionSchema,
+  FormStepSchema,
+  FormSchema,
+  FieldEnhancement,
+  FormEnhancements,
+  UseFormBuilderReturn,
   // ScientificNumber types
   NumberNotation,
   // TimePicker 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-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;
 }

package/src/styles/components/app-pill-nav.css

@@ -12,9 +12,9 @@
 .mint-pill-nav__item {
   display: inline-flex;
   align-items: center;
+  gap: 0.375rem;
   border: 0;
-  /* 1px optical centering offset for 13px text. See CLAUDE.md § Optical Centering. */
-  padding: 0.3125rem 0.875rem 0.4375rem;
+  padding: 0.375rem 0.875rem;
   border-radius: 9999px;
   font-size: 0.8125rem;
   font-weight: 500;
@@ -55,3 +55,9 @@
   outline: none;
   box-shadow: var(--focus-ring);
 }
+
+.mint-pill-nav__icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}

package/src/styles/components/app-top-bar.css

@@ -255,6 +255,34 @@
   cursor: not-allowed;
 }
 
+.mint-topbar-dropdown-item__page {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  width: 100%;
+}
+
+.mint-topbar-dropdown-item__icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+}
+
+.mint-topbar-dropdown-item__icon.mint-plugin-icon--sm {
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 0.3125rem;
+  margin-top: -0.0625rem;
+}
+
+.mint-topbar-dropdown-item__copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
 .mint-topbar-dropdown-item__label {
   font-weight: 500;
 }
@@ -278,8 +306,7 @@
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
-  /* Asymmetric top/bottom padding — Fira Sans optical centering. */
-  padding: 0.3125rem 0.875rem 0.4375rem;
+  padding: 0.375rem 0.875rem;
   border: 0;
   background: transparent;
   border-radius: 9999px;
@@ -321,6 +348,12 @@
   transition: transform 0.15s ease;
 }
 
+.mint-topbar-tab-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}
+
 .mint-topbar-tab-chevron--open {
   transform: rotate(180deg);
 }

package/src/styles/components/button.css

@@ -133,24 +133,20 @@
 }
 
 /* Sizes */
-/* Optical centering: Fira Sans' cap-letter midpoint sits above the em-box center.
-   Old rule (pre-0.16) compensated with a 2px upward shift; user testing showed
-   that read as "too high" across sizes. New rule: 1px upward shift universally.
-   See CLAUDE.md § Optical Centering. */
 .mint-button--sm {
-  padding: 0.3125rem 0.75rem 0.4375rem;
+  padding: 0.375rem 0.75rem;
   font-size: 0.875rem;
   min-height: var(--form-height-sm);
 }
 
 .mint-button--md {
-  padding: 0.4375rem 1rem 0.5625rem;
+  padding: 0.5rem 1rem;
   font-size: 0.875rem;
   min-height: var(--form-height-md);
 }
 
 .mint-button--lg {
-  padding: 0.6875rem 1.5rem 0.8125rem;
+  padding: 0.75rem 1.5rem;
   font-size: 1rem;
   min-height: var(--form-height-lg);
 }