@morscherlab/mint-sdk 1.3.8 → 1.4.0-beta.1

package/src/components/BaseTabs.story.vue

@@ -1,26 +1,26 @@
 <script setup lang="ts">
 import BaseTabs from './BaseTabs.vue'
-import type { TabItem } from '../types'
+import type { SelectOption } from '../types'
 
 
-const basicTabs: TabItem[] = [
-  { id: 'overview', label: 'Overview' },
-  { id: 'samples', label: 'Samples' },
-  { id: 'results', label: 'Results' },
-  { id: 'settings', label: 'Settings' },
+const basicTabs: SelectOption[] = [
+  { value: 'overview', label: 'Overview' },
+  { value: 'samples', label: 'Samples' },
+  { value: 'results', label: 'Results' },
+  { value: 'settings', label: 'Settings' },
 ]
 
-const tabsWithBadges: TabItem[] = [
-  { id: 'inbox', label: 'Inbox', badge: 12 },
-  { id: 'drafts', label: 'Drafts', badge: 3 },
-  { id: 'sent', label: 'Sent' },
-  { id: 'archive', label: 'Archive', disabled: true },
+const tabsWithBadges: SelectOption[] = [
+  { value: 'inbox', label: 'Inbox', badge: 12 },
+  { value: 'drafts', label: 'Drafts', badge: 3 },
+  { value: 'sent', label: 'Sent' },
+  { value: 'archive', label: 'Archive', disabled: true },
 ]
 
-const tabsWithIcons: TabItem[] = [
-  { id: 'plate', label: 'Plate Map', icon: '\u{1F9EA}' },
-  { id: 'data', label: 'Raw Data', icon: '\u{1F4CA}' },
-  { id: 'analysis', label: 'Analysis', icon: '\u{1F52C}' },
+const tabsWithIcons: SelectOption[] = [
+  { value: 'plate', label: 'Plate Map', icon: '\u{1F9EA}' },
+  { value: 'data', label: 'Raw Data', icon: '\u{1F4CA}' },
+  { value: 'analysis', label: 'Analysis', icon: '\u{1F52C}' },
 ]
 
 function initPlayground() {
@@ -37,7 +37,7 @@ function initPlayground() {
         <div style="padding: 2rem;">
           <BaseTabs
             v-model="state.activeTab"
-            :tabs="basicTabs"
+            :options="basicTabs"
           />
           <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
             Active tab: <code>{{ state.activeTab }}</code>
@@ -49,7 +49,7 @@ function initPlayground() {
         <HstSelect
           v-model="state.activeTab"
           title="Active Tab"
-          :options="basicTabs.map(t => ({ label: t.label, value: t.id }))"
+          :options="basicTabs.map(t => ({ label: t.label, value: t.value }))"
         />
       </template>
     </Variant>
@@ -58,7 +58,7 @@ function initPlayground() {
       <div style="padding: 2rem;">
         <BaseTabs
           model-value="inbox"
-          :tabs="tabsWithBadges"
+          :options="tabsWithBadges"
         />
       </div>
     </Variant>
@@ -67,7 +67,7 @@ function initPlayground() {
       <div style="padding: 2rem;">
         <BaseTabs
           model-value="plate"
-          :tabs="tabsWithIcons"
+          :options="tabsWithIcons"
         />
       </div>
     </Variant>
@@ -76,7 +76,7 @@ function initPlayground() {
       <div style="padding: 2rem;">
         <BaseTabs
           model-value="inbox"
-          :tabs="tabsWithBadges"
+          :options="tabsWithBadges"
         />
       </div>
     </Variant>

package/src/components/BaseTabs.vue

@@ -1,25 +1,33 @@
 <script setup lang="ts">
 /** Renders an underline tab bar with mono count badges, icons, and disabled tab support. */
 import { computed, type ComponentPublicInstance } from 'vue'
-import type { TabItem, TabItemInput } from '../types'
-import { normalizeItemInput } from '../utils/items'
+import type { OptionPrimitive, SelectOption, SelectOptionInput } from '../types'
+import { normalizeOptionInput } from '../utils/options'
 import { useRovingFocus } from '../composables/useRovingFocus'
 
+type Tab = SelectOption<OptionPrimitive> & { id: string }
+
 interface Props {
-  modelValue: string
-  tabs: TabItemInput[]
+  modelValue: OptionPrimitive
+  /** Tabs; `icon` takes SVG path data, `badge` a count shown after the label. */
+  options: SelectOptionInput[]
 }
 
 const props = defineProps<Props>()
 
 const emit = defineEmits<{
-  'update:modelValue': [value: string]
+  'update:modelValue': [value: OptionPrimitive]
 }>()
 
-const activeTab = computed(() => props.modelValue)
-const normalizedTabs = computed<TabItem[]>(() => props.tabs.map(normalizeItemInput))
+const activeTab = computed(() => String(props.modelValue))
+const normalizedTabs = computed<Tab[]>(() =>
+  props.options.map((input) => {
+    const option = normalizeOptionInput<OptionPrimitive, SelectOption<OptionPrimitive>>(input)
+    return { ...option, id: String(option.value) }
+  }),
+)
 
-function isSvgIcon(icon: TabItem['icon']): icon is string | string[] {
+function isSvgIcon(icon: Tab['icon']): icon is string | string[] {
   if (!icon) return false
   return Array.isArray(icon) || icon.trim().startsWith('M') || icon.trim().startsWith('m')
 }
@@ -27,7 +35,7 @@ function isSvgIcon(icon: TabItem['icon']): icon is string | string[] {
 function selectTab(tabId: string) {
   const tab = normalizedTabs.value.find(t => t.id === tabId)
   if (tab && !tab.disabled) {
-    emit('update:modelValue', tabId)
+    emit('update:modelValue', tab.value)
   }
 }
 

package/src/components/BatchProgressList.vue

@@ -18,7 +18,7 @@ interface Props {
    */
   error?: string | null
   /** Empty-state headline shown when there are no batch items. */
-  emptyMessage?: string
+  emptyText?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
   autoScroll: true,
   loading: false,
   error: null,
-  emptyMessage: 'No items in this batch',
+  emptyText: 'No items in this batch',
 })
 
 const emit = defineEmits<{
@@ -123,7 +123,7 @@ watch(
 
     <div v-else-if="items.length === 0" class="mint-batch-progress__state">
       <slot name="empty">
-        <DataStateInternal state="empty" size="sm" :title="emptyMessage" />
+        <DataStateInternal state="empty" size="sm" :title="emptyText" />
       </slot>
     </div>
 

package/src/components/ChartContainer.story.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import ChartContainer from './ChartContainer.vue'
-import IconButton from './IconButton.vue'
+import { Download, RotateCcw } from 'lucide-vue-next'
+import BaseButton from './BaseButton.vue'
 import type { ChartLegendItem } from '../types'
 
 function initLegendState() {
@@ -25,7 +26,7 @@ function initLegendState() {
             :description="state.showDescription ? state.description : undefined"
             :loading="state.loading"
             :empty="state.empty"
-            :empty-message="state.emptyMessage"
+            :empty-text="state.emptyText"
           >
             <div style="height: 300px; display: flex; align-items: center; justify-content: center; color: var(--text-muted, #94a3b8); font-style: italic; border: 2px dashed var(--border-color, #e2e8f0); border-radius: 0.5rem;">
               Chart content goes here (e.g. Chart.js, D3, etc.)
@@ -41,7 +42,7 @@ function initLegendState() {
         <HstText v-model="state.description" title="Description" />
         <HstCheckbox v-model="state.loading" title="Loading" />
         <HstCheckbox v-model="state.empty" title="Empty" />
-        <HstText v-model="state.emptyMessage" title="Empty Message" />
+        <HstText v-model="state.emptyText" title="Empty Message" />
       </template>
     </Variant>
 
@@ -75,7 +76,7 @@ function initLegendState() {
         <ChartContainer
           title="Experiment Results"
           empty
-          empty-message="No results found. Run an analysis to see data here."
+          empty-text="No results found. Run an analysis to see data here."
         />
       </div>
     </Variant>
@@ -91,9 +92,7 @@ function initLegendState() {
             @legend-toggle="(i: number) => (state.items[i].hidden = !state.items[i].hidden)"
           >
             <template #toolbar>
-              <IconButton variant="ghost" size="sm" label="Download">
-                <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2.5v8M4.5 7L8 10.5 11.5 7M3 13.5h10" /></svg>
-              </IconButton>
+              <BaseButton variant="ghost" size="sm" :icon="Download" label="Download" />
             </template>
             <div style="height: 240px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.8125rem;">
               Hidden: {{ state.items.filter((item: ChartLegendItem) => item.hidden).map((item: ChartLegendItem) => item.label).join(', ') || 'none' }}
@@ -155,16 +154,12 @@ function initLegendState() {
 
     <Variant title="Workbench Frame">
       <div style="height: 420px; border: 1px solid var(--border-color); border-radius: 0.5rem; overflow: hidden;">
-        <ChartContainer variant="frame" empty empty-message="Select a sample to populate this chart">
+        <ChartContainer variant="frame" empty empty-text="Select a sample to populate this chart">
           <template #header>
             <strong style="font-size: 0.8125rem; color: var(--text-primary);">Extracted Ion Chromatogram</strong>
           </template>
           <template #toolbar>
-            <IconButton size="sm" label="Reset zoom">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
-                <path d="M4 4v6h6M20 20v-6h-6M5.5 15a7 7 0 0 0 11.8 2M18.5 9A7 7 0 0 0 6.7 7" />
-              </svg>
-            </IconButton>
+            <BaseButton variant="ghost" size="sm" :icon="RotateCcw" label="Reset zoom" />
           </template>
           <template #footer>
             Retention time (min)

package/src/components/ChartContainer.vue

@@ -9,7 +9,7 @@ interface Props {
   description?: string
   loading?: boolean
   empty?: boolean
-  emptyMessage?: string
+  emptyText?: string
   /** `frame` fills its parent and uses compact workbench chrome. */
   variant?: 'card' | 'frame'
   /** Series shown as clickable items in the header; a click emits `legend-toggle`. */
@@ -19,7 +19,7 @@ interface Props {
 withDefaults(defineProps<Props>(), {
   loading: false,
   empty: false,
-  emptyMessage: 'No data available',
+  emptyText: 'No data available',
   variant: 'card',
 })
 
@@ -78,7 +78,7 @@ defineSlots<{
       <template v-else-if="empty">
         <slot name="empty">
           <EmptyState
-            :title="emptyMessage"
+            :title="emptyText"
             size="sm"
             icon-path="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
           />

package/src/components/ChemicalFormula.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /** Renders a chemical formula and optional MS adduct with typographically correct subscripts and charges. */
 import { computed } from 'vue'
-import { useChemicalFormula, type FormulaPart } from '../composables/useChemicalFormula'
+import { renderFormulaParts, type FormulaPart } from '../utils/formula'
 import AdductText from './AdductText.vue'
 
 interface Props {
@@ -24,7 +24,6 @@ const props = withDefaults(defineProps<Props>(), {
   tone: 'primary',
 })
 
-const { renderFormulaParts } = useChemicalFormula()
 const formula = computed(() => props.formula?.trim() ?? '')
 const title = computed(() => [formula.value, props.adduct?.trim()].filter(Boolean).join(' '))
 

package/src/components/CollapsibleCard.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 /** Card whose body collapses with a chevron-rotate animation, with an optional inline toggle switch independent of expand state. */
 import { ref, computed } from 'vue'
-import type { SidebarBadgeTone, SidebarToolSectionAction } from '../types'
-import BaseToggle from './BaseToggle.vue'
+import type { SidebarToolSectionAction, Tone } from '../types'
+import BaseCheckbox from './BaseCheckbox.vue'
 
 interface Props {
   title: string
   subtitle?: string
   badge?: string | number
-  badgeTone?: SidebarBadgeTone
+  badgeTone?: Tone
   defaultOpen?: boolean
   disabled?: boolean
   dense?: boolean
@@ -176,7 +176,8 @@ function handleActionClick(action: SidebarToolSectionAction) {
           @click.stop
         >
           <!-- md = the board's 32x18 header switch (10a) -->
-          <BaseToggle
+          <BaseCheckbox
+            type="switch"
             :model-value="toggleValue"
             :aria-label="title"
             @update:model-value="emit('update:toggleValue', $event)"

package/src/components/ComponentBindingRenderer.story.vue

@@ -5,10 +5,6 @@ import {
   defineDoseDesignControlModel,
   useControlWorkspace,
 } from '../composables/useControlSchema'
-import {
-  createLcmsBatchCollection,
-  toBioTemplateComponentBindings,
-} from '../templates'
 
 const model = defineDoseDesignControlModel({
   selectedWells: ['A1', 'A2', 'B1'],
@@ -16,18 +12,6 @@ const model = defineDoseDesignControlModel({
   includeMolecularWeight: true,
 })
 const workspace = useControlWorkspace(model)
-const lcmsCollection = createLcmsBatchCollection({
-  samples: [
-    { sampleId: 'blank-1', name: 'Blank', group: 'Blank' },
-    { sampleId: 'qc-pool', name: 'Pooled QC', group: 'QC' },
-    { sampleId: 's001', name: 'Patient 001', group: 'Case' },
-    { sampleId: 's002', name: 'Patient 002', group: 'Control' },
-  ],
-  features: ['Glucose', 'Lactate', 'Citrate'],
-  instrument: 'Orbitrap LC-MS',
-  method: 'HILIC negative',
-  includeQc: true,
-})
 
 const state = ref({
   dense: false,
@@ -38,7 +22,6 @@ const state = ref({
 })
 
 const bindings = computed(() => workspace.componentBindings.value)
-const lcmsBindings = computed(() => toBioTemplateComponentBindings(lcmsCollection))
 </script>
 
 <template>
@@ -56,18 +39,6 @@ const lcmsBindings = computed(() => toBioTemplateComponentBindings(lcmsCollectio
       </div>
     </Variant>
 
-    <Variant title="LC-MS Batch Bindings">
-      <div style="padding: 2rem; min-height: 640px; background: var(--bg-secondary, #f8fafc);">
-        <ComponentBindingRenderer
-          :bindings="lcmsBindings"
-          :dense="state.dense"
-          :readonly="state.readonly"
-          :show-headers="state.showHeaders"
-          :show-descriptions="state.showDescriptions"
-          :layout="state.layout"
-        />
-      </div>
-    </Variant>
 
     <template #controls>
       <HstCheckbox v-model="state.dense" title="Dense" />

package/src/components/ComponentBindingRenderer.vue

@@ -10,10 +10,7 @@
 import { computed, type Component } from 'vue'
 import DataFrame from './DataFrame.vue'
 import DoseCalculator from './DoseCalculator.vue'
-import ExperimentTimeline from './ExperimentTimeline.vue'
 import PlateEditorBindingInternal from './internal/PlateEditorBindingInternal.vue'
-import ReagentList from './ReagentList.vue'
-import SampleSelector from './SampleSelector.vue'
 import ScheduleCalendar from './ScheduleCalendar.vue'
 import WellPlate from './WellPlate.vue'
 import { isRecord } from '../utils/records'
@@ -24,7 +21,6 @@ export interface ComponentBindingRendererBinding {
   props?: Record<string, unknown> | readonly string[]
   propsObject?: Record<string, unknown>
   description?: string
-  template_id?: string
 }
 
 type ComponentBindingRendererLayout = 'grid' | 'stack'
@@ -42,7 +38,7 @@ interface Props {
   dense?: boolean
   /** Prefer preview-safe props for editable components. */
   readonly?: boolean
-  /** Show component/template labels above each rendered component. */
+  /** Show component labels above each rendered component. */
   showHeaders?: boolean
   /** Show binding descriptions in each header. */
   showDescriptions?: boolean
@@ -74,11 +70,8 @@ const props = withDefaults(defineProps<Props>(), {
 const componentRegistry: Record<string, Component> = {
   DataFrame,
   DoseCalculator,
-  ExperimentTimeline,
   // Holds its own copy of the plates: PlateEditor itself is controlled.
   PlateEditor: PlateEditorBindingInternal,
-  ReagentList,
-  SampleSelector,
   ScheduleCalendar,
   WellPlate,
 }
@@ -126,40 +119,25 @@ function normalizeProps(binding: ComponentBindingRendererBinding): Record<string
 
   switch (binding.component) {
     case 'WellPlate':
+    case 'PlateEditor': {
+      const spec = isRecord(base.spec) ? base.spec : {}
       return {
         ...base,
+        spec: { ...spec, size: props.dense ? 'md' : (spec.size ?? 'fill') },
         readonly: props.readonly || Boolean(base.readonly),
-        size: props.dense ? 'md' : (base.size ?? 'fill'),
       }
-    case 'PlateEditor':
+    }
+    case 'DataFrame': {
+      const spec = isRecord(base.spec) ? base.spec : {}
       return {
         ...base,
-        readonly: props.readonly || Boolean(base.readonly),
-        size: props.dense ? 'md' : (base.size ?? 'fill'),
-      }
-    case 'DataFrame':
-      return {
-        ...base,
-        size: props.dense ? 'sm' : (base.size ?? 'md'),
-        maxHeight: base.maxHeight ?? (props.dense ? '280px' : undefined),
-      }
-    case 'ExperimentTimeline':
-      return {
-        ...base,
-        editable: props.readonly ? false : base.editable,
-        size: props.dense ? 'sm' : (base.size ?? 'md'),
-      }
-    case 'ReagentList':
-      return {
-        ...base,
-        readonly: props.readonly || Boolean(base.readonly),
-      }
-    case 'SampleSelector':
-      return {
-        ...base,
-        enableGrouping: props.readonly ? false : (base.enableGrouping ?? true),
-        enableSmartGroup: props.readonly ? false : (base.enableSmartGroup ?? true),
+        spec: {
+          ...spec,
+          size: props.dense ? 'sm' : (spec.size ?? 'md'),
+          maxHeight: spec.maxHeight ?? (props.dense ? '280px' : undefined),
+        },
       }
+    }
     case 'ScheduleCalendar':
       return {
         ...base,
@@ -181,8 +159,6 @@ function normalizeProps(binding: ComponentBindingRendererBinding): Record<string
       :key="renderableBinding.id"
       class="mint-component-binding-renderer__item"
       :data-component-binding-id="renderableBinding.id"
-      :data-template-id="renderableBinding.template_id"
-      :data-template-component="renderableBinding.component"
     >
       <header
         v-if="showHeaders"
@@ -193,10 +169,10 @@ function normalizeProps(binding: ComponentBindingRendererBinding): Record<string
             {{ renderableBinding.component }}
           </p>
           <p
-            v-if="renderableBinding.template_id || renderableBinding.id"
+            v-if="renderableBinding.id"
             class="mint-component-binding-renderer__source"
           >
-            {{ renderableBinding.template_id ?? renderableBinding.id }}
+            {{ renderableBinding.id }}
           </p>
         </div>
         <p

package/src/components/ConcentrationInput.story.vue

@@ -23,7 +23,7 @@ function initState() {
             v-model="state.modelValue"
             :show-conversion="state.showConversion"
             :disabled="state.disabled"
-            :error="state.error"
+            :invalid="state.error"
             :size="state.size"
             :placeholder="state.placeholder"
           />
@@ -69,7 +69,7 @@ function initState() {
       <div style="padding: 2rem; max-width: 400px;">
         <ConcentrationInput
           :model-value="{ value: -5, unit: 'nM' as ConcentrationUnit }"
-          error
+          invalid
         />
       </div>
     </Variant>

package/src/components/ConcentrationInput.vue

@@ -6,7 +6,7 @@ import {
   type ConcentrationValue,
   type ConcentrationUnit,
 } from '../composables/useConcentrationUnits'
-import UnitInput from './UnitInput.vue'
+import NumberInput from './NumberInput.vue'
 
 interface Props {
   modelValue?: ConcentrationValue
@@ -16,7 +16,7 @@ interface Props {
   min?: number
   max?: number
   disabled?: boolean
-  error?: boolean
+  invalid?: boolean
   size?: 'sm' | 'md' | 'lg'
   placeholder?: string
 }
@@ -24,7 +24,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   showConversion: true,
   disabled: false,
-  error: false,
+  invalid: false,
   size: 'md',
   placeholder: 'Enter value',
 })
@@ -35,7 +35,7 @@ const emit = defineEmits<{
 
 const { unitCategories, convert, getBaseUnit, isMolarity, isMassVolume } = useConcentrationUnits()
 
-/** Scale factor to the category base unit; UnitInput uses it for menu previews and the nearest-unit hint. */
+/** Scale factor to the category base unit; NumberInput uses it for menu previews and the nearest-unit hint. */
 function factorOf(unit: ConcentrationUnit): number | undefined {
   if (!props.showConversion || !(isMolarity(unit) || isMassVolume(unit))) return undefined
   return convert(1, unit, getBaseUnit(unit)) ?? undefined
@@ -75,8 +75,8 @@ const unitOptions = computed(() =>
 const currentValue = computed(() => props.modelValue?.value)
 const currentUnit = computed(() => props.modelValue?.unit || availableUnits.value[0] || 'µM')
 
-function handleValueUpdate(value: number | undefined) {
-  if (value === undefined || isNaN(value)) {
+function handleValueUpdate(value: number | null) {
+  if (value === null) {
     emit('update:modelValue', undefined)
     return
   }
@@ -118,18 +118,18 @@ watch(availableUnits, (units) => {
   <div
     :class="[
       'mint-concentration-input',
-      error ? 'mint-concentration-input--error' : '',
+      invalid ? 'mint-concentration-input--error' : '',
       disabled ? 'mint-concentration-input--disabled' : '',
     ]"
   >
-    <UnitInput
+    <NumberInput
       :model-value="currentValue"
       :unit="currentUnit"
       :units="unitOptions"
       :min="min"
       :max="max"
       :disabled="disabled"
-      :error="error"
+      :invalid="invalid"
       :size="size"
       :placeholder="placeholder"
       @update:model-value="handleValueUpdate"