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

package/src/components/TimePicker.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 /** Input that opens a scrollable time-slot dropdown in 12h or 24h format, with min/max range. */
-import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
-import { generateTimeSlots, formatTime, parseTime, compareTime } from '../composables/useTimeUtils'
+import { ref, computed, watch, nextTick } from 'vue'
+import { useDropdownState } from '../composables/useDropdownState'
+import {
+  compareTime,
+  findNearestTimeSlotIndex,
+  formatTimeSlot,
+  generateTimeSlots,
+} from '../composables/useTimeUtils'
 
 interface Props {
   modelValue?: string
@@ -30,10 +36,9 @@ const emit = defineEmits<{
   'update:modelValue': [value: string | undefined]
 }>()
 
-const isOpen = ref(false)
-const containerRef = ref<HTMLDivElement>()
-const listRef = ref<HTMLUListElement>()
+const listRef = ref<HTMLUListElement | null>(null)
 const highlightedIndex = ref(-1)
+const { isOpen, rootRef, open, close, toggle } = useDropdownState()
 
 const slots = computed(() => {
   const start = props.min ?? '00:00'
@@ -43,8 +48,7 @@ const slots = computed(() => {
 
 const displayValue = computed(() => {
   if (!props.modelValue) return ''
-  const { hour, minute } = parseTime(props.modelValue)
-  return formatTime(hour, minute, props.format)
+  return formatTimeSlot(props.modelValue, props.format)
 })
 
 function isSlotDisabled(slot: string): boolean {
@@ -56,23 +60,17 @@ function isSlotDisabled(slot: string): boolean {
 function selectSlot(slot: string) {
   if (isSlotDisabled(slot) || props.disabled) return
   emit('update:modelValue', slot)
-  isOpen.value = false
+  close()
 }
 
 function clear() {
   emit('update:modelValue', undefined)
-  isOpen.value = false
+  close()
 }
 
 function toggleDropdown() {
   if (props.disabled) return
-  isOpen.value = !isOpen.value
-}
-
-function handleClickOutside(event: MouseEvent) {
-  if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
-    isOpen.value = false
-  }
+  toggle()
 }
 
 function scrollToActiveSlot() {
@@ -95,26 +93,14 @@ function scrollToActiveSlot() {
 }
 
 function findNearestSlotIndex(time: string): number {
-  if (slots.value.length === 0) return -1
-  let bestIndex = 0
-  let bestDiff = Infinity
-  for (let i = 0; i < slots.value.length; i++) {
-    const { hour: h1, minute: m1 } = parseTime(slots.value[i])
-    const { hour: h2, minute: m2 } = parseTime(time)
-    const minuteDiff = Math.abs((h1 * 60 + m1) - (h2 * 60 + m2))
-    if (minuteDiff < bestDiff) {
-      bestDiff = minuteDiff
-      bestIndex = i
-    }
-  }
-  return bestIndex
+  return findNearestTimeSlotIndex(time, slots.value)
 }
 
 function handleKeydown(event: KeyboardEvent) {
   if (!isOpen.value) {
     if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
       event.preventDefault()
-      isOpen.value = true
+      open()
       return
     }
     return
@@ -150,7 +136,7 @@ function handleKeydown(event: KeyboardEvent) {
     }
     case 'Escape': {
       event.preventDefault()
-      isOpen.value = false
+      close()
       break
     }
   }
@@ -180,18 +166,10 @@ watch(isOpen, (open) => {
     highlightedIndex.value = -1
   }
 })
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-})
 </script>
 
 <template>
-  <div ref="containerRef" class="mint-time-picker" @keydown="handleKeydown">
+  <div ref="rootRef" class="mint-time-picker" @keydown="handleKeydown">
     <div class="mint-time-picker__input-wrapper">
       <input
         type="text"
@@ -260,7 +238,7 @@ onUnmounted(() => {
             ]"
             @click="selectSlot(slot)"
           >
-            {{ formatTime(parseTime(slot).hour, parseTime(slot).minute, format) }}
+            {{ formatTimeSlot(slot, format) }}
           </li>
         </ul>
       </div>

package/src/components/ToastNotification.vue

@@ -1,62 +1,9 @@
+<!-- @deprecated Use AppToastContainer instead -->
 <script setup lang="ts">
-/** Teleported toast stack driven by useToast, with auto-dismiss progress bar and click-to-close on each notification. */
-import { useToast } from '../composables/useToast'
-import type { Toast } from '../types'
-
-const { toasts, dismiss } = useToast()
-
-const accentColors: Record<Toast['type'], string> = {
-  success: '#10B981',
-  error: '#EF4444',
-  warning: '#F59E0B',
-  info: '#3B82F6',
-}
+/** @deprecated Compatibility wrapper for the legacy toast container export. Use AppToastContainer instead. */
+import AppToastContainer from './AppToastContainer.vue'
 </script>
 
 <template>
-  <Teleport to="body">
-    <div class="mint-toast__container">
-      <TransitionGroup name="toast">
-        <div
-          v-for="toast in toasts"
-          :key="toast.id"
-          :class="['mint-toast__item', `mint-toast__item--${toast.type}`]"
-          :style="{
-            borderLeftColor: accentColors[toast.type],
-          }"
-          role="alert"
-          @click="dismiss(toast.id)"
-        >
-          <!-- Lucide circle-check -->
-          <svg v-if="toast.type === 'success'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
-            <circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" />
-          </svg>
-          <!-- Lucide circle-x -->
-          <svg v-else-if="toast.type === 'error'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
-            <circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" />
-          </svg>
-          <!-- Lucide triangle-alert -->
-          <svg v-else-if="toast.type === 'warning'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
-            <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" />
-          </svg>
-          <!-- Lucide info -->
-          <svg v-else class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
-            <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
-          </svg>
-          <span class="mint-toast__message">{{ toast.message }}</span>
-          <span
-            class="mint-toast__progress"
-            :style="{
-              backgroundColor: accentColors[toast.type],
-              animationDuration: `${toast.duration ?? 3500}ms`,
-            }"
-          />
-        </div>
-      </TransitionGroup>
-    </div>
-  </Teleport>
+  <AppToastContainer />
 </template>
-
-<style>
-@import '../styles/components/toast.css';
-</style>

package/src/components/Tooltip.vue

@@ -2,6 +2,7 @@
 /** Floating tooltip using @floating-ui with auto-flip, delay, optional keyboard shortcut badge, and body Teleport. */
 import { ref, onBeforeUnmount, nextTick } from 'vue'
 import { computePosition, flip, offset, shift, type Placement } from '@floating-ui/dom'
+import { useEventListener } from '../composables/useEventListener'
 
 interface Props {
   text: string
@@ -42,22 +43,18 @@ async function updatePosition() {
   actualPlacement.value = placement
 }
 
-function addListeners() {
-  window.addEventListener('scroll', updatePosition, { passive: true, capture: true })
-  window.addEventListener('resize', updatePosition)
-}
-
-function removeListeners() {
-  window.removeEventListener('scroll', updatePosition, { capture: true })
-  window.removeEventListener('resize', updatePosition)
-}
+useEventListener(() => window, 'scroll', updatePosition, {
+  passive: true,
+  capture: true,
+  enabled: visible,
+})
+useEventListener(() => window, 'resize', updatePosition, { enabled: visible })
 
 async function show() {
   timeoutId = setTimeout(async () => {
     visible.value = true
     await nextTick()
     await updatePosition()
-    addListeners()
   }, props.delay)
 }
 
@@ -65,12 +62,10 @@ function hide() {
   clearTimeout(timeoutId)
   timeoutId = undefined
   visible.value = false
-  removeListeners()
 }
 
 onBeforeUnmount(() => {
   clearTimeout(timeoutId)
-  removeListeners()
 })
 
 function resolvedMaxWidth(value: string | number | undefined): string | undefined {

package/src/components/WellEditPopup.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { ref, watch, computed, onMounted, onUnmounted } from 'vue'
+import { ref, watch, computed } from 'vue'
 import type { Well, WellEditData, WellEditField } from '../types'
+import { useEventListener } from '../composables/useEventListener'
 
 interface Props {
   wellId: string
@@ -83,13 +84,7 @@ function handleKeydown(e: KeyboardEvent) {
   if (e.key === 'Escape') close()
 }
 
-onMounted(() => {
-  document.addEventListener('keydown', handleKeydown)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleKeydown)
-})
+useEventListener(() => document, 'keydown', handleKeydown)
 
 const sampleTypeButtons = [
   { type: 'sample', label: 'S', tooltip: 'Sample' },

package/src/components/WellPlate.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /** Interactive 96/384-well plate grid with drag-to-select, heatmap overlays, per-well editing, and sample-color mapping. */
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed } from 'vue'
 import type { WellPlateFormat, WellPlateSelectionMode, WellPlateSize, Well, HeatmapConfig, WellShape, WellEditField, WellEditData, WellLegendItem, ColumnCondition, RowCondition } from '../types'
+import { useEventListener } from '../composables/useEventListener'
 import WellEditPopup from './WellEditPopup.vue'
 
 interface Props {
@@ -562,15 +563,8 @@ function handleKeyDown(event: KeyboardEvent) {
   }
 }
 
-onMounted(() => {
-  document.addEventListener('mouseup', handleMouseUp)
-  document.addEventListener('keydown', handleKeyDown)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('mouseup', handleMouseUp)
-  document.removeEventListener('keydown', handleKeyDown)
-})
+useEventListener(() => document, 'mouseup', handleMouseUp)
+useEventListener(() => document, 'keydown', handleKeyDown)
 
 const containerStyle = computed(() =>
   isFillMode.value ? {} : {

package/src/components/index.ts

@@ -27,12 +27,14 @@ export { default as FileUploader } from './FileUploader.vue'
 
 // Feedback components
 export { default as AlertBox } from './AlertBox.vue'
+/** @deprecated Use AppToastContainer instead. */
 export { default as ToastNotification } from './ToastNotification.vue'
-export { default as AppToastContainer } from './ToastNotification.vue'
+export { default as AppToastContainer } from './AppToastContainer.vue'
 
 // Action components
 export { default as IconButton } from './IconButton.vue'
 export { default as ThemeToggle } from './ThemeToggle.vue'
+/** @deprecated Use AppTopBar instead. */
 export { default as SettingsButton } from './SettingsButton.vue'
 
 // Layout components
@@ -44,7 +46,9 @@ 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 ControlWorkspaceView } from './ControlWorkspaceView.vue'
 export { default as AppContainer } from './AppContainer.vue'
+export { default as PluginIcon } from './PluginIcon.vue'
 
 // Utility components
 export { default as Skeleton } from './Skeleton.vue'
@@ -61,6 +65,10 @@ export { default as ChartContainer } from './ChartContainer.vue'
 export { default as SettingsModal } from './SettingsModal.vue'
 
 // Biological experiment components
+export { default as BioTemplateRenderer } from './BioTemplateRenderer.vue'
+export { default as BioTemplateExperimentWorkspaceView } from './BioTemplateExperimentWorkspaceView.vue'
+export { default as BioTemplatePackWorkspaceView } from './BioTemplatePackWorkspaceView.vue'
+export { default as BioTemplatePresetWorkspaceView } from './BioTemplatePresetWorkspaceView.vue'
 export { default as WellPlate } from './WellPlate.vue'
 export { default as RackEditor } from './RackEditor.vue'
 export { default as SampleLegend } from './SampleLegend.vue'
@@ -69,6 +77,7 @@ export { default as ExperimentTimeline } from './ExperimentTimeline.vue'
 
 // Sample management components
 export { default as SampleSelector } from './SampleSelector.vue'
+/** @deprecated Use AutoGroupModal instead. */
 export { default as GroupingModal } from './GroupingModal.vue'
 export { default as AutoGroupModal } from './AutoGroupModal.vue'
 export { default as GroupAssigner } from './GroupAssigner.vue'
@@ -98,8 +107,10 @@ export { default as BatchProgressList } from './BatchProgressList.vue'
 
 // Form builder components
 export { default as FormBuilder } from './FormBuilder.vue'
+/** @deprecated Use FormBuilder instead. */
 export { default as FormSection } from './FormSection.vue'
 export { default as FormActions } from './FormActions.vue'
+/** @deprecated Use FormBuilder instead. */
 export { default as FormFieldRenderer } from './FormFieldRenderer.vue'
 
 // Experiment data display components

package/src/components/internal/FormFieldRendererInternal.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { FormFieldSchema } from '../../types/form-builder'
+import type { UseFormReturn } from '../../composables/useForm'
+import { getFieldRegistryEntry } from '../../composables/formBuilderRegistry'
+import FormField from '../FormField.vue'
+
+interface Props {
+  field: FormFieldSchema
+  resolvedProps: Record<string, unknown>
+  form: UseFormReturn<Record<string, unknown>>
+}
+
+const props = defineProps<Props>()
+
+const entry = computed(() => getFieldRegistryEntry(props.field.type))
+
+const errorMessage = computed(() => {
+  const name = props.field.name
+  return props.form.touched[name] ? props.form.errors[name] : null
+})
+
+function handleUpload(files: File[]) {
+  props.form.setFieldValue(props.field.name, files)
+}
+</script>
+
+<template>
+  <FormField
+    :label="field.label"
+    :error="errorMessage ?? undefined"
+    :hint="field.hint"
+    :required="!!field.validation?.required"
+    :html-for="field.name"
+  >
+    <slot :name="`field:${field.name}`" :field="field" :form="form" :field-props="form.getFieldProps(field.name)">
+      <component
+        :is="entry.component"
+        v-if="entry.vModel"
+        v-bind="resolvedProps"
+      />
+      <component
+        :is="entry.component"
+        v-else
+        v-bind="resolvedProps"
+        @upload="handleUpload"
+      />
+    </slot>
+  </FormField>
+</template>

package/src/components/internal/FormSectionRenderer.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { FormSectionSchema, UseFormBuilderReturn } from '../../types/form-builder'
+import CollapsibleCard from '../CollapsibleCard.vue'
+import FormFieldRendererInternal from './FormFieldRendererInternal.vue'
+
+interface Props {
+  section: FormSectionSchema
+  builder: UseFormBuilderReturn<Record<string, unknown>>
+}
+
+const props = defineProps<Props>()
+
+const visibleFields = computed(() =>
+  props.section.fields.filter((f) => props.builder.isFieldVisible(f.name)),
+)
+
+const gridStyle = computed(() => ({
+  gridTemplateColumns: `repeat(${props.section.columns ?? 1}, 1fr)`,
+}))
+</script>
+
+<template>
+  <div v-if="visibleFields.length > 0" class="mint-form-section">
+    <slot :name="`section:${section.id}`" :section="section" :form="builder.form">
+      <CollapsibleCard
+        v-if="section.collapsible"
+        :title="section.title"
+        :subtitle="section.description"
+        :default-open="section.defaultOpen ?? true"
+      >
+        <div class="mint-form-section__grid" :style="gridStyle">
+          <div
+            v-for="field in visibleFields"
+            :key="field.name"
+            :style="field.colSpan ? { gridColumn: `span ${field.colSpan}` } : undefined"
+          >
+            <slot :name="`field:${field.name}`" :field="field" :form="builder.form" :field-props="builder.form.getFieldProps(field.name)">
+              <FormFieldRendererInternal
+                :field="field"
+                :resolved-props="builder.getResolvedFieldProps(field)"
+                :form="builder.form"
+              />
+            </slot>
+          </div>
+        </div>
+      </CollapsibleCard>
+
+      <div v-else class="mint-form-section--static">
+        <div v-if="section.title || section.description" class="mint-form-section__header">
+          <h3 v-if="section.title" class="mint-form-section__title">{{ section.title }}</h3>
+          <p v-if="section.description" class="mint-form-section__description">{{ section.description }}</p>
+        </div>
+        <div class="mint-form-section__grid" :style="gridStyle">
+          <div
+            v-for="field in visibleFields"
+            :key="field.name"
+            :style="field.colSpan ? { gridColumn: `span ${field.colSpan}` } : undefined"
+          >
+            <slot :name="`field:${field.name}`" :field="field" :form="builder.form" :field-props="builder.form.getFieldProps(field.name)">
+              <FormFieldRendererInternal
+                :field="field"
+                :resolved-props="builder.getResolvedFieldProps(field)"
+                :form="builder.form"
+              />
+            </slot>
+          </div>
+        </div>
+      </div>
+    </slot>
+
+    <slot :name="`section:${section.id}:after`" :form="builder.form" />
+  </div>
+</template>
+
+<style>
+@import '../../styles/components/form-builder.css';
+</style>