@morscherlab/mint-sdk 1.0.0-beta.3 → 1.0.0-beta.5

package/src/__tests__/composables/usePluginClient.test.ts

@@ -5,6 +5,7 @@ import axios, { type AxiosRequestConfig } from 'axios'
 import {
   buildPluginEndpointUrl,
   createPluginClient,
+  getPluginPageSelectorItems,
   resolvePluginBaseUrl,
   useCurrentExperiment,
   usePluginClient,
@@ -121,12 +122,44 @@ describe('usePluginClient', () => {
   it('resolves plugin base URLs without making requests', () => {
     expect(resolvePluginBaseUrl(contract)).toBe('/api/drp')
 
-    expect(resolvePluginBaseUrl(contract, '/api/explicit')).toBe('/api/explicit')
+    expect(resolvePluginBaseUrl(
+      { ...contract, plugin: { ...contract.plugin, apiPrefix: '/api/drp/' } },
+    )).toBe('/api/drp')
+    expect(resolvePluginBaseUrl(contract, '/api/explicit/')).toBe('/api/explicit')
 
-    vi.stubEnv('VITE_API_PREFIX', '/api/env')
+    vi.stubEnv('VITE_API_PREFIX', '/api/env/')
     expect(resolvePluginBaseUrl(contract, '/api/explicit')).toBe('/api/env')
   })
 
+  it('normalizes platform-injected plugin base URLs', () => {
+    ;(window as unknown as { __MINT_PLATFORM__?: unknown }).__MINT_PLATFORM__ = {
+      isIntegrated: true,
+      theme: 'light',
+      plugin: {
+        id: 'drp',
+        name: 'DRP',
+        version: '1.0.0',
+        route_prefix: '/ignored/',
+        api_prefix: '/api/platform-drp/',
+      },
+    }
+
+    expect(resolvePluginBaseUrl(contract)).toBe('/api/platform-drp')
+
+    ;(window as unknown as { __MINT_PLATFORM__?: unknown }).__MINT_PLATFORM__ = {
+      isIntegrated: true,
+      theme: 'light',
+      plugin: {
+        id: 'drp',
+        name: 'DRP',
+        version: '1.0.0',
+        route_prefix: '/platform-drp/',
+      },
+    }
+
+    expect(resolvePluginBaseUrl(contract)).toBe('/api/platform-drp')
+  })
+
   it('builds concrete endpoint URLs without making requests', () => {
     const url = buildPluginEndpointUrl(
       contract,
@@ -146,6 +179,70 @@ describe('usePluginClient', () => {
     expect(requestConfigs).toHaveLength(0)
   })
 
+  it('maps plugin contract nav items to AppTopBar page selector metadata', () => {
+    const pageSelectorItems = getPluginPageSelectorItems({
+      ...contract,
+      plugin: {
+        ...contract.plugin,
+        name: 'Dose Designer',
+        description: 'Build dose designs',
+        icon: 'PLUGIN_ICON',
+        navItems: [
+          { path: '/', label: 'Dashboard', icon: 'DASHBOARD_ICON', description: 'Overview' },
+          { id: 'dose-design', path: 'dose-design', label: 'Dose Design' },
+          { path: '/qc/review/', label: 'QC Review', icon: 'QC_ICON' },
+        ],
+      },
+    })
+
+    expect(pageSelectorItems).toEqual([
+      {
+        id: 'dashboard',
+        label: 'Dashboard',
+        to: '/',
+        icon: 'DASHBOARD_ICON',
+        hint: 'Overview',
+      },
+      {
+        id: 'dose-design',
+        label: 'Dose Design',
+        to: '/dose-design',
+        icon: 'PLUGIN_ICON',
+        hint: 'Dose Designer',
+      },
+      {
+        id: 'qc-review',
+        label: 'QC Review',
+        to: '/qc/review',
+        icon: 'QC_ICON',
+        hint: 'Dose Designer',
+      },
+    ])
+    expect(requestConfigs).toHaveLength(0)
+  })
+
+  it('provides a dashboard page selector fallback when contract nav items are absent', () => {
+    expect(getPluginPageSelectorItems({
+      ...contract,
+      plugin: {
+        ...contract.plugin,
+        name: 'Dose Designer',
+        description: 'Build dose designs',
+        icon: 'PLUGIN_ICON',
+        navItems: [],
+      },
+    })).toEqual([
+      {
+        id: 'dashboard',
+        label: 'Dose Designer',
+        to: '/',
+        icon: 'PLUGIN_ICON',
+        hint: 'Build dose designs',
+      },
+    ])
+    expect(requestConfigs).toHaveLength(0)
+  })
+
   it('can build path-only endpoint URLs with inferred experiment ids', () => {
     window.history.replaceState({}, '', '/experiments/42/plugins/drp')
 

package/src/__tests__/docs/frontendDocsCatalog.test.ts

@@ -18,6 +18,7 @@ interface FrontendManifest {
     templateExports: Array<{ name: string }>
     templatePacks: Array<{ name: string }>
   }
+  exports: Array<{ name: string }>
 }
 
 const TEST_DIR = dirname(fileURLToPath(import.meta.url))
@@ -42,6 +43,27 @@ function parseComponentExports(): string[] {
     .sort()
 }
 
+function parseRootComponentExports(): string[] {
+  const content = readFileSync(join(SDK_ROOT, 'src', 'index.ts'), 'utf8')
+  if (/export\s+\*\s+from\s+['"]\.\/components['"]/.test(content)) {
+    return parseComponentExports()
+  }
+
+  const names = new Set<string>()
+
+  for (const match of content.matchAll(/export\s+\{([^}]*)\}\s+from\s+['"]\.\/components['"]/g)) {
+    const body = match[1].replace(/\/\/.*$/gm, '')
+    for (const item of body.split(',')) {
+      const spec = item.trim()
+      if (!spec || spec.startsWith('type ')) continue
+      const name = spec.split(/\s+as\s+/, 1)[0].trim()
+      if (/^[A-Z]\w*$/.test(name)) names.add(name)
+    }
+  }
+
+  return [...names].sort()
+}
+
 function parseDeprecatedComponentExports(): Record<string, string> {
   const componentsDir = join(SDK_ROOT, 'src', 'components')
   const content = readFileSync(join(componentsDir, 'index.ts'), 'utf8')
@@ -115,6 +137,27 @@ function parseDocumentedComposableExports(): string[] {
   return [...new Set(names)].sort()
 }
 
+function parseRootComposableExports(): string[] {
+  const rootContent = readFileSync(join(SDK_ROOT, 'src', 'index.ts'), 'utf8')
+  const composableExports = parseDocumentedComposableExports()
+
+  if (/export\s+\*\s+from\s+['"]\.\/composables['"]/.test(rootContent)) {
+    return composableExports
+  }
+
+  const names: string[] = []
+  for (const match of rootContent.matchAll(/export\s+\{([^}]*)\}\s+from\s+['"]\.\/composables['"]/g)) {
+    for (const item of match[1].split(',')) {
+      const spec = item.trim()
+      if (!spec || spec.startsWith('type ')) continue
+      const name = spec.split(/\s+as\s+/, 1)[0].trim()
+      if (name) names.push(name)
+    }
+  }
+
+  return [...new Set(names)].sort()
+}
+
 function parseTemplateExports(): string[] {
   const indexContent = readFileSync(join(SDK_ROOT, 'src', 'templates', 'index.ts'), 'utf8')
   const names = new Set<string>()
@@ -148,6 +191,13 @@ describe('frontend docs catalog coverage', () => {
     expect(missingFromManifest(documentedComponents, publicComponents)).toEqual([])
   })
 
+  it('re-exports every public component from the root SDK entrypoint', () => {
+    const publicComponents = parseComponentExports()
+    const rootComponents = parseRootComponentExports()
+
+    expect(missingFromManifest(publicComponents, rootComponents)).toEqual([])
+  })
+
   it('marks every deprecated public component export with its replacement', () => {
     const manifest = extractFrontendManifest()
     const expected = parseDeprecatedComponentExports()
@@ -161,34 +211,28 @@ describe('frontend docs catalog coverage', () => {
     expect(documented).toEqual(expected)
   })
 
-  it('keeps compatibility exports deprecated at public SDK entrypoints', () => {
+  it('keeps retired compatibility APIs out of public SDK entrypoints', () => {
     const rootIndex = readFileSync(join(SDK_ROOT, 'src', 'index.ts'), 'utf8')
+    const componentsIndex = readFileSync(join(SDK_ROOT, 'src', 'components', 'index.ts'), 'utf8')
     const composablesIndex = readFileSync(join(SDK_ROOT, 'src', 'composables', 'index.ts'), 'utf8')
 
-    expect(rootIndex).toContain(
-      "/** @deprecated Use AppToastContainer instead. */\nexport { ToastNotification } from './components'",
-    )
-    expect(rootIndex).toContain(
-      "/** @deprecated Use AppTopBar settingsConfig or SettingsModal instead. */\nexport { SettingsButton } from './components'",
-    )
-    expect(rootIndex).toContain(
-      "/** @deprecated Use AutoGroupModal instead. */\nexport { GroupingModal } from './components'",
-    )
-    expect(rootIndex).toContain(
-      "/** @deprecated Use generated plugin clients from `mint sdk generate` instead. */\nexport {\n  usePluginApi,\n  type UsePluginApiOptions,\n} from './composables'",
-    )
-    expect(composablesIndex).toContain(
-      "/** @deprecated Use generated plugin clients from `mint sdk generate` instead. */\nexport {\n  usePluginApi,\n  type UsePluginApiOptions,\n} from './usePluginApi'",
-    )
-  })
-
-  it('keeps deprecated usePluginApi docs focused on migration', () => {
-    const content = readFileSync(join(SDK_ROOT, 'src', 'composables', 'usePluginApi.ts'), 'utf8')
-
-    expect(content).toContain('Migration shape for generated plugins')
-    expect(content).toContain('useGeneratedPluginClient')
-    expect(content).not.toContain('const api = usePluginApi')
-    expect(content).not.toContain("fallbackPrefix: '/api/drp'")
+    const retiredNames = [
+      'ToastNotification',
+      'SettingsButton',
+      'GroupingModal',
+      'FormSection',
+      'FormFieldRenderer',
+      'AppPageSelector',
+      'AppPillNav',
+      'usePluginApi',
+      'UsePluginApiOptions',
+    ]
+
+    for (const name of retiredNames) {
+      expect(rootIndex).not.toMatch(new RegExp(`\\b${name}\\b`))
+      expect(componentsIndex).not.toMatch(new RegExp(`\\b${name}\\b`))
+      expect(composablesIndex).not.toMatch(new RegExp(`\\b${name}\\b`))
+    }
   })
 
   it('documents every public composable/helper export used by docs and doctor', () => {
@@ -200,6 +244,57 @@ describe('frontend docs catalog coverage', () => {
     expect(missingFromManifest(documentedComposables, publicComposables)).toEqual([])
   })
 
+  it('documents generated component binding helpers for control models', () => {
+    const manifest = extractFrontendManifest()
+    const documentedComposables = new Set(manifest.categories.composables.map(item => item.name))
+
+    expect(documentedComposables.has('defineControlComponentBindings')).toBe(true)
+    expect(documentedComposables.has('controlValuesToComponentBindings')).toBe(true)
+    expect(documentedComposables.has('controlValuesToComponentBindingsById')).toBe(true)
+    expect(documentedComposables.has('defineWellPlateDoseComponentBindings')).toBe(true)
+  })
+
+  it('re-exports every documented composable/helper from the root SDK entrypoint', () => {
+    const publicComposables = parseDocumentedComposableExports()
+    const rootComposables = parseRootComposableExports()
+
+    expect(missingFromManifest(publicComposables, rootComposables)).toEqual([])
+  })
+
+  it('re-exports the public types barrel from the root SDK entrypoint', () => {
+    const rootIndex = readFileSync(join(SDK_ROOT, 'src', 'index.ts'), 'utf8')
+
+    expect(rootIndex).toMatch(/export\s+type\s+\*\s+from\s+['"]\.\/types['"]/)
+  })
+
+  it('re-exports the public stores barrel from the root SDK entrypoint', () => {
+    const rootIndex = readFileSync(join(SDK_ROOT, 'src', 'index.ts'), 'utf8')
+
+    expect(rootIndex).toMatch(/export\s+\*\s+from\s+['"]\.\/stores['"]/)
+  })
+
+  it('re-exports the public templates barrel from the root SDK entrypoint', () => {
+    const rootIndex = readFileSync(join(SDK_ROOT, 'src', 'index.ts'), 'utf8')
+
+    expect(rootIndex).toMatch(/export\s+\*\s+from\s+['"]\.\/templates['"]/)
+  })
+
+  it('expands root barrel exports into the docs manifest', () => {
+    const manifest = extractFrontendManifest()
+    const rootExports = manifest.exports.map(item => item.name)
+
+    expect(rootExports).toEqual(expect.arrayContaining([
+      'BaseButton',
+      'DoseDesignWorkspaceView',
+      'WellPlate',
+      'useForm',
+      'useReagentSeries',
+      'ConversionResult',
+      'FormSectionSchema',
+      'createWellPlateScreenCollection',
+    ]))
+  })
+
   it('documents curated biology template packs', () => {
     const manifest = extractFrontendManifest()
 

package/src/__tests__/templates/templates.test.ts

@@ -43,6 +43,8 @@ import {
   searchBioTemplatePacks,
   searchBioTemplateCatalog,
   searchBioTemplatePresets,
+  toBioTemplateComponentBindings,
+  toBioTemplateComponentBindingsById,
   toBioTemplateComponentImports,
   toBioTemplateComponentProps,
   toBioTemplateComponentPropsByComponent,
@@ -52,6 +54,7 @@ import {
   toAssayMatrixColumns,
   toAssayMatrixDataFrame,
   toAssayMatrixRows,
+  toAssayMatrixSampleOptions,
   toCalibrationCurveDataFrame,
   toCalibrationCurveRows,
   toDoseConditions,
@@ -60,6 +63,8 @@ import {
   toFlowPanelRows,
   toInstrumentRunDataFrame,
   toInstrumentRunRows,
+  toInstrumentRunScheduleEvents,
+  toInstrumentRunSteps,
   toPlateMapEditorState,
   toProtocolDataFrame,
   toProtocolSteps,
@@ -85,6 +90,7 @@ import bioTemplateCatalogContract from '../../../../bio-template-catalog.contrac
 import bioTemplatePacksContract from '../../../../bio-template-packs.contract.json'
 import bioTemplatePresetsContract from '../../../../bio-template-presets.contract.json'
 import type {
+  AssayMatrixTemplate,
   DoseResponseTemplate,
   FlowCytometryPanelTemplate,
   InstrumentRunTemplate,
@@ -156,6 +162,9 @@ describe('bio data templates', () => {
       'flow-cytometry-panel',
     ])
     expect(getBioTemplatePackInfo('metabolomics')?.name).toBe('omics-assay')
+    expect(getBioTemplatePackInfo('metabolism')?.name).toBe('omics-assay')
+    expect(getBioTemplatePackInfo('metabolite profiling')?.name).toBe('omics-assay')
+    expect(getBioTemplatePackInfo('metabolomics')?.components).toContain('ExperimentTimeline')
     expect(getBioTemplatePackInfo('longitudinal')?.init_command).toBe('mint init --template longitudinal-study')
     expect(getBioTemplatePackInfo('gene expression')?.templates.at(-1)).toBe('qpcr-plate')
     expect(getBioTemplatePackInfo('gene-expression')?.templates.at(-1)).toBe('qpcr-plate')
@@ -212,6 +221,9 @@ describe('bio data templates', () => {
       'qpcr-plate',
     ])
     expect(searchBioTemplatePresets('run queue')[0].name).toBe('lcms-batch')
+    expect(getBioTemplatePresetInfo('metabolomics')?.name).toBe('lcms-batch')
+    expect(getBioTemplatePresetInfo('metabolism')?.name).toBe('lcms-batch')
+    expect(getBioTemplatePresetInfo('metabolite profiling')?.name).toBe('lcms-batch')
     expect(getBioTemplatePresetInfo('immunoassay')?.templates).toEqual([
       'plate-map',
       'sample-sheet',
@@ -286,6 +298,7 @@ describe('bio data templates', () => {
     const qpcrBindings = getBioTemplateComponentBindings('gene expression')
     const elisaBindings = getBioTemplateComponentBindings('elisa-assay')
     const flowBindings = getBioTemplateComponentBindings('flow-cytometry-assay')
+    const lcmsBindings = getBioTemplateComponentBindings('lcms-batch')
     const westernBindings = getBioTemplateComponentBindings('western-blot-assay')
     const wellplateImports = toBioTemplateComponentImports('wellplate-screen')
 
@@ -296,11 +309,14 @@ describe('bio data templates', () => {
     expect(qpcrBindings.map(binding => binding.component)).toContain('DataFrame')
     expect(elisaBindings.map(binding => binding.component)).toContain('PlateMapEditor')
     expect(elisaBindings.map(binding => binding.component)).toContain('DataFrame')
+    expect(lcmsBindings.map(binding => binding.component)).toContain('ScheduleCalendar')
+    expect(lcmsBindings.map(binding => binding.component)).toContain('ExperimentTimeline')
     expect(flowBindings.map(binding => binding.template_id)).toEqual([
       'sample-sheet',
       'sample-sheet',
       'flow-cytometry-panel',
       'assay-matrix',
+      'assay-matrix',
     ])
     expect(westernBindings.map(binding => binding.component)).toContain('ReagentList')
     expect(westernBindings.map(binding => binding.component)).toContain('ExperimentTimeline')
@@ -330,14 +346,21 @@ describe('bio data templates', () => {
     const state = toPlateMapEditorState(plateMapFixture as PlateMapTemplate)
     const wells = toWellPlateWells(plateMapFixture as PlateMapTemplate)
     const componentProps = toBioTemplateComponentProps(plateMapFixture as PlateMapTemplate)
+    const componentBindings = toBioTemplateComponentBindings(plateMapFixture as PlateMapTemplate)
     const componentPropsById = toBioTemplateComponentPropsById(plateMapFixture as PlateMapTemplate)
+    const componentBindingsById = toBioTemplateComponentBindingsById(plateMapFixture as PlateMapTemplate)
     const wellPlate = componentProps.find(binding => binding.component === 'WellPlate')
+    const wellPlateBinding = componentBindings.find(binding => binding.component === 'WellPlate')
 
     expect(state.plates[0].name).toBe('Drug screen plate')
     expect(wells.A2.sampleType).toBe('drug-a')
     expect(wellPlate?.propsObject.format).toBe(96)
     expect((wellPlate?.propsObject.wells as Record<string, { sampleType?: string }>).A2.sampleType).toBe('drug-a')
+    expect(wellPlateBinding?.props.format).toBe(96)
+    expect(wellPlateBinding?.propNames).toContain('wells')
     expect(componentPropsById['plate-map:WellPlate']).toEqual(wellPlate?.propsObject)
+    expect(componentBindingsById['plate-map:WellPlate'].component).toBe('WellPlate')
+    expect(componentBindingsById['plate-map:WellPlate'].props).toEqual(wellPlate?.propsObject)
     expect((componentPropsById['plate-map:WellPlate'].wells as Record<string, { sampleType?: string }>).A2.sampleType).toBe('drug-a')
   })
 
@@ -347,6 +370,7 @@ describe('bio data templates', () => {
       compounds: { 'Drug A': [10, 1] },
     })
     const propsById = toBioTemplateComponentPropsById(collection)
+    const bindingsById = toBioTemplateComponentBindingsById(collection)
     const propsByComponent = toBioTemplateComponentPropsByComponent(collection)
     const doseCalculatorProps = getBioTemplateComponentProps(collection, 'DoseCalculator')
     const doseWellPlateProps = getBioTemplateComponentProps(collection, 'WellPlate', {
@@ -362,6 +386,8 @@ describe('bio data templates', () => {
       'dose-response:WellPlate',
     ])
     expect(propsById['dose-response:DoseCalculator'].mode).toBe('serial')
+    expect(bindingsById['dose-response:DoseCalculator'].props.mode).toBe('serial')
+    expect(bindingsById['dose-response:DoseCalculator'].propNames).toContain('mode')
     expect(propsById['plate-map:WellPlate'].wells).toBeDefined()
     expect(propsById['dose-response:WellPlate'].wells).toBeDefined()
     expect(propsByComponent.WellPlate).toHaveLength(2)
@@ -400,6 +426,7 @@ describe('bio data templates', () => {
     expect(componentPropsById['plate-map:WellPlate'].wells).toBeDefined()
     expect(componentPropsById['calibration-curve:DataFrame'].data).toBeDefined()
     expect(componentPropsById['assay-matrix:DataFrame'].columns).toBeDefined()
+    expect(componentPropsById['assay-matrix:SampleSelector'].samples).toEqual(['Control', 'Treatment'])
   })
 
   it('generates Vue snippets for concrete template component props', () => {
@@ -544,6 +571,7 @@ describe('bio data templates', () => {
     expect(toInstrumentRunRows(lcmsTemplates['instrument-run'] as InstrumentRunTemplate)[0].kind).toBe('blank')
     expect(toInstrumentRunRows(lcmsTemplates['instrument-run'] as InstrumentRunTemplate)[2].sampleId).toBe('s001')
     expect(toTemplateDataFrame(lcmsTemplates['assay-matrix']).columns.map(column => column.key)).toContain('glucose')
+    expect(toAssayMatrixSampleOptions(lcmsTemplates['assay-matrix'] as AssayMatrixTemplate).map(option => option.label)).toEqual(['S001', 'S002'])
     expect(Object.keys(flowTemplates)).toEqual(['sample-sheet', 'flow-cytometry-panel', 'assay-matrix'])
     expect(flow.metadata?.preset).toBe('flow-cytometry-assay')
     expect(flowTemplates['flow-cytometry-panel'].data).toMatchObject({
@@ -909,6 +937,10 @@ describe('bio data templates', () => {
     const assayFrame = toAssayMatrixDataFrame(template)
     expect(assayFrame.rowKey).toBe('sampleId')
     expect(assayFrame.data[0].lactate).toBe(1.2)
+    expect(toAssayMatrixSampleOptions(template)).toEqual([
+      { value: 's001', label: 'S001', description: undefined },
+      { value: 's002', label: 'S002', description: undefined },
+    ])
     expect(toTemplateDataFrame(template).columns.map(column => column.key)).toContain('glucose')
   })
 
@@ -966,6 +998,11 @@ describe('bio data templates', () => {
     })
     const rows = toInstrumentRunRows(template)
     const frame = toInstrumentRunDataFrame(template)
+    const steps = toInstrumentRunSteps(template)
+    const events = toInstrumentRunScheduleEvents(template)
+    const componentProps = toBioTemplateComponentProps(template)
+    const calendar = componentProps.find(binding => binding.component === 'ScheduleCalendar')
+    const timeline = componentProps.find(binding => binding.component === 'ExperimentTimeline')
 
     expect(template.template_id).toBe('instrument-run')
     expect(template.data.items.map(item => item.kind)).toEqual(['blank', 'qc', 'sample', 'sample', 'qc'])
@@ -975,6 +1012,25 @@ describe('bio data templates', () => {
     expect(frame.rowKey).toBe('id')
     expect(frame.columns.map(column => column.key)).toContain('status')
     expect(toTemplateDataFrame(template).data[3].sampleId).toBe('s002')
+    expect(steps[2]).toMatchObject({
+      id: 's001-run',
+      type: 'measurement',
+      name: 'S001',
+      status: 'pending',
+      order: 3,
+    })
+    expect(steps[2].parameters?.method).toBe('Default method')
+    expect(events[0]).toMatchObject({
+      id: 'blank-start',
+      title: 'Blank start',
+      start: '2024-01-01T08:00:00.000Z',
+      end: '2024-01-01T08:10:00.000Z',
+      status: 'pending',
+    })
+    expect(events[2].title).toBe('S001')
+    expect(calendar?.propsObject.modelValue).toBe(events[0].start)
+    expect(calendar?.propsObject.events).toEqual(events)
+    expect(timeline?.propsObject.modelValue).toEqual(steps)
   })
 
   it('creates qPCR plate templates and adapts reactions to dataframe and wells', () => {

package/src/components/AppAvatarMenu.vue

@@ -3,7 +3,7 @@
 import { computed } from 'vue'
 import { useDropdownState } from '../composables/useDropdownState'
 import type { AccountMenuItem } from '../types/components'
-import ActionItem from './ActionItem.vue'
+import ActionItemInternal from './internal/ActionItemInternal.vue'
 
 interface Props {
   userName?: string
@@ -86,7 +86,7 @@ function handleSignOut() {
       <slot name="items" :close="closeSilently">
         <template v-for="item in items" :key="item.id">
           <div v-if="item.divider" class="mint-avatar-menu__divider" role="separator" />
-          <ActionItem
+          <ActionItemInternal
             v-else
             :href="item.href"
             :to="item.to"
@@ -99,7 +99,7 @@ function handleSignOut() {
             </span>
             <span class="mint-avatar-menu__item-label">{{ item.label }}</span>
             <span v-if="item.rightLabel" class="mint-avatar-menu__item-right">{{ item.rightLabel }}</span>
-          </ActionItem>
+          </ActionItemInternal>
         </template>
       </slot>
 

package/src/components/AppLayout.story.vue

@@ -48,6 +48,7 @@ const logScale = ref(false)
             :sidebar-position="state.sidebarPosition"
             :floating="state.floating ?? true"
             :sidebar-width="state.sidebarWidth"
+            responsive-sidebar
           >
             <template #topbar>
               <AppTopBar
@@ -216,6 +217,44 @@ const logScale = ref(false)
       </div>
     </Variant>
 
+    <Variant title="Responsive Sidebar">
+      <div style="height: 500px; max-width: 760px; border: 1px solid var(--border-color, #e2e8f0);">
+        <AppLayout
+          floating
+          responsive-sidebar
+          sidebar-width="320px"
+        >
+          <template #topbar>
+            <AppTopBar title="Responsive Analysis" home-path="" />
+          </template>
+          <template #sidebar>
+            <AppSidebar
+              variant="analysis"
+              title="Feature Filters"
+              subtitle="12 active samples"
+              :badge="2"
+              :panels="toolPanels"
+              active-view="analysis"
+            >
+              <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" />
+              </template>
+            </AppSidebar>
+          </template>
+          <div style="padding: 2rem;">
+            <p style="color: var(--text-muted, #94a3b8);">
+              At narrow widths, AppLayout owns the sidebar toggle and backdrop,
+              while AppSidebar owns the panel chrome and collapse state.
+            </p>
+          </div>
+        </AppLayout>
+      </div>
+    </Variant>
+
     <Variant title="With Experiment Selector">
       <ExperimentProvider>
         <div style="height: 600px;">