@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

package/src/components/SearchableSelect.vue

@@ -13,6 +13,8 @@ interface Props {
   noResultsText?: string
   size?: 'sm' | 'md' | 'lg'
   disabled?: boolean
+  /** Id of the visible label; the trigger is then named by the label and the selected value. */
+  ariaLabelledby?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -34,6 +36,7 @@ defineSlots<{
 
 const id = useId().replace(/:/g, '')
 const listboxId = `mint-searchable-select-${id}`
+const triggerId = `${listboxId}-trigger`
 const root = ref<HTMLElement | null>(null)
 const trigger = ref<HTMLButtonElement | null>(null)
 const search = ref<HTMLInputElement | null>(null)
@@ -142,8 +145,10 @@ useEventListener(() => document, 'pointerdown', event => {
     @focusout="!root?.contains($event.relatedTarget as Node | null) && closePanel()"
   >
     <button
+      :id="triggerId"
       ref="trigger"
       type="button"
+      :aria-labelledby="ariaLabelledby ? `${ariaLabelledby} ${triggerId}` : undefined"
       class="mint-searchable-select__trigger"
       :disabled="disabled"
       :aria-expanded="open"
@@ -160,7 +165,7 @@ useEventListener(() => document, 'pointerdown', event => {
       </svg>
     </button>
 
-    <div v-if="open" class="mint-searchable-select__panel">
+    <div v-if="open" class="mint-popover mint-searchable-select__panel">
       <div class="mint-searchable-select__search-wrap">
         <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
           <circle cx="8.5" cy="8.5" r="5.5" /><path d="m13 13 4 4" />
@@ -187,10 +192,10 @@ useEventListener(() => document, 'pointerdown', event => {
           :id="`${listboxId}-option-${index}`"
           :key="String(option.value)"
           role="option"
-          class="mint-searchable-select__option"
+          class="mint-menu-item mint-searchable-select__option"
           :class="{
-            'mint-searchable-select__option--active': activeIndex === index,
-            'mint-searchable-select__option--selected': modelValue === option.value,
+            'mint-menu-item--active mint-searchable-select__option--active': activeIndex === index,
+            'mint-menu-item--selected mint-searchable-select__option--selected': modelValue === option.value,
             'mint-searchable-select__option--disabled': option.disabled,
           }"
           :aria-selected="modelValue === option.value"
@@ -200,14 +205,14 @@ useEventListener(() => document, 'pointerdown', event => {
           @click="select(option)"
         >
           <slot name="option" :option="option" :selected="modelValue === option.value" :active="activeIndex === index">
-            <span class="mint-searchable-select__option-text">
-              <span class="mint-searchable-select__option-label">{{ option.label }}</span>
-              <span v-if="option.disabled ? option.disabledReason || option.description : option.description" class="mint-searchable-select__option-description">
+            <span class="mint-menu-item__text mint-searchable-select__option-text">
+              <span class="mint-menu-item__label mint-searchable-select__option-label">{{ option.label }}</span>
+              <span v-if="option.disabled ? option.disabledReason || option.description : option.description" class="mint-menu-item__description mint-searchable-select__option-description">
                 {{ option.disabled ? option.disabledReason || option.description : option.description }}
               </span>
             </span>
-            <span v-if="option.meta" class="mint-searchable-select__option-meta">{{ option.meta }}</span>
-            <svg v-if="modelValue === option.value" class="mint-searchable-select__check" viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
+            <span v-if="option.meta" class="mint-menu-item__meta mint-searchable-select__option-meta">{{ option.meta }}</span>
+            <svg class="mint-menu-item__check mint-searchable-select__check" viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 10 3 3 7-7" />
             </svg>
           </slot>

package/src/components/SecretInput.vue

@@ -96,7 +96,7 @@ function clear(): void {
       <span
         class="mint-secret-input__badge"
         :class="`mint-secret-input__badge--${isEditing ? 'pending' : state}`"
-      >{{ statusLabel }}</span>
+      ><span class="mint-secret-input__dot" aria-hidden="true" />{{ statusLabel }}</span>
       <span v-if="locked" class="mint-secret-input__hint">
         This value comes from the environment and cannot be edited here.
       </span>

package/src/components/SegmentedControl.story.vue

@@ -38,6 +38,16 @@ const twoTabOptions: SegmentedOption[] = [
   { value: 'chart', label: 'Chart' },
 ]
 
+const groupOptions: SegmentedOption[] = [
+  { 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)' },
+]
+
+function initGroupState() {
+  return { selected: 'a', variant: 'card' as (typeof variants)[number], size: 'sm' as (typeof sizes)[number] }
+}
+
 const cardSelectionP3 = ref('list')
 const twoTabSelection = ref('table')
 </script>
@@ -77,6 +87,19 @@ const twoTabSelection = ref('table')
       </template>
     </Variant>
 
+    <Variant title="Group colors" :init-state="initGroupState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <SegmentedControl v-model="state.selected" :options="groupOptions" :variant="state.variant" :size="state.size" />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect v-model="state.variant" title="Variant" :options="variants.map(v => ({ label: v, value: v }))" />
+        <HstSelect v-model="state.size" title="Size" :options="sizes.map(v => ({ label: v, value: v }))" />
+      </template>
+    </Variant>
+
     <Variant title="All Sizes (Simple)">
       <div style="padding: 2rem; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
         <div v-for="size in sizes" :key="size">

package/src/components/SegmentedControl.vue

@@ -125,7 +125,12 @@ function handleKeydown(event: KeyboardEvent, option: SegmentedOption) {
       @click="handleSelect(option)"
       @keydown="handleKeydown($event, option)"
     >
-      <span class="mint-segmented-control__label">{{ option.label }}</span>
+      <span class="mint-segmented-control__label"><span
+        v-if="option.color"
+        class="mint-segmented-control__swatch"
+        :style="{ background: option.color }"
+        aria-hidden="true"
+      />{{ option.label }}</span>
       <span
         v-if="option.description && variant === 'card'"
         class="mint-segmented-control__description"

package/src/components/SequenceInput.story.vue

@@ -9,6 +9,10 @@ const sequence = ref('')
 
 const sampleDNA = 'ATGCGATCGATCGATCGATCGATCGATCGATCGATCGATCGATCGCTAGCTAGCTAGCTAGCTAGCTAGCTGAATTCGATATCAAGCTTATCGATACCGTCGACCTCGAGGGGGGGCCCGGTACCCAATTCGCCCTATAGTGAGTCGTATTACAATTCACTG'
 const sampleRNA = 'AUGCGAUCGAUCGAUCGAUCGAUCGAUCGAUCGAUCGAUCGCUAGCUAGCUAGCUAGCUAGCUAGCUGAAUUCGAUAUCAAGCUUAUCGAU'
+function initProblemsState() {
+  return { sequence: 'ATGCGTACGTTAGCNNACGTXZ' }
+}
+
 const sampleProtein = 'MVLSPADKTNVKAAWGKVGAHAGEYGAEALERMFLSFPTTKTYFPHFDLSHGSAQVKGHGKKVADALTNAVAHVDDMPNALSALSDLHAHKLRVDPVNFKLLSHCLLVTLAAHLPAEFTPAVHASLDKFLASVSTVLTSKYR'
 </script>
 
@@ -47,9 +51,27 @@ const sampleProtein = 'MVLSPADKTNVKAAWGKVGAHAGEYGAEALERMFLSFPTTKTYFPHFDLSHGSAQVK
       </template>
     </Variant>
 
+    <Variant title="Problems" :init-state="initProblemsState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+          <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted);">
+            Type an invalid character: the field keeps it and names it; v-model stays sanitised.
+          </p>
+          <SequenceInput v-model="state.sequence" type="dna" :rows="2" />
+          <p style="margin: 0.75rem 0 0; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary);">
+            v-model: {{ state.sequence }}
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.sequence" title="Initial sequence" />
+      </template>
+    </Variant>
+
     <Variant title="DNA Sequence">
       <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
-        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted);">
           GFP coding sequence fragment (auto-detected as DNA)
         </p>
         <SequenceInput :model-value="sampleDNA" type="dna" />
@@ -58,7 +80,7 @@ const sampleProtein = 'MVLSPADKTNVKAAWGKVGAHAGEYGAEALERMFLSFPTTKTYFPHFDLSHGSAQVK
 
     <Variant title="RNA Sequence">
       <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
-        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted);">
           mRNA sequence fragment
         </p>
         <SequenceInput :model-value="sampleRNA" type="rna" />
@@ -67,7 +89,7 @@ const sampleProtein = 'MVLSPADKTNVKAAWGKVGAHAGEYGAEALERMFLSFPTTKTYFPHFDLSHGSAQVK
 
     <Variant title="Protein Sequence">
       <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
-        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted);">
           Human hemoglobin alpha subunit
         </p>
         <SequenceInput :model-value="sampleProtein" type="protein" />
@@ -76,7 +98,7 @@ const sampleProtein = 'MVLSPADKTNVKAAWGKVGAHAGEYGAEALERMFLSFPTTKTYFPHFDLSHGSAQVK
 
     <Variant title="Readonly Viewer">
       <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
-        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted);">
           Read-only mode with colored bases and line numbers
         </p>
         <SequenceInput :model-value="sampleDNA" type="dna" readonly />
@@ -109,7 +131,7 @@ const sampleProtein = 'MVLSPADKTNVKAAWGKVGAHAGEYGAEALERMFLSFPTTKTYFPHFDLSHGSAQVK
 
     <Variant title="With Max Length">
       <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
-        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted);">
           Limited to 50 characters
         </p>
         <SequenceInput v-model="sequence" :max-length="50" placeholder="Enter up to 50 bases..." />

package/src/components/SequenceInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Textarea for DNA/RNA/protein sequences with auto-detection, validation, GC-content stats, reverse-complement, and FASTA formatting tools. */
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useSequenceUtils, type SequenceType, type SequenceStats } from '../composables/useSequenceUtils'
 
 interface Props {
@@ -36,19 +36,35 @@ defineSlots<{
   tools?(props: { sequence: string; type: 'dna' | 'rna' | 'protein'; stats: SequenceStats }): unknown
 }>()
 
-const { detectSequenceType, validateSequence, reverseComplement, calculateStats, formatFasta } = useSequenceUtils()
+const { detectSequenceType, validateSequence, findSequenceProblems, reverseComplement, calculateStats, formatFasta } = useSequenceUtils()
 
+// The field shows what was typed; `modelValue` stays the sanitised sequence and
+// the stripped characters are reported below the field instead of vanishing (9c).
+const draft = ref(props.modelValue)
+let lastEmitted = props.modelValue
+watch(() => props.modelValue, (value) => {
+  if (value === lastEmitted) return
+  draft.value = value
+  lastEmitted = value
+})
+
+// Detected from what was typed, so residues the sanitised value would drop still count.
 const resolvedType = computed<'dna' | 'rna' | 'protein'>(() => {
   if (props.type !== 'auto') return props.type as 'dna' | 'rna' | 'protein'
-  if (!props.modelValue) return 'dna'
-  return detectSequenceType(props.modelValue)
+  if (!draft.value) return 'dna'
+  return detectSequenceType(draft.value)
 })
 
+const TYPE_LABELS = { dna: 'DNA', rna: 'RNA', protein: 'Protein' } as const
+
 const stats = computed<SequenceStats>(() => {
   if (!props.modelValue) return { length: 0 }
   return calculateStats(props.modelValue, resolvedType.value)
 })
 
+const problems = computed(() => findSequenceProblems(draft.value, resolvedType.value))
+const hasInvalid = computed(() => problems.value.invalidCharacters.length > 0)
+
 const viewerLines = computed(() => {
   if (!props.modelValue) return []
   const formatted = formatFasta(props.modelValue, 60)
@@ -57,15 +73,25 @@ const viewerLines = computed(() => {
 
 function handleInput(event: Event) {
   const target = event.target as HTMLTextAreaElement
-  let value = target.value
-
-  if (props.maxLength && value.length > props.maxLength) {
-    value = value.slice(0, props.maxLength)
+  draft.value = target.value
+  // maxLength counts sequence characters, so the cut falls after the last one that fits.
+  const value = capToMaxLength(target.value, resolvedType.value)
+  if (value !== target.value) {
+    draft.value = value
+    target.value = value
   }
+  lastEmitted = validateSequence(value, resolvedType.value)
+  emit('update:modelValue', lastEmitted)
+}
 
-  // Validate characters
-  value = validateSequence(value, resolvedType.value)
-  emit('update:modelValue', value)
+function capToMaxLength(text: string, type: 'dna' | 'rna' | 'protein'): string {
+  if (!props.maxLength) return text
+  let kept = 0
+  for (let i = 0; i < text.length; i++) {
+    kept += validateSequence(text[i], type).length
+    if (kept > props.maxLength) return text.slice(0, i)
+  }
+  return text
 }
 
 function doReverseComplement() {
@@ -79,6 +105,7 @@ function doUppercase() {
 }
 
 function doClear() {
+  draft.value = ''
   emit('update:modelValue', '')
 }
 
@@ -103,12 +130,14 @@ function getBaseClass(char: string): string {
   <div
     :class="[
       'mint-sequence-input',
-      error ? 'mint-sequence-input--error' : '',
+      error || hasInvalid ? 'mint-sequence-input--error' : '',
       disabled ? 'mint-sequence-input--disabled' : '',
     ]"
   >
     <!-- Toolbar -->
     <div v-if="showTools && !readonly" class="mint-sequence-input__toolbar">
+      <span class="mint-sequence-input__type-badge">{{ TYPE_LABELS[resolvedType] }}</span>
+      <div class="mint-sequence-input__tool-sep" />
       <slot name="tools" :sequence="modelValue || ''" :type="resolvedType" :stats="stats">
         <button
           v-if="resolvedType !== 'protein'"
@@ -139,24 +168,21 @@ function getBaseClass(char: string): string {
         <button
           type="button"
           class="mint-sequence-input__tool-btn"
-          :disabled="!modelValue || disabled"
+          :disabled="!draft || disabled"
           @click="doClear"
         >
           Clear
         </button>
       </slot>
-
-      <span class="mint-sequence-input__type-badge">{{ resolvedType }}</span>
     </div>
 
     <!-- Editor (input mode) -->
     <div v-if="!readonly" class="mint-sequence-input__editor">
       <textarea
-        :value="modelValue"
+        :value="draft"
         :rows="rows"
         :placeholder="placeholder"
         :disabled="disabled"
-        :maxlength="maxLength"
         class="mint-sequence-input__textarea"
         spellcheck="false"
         autocomplete="off"
@@ -186,19 +212,38 @@ function getBaseClass(char: string): string {
       </div>
     </div>
 
-    <!-- Stats -->
-    <div v-if="showStats && modelValue" class="mint-sequence-input__stats">
-      <span>
-        <span class="mint-sequence-input__stat-label">Length:</span>
-        <span class="mint-sequence-input__stat-value">{{ stats.length }}</span>
-      </span>
-      <span v-if="stats.gcPercent !== undefined">
-        <span class="mint-sequence-input__stat-label">GC:</span>
-        <span class="mint-sequence-input__stat-value">{{ stats.gcPercent.toFixed(1) }}%</span>
+    <!-- Stats and problems -->
+    <div
+      v-if="(showStats && modelValue) || problems.ambiguousBases || hasInvalid"
+      class="mint-sequence-input__stats"
+    >
+      <template v-if="showStats && modelValue">
+        <span>
+          <span class="mint-sequence-input__stat-label">Length:</span>
+          <span class="mint-sequence-input__stat-value">{{ stats.length }}</span>
+        </span>
+        <span v-if="stats.gcPercent !== undefined">
+          <span class="mint-sequence-input__stat-label">GC:</span>
+          <span class="mint-sequence-input__stat-value">{{ stats.gcPercent.toFixed(1) }}%</span>
+        </span>
+        <span v-if="stats.molecularWeight !== undefined">
+          <span class="mint-sequence-input__stat-label">MW:</span>
+          <span class="mint-sequence-input__stat-value">~{{ (stats.molecularWeight / 1000).toFixed(1) }} kDa</span>
+        </span>
+      </template>
+      <span v-if="problems.ambiguousBases" class="mint-sequence-input__problem mint-sequence-input__problem--warning">
+        <svg class="mint-sequence-input__problem-icon" viewBox="0 0 16 16" aria-hidden="true">
+          <path class="mint-sequence-input__problem-shape" d="M8 1.5l7 12.5H1z" />
+          <path class="mint-sequence-input__problem-mark" d="M8 6v3.5M8 11.5v.01" />
+        </svg>
+        {{ problems.ambiguousBases }} ambiguous bases (N)
       </span>
-      <span v-if="stats.molecularWeight !== undefined">
-        <span class="mint-sequence-input__stat-label">MW:</span>
-        <span class="mint-sequence-input__stat-value">~{{ (stats.molecularWeight / 1000).toFixed(1) }} kDa</span>
+      <span v-if="hasInvalid" role="alert" class="mint-sequence-input__problem mint-sequence-input__problem--error">
+        <svg class="mint-sequence-input__problem-icon" viewBox="0 0 16 16" aria-hidden="true">
+          <circle class="mint-sequence-input__problem-shape" cx="8" cy="8" r="7" />
+          <path class="mint-sequence-input__problem-mark" d="M8 4.5v4M8 11.5v.01" />
+        </svg>
+        Invalid characters: {{ problems.invalidCharacters.join(' ') }}
       </span>
     </div>
   </div>

package/src/components/SequenceProgressBar.vue

@@ -44,7 +44,6 @@ const hasFooter = computed(() => {
 
     <ProgressBar
       :value="percent"
-      color="info"
       size="sm"
       aria-label="Sequence progress"
     />

package/src/components/SettingsModal.schema.ts

@@ -68,7 +68,9 @@ export function normalizeVisibleSettingsTabs(
 
 export function buildSettingsTabs(
   baseTabs: SettingsTab[],
-  showAppearance: boolean
+  showAppearance: boolean,
+  appearanceFirst = false
 ): SettingsTab[] {
-  return showAppearance ? [...baseTabs, APPEARANCE_TAB] : baseTabs
+  if (!showAppearance) return baseTabs
+  return appearanceFirst ? [APPEARANCE_TAB, ...baseTabs] : [...baseTabs, APPEARANCE_TAB]
 }

package/src/components/SettingsModal.story.vue

@@ -20,6 +20,7 @@ const customOpen = ref(false)
 const appearanceOnlyOpen = ref(false)
 const verticalOpen = ref(false)
 const schemaOpen = ref(false)
+const stackedOpen = ref(false)
 const modelOpen = ref(false)
 
 const customTabs: SettingsTab[] = [
@@ -113,17 +114,19 @@ const outlierOptions: SelectOption<string>[] = [
 // Plugin authors describe parameters once; the modal auto-renders every field
 // via the SDK form field registry. Compare to the "Vertical Layout"
 // variant above, which builds the same surface manually.
+// optimizer, logTransform and minR2 start off their defaults, so the rail
+// counts, row dots and ↺ resets are visible on open.
 const schemaSettings = ref<Record<string, unknown>>({
   pluginName: 'IC50 Calculator',
   locale: 'en-US',
   curveModel: '4pl',
   bottom: 0,
   top: 100,
-  optimizer: 'lm',
-  logTransform: true,
+  optimizer: 'trf',
+  logTransform: false,
   inverseVariance: false,
   outlier: 'grubbs',
-  minR2: 0.95,
+  minR2: 0.9,
   emailComplete: true,
   emailQc: false,
   inApp: true,
@@ -141,8 +144,8 @@ const settingsSchema: SettingsModalSchema = {
       icon: iconGeneral,
       description: 'Plugin name, defaults, locale',
       fields: [
-        { name: 'pluginName', label: 'Plugin Display Name', type: 'text', hint: "Shown in the platform's plugin list and breadcrumbs." },
-        { name: 'locale', label: 'Locale', type: 'select', props: { options: localeOptions } },
+        { name: 'pluginName', label: 'Plugin Display Name', type: 'text', defaultValue: 'IC50 Calculator', hint: "Shown in the platform's plugin list and breadcrumbs." },
+        { name: 'locale', label: 'Locale', type: 'select', defaultValue: 'en-US', props: { options: localeOptions } },
       ],
     },
     {
@@ -152,9 +155,9 @@ const settingsSchema: SettingsModalSchema = {
       description: 'Curve choice and bounds',
       columns: 2,
       fields: [
-        { name: 'curveModel', label: 'Default Curve Model', type: 'select', colSpan: 2, props: { options: curveModelOptions } },
-        { name: 'bottom', label: 'Bottom bound', type: 'number', props: { step: 1 } },
-        { name: 'top', label: 'Top bound', type: 'number', props: { step: 1 } },
+        { name: 'curveModel', label: 'Default Curve Model', type: 'select', defaultValue: '4pl', colSpan: 2, props: { options: curveModelOptions } },
+        { name: 'bottom', label: 'Bottom bound', type: 'number', defaultValue: 0, props: { step: 1 } },
+        { name: 'top', label: 'Top bound', type: 'number', defaultValue: 100, props: { step: 1 } },
       ],
     },
     {
@@ -163,9 +166,9 @@ const settingsSchema: SettingsModalSchema = {
       icon: iconCurve,
       description: 'Optimizer, weights, transforms',
       fields: [
-        { name: 'optimizer', label: 'Optimizer', type: 'select', props: { options: optimizerOptions } },
-        { name: 'logTransform', label: 'Apply log-dose transform', type: 'toggle' },
-        { name: 'inverseVariance', label: 'Weight by inverse variance', type: 'toggle' },
+        { name: 'optimizer', label: 'Optimizer', type: 'select', defaultValue: 'lm', props: { options: optimizerOptions } },
+        { name: 'logTransform', label: 'Apply log-dose transform', type: 'toggle', defaultValue: true },
+        { name: 'inverseVariance', label: 'Weight by inverse variance', type: 'toggle', defaultValue: false, hint: 'Recommended when replicate variance differs a lot.' },
       ],
     },
     {
@@ -174,11 +177,12 @@ const settingsSchema: SettingsModalSchema = {
       icon: iconQc,
       description: 'Outlier detection and thresholds',
       fields: [
-        { name: 'outlier', label: 'Outlier method', type: 'select', props: { options: outlierOptions } },
+        { name: 'outlier', label: 'Outlier method', type: 'select', defaultValue: 'grubbs', props: { options: outlierOptions } },
         {
           name: 'minR2',
           label: 'Min R² to accept fit',
           type: 'number',
+          defaultValue: 0.95,
           hint: 'Fits below this threshold are flagged for review.',
           props: { step: 0.01, min: 0, max: 1 },
         },
@@ -190,9 +194,9 @@ const settingsSchema: SettingsModalSchema = {
       icon: iconBell,
       description: 'Email and in-app alerts',
       fields: [
-        { name: 'emailComplete', label: 'Email on analysis complete', type: 'checkbox' },
-        { name: 'emailQc', label: 'Email on QC failure', type: 'checkbox' },
-        { name: 'inApp', label: 'In-app notifications', type: 'checkbox' },
+        { name: 'emailComplete', label: 'Email on analysis complete', type: 'checkbox', defaultValue: true },
+        { name: 'emailQc', label: 'Email on QC failure', type: 'checkbox', defaultValue: false },
+        { name: 'inApp', label: 'In-app notifications', type: 'checkbox', defaultValue: true },
         { name: 'slack', label: 'Slack mentions', type: 'checkbox' },
       ],
     },
@@ -202,9 +206,9 @@ const settingsSchema: SettingsModalSchema = {
       icon: iconCode,
       description: 'Numerics, debug, experimental',
       fields: [
-        { name: 'maxIterations', label: 'Max iterations', type: 'number', props: { step: 100, min: 1 } },
-        { name: 'threshold', label: 'Convergence threshold', type: 'number', props: { step: 0.0001 } },
-        { name: 'bayesian', label: 'Enable experimental Bayesian fitting', type: 'toggle' },
+        { name: 'maxIterations', label: 'Max iterations', type: 'number', defaultValue: 1000, props: { step: 100, min: 1 } },
+        { name: 'threshold', label: 'Convergence threshold', type: 'number', defaultValue: 0.0001, props: { step: 0.0001 } },
+        { name: 'bayesian', label: 'Enable experimental Bayesian fitting', type: 'toggle', defaultValue: false },
       ],
     },
   ],
@@ -270,13 +274,52 @@ const settingsModel = defineControlModel({
 })
 const modelSettings = ref<Record<string, unknown>>({})
 
+// Three groups or fewer: the default layout stacks every group on one page.
+const stackedSettings = ref<Record<string, unknown>>({ mzTolerance: 10, polarity: 'positive', autoExport: true })
+const stackedSchema: SettingsModalSchema = {
+  groups: [
+    {
+      id: 'detection',
+      label: 'Peak detection',
+      description: 'Tolerances used when matching features',
+      fields: [
+        { name: 'mzTolerance', label: 'm/z tolerance (ppm)', type: 'number', defaultValue: 5 },
+        {
+          name: 'polarity',
+          label: 'Polarity',
+          type: 'select',
+          defaultValue: 'positive',
+          props: { options: [{ value: 'positive', label: 'Positive' }, { value: 'negative', label: 'Negative' }] },
+        },
+      ],
+    },
+    {
+      id: 'export',
+      label: 'Export',
+      fields: [
+        { name: 'autoExport', label: 'Export results when a run finishes', type: 'checkbox', defaultValue: false },
+        { name: 'exportPath', label: 'Export folder', type: 'text', hint: 'No default — never marked as modified.' },
+      ],
+    },
+  ],
+}
+
+function initPlaygroundState() {
+  return {
+    title: 'Settings',
+    showAppearance: true,
+    size: 'lg' as 'md' | 'lg' | 'xl',
+    layout: 'auto' as SettingsModalLayout | 'auto',
+  }
+}
+
 const sizes: Array<'md' | 'lg' | 'xl'> = ['md', 'lg', 'xl']
-const layouts: SettingsModalLayout[] = ['horizontal', 'vertical']
+const layouts: Array<SettingsModalLayout | 'auto'> = ['auto', 'horizontal', 'vertical']
 </script>
 
 <template>
   <Story title="Layout/SettingsModal">
-    <Variant title="Playground">
+    <Variant title="Playground" :init-state="initPlaygroundState">
       <template #default="{ state }">
         <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
           <button
@@ -291,7 +334,7 @@ const layouts: SettingsModalLayout[] = ['horizontal', 'vertical']
             :title="state.title"
             :show-appearance="state.showAppearance"
             :size="state.size"
-            :layout="state.layout"
+            :layout="state.layout === 'auto' ? undefined : state.layout"
           />
         </div>
       </template>
@@ -516,7 +559,25 @@ const layouts: SettingsModalLayout[] = ['horizontal', 'vertical']
           :schema="settingsSchema"
           :show-appearance="true"
           size="xl"
-          layout="vertical"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Stacked (Three Groups or Fewer)">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: center;">
+        <button
+          type="button"
+          style="padding: 0.5rem 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer; font-size: 0.875rem;"
+          @click="stackedOpen = true"
+        >
+          Open Settings (stacked)
+        </button>
+        <SettingsModal
+          v-model="stackedOpen"
+          v-model:values="stackedSettings"
+          title="Feature Finder Settings"
+          :schema="stackedSchema"
+          :show-appearance="true"
         />
       </div>
     </Variant>