@morscherlab/mint-sdk 1.3.9 → 1.4.0-beta.2

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/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/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>

package/src/components/SettingsModal.vue

@@ -2,8 +2,8 @@
 /**
  * Tabbed settings modal with three usage modes:
  *
- *   1. Schema-driven (recommended) — pass `schema`, compact `controls`, or a
- *      complete `defineControlModel()` result plus `v-model:values`. Each
+ *   1. Schema-driven (recommended) — pass a `defineControlModel()` result or a
+ *      `SettingsModalSchema` as `spec`, plus `v-model:values`. Each
  *      group/section becomes a tab; fields auto-render via the SDK form field
  *      registry (text, select, number, toggle, molecule, concentration, …).
  *      Conditional visibility, validation, and dynamic options come for free.
@@ -22,12 +22,12 @@
  *
  * Schema-driven settings also get a search across groups (label + hint), a
  * modified-from-default marker with a per-row reset for every field with a
- * non-null `defaultValue` (every `controls`/`model` field gets one), and a "Restore group defaults" action. Changes
+ * non-null `defaultValue` (every control model field gets one), and a "Restore group defaults" action. Changes
  * apply immediately; the default footer says so and closes with "Done".
  *
  * @example Recommended
  * ```vue
- * <SettingsModal v-model="open" v-model:values="values" :model="settingsModel" />
+ * <SettingsModal v-model:open="open" v-model:values="values" :spec="settingsModel" />
  * ```
  */
 import { ref, computed, watch } from 'vue'
@@ -40,16 +40,12 @@ import SettingsPaneHeadInternal from './internal/SettingsPaneHeadInternal.vue'
 import { useFormBuilder } from '../composables/useFormBuilder'
 import {
   controlsToSettingsSchema,
-  mergeControlWorkspaceOptions,
-  resolveControlModel,
-  type ControlModel,
+  isControlModelBinding,
   type ControlModelBinding,
-  type ControlSchema,
-  type ControlWorkspaceOptions,
 } from '../composables/useControlSchema'
 import { useSettingsStore, colorPalettes } from '../stores/settings'
 import { useAuthStore } from '../stores/auth'
-import { usePlatformContext } from '../composables/usePlatformContext'
+import { usePlatform } from '../composables/usePlatform'
 import { canAccessByPolicy } from '../permissions'
 import {
   formSchemaFieldNames,
@@ -70,7 +66,6 @@ import type {
   SettingsModalLayout,
   SettingsModalSchema,
   SettingsUserType,
-  FormEnhancements,
   FormFieldSchema,
 } from '../types'
 import type { AccessControlled, PermissionUser } from '../permissions'
@@ -85,27 +80,19 @@ import {
 } from './SettingsModal.schema'
 
 interface Props {
-  modelValue: boolean
+  open: boolean
   title?: string
-  /** Manual tab descriptors. Ignored when `schema` is set (groups become tabs). */
+  /** Manual tab descriptors. Ignored when `spec` is set (groups become tabs). */
   tabs?: SettingsTabInput[]
   showAppearance?: boolean
   /** List Appearance before the other tabs and open on it. */
   appearanceFirst?: boolean
   size?: 'md' | 'lg' | 'xl'
   layout?: SettingsModalLayout
-  /** Declarative schema — fields auto-render via SDK form components. */
-  schema?: SettingsModalSchema
-  /** Model returned by defineControlModel(), or a raw nested ControlModel for one-step settings generation. */
-  model?: ControlModel | ControlModelBinding
-  /** Compact controls model — converted to `schema` when `schema` is not set. */
-  controls?: ControlSchema
-  /** Conversion options for `controls`, such as section labels, columns, and shared initialValues. */
-  controlOptions?: ControlWorkspaceOptions
-  /** Two-way bound values when `schema`, `model`, or `controls` is set. */
+  /** Control model built with defineControlModel(), or a SettingsModalSchema (e.g. the generated `settingsForm`). Fields auto-render via SDK form components. */
+  spec?: ControlModelBinding | SettingsModalSchema
+  /** Two-way bound values when `spec` is set. */
   values?: Record<string, unknown>
-  /** Optional dynamic enhancements (validators, dynamic options, callbacks). */
-  enhancements?: FormEnhancements<Record<string, unknown>>
   /** Optional user type override for permission-filtered settings content. Defaults to SDK auth/platform context. */
   userType?: SettingsUserType
 }
@@ -116,43 +103,38 @@ const props = withDefaults(defineProps<Props>(), {
   showAppearance: true,
   size: 'lg',
   layout: undefined,
-  model: undefined,
+  spec: undefined,
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
+  'update:open': [value: boolean]
   'update:values': [data: Record<string, unknown>]
   close: []
 }>()
 
 const settings = useSettingsStore()
 const auth = useAuthStore()
-const { user: platformUser } = usePlatformContext()
+const { user: platformUser, integrated, isAdmin: platformIsAdmin } = usePlatform()
+// With sign-in turned off (`authRequired: false`) every caller of an integrated page is the
+// implicit administrator, and usePlatform reports a page with no user as admin.
+const implicitPlatformAdmin = computed(() => integrated.value && !platformUser.value && platformIsAdmin.value)
 
-const resolvedModel = computed<ControlModelBinding | undefined>(() => {
-  return resolveControlModel(props.model)
-})
-const resolvedControls = computed<ControlSchema | undefined>(() =>
-  props.controls ?? resolvedModel.value?.controls,
-)
-const resolvedControlOptions = computed<ControlWorkspaceOptions>(() =>
-  mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, props.controlOptions)
+const resolvedModel = computed<ControlModelBinding | undefined>(() =>
+  isControlModelBinding(props.spec) ? props.spec : undefined,
 )
 const sourceSettingsSchema = computed<SettingsModalSchema | undefined>(() =>
-  props.schema ?? (
-    resolvedControls.value
-      ? controlsToSettingsSchema(resolvedControls.value, resolvedControlOptions.value)
-      : undefined
-  ),
+  resolvedModel.value
+    ? controlsToSettingsSchema(resolvedModel.value.controls, resolvedModel.value.controlOptions)
+    : props.spec as SettingsModalSchema | undefined,
 )
 const currentAccessUser = computed<PermissionUser | null>(() => {
   if (props.userType) {
     return { role: props.userType === 'admin' ? 'admin' : 'user' }
   }
-  return auth.userInfo ?? platformUser.value ?? null
+  return auth.userInfo ?? platformUser.value ?? (implicitPlatformAdmin.value ? { role: 'admin' } : null)
 })
 const isAccessUserAuthenticated = computed(() =>
-  props.userType !== undefined || auth.isAuthenticated || !!platformUser.value,
+  props.userType !== undefined || auth.isAuthenticated || !!platformUser.value || implicitPlatformAdmin.value,
 )
 const settingsSchema = computed<SettingsModalSchema | undefined>(() => {
   if (!sourceSettingsSchema.value) return undefined
@@ -160,7 +142,7 @@ const settingsSchema = computed<SettingsModalSchema | undefined>(() => {
 })
 const isSchemaDriven = computed(() => !!settingsSchema.value)
 const resolvedValues = computed<Record<string, unknown>>(() => ({
-  ...(resolvedControlOptions.value.initialValues ?? {}),
+  ...(resolvedModel.value?.controlOptions.initialValues ?? {}),
   ...(props.values ?? {}),
 }))
 
@@ -169,7 +151,7 @@ const resolvedValues = computed<Record<string, unknown>>(() => ({
 const builder = useFormBuilder(
   settingsSchema.value ? buildFlatSettingsSchema(settingsSchema.value) : { sections: [] },
   resolvedValues.value,
-  props.enhancements,
+  resolvedModel.value?.controlOptions.enhancements,
 )
 
 watch(
@@ -402,7 +384,7 @@ watch(
 )
 
 function handleClose() {
-  emit('update:modelValue', false)
+  emit('update:open', false)
   emit('close')
 }
 
@@ -421,14 +403,14 @@ function canShowForCurrentUser(item: AccessControlled): boolean {
 
 <template>
   <BaseModal
-    :model-value="modelValue"
+    :open="open"
     :title="title"
     :size="size"
     :layout="baseLayout"
     :tabs="modalTabs"
     :active-tab="isSearching ? '' : activeTab"
     @update:active-tab="selectTab"
-    @update:model-value="emit('update:modelValue', $event)"
+    @update:open="emit('update:open', $event)"
     @close="handleClose"
   >
     <template #header>

package/src/components/SmartGroup.types.ts

@@ -1,7 +1,7 @@
 /**
- * Shared prop and payload types for the Smart Group — Full View components
- * (`SmartGroupModal` shell + `SmartGroupFieldRecipe` auto mode +
- * `SmartGroupManual` manual mode).
+ * Shared prop and payload types for the private Smart Group components
+ * (`SmartGroupFieldRecipe` auto mode + `SmartGroupManual` manual mode) that
+ * `AutoGroupModalInternal` drives. They are not SDK exports.
  */
 import type {
   FieldRecipeGroup,
@@ -11,8 +11,6 @@ import type {
 } from './SmartGroupFieldRecipe.groups'
 import type { ManualSample } from './SmartGroupManual.cohorts'
 
-export type SmartGroupMode = 'auto' | 'manual'
-
 /** A colour swatch in the manual assignment bar. */
 export interface ManualPaletteEntry {
   /** CSS colour value (e.g. `var(--mint-sample-1)`). */
@@ -63,7 +61,7 @@ export interface SmartGroupFieldRecipeProps {
   /** Colour of the QC pool's count bar. The QC dot is always the neutral QC marker (3a). */
   qcColor?: string
 
-  // ── Controlled mode (driven by AutoGroupModal over the useAutoGroup engine).
+  // ── Controlled mode (driven by AutoGroupModalInternal over the useAutoGroup engine).
   // When these are provided the component renders the supplied data and emits
   // events instead of running its own fixture grouping logic.
   /** Controls the field toggles; when set, clicking a toggle emits `toggle`. */

package/src/components/SmartGroupFieldRecipe.vue

@@ -46,7 +46,7 @@ import { sampleTypeMarker } from '../utils/sampleTypeMarker'
 import { useListReorder } from '../composables/useListReorder'
 import ActionMenu from './ActionMenu.vue'
 import BaseButton from './BaseButton.vue'
-import BaseToggle from './BaseToggle.vue'
+import BaseCheckbox from './BaseCheckbox.vue'
 import LoadingSpinner from './LoadingSpinner.vue'
 import SegmentedControl from './SegmentedControl.vue'
 import type { ActionMenuItem } from '../types/components'
@@ -119,7 +119,7 @@ const MAX_BAR = 44
 const QC_DOT_STYLE = sampleTypeMarker('qc', '').style
 
 // CSV upload (presentational): the component only surfaces the control and
-// emits the chosen/dropped File; AutoGroupModal parses it into the engine.
+// emits the chosen/dropped File; AutoGroupModalInternal parses it into the engine.
 const fileInput = ref<HTMLInputElement | null>(null)
 const dragOver = ref(false)
 let dragDepth = 0
@@ -173,7 +173,7 @@ const QC_ROUTE_OPTIONS: { value: QcRoute; label: string }[] = [
 ]
 
 // Uncontrolled fallback state (used by the standalone story). In controlled
-// mode AutoGroupModal supplies `enabled` / `layers` / `groups` / `route` +
+// mode AutoGroupModalInternal supplies `enabled` / `layers` / `groups` / `route` +
 // `qcChip` and the `toggle` / `move` / `update:route` events drive the engine
 // instead of this local state. `orderInner` tracks the uncontrolled layer
 // order: field indices in toggle order, first entry = hierarchy layer 1.
@@ -506,7 +506,8 @@ function onApply() {
               </template>
               <span class="sg-field__vals">{{ card.field.vals }}</span>
               <span v-if="hints?.[card.index]" class="fr-row__hint">{{ hints[card.index] }}</span>
-              <BaseToggle
+              <BaseCheckbox
+                type="switch"
                 size="sm"
                 :model-value="true"
                 :aria-label="'Group by ' + card.field.key"
@@ -529,7 +530,8 @@ function onApply() {
                 <span class="sg-field__name">{{ card.field.key }}</span>
                 <span class="sg-field__role" :class="{ 'sg-field__role--rep': card.field.rep }">{{ card.field.role }}</span>
                 <span class="sg-field__vals">{{ card.field.vals }}</span>
-                <BaseToggle
+                <BaseCheckbox
+                  type="switch"
                   size="sm"
                   :model-value="false"
                   :aria-label="'Group by ' + card.field.key"