@morscherlab/mint-sdk 1.0.0-rc.5 → 1.0.0-rc.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.0.0-rc.5",
+  "version": "1.0.0-rc.7",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
   "type": "module",
   "main": "./dist/index.js",

package/src/__tests__/components/AppSidebar.test.ts

@@ -238,6 +238,46 @@ describe('AppSidebar', () => {
       expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(0)
     })
 
+    it('renders a default collapsed rail from active sections', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: {
+            analysis: [
+              {
+                id: 'filters',
+                label: 'Feature Filters',
+                icon: 'M3 4.5h18m-15 6h12m-9 6h6',
+                badge: 2,
+                badgeTone: 'warning',
+              },
+            ],
+          },
+          activeView: 'analysis',
+          collapsible: true,
+          collapsed: true,
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar__rail-item').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar__rail-svg').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar__rail-badge').text()).toBe('2')
+      expect(wrapper.find('.mint-sidebar__rail-badge').classes()).toContain('mint-sidebar__rail-badge--warning')
+    })
+
+    it('expands when a default collapsed rail item is clicked', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          collapsible: true,
+          defaultCollapsed: true,
+        },
+      })
+
+      await wrapper.get('.mint-sidebar__rail-item').trigger('click')
+      expect(wrapper.emitted('update:collapsed')).toEqual([[false]])
+    })
+
     it('renders an empty analysis shell for route-owned sidebar content', () => {
       const wrapper = mount(AppSidebar, {
         props: {
@@ -297,6 +337,33 @@ describe('AppSidebar', () => {
       expect(cards[0].props('icon')).toBe('⚙')
     })
 
+    it('passes section badges and actions to CollapsibleCard and re-emits actions', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: {
+            analysis: [
+              {
+                id: 'filters',
+                label: 'Feature Filters',
+                badge: 4,
+                badgeTone: 'cta',
+                actions: [{ id: 'reset', label: 'Reset filters' }],
+              },
+            ],
+          },
+          activeView: 'analysis',
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      const card = wrapper.findComponent(CollapsibleCard)
+      expect(card.props('badge')).toBe(4)
+      expect(card.props('badgeTone')).toBe('cta')
+
+      await card.vm.$emit('action', 'reset')
+      expect(wrapper.emitted('section-action')).toEqual([['filters', 'reset']])
+    })
+
     it('should respect defaultOpen on sections', () => {
       const wrapper = mount(AppSidebar, {
         props: { panels: samplePanels, activeView: 'analysis' },

package/src/__tests__/components/CollapsibleCard.test.ts

@@ -423,6 +423,53 @@ describe('CollapsibleCard', () => {
     })
   })
 
+  describe('badges and header actions', () => {
+    it('renders a compact badge in the header controls area', () => {
+      const wrapper = mount(CollapsibleCard, {
+        props: { title: 'Feature Filters', badge: 3, badgeTone: 'warning' },
+      })
+
+      const badge = wrapper.get('.mint-collapsible-card__badge')
+      expect(badge.text()).toBe('3')
+      expect(badge.classes()).toContain('mint-collapsible-card__badge--warning')
+    })
+
+    it('renders icon-only header actions and emits their ids', async () => {
+      const wrapper = mount(CollapsibleCard, {
+        props: {
+          title: 'Feature Filters',
+          actions: [
+            {
+              id: 'reset',
+              label: 'Reset filters',
+              icon: 'M16.023 9.348h4.992M2.985 19.644v-4.992',
+              tone: 'neutral',
+            },
+          ],
+        },
+      })
+
+      const action = wrapper.get('.mint-collapsible-card__action')
+      expect(action.attributes('aria-label')).toBe('Reset filters')
+      expect(wrapper.find('.mint-collapsible-card__action-icon').exists()).toBe(true)
+
+      await action.trigger('click')
+      expect(wrapper.emitted('action')).toEqual([['reset']])
+    })
+
+    it('does not emit disabled actions', async () => {
+      const wrapper = mount(CollapsibleCard, {
+        props: {
+          title: 'Feature Filters',
+          actions: [{ id: 'reset', label: 'Reset filters', disabled: true }],
+        },
+      })
+
+      await wrapper.get('.mint-collapsible-card__action').trigger('click')
+      expect(wrapper.emitted('action')).toBeUndefined()
+    })
+  })
+
   describe('content slot', () => {
     it('should render default slot content', () => {
       const wrapper = mount(CollapsibleCard, {

package/src/__tests__/components/FormBuilder.test.ts

@@ -3,6 +3,7 @@ import { nextTick } from 'vue'
 import { describe, expect, it } from 'vitest'
 import FormBuilder from '../../components/FormBuilder.vue'
 import FormActions from '../../components/FormActions.vue'
+import Tooltip from '../../components/Tooltip.vue'
 import { defineControlModel, useControlWorkspace, type ControlSchema } from '../../composables/useControlSchema'
 import type { FormSchema } from '../../types/form-builder'
 
@@ -286,6 +287,62 @@ describe('FormBuilder', () => {
     expect(wrapper.find('.mint-form-actions').exists()).toBe(false)
   })
 
+  it('renders boolean fields as compact choice rows', async () => {
+    const schema: FormSchema = {
+      sections: [
+        {
+          id: 'display',
+          title: 'Display',
+          fields: [
+            {
+              name: 'showOutliers',
+              label: 'Show outliers',
+              type: 'toggle',
+              defaultValue: true,
+              hint: 'Keep flagged peaks visible',
+              icon: ['M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'],
+            },
+            {
+              name: 'includeMetadata',
+              label: 'Include metadata',
+              type: 'checkbox',
+              defaultValue: false,
+              hint: 'Add method context',
+              icon: ['M12 3c4.418 0 8 1.343 8 3s-3.582 3-8 3-8-1.343-8-3z'],
+            },
+          ],
+        },
+      ],
+    }
+
+    const wrapper = mount(FormBuilder, {
+      props: { schema, showActions: false },
+    })
+
+    const toggle = wrapper.get('.mint-toggle--row')
+    const checkbox = wrapper.get('.mint-checkbox--row')
+
+    expect(toggle.text()).toContain('Show outliers')
+    expect(toggle.text()).not.toContain('Keep flagged peaks visible')
+    expect(toggle.find('.mint-toggle__row-svg').exists()).toBe(true)
+    expect(wrapper.findAll('.mint-form-field__label')).toHaveLength(0)
+
+    expect(checkbox.text()).toContain('Include metadata')
+    expect(checkbox.text()).not.toContain('Add method context')
+    expect(checkbox.find('.mint-checkbox__row-svg').exists()).toBe(true)
+    expect(wrapper.findAllComponents(Tooltip).map(tooltip => tooltip.props('text'))).toEqual([
+      'Keep flagged peaks visible',
+      'Add method context',
+    ])
+
+    await toggle.trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)?.[0]).toMatchObject({
+      showOutliers: false,
+      includeMetadata: false,
+    })
+  })
+
   it('renders default actions by default', () => {
     const wrapper = mount(FormBuilder, {
       props: { controls },

package/src/__tests__/components/PluginWorkspaceView.shell.test.ts

@@ -12,6 +12,7 @@ describe('PluginWorkspaceView shell helpers', () => {
       actions: undefined,
       'settings-tab-analysis': undefined,
       header: undefined,
+      'collapsed-footer': undefined,
       'section-import': undefined,
       unrelated: undefined,
     }
@@ -22,6 +23,7 @@ describe('PluginWorkspaceView shell helpers', () => {
     ])
     expect(getPluginWorkspaceSidebarSlotNames(slots)).toEqual([
       'header',
+      'collapsed-footer',
       'section-import',
     ])
   })

package/src/components/AppSidebar.story.vue

@@ -4,6 +4,7 @@ import AppSidebar from './AppSidebar.vue'
 import BaseSlider from './BaseSlider.vue'
 import BaseSelect from './BaseSelect.vue'
 import BaseToggle from './BaseToggle.vue'
+import BaseCheckbox from './BaseCheckbox.vue'
 import BaseButton from './BaseButton.vue'
 import BaseInput from './BaseInput.vue'
 import NumberInput from './NumberInput.vue'
@@ -25,6 +26,10 @@ const icons = {
   zap: 'M13 2L3 14h9l-1 8 10-12h-9l1-8',
   route: ['M18 6l-6 6-4-4-6 6'],
   settings: ['M12 2L2 7l10 5 10-5-10-5z', 'M2 17l10 5 10-5', 'M2 12l10 5 10-5'],
+  reset: ['M16.023 9.348h4.992v-.001', 'M2.985 19.644v-4.992', 'M4.031 9.865a8.25 8.25 0 0113.803-3.7'],
+  eye: ['M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z', 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'],
+  chart: ['M3 3v18h18', 'M7 15l3-3 3 2 4-6'],
+  database: ['M12 3c4.418 0 8 1.343 8 3s-3.582 3-8 3-8-1.343-8-3 3.582-3 8-3z', 'M4 6v6c0 1.657 3.582 3 8 3s8-1.343 8-3V6', 'M4 12v6c0 1.657 3.582 3 8 3s8-1.343 8-3v-6'],
 }
 
 /* --- Sequence builder panels --- */
@@ -46,6 +51,8 @@ const sequencePanels: Record<string, SidebarToolSection[]> = {
       iconColor: '#6366f1',
       iconBg: '#e0e7ff',
       showToggle: true,
+      badge: 'on',
+      badgeTone: 'success',
     },
     {
       id: 'randomize',
@@ -55,6 +62,11 @@ const sequencePanels: Record<string, SidebarToolSection[]> = {
       iconColor: '#6366f1',
       iconBg: '#e0e7ff',
       showToggle: true,
+      badge: 3,
+      badgeTone: 'cta',
+      actions: [
+        { id: 'reset-randomize', label: 'Reset randomization', icon: icons.reset, tone: 'neutral' },
+      ],
       defaultOpen: false,
     },
     {
@@ -128,6 +140,7 @@ const methods = [
 ]
 const showOutliers = ref(true)
 const logScale = ref(false)
+const includeMetadata = ref(true)
 const polarity = ref('negative')
 const container = ref('vial')
 const expNumber = ref(1)
@@ -169,6 +182,10 @@ const schemaControls = defineControls({
   showOutliers: {
     label: 'Show outliers',
     default: true,
+    hint: 'Keep flagged points visible',
+    icon: icons.eye,
+    iconColor: '#0ea5e9',
+    iconBg: '#e0f2fe',
     section: 'display',
     sectionLabel: 'Display',
     sectionSubtitle: 'Result filters',
@@ -206,7 +223,14 @@ const modelDrivenSidebarModel = defineControlModel({
             defaultOpen: false,
           },
           controls: {
-            showOutliers: true,
+            showOutliers: {
+              label: 'Show outliers',
+              default: true,
+              hint: 'Keep flagged points visible',
+              icon: icons.eye,
+              iconColor: '#0ea5e9',
+              iconBg: '#e0f2fe',
+            },
             minPeakArea: { type: 'number', default: 1000, min: 0 },
           },
         },
@@ -301,7 +325,15 @@ function initSimpleToolkit() {
             </div>
           </template>
           <template #section-method>
-            <BaseToggle model-value label="Use custom method paths" />
+            <BaseToggle
+              model-value
+              variant="row"
+              label="Use custom method paths"
+              description="Override the default acquisition directory"
+              :icon="icons.route"
+              icon-color="#8b5cf6"
+              icon-bg="#ede9fe"
+            />
             <BaseSelect
               model-value=""
               placeholder="-- Select Method --"
@@ -445,13 +477,46 @@ function initSimpleToolkit() {
               <BaseSelect v-model="method" label="Method" :options="methods" />
             </template>
             <template #section-filters>
-              <BaseToggle v-model="showOutliers" label="Exclude outliers" />
+              <BaseToggle
+                v-model="showOutliers"
+                variant="row"
+                label="Exclude outliers"
+                description="Hide flagged injections from summaries"
+                :icon="icons.eye"
+                icon-color="#0ea5e9"
+                icon-bg="#e0f2fe"
+              />
             </template>
             <template #section-display>
-              <BaseToggle v-model="showOutliers" label="Show outliers" />
-              <BaseToggle v-model="logScale" label="Log scale" />
+              <BaseToggle
+                v-model="showOutliers"
+                variant="row"
+                label="Show outliers"
+                description="Keep flagged peaks visible"
+                :icon="icons.eye"
+                icon-color="#0ea5e9"
+                icon-bg="#e0f2fe"
+              />
+              <BaseToggle
+                v-model="logScale"
+                variant="row"
+                label="Log scale"
+                description="Compress high-intensity spread"
+                :icon="icons.chart"
+                icon-color="#8b5cf6"
+                icon-bg="#ede9fe"
+              />
             </template>
             <template #section-export>
+              <BaseCheckbox
+                v-model="includeMetadata"
+                variant="row"
+                label="Include metadata"
+                description="Add method and sample context"
+                :icon="icons.database"
+                icon-color="#10b981"
+                icon-bg="#d1fae5"
+              />
               <BaseButton size="sm" variant="secondary">Export CSV</BaseButton>
               <BaseButton size="sm" variant="secondary">Export PNG</BaseButton>
             </template>
@@ -499,7 +564,15 @@ function initSimpleToolkit() {
             <BaseSelect v-model="method" label="Method" :options="methods" />
           </template>
           <template #section-filters>
-            <BaseToggle v-model="showOutliers" label="Exclude outliers" />
+            <BaseToggle
+              v-model="showOutliers"
+              variant="row"
+              label="Exclude outliers"
+              description="Hide flagged injections from summaries"
+              :icon="icons.eye"
+              icon-color="#0ea5e9"
+              icon-bg="#e0f2fe"
+            />
           </template>
           <template #footer>
             <BaseButton size="sm" variant="ghost" style="width: 100%;">Reset Defaults</BaseButton>

package/src/components/AppSidebar.vue

@@ -153,6 +153,7 @@ const emit = defineEmits<{
   'update:modelValue': [values: Record<string, unknown>]
   'update:values': [values: Record<string, unknown>]
   'update:collapsed': [value: boolean]
+  'section-action': [sectionId: string, actionId: string]
   'form-submit': [sectionId: string, values: Record<string, unknown>]
   'form-cancel': [sectionId: string]
 }>()
@@ -268,6 +269,30 @@ function expandCollapsed() {
   collapsedModel.value = false
 }
 
+function handleSectionAction(sectionId: string, actionId: string) {
+  emit('section-action', sectionId, actionId)
+}
+
+function isSvgIcon(icon?: string | string[]): boolean {
+  if (!icon) return false
+  return Array.isArray(icon) || icon.startsWith('M') || icon.startsWith('m')
+}
+
+function sectionInitial(section: SidebarToolSection): string {
+  return section.label.trim().charAt(0).toUpperCase() || '?'
+}
+
+function railIconStyle(section: SidebarToolSection): Record<string, string> {
+  return {
+    backgroundColor: section.iconBg ?? 'var(--color-primary-soft)',
+    color: section.iconColor ?? 'var(--color-primary)',
+  }
+}
+
+function badgeToneClass(section: SidebarToolSection): string {
+  return `mint-sidebar__rail-badge--${section.badgeTone ?? 'cta'}`
+}
+
 function mergeSidebarPanels(
   generated: Record<string, SidebarToolSection[]>,
   explicit: Record<string, SidebarToolSection[]>,
@@ -359,10 +384,14 @@ function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): strin
         :icon="section.icon"
         :icon-color="section.iconColor"
         :icon-bg="section.iconBg"
+        :badge="section.badge"
+        :badge-tone="section.badgeTone"
+        :actions="section.actions"
         :dense="dense"
         :default-open="section.defaultOpen !== false"
         :show-toggle="section.showToggle"
         :toggle-value="toggleState[section.id] ?? false"
+        @action="handleSectionAction(section.id, $event)"
         @update:toggle-value="emit('update:toggle', section.id, $event)"
       >
         <slot :name="`section-${section.id}`">
@@ -398,10 +427,53 @@ function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): strin
       />
     </div>
 
+    <div v-else class="mint-sidebar__collapsed mint-sidebar__collapsed--default">
+      <button
+        v-for="section in activeSections"
+        :key="section.id"
+        type="button"
+        class="mint-sidebar__rail-item"
+        :aria-label="`Expand ${section.label}`"
+        :title="section.label"
+        @click="expandCollapsed"
+      >
+        <span class="mint-sidebar__rail-icon" :style="railIconStyle(section)">
+          <svg
+            v-if="section.icon && isSvgIcon(section.icon)"
+            class="mint-sidebar__rail-svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <template v-if="Array.isArray(section.icon)">
+              <path v-for="(d, i) in section.icon" :key="i" :d="d" />
+            </template>
+            <path v-else :d="section.icon" />
+          </svg>
+          <span v-else class="mint-sidebar__rail-text-icon">
+            {{ section.icon || sectionInitial(section) }}
+          </span>
+        </span>
+        <span
+          v-if="section.badge !== undefined"
+          :class="['mint-sidebar__rail-badge', badgeToneClass(section)]"
+        >
+          {{ section.badge }}
+        </span>
+      </button>
+    </div>
+
     <!-- Footer slot -->
     <div v-if="!collapsedModel && $slots.footer" class="mint-sidebar__footer">
       <slot name="footer" />
     </div>
+    <div v-else-if="collapsedModel && $slots['collapsed-footer']" class="mint-sidebar__footer mint-sidebar__footer--collapsed">
+      <slot name="collapsed-footer" />
+    </div>
   </aside>
 </template>
 

package/src/components/BaseCheckbox.story.vue

@@ -4,6 +4,10 @@ import BaseCheckbox from './BaseCheckbox.vue'
 
 const sizes = ['sm', 'md', 'lg'] as const
 const checked = ref(true)
+const icons = {
+  database: ['M12 3c4.418 0 8 1.343 8 3s-3.582 3-8 3-8-1.343-8-3z', 'M4 6v6c0 1.657 3.582 3 8 3s8-1.343 8-3V6', 'M4 12v6c0 1.657 3.582 3 8 3s8-1.343 8-3v-6'],
+  file: ['M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z', 'M14 2v6h6', 'M16 13H8', 'M16 17H8'],
+}
 </script>
 
 <template>
@@ -53,6 +57,29 @@ const checked = ref(true)
       </div>
     </Variant>
 
+    <Variant title="Choice Rows">
+      <div style="padding: 2rem; max-width: 360px; display: flex; flex-direction: column; gap: 0.5rem;">
+        <BaseCheckbox
+          v-model="checked"
+          variant="row"
+          label="Include metadata"
+          description="Add method and sample context"
+          :icon="icons.database"
+          icon-color="#10b981"
+          icon-bg="#d1fae5"
+        />
+        <BaseCheckbox
+          :model-value="false"
+          variant="row"
+          label="Attach report"
+          description="Include the rendered summary PDF"
+          :icon="icons.file"
+          icon-color="#6366f1"
+          icon-bg="#e0e7ff"
+        />
+      </div>
+    </Variant>
+
     <Variant title="Disabled States">
       <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem;">
         <BaseCheckbox :model-value="false" label="Disabled unchecked" disabled />

package/src/components/BaseCheckbox.vue

@@ -1,16 +1,24 @@
 <script setup lang="ts">
 /** Renders a styled checkbox with an optional label, size variants, and disabled state. */
+import Tooltip from './Tooltip.vue'
+
 interface Props {
   modelValue?: boolean
   label?: string
+  description?: string
+  icon?: string | string[]
+  iconColor?: string
+  iconBg?: string
   disabled?: boolean
   size?: 'sm' | 'md' | 'lg'
+  variant?: 'default' | 'row'
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
   disabled: false,
   size: 'md',
+  variant: 'default',
 })
 
 const emit = defineEmits<{
@@ -21,15 +29,69 @@ function handleChange(event: Event) {
   const target = event.target as HTMLInputElement
   emit('update:modelValue', target.checked)
 }
+
+function isSvgIcon(icon?: string | string[]): boolean {
+  if (!icon) return false
+  return Array.isArray(icon) || icon.startsWith('M') || icon.startsWith('m')
+}
+
+function iconStyle(): Record<string, string> {
+  return {
+    color: props.iconColor ?? (props.modelValue ? 'var(--color-primary)' : 'var(--text-muted)'),
+  }
+}
 </script>
 
 <template>
   <label
     :class="[
       'mint-checkbox',
+      `mint-checkbox--${props.variant}`,
       props.disabled ? 'mint-checkbox--disabled' : '',
+      props.modelValue ? 'mint-checkbox--checked' : '',
     ]"
   >
+    <span
+      v-if="props.variant === 'row' && props.icon"
+      class="mint-checkbox__row-icon"
+      :style="iconStyle()"
+      aria-hidden="true"
+    >
+      <svg
+        v-if="isSvgIcon(props.icon)"
+        class="mint-checkbox__row-svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <template v-if="Array.isArray(props.icon)">
+          <path v-for="(d, i) in props.icon" :key="i" :d="d" />
+        </template>
+        <path v-else :d="props.icon" />
+      </svg>
+      <span v-else class="mint-checkbox__row-text-icon">{{ props.icon }}</span>
+    </span>
+    <span
+      v-if="props.variant === 'row' && props.label"
+      class="mint-checkbox__copy"
+    >
+      <Tooltip
+        v-if="props.description"
+        :text="props.description"
+        position="right"
+        max-width="16rem"
+      >
+        <span :class="['mint-checkbox__label', `mint-checkbox__label--${props.size}`, 'mint-checkbox__label--tooltip']">
+          {{ props.label }}
+        </span>
+      </Tooltip>
+      <span v-else :class="['mint-checkbox__label', `mint-checkbox__label--${props.size}`]">
+        {{ props.label }}
+      </span>
+    </span>
     <div class="mint-checkbox__input-wrapper">
       <input
         type="checkbox"
@@ -58,7 +120,7 @@ function handleChange(event: Event) {
         </svg>
       </div>
     </div>
-    <span v-if="props.label" :class="['mint-checkbox__label', `mint-checkbox__label--${props.size}`]">
+    <span v-if="props.label && props.variant !== 'row'" :class="['mint-checkbox__label', `mint-checkbox__label--${props.size}`]">
       {{ props.label }}
     </span>
   </label>

package/src/components/BaseToggle.story.vue

@@ -5,6 +5,10 @@ import BaseToggle from './BaseToggle.vue'
 const sizes = ['sm', 'md', 'lg'] as const
 const toggleOn = ref(true)
 const toggleOff = ref(false)
+const icons = {
+  eye: ['M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z', 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'],
+  chart: ['M3 3v18h18', 'M7 15l3-3 3 2 4-6'],
+}
 </script>
 
 <template>
@@ -54,6 +58,29 @@ const toggleOff = ref(false)
       </div>
     </Variant>
 
+    <Variant title="Choice Rows">
+      <div style="padding: 2rem; max-width: 360px; display: flex; flex-direction: column; gap: 0.5rem;">
+        <BaseToggle
+          v-model="toggleOn"
+          variant="row"
+          label="Show outliers"
+          description="Keep flagged peaks visible"
+          :icon="icons.eye"
+          icon-color="#0ea5e9"
+          icon-bg="#e0f2fe"
+        />
+        <BaseToggle
+          v-model="toggleOff"
+          variant="row"
+          label="Log scale"
+          description="Compress high-intensity spread"
+          :icon="icons.chart"
+          icon-color="#8b5cf6"
+          icon-bg="#ede9fe"
+        />
+      </div>
+    </Variant>
+
     <Variant title="Without Label">
       <div style="padding: 2rem; display: flex; gap: 1.5rem; align-items: center;">
         <BaseToggle v-model="toggleOn" size="sm" />