@morscherlab/mint-sdk 1.0.0-rc.4 → 1.0.0-rc.6

package/src/__tests__/fixtures/auto-group/mixed-lc-ms-batch.txt

@@ -0,0 +1,187 @@
+exp281_260413_YS_H2_400ulES_1ul_071
+exp281_260413_YS_K2_400ulES_1ul_070
+exp281_260413_YS_L2_400ulES_1ul_069
+exp281_260415_SAM_SAH_SAHStandard_5nM_002
+exp281_260415_SAM_SAH_SAHStandard_5nM_093
+exp281_260415_SAM_SAH_SAMstandard_5nM_001
+exp281_260415_SAM_SAH_SAMstandard_5nM_092
+exp281_260415_SAM_SAH_Tissues_ExtractionS_00B
+exp281_260415_SAM_SAH_Tissues_ExtractionS_091
+exp281_260415_SAM_SAH_Tissues_IQC_003
+exp281_260415_SAM_SAH_Tissues_IQC_056
+exp281_260415_SAM_SAH_Tissues_IQC_090
+exp281_260415_SAM_SAH_Tissues_Kidney_M10_085
+exp281_260415_SAM_SAH_Tissues_Kidney_M11_080
+exp281_260415_SAM_SAH_Tissues_Kidney_M12_027
+exp281_260415_SAM_SAH_Tissues_Kidney_M13_048
+exp281_260415_SAM_SAH_Tissues_Kidney_M14_023
+exp281_260415_SAM_SAH_Tissues_Kidney_M15_074
+exp281_260415_SAM_SAH_Tissues_Kidney_M16_088
+exp281_260415_SAM_SAH_Tissues_Kidney_M17_070
+exp281_260415_SAM_SAH_Tissues_Kidney_M18_006
+exp281_260415_SAM_SAH_Tissues_Kidney_M19_033
+exp281_260415_SAM_SAH_Tissues_Kidney_M1_050
+exp281_260415_SAM_SAH_Tissues_Kidney_M20_004
+exp281_260415_SAM_SAH_Tissues_Kidney_M21_061
+exp281_260415_SAM_SAH_Tissues_Kidney_M22_032
+exp281_260415_SAM_SAH_Tissues_Kidney_M23_024
+exp281_260415_SAM_SAH_Tissues_Kidney_M24_040
+exp281_260415_SAM_SAH_Tissues_Kidney_M25_045
+exp281_260415_SAM_SAH_Tissues_Kidney_M26_026
+exp281_260415_SAM_SAH_Tissues_Kidney_M27_067
+exp281_260415_SAM_SAH_Tissues_Kidney_M2_086
+exp281_260415_SAM_SAH_Tissues_Kidney_M3_083
+exp281_260415_SAM_SAH_Tissues_Kidney_M4_068
+exp281_260415_SAM_SAH_Tissues_Kidney_M5_049
+exp281_260415_SAM_SAH_Tissues_Kidney_M6_069
+exp281_260415_SAM_SAH_Tissues_Kidney_M7_054
+exp281_260415_SAM_SAH_Tissues_Kidney_M8_079
+exp281_260415_SAM_SAH_Tissues_Kidney_M9_009
+exp281_260415_SAM_SAH_Tissues_Liver_M10_011
+exp281_260415_SAM_SAH_Tissues_Liver_M11_075
+exp281_260415_SAM_SAH_Tissues_Liver_M12_022
+exp281_260415_SAM_SAH_Tissues_Liver_M13_060
+exp281_260415_SAM_SAH_Tissues_Liver_M14_025
+exp281_260415_SAM_SAH_Tissues_Liver_M15_031
+exp281_260415_SAM_SAH_Tissues_Liver_M16_078
+exp281_260415_SAM_SAH_Tissues_Liver_M17_029
+exp281_260415_SAM_SAH_Tissues_Liver_M18_046
+exp281_260415_SAM_SAH_Tissues_Liver_M19_073
+exp281_260415_SAM_SAH_Tissues_Liver_M1_047
+exp281_260415_SAM_SAH_Tissues_Liver_M20_072
+exp281_260415_SAM_SAH_Tissues_Liver_M21_042
+exp281_260415_SAM_SAH_Tissues_Liver_M22_030
+exp281_260415_SAM_SAH_Tissues_Liver_M23_014
+exp281_260415_SAM_SAH_Tissues_Liver_M24_043
+exp281_260415_SAM_SAH_Tissues_Liver_M25_008
+exp281_260415_SAM_SAH_Tissues_Liver_M26_057
+exp281_260415_SAM_SAH_Tissues_Liver_M27_053
+exp281_260415_SAM_SAH_Tissues_Liver_M2_019
+exp281_260415_SAM_SAH_Tissues_Liver_M3_017
+exp281_260415_SAM_SAH_Tissues_Liver_M4_007
+exp281_260415_SAM_SAH_Tissues_Liver_M5_059
+exp281_260415_SAM_SAH_Tissues_Liver_M6_005
+exp281_260415_SAM_SAH_Tissues_Liver_M7_035
+exp281_260415_SAM_SAH_Tissues_Liver_M8_036
+exp281_260415_SAM_SAH_Tissues_Liver_M9_055
+exp281_260415_SAM_SAH_Tissues_Tumor_M10_037
+exp281_260415_SAM_SAH_Tissues_Tumor_M11_015
+exp281_260415_SAM_SAH_Tissues_Tumor_M12_062
+exp281_260415_SAM_SAH_Tissues_Tumor_M13_087
+exp281_260415_SAM_SAH_Tissues_Tumor_M14_081
+exp281_260415_SAM_SAH_Tissues_Tumor_M15_016
+exp281_260415_SAM_SAH_Tissues_Tumor_M16_013
+exp281_260415_SAM_SAH_Tissues_Tumor_M17_084
+exp281_260415_SAM_SAH_Tissues_Tumor_M18_021
+exp281_260415_SAM_SAH_Tissues_Tumor_M19_064
+exp281_260415_SAM_SAH_Tissues_Tumor_M1_066
+exp281_260415_SAM_SAH_Tissues_Tumor_M20_012
+exp281_260415_SAM_SAH_Tissues_Tumor_M21_038
+exp281_260415_SAM_SAH_Tissues_Tumor_M22_034
+exp281_260415_SAM_SAH_Tissues_Tumor_M23_089
+exp281_260415_SAM_SAH_Tissues_Tumor_M24_028
+exp281_260415_SAM_SAH_Tissues_Tumor_M25_063
+exp281_260415_SAM_SAH_Tissues_Tumor_M26_018
+exp281_260415_SAM_SAH_Tissues_Tumor_M27_082
+exp281_260415_SAM_SAH_Tissues_Tumor_M2_076
+exp281_260415_SAM_SAH_Tissues_Tumor_M3_071
+exp281_260415_SAM_SAH_Tissues_Tumor_M4_041
+exp281_260415_SAM_SAH_Tissues_Tumor_M5_051
+exp281_260415_SAM_SAH_Tissues_Tumor_M6_044
+exp281_260415_SAM_SAH_Tissues_Tumor_M7_065
+exp281_260415_SAM_SAH_Tissues_Tumor_M8_010
+exp281_260415_SAM_SAH_Tissues_Tumor_M9_052
+exp280_260413_SK_ESwithSpikeIn_02
+exp280_260413_SK_ESwithSpikeIn_1to100_Stock_05
+exp280_260413_SK_ESwithSpikeIn_1to100_Stock_10
+exp280_260413_SK_ESwithSpikeIn_1to10_04
+exp280_260413_SK_SAM_5nM_03
+exp280_260413_SK_SAM_5nM_06
+exp280_260413_YS_Experiment_EQC_002
+exp280_260413_YS_Experiment_EQC_067
+exp280_260413_YS_Experiment_EQC_102
+exp280_260413_YS_Experiment_Plasma_M10_031
+exp280_260413_YS_Experiment_Plasma_M10_0dot5ul_061
+exp280_260413_YS_Experiment_Plasma_M10_0dot5ul_097
+exp280_260413_YS_Experiment_Plasma_M11_018
+exp280_260413_YS_Experiment_Plasma_M11_0dot5ul_054
+exp280_260413_YS_Experiment_Plasma_M11_0dot5ul_090
+exp280_260413_YS_Experiment_Plasma_M12_026
+exp280_260413_YS_Experiment_Plasma_M12_0dot5ul_059
+exp280_260413_YS_Experiment_Plasma_M12_0dot5ul_095
+exp280_260413_YS_Experiment_Plasma_M13_027
+exp280_260413_YS_Experiment_Plasma_M13_0dot5ul_037
+exp280_260413_YS_Experiment_Plasma_M13_0dot5ul_073
+exp280_260413_YS_Experiment_Plasma_M14_011
+exp280_260413_YS_Experiment_Plasma_M14_0dot5ul_058
+exp280_260413_YS_Experiment_Plasma_M14_0dot5ul_094
+exp280_260413_YS_Experiment_Plasma_M15_029
+exp280_260413_YS_Experiment_Plasma_M15_0dot5ul_065
+exp280_260413_YS_Experiment_Plasma_M15_0dot5ul_100
+exp280_260413_YS_Experiment_Plasma_M16_024
+exp280_260413_YS_Experiment_Plasma_M16_0dot5ul_048
+exp280_260413_YS_Experiment_Plasma_M16_0dot5ul_084
+exp280_260413_YS_Experiment_Plasma_M17_006
+exp280_260413_YS_Experiment_Plasma_M17_0dot5ul_055
+exp280_260413_YS_Experiment_Plasma_M17_0dot5ul_091
+exp280_260413_YS_Experiment_Plasma_M18_013
+exp280_260413_YS_Experiment_Plasma_M18_0dot5ul_064
+exp280_260413_YS_Experiment_Plasma_M18_0dot5ul_099
+exp280_260413_YS_Experiment_Plasma_M19_030
+exp280_260413_YS_Experiment_Plasma_M19_0dot5ul_051
+exp280_260413_YS_Experiment_Plasma_M19_0dot5ul_087
+exp280_260413_YS_Experiment_Plasma_M1_015
+exp280_260413_YS_Experiment_Plasma_M1_0dot5ul_039
+exp280_260413_YS_Experiment_Plasma_M1_0dot5ul_075
+exp280_260413_YS_Experiment_Plasma_M20_005
+exp280_260413_YS_Experiment_Plasma_M20_0dot5ul_049
+exp280_260413_YS_Experiment_Plasma_M20_0dot5ul_085
+exp280_260413_YS_Experiment_Plasma_M21_004
+exp280_260413_YS_Experiment_Plasma_M21_0dot5ul_050
+exp280_260413_YS_Experiment_Plasma_M21_0dot5ul_086
+exp280_260413_YS_Experiment_Plasma_M22_009
+exp280_260413_YS_Experiment_Plasma_M22_0dot5ul_040
+exp280_260413_YS_Experiment_Plasma_M22_0dot5ul_076
+exp280_260413_YS_Experiment_Plasma_M23_023
+exp280_260413_YS_Experiment_Plasma_M23_0dot5ul_066
+exp280_260413_YS_Experiment_Plasma_M23_0dot5ul_101
+exp280_260413_YS_Experiment_Plasma_M24_003
+exp280_260413_YS_Experiment_Plasma_M24_0dot5ul_042
+exp280_260413_YS_Experiment_Plasma_M24_0dot5ul_078
+exp280_260413_YS_Experiment_Plasma_M25_007
+exp280_260413_YS_Experiment_Plasma_M25_0dot5ul_038
+exp280_260413_YS_Experiment_Plasma_M25_0dot5ul_074
+exp280_260413_YS_Experiment_Plasma_M26_014
+exp280_260413_YS_Experiment_Plasma_M26_0dot5ul_056
+exp280_260413_YS_Experiment_Plasma_M26_0dot5ul_092
+exp280_260413_YS_Experiment_Plasma_M27_032
+exp280_260413_YS_Experiment_Plasma_M27_0dot5ul_063
+exp280_260413_YS_Experiment_Plasma_M27_0dot5ul_098
+exp280_260413_YS_Experiment_Plasma_M2_020
+exp280_260413_YS_Experiment_Plasma_M2_0dot5ul_047
+exp280_260413_YS_Experiment_Plasma_M2_0dot5ul_083
+exp280_260413_YS_Experiment_Plasma_M3_025
+exp280_260413_YS_Experiment_Plasma_M3_0dot5ul_060
+exp280_260413_YS_Experiment_Plasma_M3_0dot5ul_096
+exp280_260413_YS_Experiment_Plasma_M4_008
+exp280_260413_YS_Experiment_Plasma_M4_0dot5ul_045
+exp280_260413_YS_Experiment_Plasma_M4_0dot5ul_081
+exp280_260413_YS_Experiment_Plasma_M5_012
+exp280_260413_YS_Experiment_Plasma_M5_0dot5ul_057
+exp280_260413_YS_Experiment_Plasma_M5_0dot5ul_093
+exp280_260413_YS_Experiment_Plasma_M6_016
+exp280_260413_YS_Experiment_Plasma_M6_0dot5ul_046
+exp280_260413_YS_Experiment_Plasma_M6_0dot5ul_082
+exp280_260413_YS_Experiment_Plasma_M7_017
+exp280_260413_YS_Experiment_Plasma_M7_0dot5ul_041
+exp280_260413_YS_Experiment_Plasma_M7_0dot5ul_077
+exp280_260413_YS_Experiment_Plasma_M8_022
+exp280_260413_YS_Experiment_Plasma_M8_0dot5ul_043
+exp280_260413_YS_Experiment_Plasma_M8_0dot5ul_079
+exp280_260413_YS_Experiment_Plasma_M9_021
+exp280_260413_YS_Experiment_Plasma_M9_0dot5ul_052
+exp280_260413_YS_Experiment_Plasma_M9_0dot5ul_088
+exp280_260413_YS_Experiment_SAH_1nM_036
+exp280_260413_YS_Experiment_SAH_1nM_072
+exp280_260413_YS_Experiment_SAM_1nM_035
+exp280_260413_YS_Experiment_SAM_1nM_071

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

@@ -31,9 +31,9 @@ import type { FormEnhancements, FormSchema } from '../types/form-builder'
 import {
   controlsToSectionFormSchemas,
   controlsToSidebarPanels,
-  defineControlModel,
   getControlDefaults,
   mergeControlWorkspaceOptions,
+  resolveControlModel,
   type ControlModel,
   type ControlModelBinding,
   type ControlSchema,
@@ -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]
 }>()
@@ -173,8 +174,7 @@ const resolvedWidth = computed(() => props.width ?? (isAnalysisVariant.value ? '
 const resolvedCollapsible = computed(() => props.collapsible ?? isAnalysisVariant.value)
 
 const resolvedModel = computed<ControlModelBinding | undefined>(() => {
-  if (props.model === undefined) return undefined
-  return isControlModelBinding(props.model) ? props.model : defineControlModel(props.model)
+  return resolveControlModel(props.model)
 })
 
 const resolvedControls = computed<ControlSchema | undefined>(() =>
@@ -269,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[]>,
@@ -297,9 +321,6 @@ function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): strin
   return ''
 }
 
-function isControlModelBinding(model: ControlModel | ControlModelBinding): model is ControlModelBinding {
-  return 'controls' in model && 'controlOptions' in model
-}
 </script>
 
 <template>
@@ -363,10 +384,14 @@ function isControlModelBinding(model: ControlModel | ControlModelBinding): model
         :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}`">
@@ -402,10 +427,53 @@ function isControlModelBinding(model: ControlModel | ControlModelBinding): model
       />
     </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/AppTopBar.navigation.ts

@@ -0,0 +1,62 @@
+import type { PageSelectorItem } from '../types/components'
+import type { PluginNavItem } from '../types/platform'
+
+export interface PluginNavPageSelectorOptions {
+  pluginIcon?: string
+  pluginName?: string
+}
+
+export function normalizeNavPath(path?: string): string {
+  const raw = path?.trim() || '/'
+  const prefixed = raw.startsWith('/') ? raw : `/${raw}`
+  return prefixed.replace(/\/+$/, '') || '/'
+}
+
+export function pageIdFromPath(path: string, fallback: string): string {
+  const normalized = normalizeNavPath(path)
+  if (normalized === '/') return 'dashboard'
+  return normalized.replace(/^\/+/, '').replace(/\/+/g, '-') || fallback
+}
+
+export function pluginNavItemToPageSelectorItem(
+  item: PluginNavItem,
+  index: number,
+  options: PluginNavPageSelectorOptions = {},
+): PageSelectorItem {
+  const path = normalizeNavPath(item.path)
+  return {
+    id: item.id || pageIdFromPath(path, `page-${index + 1}`),
+    label: item.label,
+    to: path,
+    icon: item.icon || options.pluginIcon,
+    hint: item.description || options.pluginName,
+  }
+}
+
+export function currentPagePath(
+  pathname: string | undefined,
+  routePrefix?: string,
+): string | undefined {
+  if (!pathname) return undefined
+  const normalizedPathname = normalizeNavPath(pathname)
+  const normalizedRoutePrefix = normalizeNavPath(routePrefix)
+
+  if (normalizedPathname === normalizedRoutePrefix) return '/'
+  if (
+    normalizedRoutePrefix !== '/' &&
+    normalizedPathname.startsWith(`${normalizedRoutePrefix}/`)
+  ) {
+    return normalizeNavPath(normalizedPathname.slice(normalizedRoutePrefix.length))
+  }
+  return normalizedPathname
+}
+
+export function currentItemIdFromLocation(
+  pages: Array<Pick<PageSelectorItem, 'id' | 'to' | 'href'>>,
+  pathname: string | undefined,
+  routePrefix?: string,
+): string | undefined {
+  const path = currentPagePath(pathname, routePrefix)
+  if (!path) return undefined
+  return pages.find((page) => normalizeNavPath(page.to || page.href) === path)?.id
+}

package/src/components/AppTopBar.vue

@@ -14,7 +14,6 @@ import type {
   AccountMenuItem,
   SettingsTab,
 } from '../types/components'
-import type { PluginNavItem } from '../types/platform'
 import { normalizeItemInput } from '../utils/items'
 import ThemeToggle from './ThemeToggle.vue'
 import SettingsModal from './SettingsModal.vue'
@@ -27,6 +26,10 @@ import AppPluginSwitcher from './AppPluginSwitcher.vue'
 import PluginIcon from './PluginIcon.vue'
 import { usePlatformContext } from '../composables/usePlatformContext'
 import { APP_EXPERIMENT_KEY } from '../composables/useAppExperiment'
+import {
+  currentItemIdFromLocation,
+  pluginNavItemToPageSelectorItem,
+} from './AppTopBar.navigation'
 
 interface Props {
   /** App or plugin title shown in the left title group when no page selector is present. */
@@ -153,7 +156,12 @@ const hasTitleOnly = computed(
 )
 const platformPageSelector = computed<PageSelectorItem[]>(() =>
   hasPlatformPageSelector.value
-    ? plugin.value?.nav_items?.map(pluginNavItemToPageSelectorItem) ?? []
+    ? plugin.value?.nav_items?.map((item, index) =>
+      pluginNavItemToPageSelectorItem(item, index, {
+        pluginIcon: plugin.value?.icon,
+        pluginName: plugin.value?.name,
+      })
+    ) ?? []
     : [],
 )
 const normalizedPageSelector = computed<PageSelectorItem[]>(() =>
@@ -167,50 +175,15 @@ const normalizedSettingsTabs = computed<SettingsTab[]>(() =>
 )
 const effectiveCurrentPageSelectorId = computed(() =>
   props.currentPageSelectorId
-    ?? (hasPlatformPageSelector.value ? currentItemIdFromLocation(normalizedPageSelector.value) : undefined)
+    ?? (hasPlatformPageSelector.value
+      ? currentItemIdFromLocation(
+        normalizedPageSelector.value,
+        typeof window === 'undefined' ? undefined : window.location.pathname,
+        plugin.value?.route_prefix,
+      )
+      : undefined)
     ?? (hasPlatformPageSelector.value ? normalizedPageSelector.value[0]?.id : undefined),
 )
-
-function normalizeNavPath(path?: string): string {
-  const raw = path?.trim() || '/'
-  const prefixed = raw.startsWith('/') ? raw : `/${raw}`
-  return prefixed.replace(/\/+$/, '') || '/'
-}
-
-function pageIdFromPath(path: string, fallback: string): string {
-  const normalized = normalizeNavPath(path)
-  if (normalized === '/') return 'dashboard'
-  return normalized.replace(/^\/+/, '').replace(/\/+/g, '-') || fallback
-}
-
-function pluginNavItemToPageSelectorItem(item: PluginNavItem, index: number): PageSelectorItem {
-  const path = normalizeNavPath(item.path)
-  return {
-    id: item.id || pageIdFromPath(path, `page-${index + 1}`),
-    label: item.label,
-    to: path,
-    icon: item.icon || plugin.value?.icon,
-    hint: item.description || plugin.value?.name,
-  }
-}
-
-function currentPagePath(): string | undefined {
-  if (typeof window === 'undefined') return undefined
-  const pathname = normalizeNavPath(window.location.pathname)
-  const routePrefix = normalizeNavPath(plugin.value?.route_prefix)
-
-  if (pathname === routePrefix) return '/'
-  if (routePrefix !== '/' && pathname.startsWith(`${routePrefix}/`)) {
-    return normalizeNavPath(pathname.slice(routePrefix.length))
-  }
-  return pathname
-}
-
-function currentItemIdFromLocation(pages: Array<Pick<PageSelectorItem, 'id' | 'to' | 'href'>>): string | undefined {
-  const path = currentPagePath()
-  if (!path) return undefined
-  return pages.find((page) => normalizeNavPath(page.to || page.href) === path)?.id
-}
 </script>
 
 <template>