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

package/src/components/AlertBox.story.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import AlertBox from './AlertBox.vue'
-import type { AlertType } from '../types'
+import type { Tone } from '../types'
 
-const alertTypes: AlertType[] = ['info', 'success', 'warning', 'error']
+const tones: Tone[] = ['info', 'success', 'warning', 'error', 'neutral', 'primary', 'cta']
 const dismissed = ref(false)
 const actionFired = ref('')
 
@@ -24,7 +24,7 @@ function handleAction(label: string) {
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
           <AlertBox
-            :type="state.type"
+            :tone="state.tone"
             :title="state.showTitle ? state.title : undefined"
             :dismissible="state.dismissible"
             :action-label="state.showAction ? state.actionLabel : undefined"
@@ -44,9 +44,9 @@ function handleAction(label: string) {
 
       <template #controls="{ state }">
         <HstSelect
-          v-model="state.type"
-          title="Type"
-          :options="alertTypes.map(t => ({ label: t, value: t }))"
+          v-model="state.tone"
+          title="Tone"
+          :options="tones.map(t => ({ label: t, value: t }))"
         />
         <HstCheckbox v-model="state.showTitle" title="Show Title" />
         <HstText v-model="state.title" title="Title" />
@@ -57,15 +57,15 @@ function handleAction(label: string) {
       </template>
     </Variant>
 
-    <Variant title="All Types">
+    <Variant title="All Tones">
       <div style="padding: 2rem; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
         <AlertBox
-          v-for="type in alertTypes"
-          :key="type"
-          :type="type"
-          :title="`${type.charAt(0).toUpperCase() + type.slice(1)} Alert`"
+          v-for="tone in tones"
+          :key="tone"
+          :tone="tone"
+          :title="`${tone.charAt(0).toUpperCase() + tone.slice(1)} Alert`"
         >
-          This is a {{ type }} alert message with supporting details.
+          This is a {{ tone }} alert message with supporting details.
         </AlertBox>
       </div>
     </Variant>
@@ -73,7 +73,7 @@ function handleAction(label: string) {
     <Variant title="With Action Button">
       <div style="padding: 2rem; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
         <AlertBox
-          type="error"
+          tone="error"
           title="Server connection lost"
           action-label="Restart Server"
           @action="handleAction('Restart Server')"
@@ -82,7 +82,7 @@ function handleAction(label: string) {
         </AlertBox>
 
         <AlertBox
-          type="warning"
+          tone="warning"
           title="Experiment incomplete"
           action-label="Resume"
           dismissible
@@ -92,7 +92,7 @@ function handleAction(label: string) {
         </AlertBox>
 
         <AlertBox
-          type="info"
+          tone="info"
           title="Update available"
           action-label="Update Now"
           @action="handleAction('Update Now')"
@@ -101,7 +101,7 @@ function handleAction(label: string) {
         </AlertBox>
 
         <AlertBox
-          type="success"
+          tone="success"
           title="Analysis complete"
           action-label="View Results"
           @action="handleAction('View Results')"
@@ -120,7 +120,7 @@ function handleAction(label: string) {
 
     <Variant title="Custom Actions Slot">
       <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
-        <AlertBox type="error" title="Plugin conflict detected">
+        <AlertBox tone="error" title="Plugin conflict detected">
           <template #default>
             mint-plugin-drp requires numpy &gt;=2.0 but the current environment has numpy 1.26.4.
           </template>
@@ -146,7 +146,7 @@ function handleAction(label: string) {
       <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
         <AlertBox
           v-if="!dismissed"
-          type="warning"
+          tone="warning"
           title="Experiment incomplete"
           dismissible
           @dismiss="handleDismiss"
@@ -161,10 +161,10 @@ function handleAction(label: string) {
 
     <Variant title="Without Title">
       <div style="padding: 2rem; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
-        <AlertBox type="info">
+        <AlertBox tone="info">
           A simple informational message without a title.
         </AlertBox>
-        <AlertBox type="error">
+        <AlertBox tone="error">
           Something went wrong while processing the sample batch.
         </AlertBox>
       </div>
@@ -172,7 +172,7 @@ function handleAction(label: string) {
 
     <Variant title="Rich Content">
       <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
-        <AlertBox type="success" title="Analysis Complete" action-label="Download Report">
+        <AlertBox tone="success" title="Analysis Complete" action-label="Download Report">
           <p style="margin: 0 0 0.5rem;">
             Successfully processed <strong>96 wells</strong> across 3 plates.
           </p>
@@ -186,16 +186,16 @@ function handleAction(label: string) {
     </Variant>
     <Variant title="Centered alignment (default)">
       <div style="padding: 2rem; max-width: 520px; display: flex; flex-direction: column; gap: 1rem;">
-        <AlertBox type="success" title="Analysis complete" action-label="View results">
+        <AlertBox tone="success" title="Analysis complete" action-label="View results">
           Dose-response fit converged for all 96 wells.
         </AlertBox>
-        <AlertBox type="error" title="Upload failed" dismissible>
+        <AlertBox tone="error" title="Upload failed" dismissible>
           The file exceeded the 50 MB limit.
         </AlertBox>
-        <AlertBox type="warning" title="Low replicate count">
+        <AlertBox tone="warning" title="Low replicate count">
           Wells C2, C3, C4 only have 2 replicates — consider additional runs.
         </AlertBox>
-        <AlertBox type="info" title="New beta release">
+        <AlertBox tone="info" title="New beta release">
           Version 0.16.0-beta.3 ships a visual refresh for status components.
         </AlertBox>
       </div>

package/src/components/AlertBox.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 /** Inline alert banner with semantic icon, title, message slot, optional action button, and optional dismiss button. */
 import { useSlots } from 'vue'
-import type { AlertType } from '../types'
+import type { Tone } from '../types'
 import BaseButton from './BaseButton.vue'
 
 interface Props {
-  type?: AlertType
+  tone?: Tone
   title?: string
   dismissible?: boolean
   actionLabel?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  type: 'info',
+  tone: 'info',
   dismissible: false,
 })
 
@@ -28,23 +28,23 @@ const hasActions = () => !!props.actionLabel || !!slots.actions
 <template>
   <div
     class="mint-alert"
-    :class="`mint-alert--${props.type}`"
+    :class="`mint-alert--${props.tone}`"
     role="alert"
   >
     <!-- Lucide circle-check -->
-    <svg v-if="props.type === 'success'" class="mint-alert__icon mint-alert__icon--success" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <svg v-if="props.tone === 'success'" class="mint-alert__icon mint-alert__icon--success" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       <circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" />
     </svg>
     <!-- Lucide circle-x -->
-    <svg v-else-if="props.type === 'error'" class="mint-alert__icon mint-alert__icon--error" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <svg v-else-if="props.tone === 'error'" class="mint-alert__icon mint-alert__icon--error" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       <circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" />
     </svg>
     <!-- Lucide triangle-alert -->
-    <svg v-else-if="props.type === 'warning'" class="mint-alert__icon mint-alert__icon--warning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <svg v-else-if="props.tone === 'warning'" class="mint-alert__icon mint-alert__icon--warning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" />
     </svg>
     <!-- Lucide info -->
-    <svg v-else class="mint-alert__icon mint-alert__icon--info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <svg v-else :class="['mint-alert__icon', `mint-alert__icon--${props.tone}`]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
     </svg>
 

package/src/components/AppLayout.story.vue

@@ -5,7 +5,7 @@ import AppTopBar from './AppTopBar.vue'
 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 { ExperimentProvider } from '../__stories__/experiment-helpers'
 import type { PillNavItem, SidebarToolSection } from '../types'
@@ -52,32 +52,28 @@ const logScale = ref(false)
           >
             <template #topbar>
               <AppTopBar
+                :spec="{ pills: pillNav, themeToggle: true, homePath: '' }"
                 title="My Plugin"
                 subtitle="Laboratory Analysis"
-                :pill-nav="pillNav"
-                :current-pill-id="activeView"
-                :show-theme-toggle="true"
-                home-path=""
+                :pill="activeView"
                 @pill-select="item => activeView = item.id"
               />
             </template>
             <template #sidebar>
               <AppSidebar
-                :panels="toolPanels"
+                :spec="{ panels: toolPanels, floating: false, position: state.sidebarPosition }"
                 :active-view="activeView"
-                :floating="false"
-                :side="state.sidebarPosition"
               >
                 <template #section-parameters>
                   <BaseSlider v-model="threshold" label="Threshold" :min="0" :max="100" />
                   <BaseSelect v-model="method" label="Method" :options="methods" />
                 </template>
                 <template #section-filters>
-                  <BaseToggle v-model="showOutliers" label="Exclude outliers" />
+                  <BaseCheckbox type="switch" v-model="showOutliers" label="Exclude outliers" />
                 </template>
                 <template #section-display>
-                  <BaseToggle v-model="showOutliers" label="Show outliers" />
-                  <BaseToggle v-model="logScale" label="Log scale" />
+                  <BaseCheckbox type="switch" v-model="showOutliers" label="Show outliers" />
+                  <BaseCheckbox type="switch" v-model="logScale" label="Log scale" />
                 </template>
                 <template #section-export>
                   <BaseButton size="sm" variant="secondary">Export CSV</BaseButton>
@@ -117,20 +113,17 @@ const logScale = ref(false)
         >
           <template #topbar>
             <AppTopBar
+              :spec="{ pills: pillNav, themeToggle: true, homePath: '' }"
               title="Plate Analyzer"
               subtitle="Dashboard"
-              :pill-nav="pillNav"
-              :current-pill-id="activeView"
-              :show-theme-toggle="true"
-              home-path=""
+              :pill="activeView"
               @pill-select="item => activeView = item.id"
             />
           </template>
           <template #sidebar>
             <AppSidebar
-              :panels="toolPanels"
+              :spec="{ panels: toolPanels, floating: false }"
               :active-view="activeView"
-              :floating="false"
             >
               <template #header>
                 <span style="font-weight: 600; font-size: 0.875rem; color: var(--text-primary, #111827);">
@@ -142,11 +135,11 @@ const logScale = ref(false)
                 <BaseSelect v-model="method" label="Method" :options="methods" />
               </template>
               <template #section-filters>
-                <BaseToggle v-model="showOutliers" label="Exclude outliers" />
+                <BaseCheckbox type="switch" v-model="showOutliers" label="Exclude outliers" />
               </template>
               <template #section-display>
-                <BaseToggle v-model="showOutliers" label="Show outliers" />
-                <BaseToggle v-model="logScale" label="Log scale" />
+                <BaseCheckbox type="switch" v-model="showOutliers" label="Show outliers" />
+                <BaseCheckbox type="switch" v-model="logScale" label="Log scale" />
               </template>
               <template #section-export>
                 <BaseButton size="sm" variant="secondary">Export CSV</BaseButton>
@@ -177,7 +170,7 @@ const logScale = ref(false)
       <div style="height: 400px;">
         <AppLayout>
           <template #topbar>
-            <AppTopBar title="Simple Page" :show-theme-toggle="true" home-path="" />
+            <AppTopBar :spec="{ themeToggle: true, homePath: '' }" title="Simple Page" />
           </template>
           <div style="padding: 2rem;">
             <p style="color: var(--text-muted, #94a3b8);">Layout without a sidebar, just topbar and content.</p>
@@ -193,20 +186,18 @@ const logScale = ref(false)
           sidebar-width="260px"
         >
           <template #topbar>
-            <AppTopBar title="Right Sidebar Layout" home-path="" />
+            <AppTopBar :spec="{ homePath: '' }" title="Right Sidebar Layout" />
           </template>
           <template #sidebar>
             <AppSidebar
-              :panels="toolPanels"
+              :spec="{ panels: toolPanels, floating: false, position: 'right' }"
               active-view="analysis"
-              :floating="false"
-              side="right"
             >
               <template #section-parameters>
                 <BaseSlider v-model="threshold" label="Threshold" :min="0" :max="100" />
               </template>
               <template #section-filters>
-                <BaseToggle v-model="showOutliers" label="Exclude outliers" />
+                <BaseCheckbox type="switch" v-model="showOutliers" label="Exclude outliers" />
               </template>
             </AppSidebar>
           </template>
@@ -225,15 +216,17 @@ const logScale = ref(false)
           sidebar-width="320px"
         >
           <template #topbar>
-            <AppTopBar title="Responsive Analysis" home-path="" />
+            <AppTopBar :spec="{ homePath: '' }" title="Responsive Analysis" />
           </template>
           <template #sidebar>
             <AppSidebar
-              :floating="false"
-              title="Feature Filters"
-              subtitle="12 active samples"
-              :badge="2"
-              :panels="toolPanels"
+              :spec="{
+                floating: false,
+                title: 'Feature Filters',
+                subtitle: '12 active samples',
+                badge: 2,
+                panels: toolPanels,
+              }"
               active-view="analysis"
             >
               <template #section-parameters>
@@ -241,7 +234,7 @@ const logScale = ref(false)
                 <BaseSelect v-model="method" label="Method" :options="methods" />
               </template>
               <template #section-filters>
-                <BaseToggle v-model="showOutliers" label="Exclude outliers" />
+                <BaseCheckbox type="switch" v-model="showOutliers" label="Exclude outliers" />
               </template>
             </AppSidebar>
           </template>
@@ -261,31 +254,28 @@ const logScale = ref(false)
           <AppLayout :floating="true" sidebar-width="280px">
             <template #topbar>
               <AppTopBar
+                :spec="{ pills: pillNav, themeToggle: true, homePath: '' }"
                 title="IC50 Calculator"
                 subtitle="Analysis"
-                :pill-nav="pillNav"
-                :current-pill-id="activeView"
-                :show-theme-toggle="true"
-                home-path=""
+                :pill="activeView"
                 @pill-select="item => activeView = item.id"
               />
             </template>
             <template #sidebar>
               <AppSidebar
-                :panels="toolPanels"
+                :spec="{ panels: toolPanels, floating: false }"
                 :active-view="activeView"
-                :floating="false"
               >
                 <template #section-parameters>
                   <BaseSlider v-model="threshold" label="Threshold" :min="0" :max="100" />
                   <BaseSelect v-model="method" label="Method" :options="methods" />
                 </template>
                 <template #section-filters>
-                  <BaseToggle v-model="showOutliers" label="Exclude outliers" />
+                  <BaseCheckbox type="switch" v-model="showOutliers" label="Exclude outliers" />
                 </template>
                 <template #section-display>
-                  <BaseToggle v-model="showOutliers" label="Show outliers" />
-                  <BaseToggle v-model="logScale" label="Log scale" />
+                  <BaseCheckbox type="switch" v-model="showOutliers" label="Show outliers" />
+                  <BaseCheckbox type="switch" v-model="logScale" label="Log scale" />
                 </template>
                 <template #section-export>
                   <BaseButton size="sm" variant="secondary">Export CSV</BaseButton>
@@ -312,10 +302,9 @@ const logScale = ref(false)
           <AppLayout :floating="true">
             <template #topbar>
               <AppTopBar
+                :spec="{ themeToggle: true, homePath: '' }"
                 title="Plate Analyzer"
                 subtitle="Dashboard"
-                :show-theme-toggle="true"
-                home-path=""
               />
             </template>
             <div style="padding: 2rem;">

package/src/components/AppLayout.vue

@@ -13,7 +13,7 @@
  *     <AppTopBar title="My App" />
  *   </template>
  *   <template #sidebar>
- *     <AppSidebar :panels="toolPanels" :active-view="activeTab">
+ *     <AppSidebar :spec="{ panels: toolPanels }" :active-view="activeTab">
  *       <template #section-params>...</template>
  *     </AppSidebar>
  *   </template>

package/src/components/AppSidebar.story.vue

@@ -3,17 +3,13 @@ import { ref, reactive } from 'vue'
 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'
 import FileUploader from './FileUploader.vue'
 import FormField from './FormField.vue'
-import WellPlate from './WellPlate.vue'
 import { defineControlModel, defineControls, getControlDefaults } from '../composables/useControlSchema'
-import { useBioTemplateWorkspace } from '../composables/useBioTemplateWorkspace'
-import { createWellPlateScreenCollection } from '../templates'
 import type { SidebarToolSection } from '../types'
 
 type SidebarDensity = 'compact' | 'comfortable'
@@ -199,6 +195,7 @@ const schemaControls = defineControls({
   },
 })
 const controlValues = ref<Record<string, unknown>>({ ...getControlDefaults(schemaControls) })
+const schemaSidebarModel = defineControlModel({ controls: schemaControls })
 const modelDrivenSidebarModel = defineControlModel({
   views: {
     analysis: {
@@ -239,16 +236,6 @@ const modelDrivenSidebarModel = defineControlModel({
   },
 })
 const modelDrivenValues = ref<Record<string, unknown>>({})
-const templateCollection = createWellPlateScreenCollection({
-  samples: ['Control', 'Treatment'],
-  compounds: { 'Drug A': [10, 1, 0.1] },
-})
-const templateWorkspace = useBioTemplateWorkspace(templateCollection)
-const templateValues = ref<Record<string, unknown>>({ ...templateWorkspace.controls.initialValues })
-const templateWellPlateProps = templateWorkspace.componentProps
-  .find(binding => binding.component === 'WellPlate')
-  ?.propsObject ?? {}
-
 function handleToggle(id: string, value: boolean) {
   toggleState[id] = value
 }
@@ -269,10 +256,9 @@ function initSimpleToolkit() {
     <Variant title="Sequence Builder">
       <div style="padding: 2rem; height: 700px; position: relative; background: var(--bg-primary, #f1f5f9);">
         <AppSidebar
-          :panels="sequencePanels"
+          :spec="{ panels: sequencePanels, width: '300px' }"
           active-view="sequence"
           :toggle-state="toggleState"
-          width="300px"
           @update:toggle="handleToggle"
         >
           <template #section-import>
@@ -325,9 +311,10 @@ function initSimpleToolkit() {
             </div>
           </template>
           <template #section-method>
-            <BaseToggle
+            <BaseCheckbox
+              type="switch"
               model-value
-              variant="row"
+              layout="row"
               label="Use custom method paths"
               description="Override the default acquisition directory"
               :icon="icons.route"
@@ -351,11 +338,9 @@ function initSimpleToolkit() {
     <Variant title="Schema Driven Controls">
       <div style="padding: 2rem; height: 520px; position: relative; background: var(--bg-primary, #f1f5f9);">
         <AppSidebar
-          title="Peak Picking"
-          subtitle="Current experiment"
-          :controls="schemaControls"
+          v-model:values="controlValues"
+          :spec="{ title: 'Peak Picking', subtitle: 'Current experiment', controls: schemaSidebarModel }"
           active-view="analysis"
-          v-model="controlValues"
         />
       </div>
     </Variant>
@@ -363,10 +348,12 @@ function initSimpleToolkit() {
     <Variant title="Model Driven Analysis">
       <div style="padding: 2rem; height: 560px; position: relative; background: var(--bg-primary, #f1f5f9);">
         <AppSidebar
-          v-model="modelDrivenValues"
-          title="Peak Picking"
-          subtitle="Current experiment"
-          :model="modelDrivenSidebarModel"
+          v-model:values="modelDrivenValues"
+          :spec="{
+            title: 'Peak Picking',
+            subtitle: 'Current experiment',
+            controls: modelDrivenSidebarModel,
+          }"
         />
       </div>
     </Variant>
@@ -374,10 +361,12 @@ function initSimpleToolkit() {
     <Variant title="Route Owned Shell">
       <div style="padding: 2rem; height: 560px; display: flex; gap: 1rem; background: var(--bg-primary, #f1f5f9);">
         <AppSidebar
-          title="Sequence"
-          subtitle="Acquisition run"
-          content-id="seqgen-sidebar"
-          show-when-empty
+          :spec="{
+            title: 'Sequence',
+            subtitle: 'Acquisition run',
+            contentId: 'seqgen-sidebar',
+            whenEmpty: true,
+          }"
         >
           <div style="display: flex; flex-direction: column; gap: 0.75rem;">
             <FormField label="File Prefix">
@@ -412,34 +401,6 @@ function initSimpleToolkit() {
       </div>
     </Variant>
 
-    <Variant title="Template Driven Controls">
-      <div style="padding: 2rem; min-height: 560px; display: flex; gap: 1rem; background: var(--bg-primary, #f1f5f9);">
-        <AppSidebar
-          v-bind="templateWorkspace.sidebar"
-          active-view="design"
-          v-model="templateValues"
-          width="300px"
-        />
-
-        <div style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem;">
-          <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
-            <span
-              v-for="binding in templateWorkspace.componentBindings"
-              :key="binding.id"
-              style="font-size: 0.75rem; padding: 0.25rem 0.5rem; border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-secondary, #4b5563);"
-            >
-              {{ binding.component }}
-            </span>
-          </div>
-          <WellPlate
-            v-bind="templateWellPlateProps"
-            size="fill"
-            readonly
-          />
-        </div>
-      </div>
-    </Variant>
-
     <Variant title="Simple Toolkit" :init-state="initSimpleToolkit">
       <template #default="{ state }">
         <div style="padding: 2rem; height: 500px; position: relative; background: var(--bg-primary, #f1f5f9);">
@@ -462,21 +423,24 @@ function initSimpleToolkit() {
             </button>
           </div>
           <AppSidebar
-            :panels="simplePanels"
-            :density="state.density"
+            :spec="{
+              panels: simplePanels,
+              dense: state.density !== 'comfortable',
+              floating: state.floating,
+              width: state.width,
+              position: state.side,
+            }"
             :active-view="state.activeView"
-            :floating="state.floating"
-            :width="state.width"
-            :side="state.side"
           >
             <template #section-parameters>
               <BaseSlider v-model="threshold" label="Threshold" :min="0" :max="100" />
               <BaseSelect v-model="method" label="Method" :options="methods" />
             </template>
             <template #section-filters>
-              <BaseToggle
+              <BaseCheckbox
+                type="switch"
                 v-model="showOutliers"
-                variant="row"
+                layout="row"
                 label="Exclude outliers"
                 description="Hide flagged injections from summaries"
                 :icon="icons.eye"
@@ -485,18 +449,20 @@ function initSimpleToolkit() {
               />
             </template>
             <template #section-display>
-              <BaseToggle
+              <BaseCheckbox
+                type="switch"
                 v-model="showOutliers"
-                variant="row"
+                layout="row"
                 label="Show outliers"
                 description="Keep flagged peaks visible"
                 :icon="icons.eye"
                 icon-color="#0ea5e9"
                 icon-bg="#e0f2fe"
               />
-              <BaseToggle
+              <BaseCheckbox
+                type="switch"
                 v-model="logScale"
-                variant="row"
+                layout="row"
                 label="Log scale"
                 description="Compress high-intensity spread"
                 :icon="icons.chart"
@@ -507,7 +473,7 @@ function initSimpleToolkit() {
             <template #section-export>
               <BaseCheckbox
                 v-model="includeMetadata"
-                variant="row"
+                layout="row"
                 label="Include metadata"
                 description="Add method and sample context"
                 :icon="icons.database"
@@ -548,7 +514,7 @@ function initSimpleToolkit() {
     <Variant title="With Header and Footer">
       <div style="padding: 2rem; height: 500px; position: relative; background: var(--bg-primary, #f1f5f9);">
         <AppSidebar
-          :panels="simplePanels"
+          :spec="{ panels: simplePanels }"
           active-view="analysis"
         >
           <template #header>
@@ -561,9 +527,10 @@ function initSimpleToolkit() {
             <BaseSelect v-model="method" label="Method" :options="methods" />
           </template>
           <template #section-filters>
-            <BaseToggle
+            <BaseCheckbox
+              type="switch"
               v-model="showOutliers"
-              variant="row"
+              layout="row"
               label="Exclude outliers"
               description="Hide flagged injections from summaries"
               :icon="icons.eye"