@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

package/src/components/SampleSelector.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 /** Interactive sample list with drag-and-drop group assignment, color labeling, and smart-group support. */
 import { ref, computed } from 'vue'
+import { Layers, RotateCcw, WandSparkles } from 'lucide-vue-next'
 import BaseButton from './BaseButton.vue'
 import BaseCheckbox from './BaseCheckbox.vue'
 import BaseInput from './BaseInput.vue'
-import AutoGroupModal from './AutoGroupModal.vue'
+import AutoGroupModalInternal from './internal/AutoGroupModalInternal.vue'
 import SampleSelectorSampleRow from './SampleSelectorSampleRow.vue'
 import SampleSelectorGroupNode from './SampleSelectorGroupNode.vue'
 import { collectNodeKeys, type SampleGroupTreeContext } from './SampleSelector.tree'
@@ -45,7 +46,7 @@ interface Props {
    */
   error?: string | null
   /** Empty-state headline shown when there are no samples to select from. */
-  emptyMessage?: string
+  emptyText?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -58,7 +59,7 @@ const props = withDefaults(defineProps<Props>(), {
   autoloadExperimentData: true,
   loading: false,
   error: null,
-  emptyMessage: 'No samples available',
+  emptyText: 'No samples available',
 })
 
 const emit = defineEmits<{
@@ -268,6 +269,31 @@ defineExpose({ handleSmartGroupApply })
 
 <template>
   <div class="mint-sample-selector">
+    <div class="mint-sample-selector__header">
+      <span class="mint-sample-selector__title">Samples</span>
+      <span class="mint-sample-selector__selected">{{ selectedCount }} selected</span>
+      <div v-if="!isPlaceholderState && enableGrouping" class="mint-sample-selector__header-actions">
+        <BaseButton
+          variant="ghost"
+          size="sm"
+          :icon="enableSmartGroup ? WandSparkles : Layers"
+          class="mint-sample-selector__action-btn"
+          @click="openGroupingModal(groupingActionMode)"
+        >
+          {{ enableSmartGroup ? 'Smart group' : 'Group' }}
+        </BaseButton>
+        <BaseButton
+          v-if="internalGroups.length > 0"
+          variant="ghost"
+          size="sm"
+          :icon="RotateCcw"
+          label="Clear all groups"
+          class="mint-sample-selector__action-btn"
+          @click="clearGroups"
+        />
+      </div>
+    </div>
+
     <div v-if="error" class="mint-sample-selector__state">
       <slot name="error" :error="error">
         <DataStateInternal state="error" size="sm" :title="error" />
@@ -282,7 +308,7 @@ defineExpose({ handleSmartGroupApply })
 
     <div v-else-if="resolvedSamples.length === 0" class="mint-sample-selector__state">
       <slot name="empty">
-        <DataStateInternal state="empty" size="sm" :title="emptyMessage" />
+        <DataStateInternal state="empty" size="sm" :title="emptyText" />
       </slot>
     </div>
 
@@ -302,43 +328,7 @@ defineExpose({ handleSmartGroupApply })
         @update:model-value="toggleSelectAll"
       />
       <span class="mint-sample-selector__select-all-label">All samples</span>
-      <span class="mint-sample-selector__select-all-count">{{ selectedCount }} / {{ resolvedSamples.length }}</span>
-    </div>
-
-    <!-- Action Buttons Row -->
-    <div v-if="!isPlaceholderState && enableGrouping" class="mint-sample-selector__actions">
-      <div class="mint-sample-selector__actions-row">
-        <!-- Grouping Button -->
-        <BaseButton
-          :variant="enableSmartGroup && groupingEnabled ? 'primary' : 'secondary'"
-          size="sm"
-          :disabled="resolvedSamples.length === 0"
-          class="mint-sample-selector__action-btn"
-          @click="openGroupingModal(groupingActionMode)"
-        >
-          <svg v-if="enableSmartGroup" class="mint-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
-          </svg>
-          <svg v-else class="mint-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3 3 7.5l9 4.5 9-4.5L12 3ZM3 12l9 4.5 9-4.5M3 16.5l9 4.5 9-4.5" />
-          </svg>
-          <span class="mint-sample-selector__action-label">Grouping</span>
-        </BaseButton>
-
-        <!-- Reset Button -->
-        <BaseButton
-          variant="ghost"
-          size="sm"
-          :disabled="internalGroups.length === 0"
-          class="mint-sample-selector__action-btn mint-sample-selector__action-btn--reset"
-          @click="clearGroups"
-          title="Clear all groups"
-        >
-          <svg class="mint-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-          </svg>
-        </BaseButton>
-      </div>
+      <span class="mint-sample-selector__select-all-count">{{ selectedCount }}/{{ resolvedSamples.length }}</span>
     </div>
 
     <!-- Grouped View -->
@@ -484,8 +474,8 @@ defineExpose({ handleSmartGroupApply })
     </div>
 
     <!-- Smart grouping modal -->
-    <AutoGroupModal
-      v-model="showSmartGroupModal"
+    <AutoGroupModalInternal
+      v-model:open="showSmartGroupModal"
       :samples="resolvedSamples"
       :groups="internalGroups"
       :initial-mode="groupingModalMode"

package/src/components/SampleSelectorGroupNode.vue

@@ -153,7 +153,7 @@ function onHeaderKeydown(event: KeyboardEvent) {
         :title="node.group?.name ?? node.label"
       >{{ node.label }}</span>
 
-      <span class="mint-sample-selector__count-badge">{{ selectedCount }} / {{ node.allSamples.length }}</span>
+      <span class="mint-sample-selector__count-badge">{{ selectedCount }}/{{ node.allSamples.length }}</span>
 
       <button
         type="button"

package/src/components/ScheduleCalendar.vue

@@ -42,7 +42,7 @@ interface Props {
    * the empty state only replaces it when this message is supplied and there
    * are no events.
    */
-  emptyMessage?: string
+  emptyText?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -75,9 +75,9 @@ const emit = defineEmits<{
 const SLOT_HEIGHT = SCHEDULE_SLOT_HEIGHT
 const currentView = ref<ScheduleView>(props.view)
 
-/** Empty state is opt-in: it needs an `emptyMessage` and an event-free range. */
+/** Empty state is opt-in: it needs an `emptyText` and an event-free range. */
 const showEmptyState = computed(() =>
-  Boolean(props.emptyMessage) && props.events.length === 0,
+  Boolean(props.emptyText) && props.events.length === 0,
 )
 const currentDate = ref<Date>(parseScheduleModelDate(props.modelValue))
 const nowTimer = ref<ReturnType<typeof setInterval>>()
@@ -334,7 +334,7 @@ onUnmounted(() => {
 
     <div v-else-if="showEmptyState" class="mint-schedule__state">
       <slot name="empty">
-        <DataStateInternal state="empty" :title="emptyMessage" />
+        <DataStateInternal state="empty" :title="emptyText" />
       </slot>
     </div>
 

package/src/components/SecretInput.story.vue

@@ -22,7 +22,7 @@ const locked = ref<PluginSecretRef | string | null>({ ...lockedRef })
             v-model="state.value"
             :placeholder="state.placeholder"
             :disabled="state.disabled"
-            :error="state.error"
+            :invalid="state.error"
             :size="state.size"
           />
           <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">

package/src/components/SecretInput.vue

@@ -3,17 +3,8 @@
 import { computed, ref, watch } from 'vue'
 import BaseInput from './BaseInput.vue'
 import BaseButton from './BaseButton.vue'
-import {
-  clearPluginSecret,
-  isPluginSecretLocked,
-  isPluginSecretRef,
-  keepPluginSecret,
-  pluginSecretLabel,
-  pluginSecretState,
-  setPluginSecret,
-  type PluginSecretRef,
-  type PluginSecretState,
-} from '../utils/pluginSecrets'
+import * as pluginSecret from '../utils/pluginSecrets'
+import type { PluginSecretRef, PluginSecretState } from '../utils/pluginSecrets'
 
 type SecretValue = PluginSecretRef | string | null
 
@@ -22,7 +13,7 @@ interface Props {
   modelValue?: SecretValue
   placeholder?: string
   disabled?: boolean
-  error?: boolean
+  invalid?: boolean
   size?: 'sm' | 'md' | 'lg'
   /** Label on the control that starts entering a replacement value. */
   changeLabel?: string
@@ -34,7 +25,7 @@ const props = withDefaults(defineProps<Props>(), {
   modelValue: null,
   placeholder: 'Enter a new value',
   disabled: false,
-  error: false,
+  invalid: false,
   size: 'md',
   changeLabel: 'Change',
   clearLabel: 'Clear',
@@ -45,36 +36,36 @@ const emit = defineEmits<{
 }>()
 
 /** The reference this field started from, so an abandoned edit can restore it. */
-const storedReference = ref<PluginSecretRef | null>(keepPluginSecret(props.modelValue))
+const storedReference = ref<PluginSecretRef | null>(pluginSecret.keep(props.modelValue))
 const isEditing = ref(typeof props.modelValue === 'string')
 
 watch(
   () => props.modelValue,
   (value) => {
-    if (isPluginSecretRef(value)) {
-      storedReference.value = keepPluginSecret(value)
+    if (pluginSecret.isRef(value)) {
+      storedReference.value = pluginSecret.keep(value)
       isEditing.value = false
     }
   },
 )
 
-const state = computed<PluginSecretState>(() => pluginSecretState(props.modelValue))
-const locked = computed(() => isPluginSecretLocked(props.modelValue)
-  || isPluginSecretLocked(storedReference.value))
+const state = computed<PluginSecretState>(() => pluginSecret.state(props.modelValue))
+const locked = computed(() => pluginSecret.isLocked(props.modelValue)
+  || pluginSecret.isLocked(storedReference.value))
 const statusLabel = computed(() => isEditing.value
   ? 'New value'
-  : pluginSecretLabel(props.modelValue))
+  : pluginSecret.label(props.modelValue))
 const typedValue = computed(() => typeof props.modelValue === 'string' ? props.modelValue : '')
 const canClear = computed(() => !locked.value && (state.value === 'set' || isEditing.value))
 
 function startEditing(): void {
   if (props.disabled || locked.value) return
   isEditing.value = true
-  emit('update:modelValue', setPluginSecret(''))
+  emit('update:modelValue', pluginSecret.set(''))
 }
 
 function updateTyped(value: string | number | null): void {
-  emit('update:modelValue', setPluginSecret(value == null ? '' : String(value)))
+  emit('update:modelValue', pluginSecret.set(value == null ? '' : String(value)))
 }
 
 function cancelEditing(): void {
@@ -86,12 +77,12 @@ function clear(): void {
   if (props.disabled || locked.value) return
   isEditing.value = false
   storedReference.value = null
-  emit('update:modelValue', clearPluginSecret())
+  emit('update:modelValue', pluginSecret.clear())
 }
 </script>
 
 <template>
-  <div class="mint-secret-input" :class="{ 'mint-secret-input--error': error }">
+  <div class="mint-secret-input" :class="{ 'mint-secret-input--error': invalid }">
     <div class="mint-secret-input__status">
       <span
         class="mint-secret-input__badge"
@@ -109,7 +100,7 @@ function clear(): void {
       :model-value="typedValue"
       :placeholder="placeholder"
       :disabled="disabled"
-      :error="error"
+      :invalid="invalid"
       :size="size"
       @update:model-value="updateTyped"
     />

package/src/components/SectionCard.story.vue

@@ -46,7 +46,7 @@ function initPlayground() {
               >
                 <span style="flex: 1; min-width: 0">
                   <span style="display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">{{ e.name }}</span>
-                  <span style="display: block; font-family: 'Fira Code', monospace; font-size: 0.65625rem; color: var(--text-muted)">{{ e.code }}</span>
+                  <span style="display: block; font-family: var(--font-mono); font-size: 0.65625rem; color: var(--text-muted)">{{ e.code }}</span>
                 </span>
                 <span style="flex-shrink: 0; font-size: 0.71875rem; color: var(--text-muted)">{{ e.updated }}</span>
               </a>
@@ -139,7 +139,7 @@ function initPlayground() {
           <div class="mint-section-card__rows">
             <div v-for="n in 20" :key="n" class="mint-section-card__row">
               <span style="flex: 1; font-size: 0.8125rem; color: var(--text-primary)">Row {{ n }}</span>
-              <span style="font-family: 'Fira Code', monospace; font-size: 0.71875rem; color: var(--text-muted)">MM-2026-{{ String(n).padStart(3, '0') }}</span>
+              <span style="font-family: var(--font-mono); font-size: 0.71875rem; color: var(--text-muted)">MM-2026-{{ String(n).padStart(3, '0') }}</span>
             </div>
           </div>
           <template #footer>

package/src/components/SegmentedControl.story.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import SegmentedControl from './SegmentedControl.vue'
-import type { SegmentedOption } from '../types'
+import type { SelectOption } from '../types'
 
 const sizes = ['sm', 'md', 'lg'] as const
 const variants = ['simple', 'card'] as const
 
-const basicOptions: SegmentedOption[] = [
+const basicOptions: SelectOption<string | number>[] = [
   { value: 'day', label: 'Day' },
   { value: 'week', label: 'Week' },
   { value: 'month', label: 'Month' },
 ]
 
-const plateOptions: SegmentedOption[] = [
+const plateOptions: SelectOption<string | number>[] = [
   { value: 6, label: '6-well' },
   { value: 12, label: '12-well' },
   { value: 24, label: '24-well' },
@@ -21,24 +21,24 @@ const plateOptions: SegmentedOption[] = [
   { value: 384, label: '384-well' },
 ]
 
-const cardOptions: SegmentedOption[] = [
+const cardOptions: SelectOption<string | number>[] = [
   { value: 'basic', label: 'Basic', description: 'Simple endpoint analysis' },
   { value: 'standard', label: 'Standard', description: 'Dose-response curves' },
   { value: 'advanced', label: 'Advanced', description: 'Full kinetic modeling' },
 ]
 
-const withDisabledOptions: SegmentedOption[] = [
+const withDisabledOptions: SelectOption<string | number>[] = [
   { value: 'active', label: 'Active' },
   { value: 'archived', label: 'Archived' },
   { value: 'deleted', label: 'Deleted', disabled: true },
 ]
 
-const twoTabOptions: SegmentedOption[] = [
+const twoTabOptions: SelectOption<string | number>[] = [
   { value: 'table', label: 'Table' },
   { value: 'chart', label: 'Chart' },
 ]
 
-const groupOptions: SegmentedOption[] = [
+const groupOptions: SelectOption<string | number>[] = [
   { value: 'control', label: 'Control', color: 'var(--mint-sample-1)' },
   { value: 'a', label: 'Treatment A', color: 'var(--mint-sample-2)' },
   { value: 'b', label: 'Treatment B', color: 'var(--mint-sample-3)' },

package/src/components/SegmentedControl.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 /** Renders a segmented button group for single-option selection, defaulting to the card variant. */
 import { computed, type ComponentPublicInstance } from 'vue'
-import type { SegmentedOption, SegmentedOptionInput, SegmentedControlVariant, SegmentedControlSize } from '../types'
+import type { OptionPrimitive, SelectOption, SelectOptionInput, SegmentedControlVariant, SegmentedControlSize } from '../types'
 import { normalizeOptionInput } from '../utils/options'
 import { useRovingFocus } from '../composables/useRovingFocus'
 
 interface Props {
   modelValue: string | number
-  options: SegmentedOptionInput[]
+  options: SelectOptionInput[]
   variant?: SegmentedControlVariant
   size?: SegmentedControlSize
   fullWidth?: boolean
@@ -15,6 +15,8 @@ interface Props {
   disabledValues?: Array<string | number>
 }
 
+type SegmentedOption = SelectOption<OptionPrimitive>
+
 const props = withDefaults(defineProps<Props>(), {
   variant: 'card',
   size: 'md',
@@ -27,7 +29,7 @@ const emit = defineEmits<{
   'update:modelValue': [value: string | number]
 }>()
 
-const normalizedOptions = computed<SegmentedOption[]>(() => props.options.map(normalizeOptionInput))
+const normalizedOptions = computed<SegmentedOption[]>(() => props.options.map(normalizeOptionInput<OptionPrimitive, SegmentedOption>))
 const disabledValueSet = computed(() => new Set(props.disabledValues))
 
 function isOptionDisabled(option: SegmentedOption) {

package/src/components/SequenceInput.story.vue

@@ -29,7 +29,7 @@ const sampleProtein = 'MVLSPADKTNVKAAWGKVGAHAGEYGAEALERMFLSFPTTKTYFPHFDLSHGSAQVK
             :show-tools="state.showTools"
             :rows="state.rows"
             :placeholder="state.placeholder"
-            :error="state.error"
+            :invalid="state.error"
             :disabled="state.disabled"
           />
         </div>
@@ -119,7 +119,7 @@ const sampleProtein = 'MVLSPADKTNVKAAWGKVGAHAGEYGAEALERMFLSFPTTKTYFPHFDLSHGSAQVK
 
     <Variant title="Error State">
       <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
-        <SequenceInput model-value="ATGCGATCG" error />
+        <SequenceInput model-value="ATGCGATCG" invalid />
       </div>
     </Variant>
 

package/src/components/SequenceInput.vue

@@ -12,7 +12,7 @@ interface Props {
   maxLength?: number
   placeholder?: string
   rows?: number
-  error?: boolean
+  invalid?: boolean
   disabled?: boolean
 }
 
@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
   showTools: true,
   rows: 6,
   placeholder: 'Paste or type sequence...',
-  error: false,
+  invalid: false,
   disabled: false,
 })
 
@@ -130,7 +130,7 @@ function getBaseClass(char: string): string {
   <div
     :class="[
       'mint-sequence-input',
-      error || hasInvalid ? 'mint-sequence-input--error' : '',
+      invalid || hasInvalid ? 'mint-sequence-input--error' : '',
       disabled ? 'mint-sequence-input--disabled' : '',
     ]"
   >

package/src/components/SequenceProgressBar.story.vue

@@ -40,6 +40,7 @@ function initState() {
     showEta: true,
     showRemaining: true,
     label: 'samples',
+    failed: 0,
   }
 }
 </script>
@@ -60,6 +61,7 @@ function initState() {
             :label="state.label"
             :show-eta="state.showEta"
             :show-remaining="state.showRemaining"
+            :failed="state.failed"
           />
         </div>
       </template>
@@ -69,6 +71,7 @@ function initState() {
         <HstNumber v-model="state.total" title="Total samples" />
         <HstNumber v-model="state.remaining" title="Remaining (s)" />
         <HstText v-model="state.label" title="Unit label" />
+        <HstNumber v-model="state.failed" title="Failed" />
         <HstCheckbox v-model="state.compact" title="Compact" />
         <HstCheckbox v-model="state.showEta" title="Show ETA" />
         <HstCheckbox v-model="state.showRemaining" title="Show remaining" />
@@ -81,6 +84,12 @@ function initState() {
       </div>
     </Variant>
 
+    <Variant title="With failures">
+      <div style="padding: 2rem; max-width: 600px;">
+        <SequenceProgressBar :progress="running" :failed="1" />
+      </div>
+    </Variant>
+
     <Variant title="Compact (no footer)">
       <!-- Compact drops the remaining/ETA row for dense instrument tables. -->
       <div style="padding: 2rem; max-width: 600px;">

package/src/components/SequenceProgressBar.vue

@@ -15,6 +15,8 @@ interface Props {
   label?: string
   showEta?: boolean
   showRemaining?: boolean
+  /** Failed injections so far; shown as "N failed" in the head when above 0. */
+  failed?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -22,6 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: 'samples',
   showEta: true,
   showRemaining: true,
+  failed: 0,
 })
 
 const percent = computed(() => sequenceProgressPercent(props.progress))
@@ -37,8 +40,10 @@ const hasFooter = computed(() => {
   <div class="mint-sequence-progress">
     <div class="mint-sequence-progress__header">
       <span class="mint-sequence-progress__label">
-        {{ progress.current_sample }} / {{ progress.total_samples }} {{ label }}
+        <span class="mint-sequence-progress__count">{{ progress.current_sample }} / {{ progress.total_samples }}</span>
+        {{ label }}
       </span>
+      <span v-if="failed > 0" class="mint-sequence-progress__failed">{{ failed }} failed</span>
       <span class="mint-sequence-progress__percent">{{ percent }}%</span>
     </div>
 

package/src/components/SettingsModal.schema.ts

@@ -17,7 +17,7 @@ export const APPEARANCE_TAB: SettingsTab = {
   // Heroicons "swatch" — the built-in tab sits beside plugin tabs that all
   // carry icons, so it needs one of its own to keep the rail consistent.
   icon: '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z"></path></svg>',
-  description: 'Theme, color palette, and table density',
+  description: 'Theme, color palette, and density',
 }
 
 // Map settings groups onto the form-builder's flat-section shape.

package/src/components/SettingsModal.story.vue

@@ -5,7 +5,6 @@ import FormField from './FormField.vue'
 import BaseInput from './BaseInput.vue'
 import BaseSelect from './BaseSelect.vue'
 import BaseCheckbox from './BaseCheckbox.vue'
-import BaseToggle from './BaseToggle.vue'
 import NumberInput from './NumberInput.vue'
 import { defineControlModel } from '../composables/useControlSchema'
 import type {
@@ -330,7 +329,7 @@ const layouts: Array<SettingsModalLayout | 'auto'> = ['auto', 'horizontal', 'ver
             Open Settings
           </button>
           <SettingsModal
-            v-model="basicOpen"
+            v-model:open="basicOpen"
             :title="state.title"
             :show-appearance="state.showAppearance"
             :size="state.size"
@@ -365,7 +364,7 @@ const layouts: Array<SettingsModalLayout | 'auto'> = ['auto', 'horizontal', 'ver
           Appearance Settings
         </button>
         <SettingsModal
-          v-model="appearanceOnlyOpen"
+          v-model:open="appearanceOnlyOpen"
           title="Appearance"
           :show-appearance="true"
         />
@@ -382,7 +381,7 @@ const layouts: Array<SettingsModalLayout | 'auto'> = ['auto', 'horizontal', 'ver
           Open Settings (Custom Tabs)
         </button>
         <SettingsModal
-          v-model="customOpen"
+          v-model:open="customOpen"
           title="Plugin Settings"
           :tabs="customTabs"
           :show-appearance="true"
@@ -432,7 +431,7 @@ const layouts: Array<SettingsModalLayout | 'auto'> = ['auto', 'horizontal', 'ver
           Open Settings (Vertical)
         </button>
         <SettingsModal
-          v-model="verticalOpen"
+          v-model:open="verticalOpen"
           title="IC50 Plugin Settings"
           :tabs="verticalTabs"
           :show-appearance="true"
@@ -471,8 +470,8 @@ const layouts: Array<SettingsModalLayout | 'auto'> = ['auto', 'horizontal', 'ver
               <FormField label="Optimizer">
                 <BaseSelect v-model="vForm.optimizer" :options="optimizerOptions" />
               </FormField>
-              <BaseToggle v-model="vForm.logTransform" label="Apply log-dose transform" />
-              <BaseToggle v-model="vForm.inverseVariance" label="Weight by inverse variance" />
+              <BaseCheckbox type="switch" v-model="vForm.logTransform" label="Apply log-dose transform" />
+              <BaseCheckbox type="switch" v-model="vForm.inverseVariance" label="Weight by inverse variance" />
             </div>
           </template>
 
@@ -504,7 +503,7 @@ const layouts: Array<SettingsModalLayout | 'auto'> = ['auto', 'horizontal', 'ver
               <FormField label="Convergence threshold">
                 <NumberInput v-model="vForm.threshold" :step="0.0001" />
               </FormField>
-              <BaseToggle v-model="vForm.bayesian" label="Enable experimental Bayesian fitting" />
+              <BaseCheckbox type="switch" v-model="vForm.bayesian" label="Enable experimental Bayesian fitting" />
             </div>
           </template>
         </SettingsModal>
@@ -525,10 +524,10 @@ const layouts: Array<SettingsModalLayout | 'auto'> = ['auto', 'horizontal', 'ver
           <pre style="margin: 0.5rem 0 0; padding: 0.75rem; background: var(--bg-tertiary); border-radius: 0.375rem; font-size: 0.6875rem; overflow-x: auto;">{{ JSON.stringify(modelSettings, null, 2) }}</pre>
         </details>
         <SettingsModal
-          v-model="modelOpen"
+          v-model:open="modelOpen"
           v-model:values="modelSettings"
           title="IC50 Plugin Settings"
-          :model="settingsModel"
+          :spec="settingsModel"
           :show-appearance="true"
           size="xl"
           layout="vertical"
@@ -553,10 +552,10 @@ const layouts: Array<SettingsModalLayout | 'auto'> = ['auto', 'horizontal', 'ver
           <pre style="margin: 0.5rem 0 0; padding: 0.75rem; background: var(--bg-tertiary); border-radius: 0.375rem; font-size: 0.6875rem; overflow-x: auto;">{{ JSON.stringify(schemaSettings, null, 2) }}</pre>
         </details>
         <SettingsModal
-          v-model="schemaOpen"
+          v-model:open="schemaOpen"
           v-model:values="schemaSettings"
           title="IC50 Plugin Settings"
-          :schema="settingsSchema"
+          :spec="settingsSchema"
           :show-appearance="true"
           size="xl"
         />
@@ -573,10 +572,10 @@ const layouts: Array<SettingsModalLayout | 'auto'> = ['auto', 'horizontal', 'ver
           Open Settings (stacked)
         </button>
         <SettingsModal
-          v-model="stackedOpen"
+          v-model:open="stackedOpen"
           v-model:values="stackedSettings"
           title="Feature Finder Settings"
-          :schema="stackedSchema"
+          :spec="stackedSchema"
           :show-appearance="true"
         />
       </div>