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

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,
@@ -330,14 +332,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 +356,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 +372,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)

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;">

package/src/components/AppLayout.vue

@@ -3,7 +3,8 @@
  * AppLayout - Page layout shell with topbar, sidebar, and main content slots
  *
  * Provides a responsive application layout structure with optional topbar and sidebar.
- * The sidebar slot is a simple pass-through; visibility is controlled by AppSidebar itself.
+ * The sidebar slot is a simple pass-through on desktop. When responsiveSidebar is
+ * enabled, AppLayout owns the mobile toggle/backdrop shell around the sidebar.
  *
  * @example
  * ```vue
@@ -20,7 +21,7 @@
  * </AppLayout>
  * ```
  */
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 interface Props {
   /** Position of sidebar (left or right side of screen) */
@@ -29,23 +30,61 @@ interface Props {
   sidebarWidth?: string
   /** When true, topbar/sidebar/main render as floating cards with gaps */
   floating?: boolean
+  /** Convert the sidebar into a mobile overlay with built-in toggle and backdrop below 1024px. */
+  responsiveSidebar?: boolean
+  /** Controlled mobile sidebar open state. Desktop sidebar remains visible. */
+  sidebarOpen?: boolean
+  /** Initial mobile sidebar open state when sidebarOpen is uncontrolled. */
+  defaultSidebarOpen?: boolean
+  /** Accessible label for the mobile sidebar toggle. */
+  sidebarToggleLabel?: string
+  /** Accessible label used when the mobile sidebar is open. */
+  sidebarCloseLabel?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   sidebarPosition: 'left',
   sidebarWidth: 'auto',
   floating: false,
+  responsiveSidebar: false,
+  sidebarOpen: undefined,
+  defaultSidebarOpen: false,
+  sidebarToggleLabel: 'Open sidebar',
+  sidebarCloseLabel: 'Close sidebar',
+})
+
+const emit = defineEmits<{
+  'update:sidebarOpen': [value: boolean]
+}>()
+
+const internalSidebarOpen = ref(props.defaultSidebarOpen)
+const sidebarOpenModel = computed({
+  get: () => props.sidebarOpen ?? internalSidebarOpen.value,
+  set: (value: boolean) => {
+    internalSidebarOpen.value = value
+    emit('update:sidebarOpen', value)
+  },
 })
 
 const layoutClasses = computed(() => [
   'mint-layout',
   props.sidebarPosition === 'right' ? 'mint-layout--sidebar-right' : '',
   props.floating ? 'mint-layout--floating' : '',
+  props.responsiveSidebar ? 'mint-layout--responsive-sidebar' : '',
+  sidebarOpenModel.value ? 'mint-layout--sidebar-open' : '',
 ])
 
 const sidebarStyle = computed(() => {
   return props.sidebarWidth !== 'auto' ? { width: props.sidebarWidth } : undefined
 })
+
+function toggleSidebar() {
+  sidebarOpenModel.value = !sidebarOpenModel.value
+}
+
+function closeSidebar() {
+  sidebarOpenModel.value = false
+}
 </script>
 
 <template>
@@ -55,6 +94,48 @@ const sidebarStyle = computed(() => {
     </div>
 
     <div class="mint-layout__body">
+      <button
+        v-if="responsiveSidebar && $slots.sidebar"
+        type="button"
+        class="mint-layout__sidebar-toggle"
+        :aria-label="sidebarOpenModel ? sidebarCloseLabel : sidebarToggleLabel"
+        :aria-expanded="sidebarOpenModel"
+        @click="toggleSidebar"
+      >
+        <svg
+          v-if="!sidebarOpenModel"
+          class="mint-layout__sidebar-toggle-icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+        <svg
+          v-else
+          class="mint-layout__sidebar-toggle-icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M6 18 18 6M6 6l12 12" />
+        </svg>
+      </button>
+
+      <div
+        v-if="responsiveSidebar && $slots.sidebar && sidebarOpenModel"
+        class="mint-layout__sidebar-backdrop"
+        @click="closeSidebar"
+      />
+
       <div
         v-if="$slots.sidebar"
         class="mint-layout__sidebar"

package/src/components/AppPluginSwitcher.vue

@@ -2,7 +2,7 @@
 /** Dropdown menu for switching between installed plugins with color swatches, version badges, and an install link. */
 import { useDropdownState } from '../composables/useDropdownState'
 import type { PluginSwitcherPlugin } from '../types/components'
-import ActionItem from './ActionItem.vue'
+import ActionItemInternal from './internal/ActionItemInternal.vue'
 
 interface Props {
   current: PluginSwitcherPlugin
@@ -74,7 +74,7 @@ function handleInstall() {
 
     <div v-if="isOpen" class="mint-plugin-switcher__menu" role="menu">
       <div class="mint-plugin-switcher__menu-title">Switch plugin</div>
-      <ActionItem
+      <ActionItemInternal
         v-for="plugin in plugins"
         :key="plugin.id"
         :href="plugin.href"
@@ -107,13 +107,13 @@ function handleInstall() {
         >
           <path d="M5 13l4 4L19 7" />
         </svg>
-      </ActionItem>
+      </ActionItemInternal>
 
       <template v-if="plugins.length && (installHref || installTo || $slots.install)">
         <div class="mint-plugin-switcher__divider" role="separator" />
       </template>
       <slot name="install">
-        <ActionItem
+        <ActionItemInternal
           v-if="installHref || installTo"
           :href="installHref"
           :to="installTo"
@@ -126,7 +126,7 @@ function handleInstall() {
             <line x1="5" y1="12" x2="19" y2="12" />
           </svg>
           <span>{{ installLabel }}</span>
-        </ActionItem>
+        </ActionItemInternal>
       </slot>
     </div>
   </div>