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

package/src/__tests__/utils/plotlyTemplate.test.ts

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
-import { mintPlotlyTemplate } from '../../utils/plotlyTemplate'
+import { mintPlotlyTemplate, resolveCssColor } from '../../utils/plotlyTemplate'
 
 const tokens: Record<string, string> = {
   '--mint-sample-1': '#111111',
@@ -10,8 +10,8 @@ const tokens: Record<string, string> = {
   '--mint-sample-6': '#666666',
   '--mint-sample-7': '#777777',
   '--mint-sample-8': '#888888',
-  '--font-sans': 'Fira Sans',
-  '--font-mono': 'Fira Code',
+  '--font-sans': 'Geist',
+  '--font-mono': 'Geist Mono',
   '--text-primary': '#1E293B',
   '--text-secondary': '#64748B',
   '--border-light': '#F3F4F6',
@@ -35,11 +35,11 @@ describe('mintPlotlyTemplate', () => {
   })
 
   it('should set 12px sans body text in the primary text color when tokens are defined', () => {
-    expect(mintPlotlyTemplate().layout?.font).toEqual({ family: 'Fira Sans', size: 12, color: '#1E293B' })
+    expect(mintPlotlyTemplate().layout?.font).toEqual({ family: 'Geist', size: 12, color: '#1E293B' })
   })
 
   it('should set 11px mono ticks in the secondary text color when tokens are defined', () => {
-    expect(mintPlotlyTemplate().layout?.yaxis?.tickfont).toEqual({ family: 'Fira Code', size: 11, color: '#64748B' })
+    expect(mintPlotlyTemplate().layout?.yaxis?.tickfont).toEqual({ family: 'Geist Mono', size: 11, color: '#64748B' })
   })
 
   it('should draw the grid with --border-light when tokens are defined', () => {
@@ -67,3 +67,18 @@ describe('mintPlotlyTemplate', () => {
     expect(mintPlotlyTemplate().layout?.colorway?.[0]).toBe('#3B82F6')
   })
 })
+
+describe('resolveCssColor', () => {
+  afterEach(() => {
+    document.documentElement.removeAttribute('style')
+  })
+
+  it.each([
+    ['var(--color-primary)', '#14B8A6'],
+    ['var(--undefined-token)', 'var(--undefined-token)'],
+    ['#123456', '#123456'],
+  ])('should resolve %s to %s', (color, expected) => {
+    document.documentElement.style.setProperty('--color-primary', '#14B8A6')
+    expect(resolveCssColor(color)).toBe(expected)
+  })
+})

package/src/__tests__/{composables/useTimeUtils.test.ts → utils/time.test.ts}

@@ -1,14 +1,14 @@
-import { describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import {
   findNearestTimeSlotIndex,
+  formatRelativeTime,
   formatTimeSlot,
   fromMinutes,
   generateTimeSlots,
   toMinutes,
-  useTimeUtils,
-} from '../../composables/useTimeUtils'
+} from '../../utils/time'
 
-describe('useTimeUtils', () => {
+describe('time', () => {
   it('formats HH:MM slots for shared picker display', () => {
     expect(formatTimeSlot('00:00')).toBe('00:00')
     expect(formatTimeSlot('14:30', '12h')).toBe('2:30 PM')
@@ -26,10 +26,20 @@ describe('useTimeUtils', () => {
     expect(findNearestTimeSlotIndex('08:00', [])).toBe(-1)
   })
 
-  it('exposes the shared slot helpers from the composable facade', () => {
-    const utils = useTimeUtils()
+  describe('formatRelativeTime', () => {
+    afterEach(() => {
+      vi.useRealTimers()
+    })
 
-    expect(utils.formatTimeSlot('23:15', '12h')).toBe('11:15 PM')
-    expect(utils.findNearestTimeSlotIndex('10:20', ['10:00', '10:30'])).toBe(1)
+    it.each([
+      [{ weeks: true }, '2 weeks ago'],
+      [{}, new Date('2026-10-14T12:00:00Z').toLocaleDateString()],
+    ])('should format a 14-day-old time as a week count only when weeks is on (%o)', (options, expected) => {
+      vi.useFakeTimers({ toFake: ['Date'] })
+      vi.setSystemTime(new Date('2026-10-28T12:00:00Z'))
+
+      expect(formatRelativeTime('2026-10-14T12:00:00Z', options)).toBe(expected)
+    })
   })
+
 })

package/src/components/ActionMenu.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-/** Compact overflow actions with an IconButton trigger and a viewport-safe teleported menu. */
+/** Compact overflow actions with an icon-only BaseButton trigger and a viewport-safe teleported menu. */
 import { computePosition, flip, offset, shift } from '@floating-ui/dom'
 import { Check, Ellipsis } from 'lucide-vue-next'
 import { nextTick, onMounted, ref, watch } from 'vue'
 import { useDropdownState } from '../composables/useDropdownState'
 import { useMenuKeyboard } from '../composables/useMenuKeyboard'
 import type { ActionMenuItem } from '../types/components'
-import IconButton from './IconButton.vue'
+import BaseButton from './BaseButton.vue'
 
 interface Props {
   label: string
@@ -25,7 +25,7 @@ const emit = defineEmits<{
 }>()
 
 defineSlots<{
-  /** Replaces the ellipsis IconButton; `toggle` and `keydown` go on the slotted button. */
+  /** Replaces the ellipsis button; `toggle` and `keydown` go on the slotted button. */
   trigger?: (props: { open: boolean; toggle: () => void; keydown: (event: KeyboardEvent) => void }) => unknown
 }>()
 
@@ -44,7 +44,7 @@ const { isOpen, rootRef, triggerRef, open, close } = useDropdownState({
   onClose: () => emit('close'),
 })
 
-// IconButton owns the actual <button>, so the trigger element is resolved from
+// BaseButton owns the actual <button>, so the trigger element is resolved from
 // the wrapper once mounted rather than bound with a template ref.
 onMounted(() => {
   triggerRef.value = rootRef.value?.querySelector('button') ?? null
@@ -117,23 +117,17 @@ watch(isOpen, async (opened) => {
   <span ref="rootRef" class="mint-action-menu">
     <!-- A custom trigger must render one <button> and wire toggle + keydown to it. -->
     <slot name="trigger" :open="isOpen" :toggle="toggleMenu" :keydown="handleTriggerKeydown">
-      <IconButton
+      <BaseButton
         variant="secondary"
         size="sm"
+        :icon="Ellipsis"
         :label="label"
         :disabled="disabled"
         aria-haspopup="menu"
         :aria-expanded="isOpen"
         @click="toggleMenu"
         @keydown="handleTriggerKeydown"
-      >
-        <Ellipsis
-          class="mint-action-menu__trigger-icon"
-          :size="16"
-          :stroke-width="2"
-          aria-hidden="true"
-        />
-      </IconButton>
+      />
     </slot>
   </span>
 

package/src/components/AdductText.story.vue

@@ -12,6 +12,13 @@ import AdductText from './AdductText.vue'
       </div>
     </Variant>
 
+    <Variant title="Badges">
+      <div style="display: flex; align-items: center; gap: 0.5rem; padding: 2rem;">
+        <AdductText v-for="v in ['[M+H]+', '[M-H]-', '[M+Na]+', '[M-H2O+H]+', '[M+2H]2+']" :key="v" :value="v" variant="badge" />
+        <AdductText value="[M+H]+" variant="badge" font="mono" />
+      </div>
+    </Variant>
+
     <Variant title="Tones and inherited size">
       <div style="display: flex; flex-direction: column; gap: 0.75rem; padding: 2rem; max-width: 600px; color: var(--text-primary); font-size: 0.875rem;">
         <div style="display: flex; align-items: center; gap: 1rem;">

package/src/components/AdductText.vue

@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<Props>(), {
   variant: 'inline',
   tone: 'default',
   size: 'xs',
-  font: 'mono',
+  font: 'sans',
 })
 
 const value = computed(() => props.value?.trim() ?? '')

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"
@@ -35,7 +35,7 @@ function handleAction(label: string) {
           </AlertBox>
           <p
             v-if="actionFired"
-            style="margin-top: 0.75rem; font-size: 0.8rem; color: var(--mint-success, #10B981); font-family: 'Fira Code', monospace;"
+            style="margin-top: 0.75rem; font-size: 0.8rem; color: var(--mint-success, #10B981); font-family: var(--font-mono);"
           >
             Action fired: "{{ actionFired }}"
           </p>
@@ -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')"
@@ -111,7 +111,7 @@ function handleAction(label: string) {
 
         <p
           v-if="actionFired"
-          style="font-size: 0.8rem; color: var(--mint-success, #10B981); font-family: 'Fira Code', monospace;"
+          style="font-size: 0.8rem; color: var(--mint-success, #10B981); font-family: var(--font-mono);"
         >
           Action fired: "{{ actionFired }}"
         </p>
@@ -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,25 +28,27 @@ 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">
-      <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">
-      <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">
-      <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">
-      <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
-    </svg>
+    <span :class="['mint-alert__icon', `mint-alert__icon--${props.tone}`]">
+      <!-- Lucide circle-check -->
+      <svg v-if="props.tone === 'success'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" 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.tone === 'error'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" 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.tone === 'warning'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" 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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
+      </svg>
+    </span>
 
     <div class="mint-alert__content">
       <h4 v-if="props.title" class="mint-alert__title">

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>