From 5e185de0b1e3bd1b39e18cef2657257bcf39ef8b Mon Sep 17 00:00:00 2001
From: Jukka Raimovaara <roska@mentalhouse.fi>
Date: Fri, 6 Jun 2025 12:13:31 +0300
Subject: [PATCH 1/4] draft of BApp

---
 packages/bootstrap-vue-next/src/App.vue       |  14 +-
 .../src/components/BApp/BApp.vue              | 248 ++++++++++++++++++
 .../src/components/BApp/BAppOrchestrator.vue  | 154 +++++++++++
 .../src/components/BApp/bapp.spec.ts          | 146 +++++++++++
 .../src/components/BApp/index.ts              |   1 +
 .../components/BModal/BModalOrchestrator.vue  |  14 +-
 .../BPopover/BPopoverOrchestrator.vue         |  20 +-
 .../components/BToast/BToastOrchestrator.vue  |  15 +-
 .../src/components/index.ts                   |   1 +
 .../src/composables/shared.ts                 | 107 ++++++++
 .../composables/useModalController/index.ts   | 175 ++++++++++--
 .../composables/usePopoverController/index.ts | 161 ++++++++++--
 .../composables/useToastController/index.ts   | 169 ++++++++++--
 packages/bootstrap-vue-next/src/main.ts       |   2 -
 .../src/plugins/modalController/index.ts      | 221 +---------------
 .../src/plugins/popoverController/index.ts    | 203 +-------------
 .../src/plugins/toastController/index.ts      | 220 +---------------
 .../src/types/BootstrapVueOptions.ts          |   2 +
 .../src/types/ComponentOrchestratorTypes.ts   |  93 ++++++-
 .../src/types/ComponentProps.ts               |  28 +-
 packages/bootstrap-vue-next/src/utils/keys.ts |  44 +---
 21 files changed, 1272 insertions(+), 766 deletions(-)
 create mode 100644 packages/bootstrap-vue-next/src/components/BApp/BApp.vue
 create mode 100644 packages/bootstrap-vue-next/src/components/BApp/BAppOrchestrator.vue
 create mode 100644 packages/bootstrap-vue-next/src/components/BApp/bapp.spec.ts
 create mode 100644 packages/bootstrap-vue-next/src/components/BApp/index.ts
 create mode 100644 packages/bootstrap-vue-next/src/composables/shared.ts

diff --git a/packages/bootstrap-vue-next/src/App.vue b/packages/bootstrap-vue-next/src/App.vue
index bef8a39fa..b59fab74c 100644
--- a/packages/bootstrap-vue-next/src/App.vue
+++ b/packages/bootstrap-vue-next/src/App.vue
@@ -1,13 +1,15 @@
 <template>
-  <BContainer>
-    <BRow>
-      <BCol> Hello World! </BCol>
-    </BRow>
-  </BContainer>
+  <BApp>
+    <BContainer>
+      <BRow>
+        <BCol> Hello World! </BCol>
+      </BRow>
+    </BContainer>
+  </BApp>
 </template>
 
 <script setup lang="ts">
 // You can use this file as a development spot to test your changes
 // Please do not commit this file
-import {BCol, BContainer, BRow} from './components'
+import {BApp, BCol, BContainer, BRow} from './components'
 </script>
diff --git a/packages/bootstrap-vue-next/src/components/BApp/BApp.vue b/packages/bootstrap-vue-next/src/components/BApp/BApp.vue
new file mode 100644
index 000000000..1faeb10b9
--- /dev/null
+++ b/packages/bootstrap-vue-next/src/components/BApp/BApp.vue
@@ -0,0 +1,248 @@
+<template>
+  <ConditionalTeleport :to="teleportTo" :disabled="teleportDisabled">
+    <BAppOrchestrator
+      v-if="!noOrchestrator && (!noModals || !noToasts || !noPopovers)"
+      :append-toast="appendToast"
+      :no-popovers="noPopovers"
+      :no-toasts="noToasts"
+      :no-modals="noModals"
+    />
+  </ConditionalTeleport>
+  <slot v-bind="$attrs" />
+</template>
+
+<script setup lang="ts">
+import {
+  type ComponentInternalInstance,
+  computed,
+  inject,
+  provide,
+  readonly,
+  type Ref,
+  ref,
+} from 'vue'
+import {
+  breadcrumbGlobalIndexKey,
+  breadcrumbPluginKey,
+  defaultsKey,
+  globalShowHideStorageInjectionKey,
+  modalControllerPluginKey,
+  modalManagerPluginKey,
+  popoverPluginKey,
+  type RegisterShowHideFnInput,
+  type RegisterShowHideMapValue,
+  rtlPluginKey,
+  toastPluginKey,
+} from '../../utils/keys'
+import type {BvnComponentProps} from '../../types/BootstrapVueOptions'
+import type {BAppProps} from '../../types/ComponentProps'
+import type {
+  ModalOrchestratorArrayValue,
+  PopoverOrchestratorArrayValue,
+  ToastOrchestratorArrayValue,
+} from '../../types/ComponentOrchestratorTypes'
+import BAppOrchestrator from './BAppOrchestrator.vue'
+import ConditionalTeleport from '../ConditionalTeleport.vue'
+import type {BreadcrumbItemRaw} from '../../types/BreadcrumbTypes'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<BAppProps>(), {
+  noModals: false,
+  noToasts: false,
+  noPopovers: false,
+  inhert: false,
+  appendToast: false,
+  teleportTo: undefined,
+  defaults: undefined,
+  mergeDefaults: false,
+  deepMerge: false,
+  noOrchestrator: false,
+  rtl: false,
+})
+
+// Inject existing defaults from parent (could be from plugins)
+const injectedDefaults = inject(defaultsKey, ref({}))
+
+function deepMerge(
+  target: Record<string, unknown>,
+  source: Record<string, unknown>
+): Record<string, unknown> {
+  for (const key in source) {
+    if (source[key] instanceof Object && target[key] instanceof Object) {
+      deepMerge(target[key] as Record<string, unknown>, source[key] as Record<string, unknown>)
+    } else {
+      target[key] = source[key]
+    }
+  }
+  return target
+}
+
+// Merge injected defaults with prop defaults (prop takes priority)
+const mergedDefaults = computed(() => {
+  const merged = {...injectedDefaults.value}
+
+  if (props.defaults) {
+    if (props.mergeDefaults) {
+      if (props.deepMerge) {
+        deepMerge(merged, props.defaults)
+      } else {
+        Object.assign(merged, props.defaults)
+      }
+    } else {
+      return props.defaults
+    }
+  }
+
+  return merged
+})
+
+// Provide the merged defaults to child components
+provide(defaultsKey, ref(mergedDefaults.value) as Ref<Partial<BvnComponentProps>>)
+
+const teleportDisabled = computed(() => props.teleportTo === undefined)
+
+const popoverController = inject(popoverPluginKey, undefined)
+const toastController = inject(toastPluginKey, undefined)
+const modalController = inject(modalControllerPluginKey, undefined)
+
+if (!props.noPopovers) {
+  if (popoverController && props.inhert) {
+    provide(popoverPluginKey, popoverController)
+  }
+  provide(popoverPluginKey, {
+    popovers: ref<PopoverOrchestratorArrayValue[]>([]),
+    _isOrchestratorInstalled: ref(false),
+  })
+}
+
+if (!props.noToasts) {
+  if (toastController && props.inhert) {
+    toastController._isOrchestratorInstalled.value = true
+    provide(toastPluginKey, toastController)
+  }
+  provide(toastPluginKey, {
+    toasts: ref<ToastOrchestratorArrayValue[]>([]),
+    _isAppend: ref(false),
+    _isOrchestratorInstalled: ref(false),
+  })
+}
+if (!props.noModals) {
+  if (modalController && props.inhert) {
+    modalController._isOrchestratorInstalled.value = true
+    provide(modalControllerPluginKey, modalController)
+  }
+  provide(modalControllerPluginKey, {
+    modals: ref<ModalOrchestratorArrayValue[]>([]),
+    _isOrchestratorInstalled: ref(false),
+  })
+}
+
+const showHideStorage = inject(globalShowHideStorageInjectionKey, undefined)
+if (!showHideStorage) {
+  const values: Ref<Map<string, RegisterShowHideMapValue>> = ref(new Map())
+
+  const register = ({
+    id,
+    component,
+    value,
+    toggle,
+    show,
+    hide,
+    registerTrigger,
+    unregisterTrigger,
+  }: RegisterShowHideFnInput) => {
+    values.value.set(id, {
+      id,
+      component,
+      value: readonly(value),
+      toggle,
+      show,
+      hide,
+      registerTrigger,
+      unregisterTrigger,
+    })
+    return {
+      unregister() {
+        // delete values.value[id]
+        values.value.delete(id)
+      },
+    }
+  }
+  provide(globalShowHideStorageInjectionKey, {register, values})
+}
+
+const modalManager = inject(modalManagerPluginKey, undefined)
+if (!modalManager) {
+  const stack: Ref<Map<number, ComponentInternalInstance>> = ref(new Map())
+
+  const countStack = computed(() => stack.value.size)
+  const valuesStack = computed(() => [...stack.value.values()])
+  const lastStack = computed(() => valuesStack.value[valuesStack.value.length - 1])
+
+  const pushStack = (modal: Readonly<ComponentInternalInstance>) => {
+    stack.value.set(modal.uid, modal)
+  }
+  const removeStack = (modal: Readonly<ComponentInternalInstance>) => {
+    stack.value.delete(modal.uid)
+  }
+
+  /**
+   * A collection of all registered modals
+   */
+  const registry: Ref<Map<number, ComponentInternalInstance>> = ref(new Map())
+
+  // Utility getters not made, would not be used (count, last)
+
+  const pushRegistry = (modal: Readonly<ComponentInternalInstance>) => {
+    registry.value.set(modal.uid, modal)
+  }
+  const removeRegistry = (modal: Readonly<ComponentInternalInstance>) => {
+    registry.value.delete(modal.uid)
+  }
+
+  provide(modalManagerPluginKey, {
+    countStack,
+    lastStack,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    registry: readonly(registry) as Readonly<Ref<Map<number, ComponentInternalInstance>>>,
+    stack: valuesStack,
+    pushStack,
+    removeStack,
+    pushRegistry,
+    removeRegistry,
+  })
+}
+
+const breadcrumb = inject(breadcrumbPluginKey, undefined)
+if (!breadcrumb) {
+  const items = ref<Record<string, BreadcrumbItemRaw[]>>({
+    [breadcrumbGlobalIndexKey]: [],
+  })
+  const reset = (key: string = breadcrumbGlobalIndexKey) => {
+    items.value[key] = []
+  }
+
+  provide(breadcrumbPluginKey, {items, reset})
+}
+
+const rtl = inject(rtlPluginKey, undefined)
+if (!rtl) {
+  const rtlDefault = false
+  const localeDefault = undefined
+
+  const rtlInitial =
+    typeof props.rtl === 'boolean' ? rtlDefault : (props.rtl?.rtlInitial ?? rtlDefault)
+
+  const localeInitial =
+    typeof props.rtl === 'boolean' ? localeDefault : (props.rtl?.localeInitial ?? localeDefault)
+
+  const isRtl = ref(rtlInitial)
+  const locale = ref(localeInitial)
+
+  provide(rtlPluginKey, {isRtl, locale})
+}
+</script>
diff --git a/packages/bootstrap-vue-next/src/components/BApp/BAppOrchestrator.vue b/packages/bootstrap-vue-next/src/components/BApp/BAppOrchestrator.vue
new file mode 100644
index 000000000..473ca811f
--- /dev/null
+++ b/packages/bootstrap-vue-next/src/components/BApp/BAppOrchestrator.vue
@@ -0,0 +1,154 @@
+<!-- eslint-disable vue/no-unused-vars -->
+<template>
+  <div id="__BVID__toaster-container" v-bind="$attrs">
+    <div
+      v-for="(value, key) in ComputedPositionClasses"
+      :key
+      :class="value.class"
+      :style="value.style"
+    >
+      <TransitionGroup name="b-list">
+        <span
+          v-for="{
+            _self,
+            type,
+            position,
+            slots,
+            promise,
+            options,
+            component: _component,
+            ...val
+          } in items?.filter((el) => el.position === key) || []"
+          :key="_self"
+        >
+          <component
+            :is="_component"
+            v-bind="val"
+            :ref="(ref: ComponentPublicInstance) => (promise.value.ref = ref)"
+            initial-animation
+            :teleport-disabled="true"
+            @hide="
+              (e: BvTriggerableEvent) => {
+                e.ok = e.trigger === 'ok' ? true : e.trigger === 'cancel' ? false : null
+
+                val.onHide?.(e)
+                if (e.defaultPrevented) {
+                  return
+                }
+                promise.stop?.()
+                if (options?.resolveOnHide) {
+                  promise.resolve(e)
+                }
+              }
+            "
+            @hidden="
+              (e: BvTriggerableEvent) => {
+                e.ok = e.trigger === 'ok' ? true : e.trigger === 'cancel' ? false : null
+                val.onHidden?.(e)
+                if (e.defaultPrevented) {
+                  return
+                }
+                if (!options?.resolveOnHide) {
+                  promise.resolve(e)
+                }
+                if (!options?.keep) {
+                  promise.value.destroy?.()
+                }
+              }
+            "
+          >
+            <template v-for="(comp, slot) in slots" #[slot]="scope" :key="slot">
+              <component :is="comp" v-bind="scope" />
+            </template>
+          </component>
+        </span>
+      </TransitionGroup>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {type ComponentPublicInstance, computed, inject, watch} from 'vue'
+import {modalControllerPluginKey, popoverPluginKey, toastPluginKey} from '../../utils/keys'
+import {positionClasses} from '../../utils/positionClasses'
+import type {BvTriggerableEvent} from '../../utils'
+
+const props = defineProps<{
+  noPopovers?: boolean
+  noToasts?: boolean
+  noModals?: boolean
+  appendToast?: boolean
+}>()
+
+const popoverController = inject(popoverPluginKey)
+const toastController = inject(toastPluginKey)
+const modalController = inject(modalControllerPluginKey)
+
+if (popoverController) {
+  if (!popoverController._isOrchestratorInstalled.value) {
+    popoverController._isOrchestratorInstalled.value = true
+  } else {
+    console.warn(
+      'BPopoverOrchestrator Or BApp is already installed, only one can be installed at a time'
+    )
+  }
+}
+
+if (toastController) {
+  if (!toastController._isOrchestratorInstalled.value) {
+    toastController._isOrchestratorInstalled.value = true
+  } else {
+    console.warn(
+      'BToastOrchestrator Or BApp is already installed, only one can be installed at a time'
+    )
+  }
+}
+
+if (modalController) {
+  if (!modalController._isOrchestratorInstalled.value) {
+    modalController._isOrchestratorInstalled.value = true
+  } else {
+    console.warn(
+      'BModalOrchestrator Or BApp is already installed, only one can be installed at a time'
+    )
+  }
+}
+
+watch(
+  () => props.appendToast,
+  (value) => {
+    if (toastController) {
+      toastController._isAppend.value = value
+    }
+  },
+  {immediate: true}
+)
+
+const ComputedPositionClasses = computed(() => {
+  const classes: Record<string, {class: string; style: string}> = {}
+  for (const position in positionClasses) {
+    classes[position] = {
+      class: `${
+        positionClasses[position as keyof typeof positionClasses]
+      } toast-container position-fixed p-3`,
+      style: 'width: calc(var(--bs-toast-max-width, 350px) + 2 * 1rem)',
+    }
+  }
+  // console.log(classes)
+  classes['modal'] = {
+    class: '',
+    style: '',
+  }
+  classes['popover'] = {
+    class: '',
+    style: '',
+  }
+  return classes
+})
+
+const items = computed(() => [
+  ...(!props.noPopovers ? popoverController?.popovers?.value || [] : []),
+  ...(!props.noToasts ? toastController?.toasts?.value || [] : []),
+  ...(!props.noModals ? modalController?.modals?.value || [] : []),
+])
+</script>
diff --git a/packages/bootstrap-vue-next/src/components/BApp/bapp.spec.ts b/packages/bootstrap-vue-next/src/components/BApp/bapp.spec.ts
new file mode 100644
index 000000000..c2d0df62b
--- /dev/null
+++ b/packages/bootstrap-vue-next/src/components/BApp/bapp.spec.ts
@@ -0,0 +1,146 @@
+import {enableAutoUnmount, mount} from '@vue/test-utils'
+import {afterEach, describe, expect, it} from 'vitest'
+import BApp from './BApp.vue'
+
+describe('BApp', () => {
+  enableAutoUnmount(afterEach)
+
+  it('renders correctly', () => {
+    const wrapper = mount(BApp, {
+      slots: {
+        default: '<div>Test content</div>',
+      },
+    })
+
+    expect(wrapper.find('div').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Test content')
+  })
+
+  it('includes orchestrator by default', () => {
+    const wrapper = mount(BApp)
+
+    expect(wrapper.findComponent({name: 'BAppOrchestrator'}).exists()).toBe(true)
+  })
+
+  it('can disable orchestrator', () => {
+    const wrapper = mount(BApp, {
+      props: {
+        noOrchestrator: true,
+      },
+    })
+    // console.log(wrapper.html())
+
+    expect(wrapper.findComponent({name: 'BAppOrchestrator'}).exists()).toBe(false)
+  })
+
+  it('can disable individual orchestrators', () => {
+    const wrapper = mount(BApp, {
+      props: {
+        noModals: true,
+        noToasts: true,
+        noPopovers: true,
+      },
+    })
+
+    // When all orchestrators are disabled, BAppOrchestrator should not exist
+    expect(wrapper.findComponent({name: 'BAppOrchestrator'}).exists()).toBe(false)
+  })
+
+  it('renders orchestrator when only some orchestrators are disabled', () => {
+    const wrapper = mount(BApp, {
+      props: {
+        noModals: true,
+        noToasts: false, // Keep toasts enabled
+        noPopovers: true,
+      },
+    })
+
+    // When at least one orchestrator is enabled, BAppOrchestrator should exist
+    expect(wrapper.findComponent({name: 'BAppOrchestrator'}).exists()).toBe(true)
+  })
+
+  it('provides defaults to child components', () => {
+    const defaults = {
+      BButton: {
+        variant: 'primary' as const,
+        size: 'sm' as const,
+      },
+    }
+
+    const wrapper = mount(BApp, {
+      props: {
+        defaults,
+      },
+      slots: {
+        default: '<div>Test content</div>',
+      },
+    })
+
+    // The component should provide the defaults via Vue's provide/inject
+    expect(wrapper.vm).toBeDefined()
+  })
+
+  it('supports teleporting orchestrator', () => {
+    const wrapper = mount(BApp, {
+      props: {
+        teleportTo: 'body',
+      },
+    })
+
+    const teleport = wrapper.findComponent({name: 'ConditionalTeleport'})
+    expect(teleport.exists()).toBe(true)
+    expect(teleport.props('to')).toBe('body')
+    expect(teleport.props('disabled')).toBe(false)
+  })
+
+  it('supports RTL configuration', () => {
+    const rtlConfig = {
+      rtlInitial: true,
+      localeInitial: 'ar',
+    }
+
+    const wrapper = mount(BApp, {
+      props: {
+        rtl: rtlConfig,
+      },
+      slots: {
+        default: '<div>Test content</div>',
+      },
+    })
+
+    expect(wrapper.vm).toBeDefined()
+  })
+
+  it('supports defaults merging', () => {
+    const defaults = {
+      BButton: {
+        variant: 'primary' as const,
+      },
+    }
+
+    const wrapper = mount(BApp, {
+      props: {
+        defaults,
+        mergeDefaults: true,
+        deepMerge: true,
+      },
+      slots: {
+        default: '<div>Test content</div>',
+      },
+    })
+
+    expect(wrapper.vm).toBeDefined()
+  })
+
+  it('supports append toast configuration', () => {
+    const wrapper = mount(BApp, {
+      props: {
+        appendToast: true,
+      },
+    })
+
+    const orchestrator = wrapper.findComponent({name: 'BAppOrchestrator'})
+    expect(orchestrator.exists()).toBe(true)
+    expect(orchestrator.props('appendToast')).toBe(true)
+  })
+})
diff --git a/packages/bootstrap-vue-next/src/components/BApp/index.ts b/packages/bootstrap-vue-next/src/components/BApp/index.ts
new file mode 100644
index 000000000..33d8582e4
--- /dev/null
+++ b/packages/bootstrap-vue-next/src/components/BApp/index.ts
@@ -0,0 +1 @@
+export {default as BApp} from './BApp.vue'
diff --git a/packages/bootstrap-vue-next/src/components/BModal/BModalOrchestrator.vue b/packages/bootstrap-vue-next/src/components/BModal/BModalOrchestrator.vue
index df44d37d2..7a6236dd4 100644
--- a/packages/bootstrap-vue-next/src/components/BModal/BModalOrchestrator.vue
+++ b/packages/bootstrap-vue-next/src/components/BModal/BModalOrchestrator.vue
@@ -3,9 +3,9 @@
     <div id="__BVID__modal-container" v-bind="$attrs">
       <component
         :is="_component ?? BModal"
-        v-for="[key, {component: _component, promise, options, slots, ...val}] in tools.modals
-          ?.value"
-        :key="key"
+        v-for="{_self, component: _component, promise, options, slots, ...val} in tools.modals
+          ?.value ?? []"
+        :key="_self"
         :ref="(ref: ComponentPublicInstance) => (promise.value.ref = ref)"
         v-bind="val"
         initial-animation
@@ -67,7 +67,13 @@ const _props = withDefaults(defineProps<BModalOrchestratorProps>(), {
 const props = useDefaults(_props, 'BModalOrchestrator')
 
 const tools = useModalController()
-tools._isOrchestratorInstalled.value = true
+if (!tools._isOrchestratorInstalled.value) {
+  tools._isOrchestratorInstalled.value = true
+} else {
+  console.warn(
+    'BModalOrchestrator Or BApp is already installed, only one can be installed at a time'
+  )
+}
 
 defineExpose({
   ...tools,
diff --git a/packages/bootstrap-vue-next/src/components/BPopover/BPopoverOrchestrator.vue b/packages/bootstrap-vue-next/src/components/BPopover/BPopoverOrchestrator.vue
index dbb7ef4ab..759e04aa7 100644
--- a/packages/bootstrap-vue-next/src/components/BPopover/BPopoverOrchestrator.vue
+++ b/packages/bootstrap-vue-next/src/components/BPopover/BPopoverOrchestrator.vue
@@ -2,12 +2,10 @@
   <ConditionalTeleport :to="props.teleportTo" :disabled="props.teleportDisabled">
     <div id="__BVID__popover-container" v-bind="$attrs">
       <component
-        :is="_component ?? (val.tooltip ? BTooltip : BPopover)"
-        v-for="[
-          key,
-          {component: _component, promise, slots, ...val},
-        ] in tools.popovers?.value.entries() ?? []"
-        :key="key"
+        :is="_component"
+        v-for="{_self, component: _component, promise, slots, ...val} in tools.popovers?.value ??
+        []"
+        :key="_self"
         v-bind="val"
         initial-animation
         :teleport-disabled="true"
@@ -35,11 +33,15 @@ import {useDefaults} from '../../composables/useDefaults'
 import type {BPopoverOrchestratorProps} from '../../types/ComponentProps'
 
 import {usePopoverController} from '../../composables/usePopoverController'
-import BPopover from './BPopover.vue'
-import BTooltip from '../BTooltip/BTooltip.vue'
 
 const tools = usePopoverController()
-tools._isOrchestratorInstalled.value = true
+if (!tools._isOrchestratorInstalled.value) {
+  tools._isOrchestratorInstalled.value = true
+} else {
+  console.warn(
+    'BPopoverOrchestrator Or BApp is already installed, only one can be installed at a time'
+  )
+}
 
 const _props = withDefaults(defineProps<BPopoverOrchestratorProps>(), {
   teleportDisabled: false,
diff --git a/packages/bootstrap-vue-next/src/components/BToast/BToastOrchestrator.vue b/packages/bootstrap-vue-next/src/components/BToast/BToastOrchestrator.vue
index 84b8b2950..d4260148b 100644
--- a/packages/bootstrap-vue-next/src/components/BToast/BToastOrchestrator.vue
+++ b/packages/bootstrap-vue-next/src/components/BToast/BToastOrchestrator.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-unused-vars -->
 <template>
   <ConditionalTeleport :to="props.teleportTo" :disabled="props.teleportDisabled">
     <div id="__BVID__toaster-container" v-bind="$attrs">
@@ -12,6 +13,8 @@
           <span
             v-for="{
               _self,
+              type,
+              position,
               slots,
               promise,
               options,
@@ -21,7 +24,7 @@
             :key="_self"
           >
             <component
-              :is="_component ?? BToast"
+              :is="_component"
               v-bind="val"
               :ref="(ref: ComponentPublicInstance) => (promise.value.ref = ref)"
               initial-animation
@@ -74,7 +77,6 @@ import {type ComponentPublicInstance, watch} from 'vue'
 import {useDefaults} from '../../composables/useDefaults'
 import {positionClasses} from '../../utils/positionClasses'
 import type {BToastOrchestratorProps} from '../../types/ComponentProps'
-import BToast from './BToast.vue'
 import ConditionalTeleport from '../ConditionalTeleport.vue'
 import {useToastController} from '../../composables/useToastController'
 
@@ -90,8 +92,13 @@ const _props = withDefaults(defineProps<BToastOrchestratorProps>(), {
 const props = useDefaults(_props, 'BToastOrchestrator')
 
 const tools = useToastController()
-tools._isOrchestratorInstalled.value = true
-
+if (!tools._isOrchestratorInstalled.value) {
+  tools._isOrchestratorInstalled.value = true
+} else {
+  console.warn(
+    'BToastOrchestrator Or BApp is already installed, only one can be installed at a time'
+  )
+}
 watch(
   () => props.appendToast,
   (value) => {
diff --git a/packages/bootstrap-vue-next/src/components/index.ts b/packages/bootstrap-vue-next/src/components/index.ts
index 7fc55faf1..e9ee94b9d 100644
--- a/packages/bootstrap-vue-next/src/components/index.ts
+++ b/packages/bootstrap-vue-next/src/components/index.ts
@@ -1,5 +1,6 @@
 export * from './BAccordion'
 export * from './BAlert'
+export * from './BApp'
 export * from './BAvatar'
 export * from './BBadge'
 export * from './BBreadcrumb'
diff --git a/packages/bootstrap-vue-next/src/composables/shared.ts b/packages/bootstrap-vue-next/src/composables/shared.ts
new file mode 100644
index 000000000..ed03be307
--- /dev/null
+++ b/packages/bootstrap-vue-next/src/composables/shared.ts
@@ -0,0 +1,107 @@
+import {type ComponentPublicInstance, nextTick, type Ref, toValue, type WatchHandle} from 'vue'
+import type {
+  ControllerKey,
+  ModalOrchestratorArrayValue,
+  PopoverOrchestratorArrayValue,
+  PromiseWithComponent,
+  PromiseWithComponentInternal,
+  ToastOrchestratorArrayValue,
+  TooltipOrchestratorArrayValue,
+} from '../types/ComponentOrchestratorTypes'
+import type {BvTriggerableEvent} from '../utils'
+
+export function buildPromise<
+  TComponent,
+  TParam,
+  TArrayValue extends
+    | ToastOrchestratorArrayValue
+    | ModalOrchestratorArrayValue
+    | PopoverOrchestratorArrayValue
+    | TooltipOrchestratorArrayValue,
+>(
+  _id: ControllerKey,
+  store: Ref<TArrayValue[]>
+): {
+  value: PromiseWithComponent<TComponent, TParam>
+  resolve: (value: BvTriggerableEvent | boolean | null) => void
+  stop: WatchHandle | undefined
+} {
+  let resolveFunc: (value: BvTriggerableEvent | boolean | null) => void = () => {}
+
+  const promise = new Promise<BvTriggerableEvent | boolean | null>((resolve) => {
+    resolveFunc = resolve
+  }) as PromiseWithComponent<TComponent, TParam>
+
+  Object.assign(promise, {
+    id: _id,
+    ref: null as ComponentPublicInstance<TComponent> | null,
+    show() {
+      if (!this.ref) return this.set({modelValue: true} as unknown as Partial<TParam>)
+      ;(this.ref as Record<string, (...args: unknown[]) => unknown>).show()
+      return promise
+    },
+    hide(trigger?: string) {
+      if (!this.ref) return this.set({modelValue: false} as unknown as Partial<TParam>)
+      ;(this.ref as Record<string, (...args: unknown[]) => unknown>).hide(trigger, true)
+      return promise
+    },
+    toggle() {
+      const currentItem = this.get() as TParam & {modelValue?: unknown}
+      if (!this.ref)
+        return this.set({modelValue: !currentItem?.modelValue} as unknown as Partial<TParam>)
+      ;(this.ref as Record<string, (...args: unknown[]) => unknown>).toggle()
+      return promise
+    },
+    get(): TParam | undefined {
+      return store.value.find((el) => el._self === _id) as TParam | undefined
+    },
+    set(val: Partial<TParam>) {
+      const itemIndex = store.value.findIndex((el) => el._self === _id)
+      const item = store.value[itemIndex]
+      if (item) {
+        const v = {...toValue(item), ...toValue(val)}
+        if (item.modelValue !== v.modelValue) {
+          item['onUpdate:modelValue']?.(v.modelValue as boolean)
+        }
+        store.value.splice(itemIndex, 1, {
+          ...v,
+          title: toValue((v as Record<string, unknown>).title),
+          body: toValue((v as Record<string, unknown>).body),
+          modelValue: toValue(v.modelValue),
+        } as TArrayValue)
+      }
+      return promise
+    },
+    async destroy() {
+      const item = store.value.find((el) => el._self === _id)
+      if (!item) return
+      item.promise.stop?.()
+      if (item.modelValue) {
+        await new Promise((resolve) => {
+          item.modelValue = false
+          const prev = item['onHidden']
+          item['onHidden'] = (e) => {
+            prev?.(e)
+            resolve(e)
+          }
+          nextTick(() => {
+            item['onUpdate:modelValue']?.(false)
+          })
+        })
+      }
+      store.value.splice(
+        store.value.findIndex((el) => el._self === _id),
+        1
+      )
+    },
+    async [Symbol.asyncDispose]() {
+      await this.destroy()
+    },
+  } as PromiseWithComponentInternal<TComponent, TParam>)
+
+  return {
+    value: promise,
+    resolve: resolveFunc,
+    stop: undefined as WatchHandle | undefined,
+  }
+}
diff --git a/packages/bootstrap-vue-next/src/composables/useModalController/index.ts b/packages/bootstrap-vue-next/src/composables/useModalController/index.ts
index 66506ff84..db8386371 100644
--- a/packages/bootstrap-vue-next/src/composables/useModalController/index.ts
+++ b/packages/bootstrap-vue-next/src/composables/useModalController/index.ts
@@ -3,36 +3,165 @@ import {
   computed,
   getCurrentInstance,
   inject,
-  ref,
+  isReadonly,
+  isRef,
+  markRaw,
+  onScopeDispose,
+  type Ref,
+  toRef,
   toValue,
+  watch,
 } from 'vue'
+import {useSharedModalStack} from '../../composables/useModalManager'
+
 import {modalControllerPluginKey} from '../../utils/keys'
 import type {
   ControllerKey,
-  PromiseWithModal,
-  PromiseWithModalBoolean,
+  ModalOrchestratorArrayValue,
+  ModalOrchestratorCreateOptions,
+  ModalOrchestratorCreateParam,
+  ModalOrchestratorMapValue,
+  ModalOrchestratorParam,
+  PromiseWithComponent,
 } from '../../types/ComponentOrchestratorTypes'
-import {useSharedModalStack} from '../../composables/useModalManager'
+import {buildPromise} from '../shared'
+import {BModal} from '../../components'
 
 export const useModalController = () => {
-  const noopPromise = () => {
+  const controller = inject(modalControllerPluginKey)
+  if (!controller) {
+    throw Error(
+      'useModalController() was called outside of the setup() function! or the plugin is not provided.'
+    )
+  }
+  const {modals, _isOrchestratorInstalled} = controller
+
+  /**
+   * @returns {PromiseWithModal}  Returns a promise object with methods to control the modal (show, hide, toggle, get, set, destroy)
+   */
+  const create = (
+    obj: ModalOrchestratorCreateParam = {},
+    options: ModalOrchestratorCreateOptions = {}
+  ): PromiseWithComponent<typeof BModal, ModalOrchestratorParam> => {
+    if (!_isOrchestratorInstalled.value) {
+      throw new Error(
+        'The BModalOrchestrator component must be mounted to use the modal controller'
+      )
+    }
+
+    const {component, slots} = toValue(obj)
+    if (component) {
+      if (isRef(obj)) obj.value.component = markRaw(component)
+      else if (typeof obj === 'object') obj.component = markRaw(component)
+    } else {
+      if (isRef(obj)) obj.value.component = markRaw(BModal)
+      else if (typeof obj === 'object') obj.component = markRaw(BModal)
+    }
+    if (slots) {
+      if (isRef(obj)) obj.value.slots = markRaw(slots)
+      else if (typeof obj === 'object') obj.slots = markRaw(slots)
+    }
+    const resolvedProps = toRef(obj)
+    const _self = resolvedProps.value?.id || Symbol('Modals controller')
+
+    const promise = buildPromise<
+      typeof BModal,
+      ModalOrchestratorParam,
+      ModalOrchestratorArrayValue
+    >(_self, modals)
+
+    promise.stop = watch(
+      resolvedProps,
+      (_newValue) => {
+        const newValue = {...toValue(_newValue)}
+        const previousIndex = modals.value.findIndex((el) => el._self === _self)
+        const previous = previousIndex === -1 ? {} : modals.value[previousIndex] || {}
+        const v: ModalOrchestratorArrayValue = {
+          type: 'modal',
+          _self,
+          position: 'modal',
+          ...previous,
+          options,
+          promise,
+        }
+
+        if (newValue.props) {
+          Object.assign(v, newValue.props)
+          newValue.props = undefined
+        }
+        for (const key in newValue) {
+          if (key.startsWith('on')) {
+            v[key as keyof ModalOrchestratorCreateParam] =
+              newValue[key as keyof ModalOrchestratorCreateParam]
+          } else {
+            v[key as keyof ModalOrchestratorCreateParam] = toValue(
+              newValue[key as keyof ModalOrchestratorCreateParam]
+            )
+          }
+        }
+        v.modelValue = v.modelValue ?? false
+        v['onUpdate:modelValue'] = (val: boolean) => {
+          newValue['onUpdate:modelValue']?.(val)
+          const {modelValue} = toValue(obj)
+          if (isRef(obj) && !isRef(modelValue)) obj.value.modelValue = val
+          if (isRef(modelValue) && !isReadonly(modelValue)) {
+            ;(modelValue as Ref<ModalOrchestratorMapValue['modelValue']>).value = val
+          }
+          const modal = modals.value.find((el) => el._self === _self)
+          if (modal) {
+            modal.modelValue = val
+          }
+        }
+
+        if (previousIndex === -1) {
+          modals.value.push(v)
+        } else {
+          modals.value.splice(previousIndex, 1, v)
+        }
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
+    )
+    onScopeDispose(() => {
+      const modal = modals.value.find((el) => el._self === _self)
+      if (modal) {
+        modal.promise.value.destroy?.()
+      }
+    }, true)
+    return promise.value
+  }
+
+  /*
+   * @deprecated use create({}).show() instead
+   */
+  const show = (
+    obj: ModalOrchestratorCreateParam = {}
+  ): PromiseWithComponent<typeof BModal, ModalOrchestratorParam> => {
     // eslint-disable-next-line no-console
     console.warn(
-      'useModalController() was called outside of the setup() function! or the plugin is not provided.'
+      '[BootstrapVueNext] useModalController: The show() method is deprecated. Use create({}).show() instead.'
     )
-    return Promise.resolve(null) as unknown as PromiseWithModal
+    return create(obj, {returnBoolean: true}).show() as PromiseWithComponent<
+      typeof BModal,
+      ModalOrchestratorParam
+    >
   }
-  const modalControllerPlugin = inject(modalControllerPluginKey, {
-    modals: ref(new Map()),
-    _isOrchestratorInstalled: ref(false),
-    create: noopPromise,
-    show: noopPromise as () => PromiseWithModalBoolean,
-    confirm: noopPromise as () => PromiseWithModalBoolean,
-  })
-  if (modalControllerPlugin.create === noopPromise) {
-    throw Error(
-      'useModalController() was called outside of the setup() function! or the plugin is not provided.'
+  /*
+   * @deprecated use create({}).show() instead
+   */
+  const confirm = (
+    obj: ModalOrchestratorCreateParam = {}
+  ): PromiseWithComponent<typeof BModal, ModalOrchestratorParam> => {
+    // eslint-disable-next-line no-console
+    console.warn(
+      '[BootstrapVueNext] useModalController: The confirm() method is deprecated. Use create({}).show() instead.'
     )
+    return create(obj, {returnBoolean: true}).show() as PromiseWithComponent<
+      typeof BModal,
+      ModalOrchestratorParam
+    >
   }
 
   const {lastStack, stack, registry} = useSharedModalStack()
@@ -47,7 +176,7 @@ export const useModalController = () => {
         stackModal.exposed?.hide(trigger)
         return
       }
-      const modal = modalControllerPlugin.modals.value.get(id)
+      const modal = modals.value.find((el) => el._self === id)
       if (modal) {
         modal.modelValue = false
         modal['onUpdate:modelValue']?.(false)
@@ -68,8 +197,8 @@ export const useModalController = () => {
   }
 
   const get = (id: ControllerKey) => {
-    if (modalControllerPlugin.modals.value.get(id)) {
-      const modal = modalControllerPlugin.modals.value.get(id)
+    if (modals.value.find((el) => el._self === id)) {
+      const modal = modals.value.find((el) => el._self === id)
       return {
         modal,
         show() {
@@ -130,7 +259,11 @@ export const useModalController = () => {
     hideAll,
     get,
     current,
-    ...modalControllerPlugin,
+    create,
+    show,
+    confirm,
+    _isOrchestratorInstalled,
+    modals,
     // Todo: Supports listening events globally in the future
   }
 }
diff --git a/packages/bootstrap-vue-next/src/composables/usePopoverController/index.ts b/packages/bootstrap-vue-next/src/composables/usePopoverController/index.ts
index 41b9a0f6d..a754a45fb 100644
--- a/packages/bootstrap-vue-next/src/composables/usePopoverController/index.ts
+++ b/packages/bootstrap-vue-next/src/composables/usePopoverController/index.ts
@@ -1,27 +1,156 @@
-import {inject, ref} from 'vue'
+import {
+  inject,
+  isReadonly,
+  isRef,
+  markRaw,
+  onScopeDispose,
+  type Ref,
+  toRef,
+  toValue,
+  watch,
+} from 'vue'
 import {popoverPluginKey} from '../../utils/keys'
-import type {PromiseWithPopover} from '../../types'
+import type {
+  OrchestratorCreateOptions,
+  PopoverOrchestratorArrayValue,
+  PopoverOrchestratorCreateParam,
+  PopoverOrchestratorParam,
+  PromiseWithComponent,
+  TooltipOrchestratorArrayValue,
+  TooltipOrchestratorCreateParam,
+  TooltipOrchestratorParam,
+} from '../../types/ComponentOrchestratorTypes'
+import {BPopover, BTooltip} from '../../components'
+import {buildPromise} from '../shared'
 
 export const usePopoverController = () => {
-  const noopPromise = () => {
-    // eslint-disable-next-line no-console
-    console.warn(
+  const controller = inject(popoverPluginKey)
+  if (!controller) {
+    throw new Error(
       'usePopoverController() was called outside of the setup() function! or the plugin is not provided.'
     )
-    return Promise.resolve(null) as unknown as PromiseWithPopover
   }
-  const popoverControllerPlugin = inject(popoverPluginKey, {
-    popovers: ref(new Map()),
-    popover: noopPromise,
-    tooltip: noopPromise,
-    _isOrchestratorInstalled: ref(false),
-  })
-  if (popoverControllerPlugin.popover === noopPromise) {
-    throw new Error(
-      'usePopoverController() was called outside of the setup() function! or the plugin is not provided.'
+
+  const {popovers, _isOrchestratorInstalled} = controller
+
+  /**
+   * Create a popover or tooltip
+   * @param obj The popover or tooltip props
+   * @param tooltip If true, create a tooltip, otherwise create a popover
+   * @returns {PromiseWithComponent<typeof BPopover | typeof BTooltip, PopoverOrchestratorParam>} A promise object with methods to control the popover (show, hide, toggle, get, set, destroy)
+   */
+  const create = (
+    obj: PopoverOrchestratorCreateParam | TooltipOrchestratorCreateParam,
+    tooltip?: boolean,
+    options: OrchestratorCreateOptions = {}
+  ): PromiseWithComponent<
+    typeof BPopover | typeof BTooltip,
+    PopoverOrchestratorParam | TooltipOrchestratorParam
+  > => {
+    if (!_isOrchestratorInstalled.value) {
+      throw new Error(
+        'The BPopoverOrchestrator component must be mounted to use the popover controller'
+      )
+    }
+    const {component, slots} = toValue(obj)
+    if (component) {
+      if (isRef(obj)) obj.value.component = markRaw(component)
+      else if (typeof obj === 'object') obj.component = markRaw(component)
+    } else {
+      if (tooltip) {
+        if (isRef(obj)) obj.value.component = markRaw(BTooltip)
+        else if (typeof obj === 'object') obj.component = markRaw(BTooltip)
+      } else {
+        if (isRef(obj)) obj.value.component = markRaw(BPopover)
+        else if (typeof obj === 'object') obj.component = markRaw(BPopover)
+      }
+    }
+    if (slots) {
+      if (isRef(obj)) obj.value.slots = markRaw(slots)
+      else if (typeof obj === 'object') obj.slots = markRaw(slots)
+    }
+    const resolvedProps = toRef(obj)
+    const _self = resolvedProps.value?.id || Symbol('Popover controller')
+
+    const promise = buildPromise<
+      typeof BPopover | typeof BTooltip,
+      PopoverOrchestratorParam | TooltipOrchestratorParam,
+      PopoverOrchestratorArrayValue | TooltipOrchestratorArrayValue
+    >(_self, popovers)
+
+    promise.stop = watch(
+      resolvedProps,
+      (_newValue) => {
+        const newValue = {...toValue(_newValue)}
+        const previousIndex = popovers.value.findIndex((el) => el._self === _self)
+        const previous = previousIndex === -1 ? {} : popovers.value[previousIndex] || {}
+        // if (!previous) return
+        const v: PopoverOrchestratorArrayValue | TooltipOrchestratorArrayValue = {
+          type: 'popover',
+          _self,
+          position: 'popover',
+          ...previous,
+          tooltip,
+          promise,
+          options,
+        }
+
+        for (const key in newValue) {
+          if (key.startsWith('on')) {
+            v[key as keyof PopoverOrchestratorCreateParam] =
+              newValue[key as keyof PopoverOrchestratorCreateParam]
+          } else {
+            v[key as keyof PopoverOrchestratorCreateParam] = toValue(
+              newValue[key as keyof PopoverOrchestratorCreateParam]
+            )
+          }
+        }
+
+        v.modelValue = v.modelValue ?? false
+        v['onUpdate:modelValue'] = (val: boolean) => {
+          newValue['onUpdate:modelValue']?.(val)
+          const {modelValue} = toValue(obj)
+          if (isRef(obj) && !isRef(modelValue)) obj.value.modelValue = val
+          if (isRef(modelValue) && !isReadonly(modelValue)) {
+            ;(modelValue as Ref<PopoverOrchestratorParam['modelValue']>).value = val
+          }
+          if (v.modelValue !== val) {
+            const popover = popovers.value.find((el) => el._self === _self)
+            if (popover) {
+              popover.modelValue = val
+            }
+          }
+        }
+        if (previousIndex === -1) {
+          popovers.value.push(v)
+        } else {
+          popovers.value.splice(previousIndex, 1, v)
+        }
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
     )
+
+    onScopeDispose(() => {
+      const popover = popovers.value.find((el) => el._self === _self)
+      if (popover) {
+        popover.promise.value.destroy?.()
+      }
+    }, true)
+
+    return promise.value
   }
+
+  const tooltip = (obj: TooltipOrchestratorCreateParam) => create(obj, true)
+
+  const popover = (obj: PopoverOrchestratorCreateParam) => create(obj, false)
+
   return {
-    ...popoverControllerPlugin,
+    _isOrchestratorInstalled,
+    popover,
+    tooltip,
+    popovers,
   }
 }
diff --git a/packages/bootstrap-vue-next/src/composables/useToastController/index.ts b/packages/bootstrap-vue-next/src/composables/useToastController/index.ts
index 8ef21d6ec..9f6aa59ab 100644
--- a/packages/bootstrap-vue-next/src/composables/useToastController/index.ts
+++ b/packages/bootstrap-vue-next/src/composables/useToastController/index.ts
@@ -1,31 +1,160 @@
-import {inject, ref} from 'vue'
+import {
+  inject,
+  isReadonly,
+  isRef,
+  markRaw,
+  onScopeDispose,
+  type Ref,
+  toRef,
+  toValue,
+  watch,
+} from 'vue'
 import {toastPluginKey} from '../../utils/keys'
-import type {PromiseWithToast} from '../../types/ComponentOrchestratorTypes'
+import type {ContainerPosition} from '../../types/Alignment'
+import type {
+  OrchestratorCreateOptions,
+  PromiseWithComponent,
+  ToastOrchestratorArrayValue,
+  ToastOrchestratorCreateParam,
+  ToastOrchestratorParam,
+} from '../../types/ComponentOrchestratorTypes'
+import {buildPromise} from '../shared'
+
+import {BToast} from '../../components'
+
+const posDefault: ContainerPosition = 'top-end'
 
 export const useToastController = () => {
-  const noopPromise = () => {
-    // eslint-disable-next-line no-console
-    console.warn(
+  const controller = inject(toastPluginKey)
+  if (!controller) {
+    throw new Error(
       'useToastController() was called outside of the setup() function! or the plugin is not provided.'
     )
-    return Promise.resolve(null) as unknown as PromiseWithToast
   }
-  const toastContollerPlugin = inject(toastPluginKey, {
-    toasts: ref([]),
-    create: noopPromise,
-    /*
-      @deprecated
-      */
-    show: noopPromise,
-    _isAppend: ref(false),
-    _isOrchestratorInstalled: ref(false),
-  })
-  if (toastContollerPlugin.create === noopPromise) {
-    throw new Error(
-      'useToastController() was called outside of the setup() function! or the plugin is not provided.'
+
+  const {toasts, _isAppend, _isOrchestratorInstalled} = controller
+
+  /**
+   * @returns {PromiseWithComponent<typeof BToast, ToastOrchestratorParam>} Returns a promise object with methods to control the toast (show, hide, toggle, get, set, destroy)
+   */
+  const create = (
+    obj: ToastOrchestratorCreateParam = {},
+    options: OrchestratorCreateOptions = {}
+  ): PromiseWithComponent<typeof BToast, ToastOrchestratorParam> => {
+    const {component, slots} = toValue(obj)
+    if (component) {
+      if (isRef(obj)) obj.value.component = markRaw(component)
+      else if (typeof obj === 'object') obj.component = markRaw(component)
+    } else {
+      if (isRef(obj)) obj.value.component = markRaw(BToast)
+      else if (typeof obj === 'object') obj.component = markRaw(BToast)
+    }
+    if (slots) {
+      if (isRef(obj)) obj.value.slots = markRaw(slots)
+      else if (typeof obj === 'object') obj.slots = markRaw(slots)
+    }
+    const resolvedProps = toRef(obj)
+
+    const _self = resolvedProps.value?.id || Symbol('Toast controller')
+    const promise = buildPromise<
+      typeof BToast,
+      ToastOrchestratorParam,
+      ToastOrchestratorArrayValue
+    >(_self, toasts)
+
+    promise.stop = watch(
+      resolvedProps,
+      (_newValue) => {
+        const newValue = {...toValue(_newValue)}
+        const previousIndex = toasts.value.findIndex((el) => el._self === _self)
+        const previous = previousIndex === -1 ? {} : toasts.value[previousIndex] || {}
+        const v: ToastOrchestratorArrayValue = {
+          type: 'toast',
+          _self,
+          ...previous,
+          promise,
+          options,
+        }
+        if (newValue.props) {
+          Object.assign(v, newValue.props)
+          newValue.props = undefined
+        }
+        if (newValue.pos) {
+          v.position = newValue.pos
+          newValue.pos = undefined
+        }
+        for (const key in newValue) {
+          if (key.startsWith('on')) {
+            v[key as keyof ToastOrchestratorCreateParam] =
+              newValue[key as keyof ToastOrchestratorCreateParam]
+          } else {
+            v[key as keyof ToastOrchestratorCreateParam] = toValue(
+              newValue[key as keyof ToastOrchestratorCreateParam]
+            )
+          }
+        }
+        v.position = v.position || posDefault
+        v.modelValue = v.modelValue ?? 5000
+        v['onUpdate:modelValue'] = (val: boolean) => {
+          newValue['onUpdate:modelValue']?.(val)
+          const {modelValue} = toValue(obj)
+          if (isRef(obj) && !isRef(modelValue)) obj.value.modelValue = val
+          if (isRef(modelValue) && !isReadonly(modelValue)) {
+            ;(modelValue as Ref<ToastOrchestratorArrayValue['modelValue']>).value = val
+          }
+          if (v.modelValue !== val) {
+            const toast = toasts.value.find((el) => el._self === _self)
+            if (toast) {
+              toast.modelValue = val
+            }
+          }
+        }
+        if (previousIndex === -1) {
+          if (
+            resolvedProps.value?.appendToast !== undefined
+              ? resolvedProps.value.appendToast
+              : _isAppend.value
+          ) {
+            toasts.value.push(v)
+          } else {
+            toasts.value.unshift(v)
+          }
+        } else {
+          toasts.value.splice(previousIndex, 1, v)
+        }
+      },
+      {
+        deep: true,
+        immediate: true,
+      }
+    )
+    onScopeDispose(() => {
+      const toast = toasts.value.find((el) => el._self === _self)
+      if (toast) {
+        toast.promise.value.destroy?.()
+      }
+    }, true)
+    return promise.value
+  }
+
+  /*
+   * @deprecated The `show` method is deprecated. Use the `create` method instead.
+   */
+  const show = (
+    obj: ToastOrchestratorCreateParam = {}
+  ): PromiseWithComponent<typeof BToast, ToastOrchestratorParam> => {
+    // eslint-disable-next-line no-console
+    console.warn(
+      '[BootstrapVueNext] useToastController: The `show` method is deprecated. Use the `create` method instead.'
     )
+    return create(obj)
   }
+
   return {
-    ...toastContollerPlugin,
+    _isAppend,
+    _isOrchestratorInstalled,
+    toasts,
+    create,
+    show,
   }
 }
diff --git a/packages/bootstrap-vue-next/src/main.ts b/packages/bootstrap-vue-next/src/main.ts
index 95f507ec6..7b9aaec6e 100644
--- a/packages/bootstrap-vue-next/src/main.ts
+++ b/packages/bootstrap-vue-next/src/main.ts
@@ -3,7 +3,6 @@ import {createApp, h} from 'vue'
 import {createRouter, createWebHistory, useRoute} from 'vue-router'
 import App from './App.vue'
 import {Directives} from './index'
-import {createBootstrap} from './plugins/createBootstrap'
 import './styles/styles.scss'
 const router = createRouter({
   history: createWebHistory(),
@@ -45,7 +44,6 @@ const router = createRouter({
 })
 
 const app = createApp(App)
-app.use(createBootstrap())
 app.use(router)
 for (const name in Directives) {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
diff --git a/packages/bootstrap-vue-next/src/plugins/modalController/index.ts b/packages/bootstrap-vue-next/src/plugins/modalController/index.ts
index 62d724ef1..ffe35fa39 100644
--- a/packages/bootstrap-vue-next/src/plugins/modalController/index.ts
+++ b/packages/bootstrap-vue-next/src/plugins/modalController/index.ts
@@ -1,231 +1,16 @@
-import {
-  isReadonly,
-  isRef,
-  markRaw,
-  nextTick,
-  onScopeDispose,
-  type Plugin,
-  ref,
-  type Ref,
-  toRef,
-  toValue,
-  watch,
-  type WatchHandle,
-} from 'vue'
+import {type Plugin, ref} from 'vue'
 import {modalControllerPluginKey} from '../../utils/keys'
-import type {
-  ControllerKey,
-  ModalOrchestratorCreateOptions,
-  ModalOrchestratorCreateParam,
-  ModalOrchestratorMapValue,
-  ModalOrchestratorParam,
-  PromiseWithModal,
-  PromiseWithModalBoolean,
-  PromiseWithModalInternal,
-} from '../../types/ComponentOrchestratorTypes'
-import type {BvTriggerableEvent} from 'src/utils'
+import type {ModalOrchestratorArrayValue} from '../../types/ComponentOrchestratorTypes'
 
 export const modalControllerPlugin: Plugin = {
   install(app) {
-    const modals = ref(new Map<ControllerKey, ModalOrchestratorMapValue>())
+    const modals = ref<ModalOrchestratorArrayValue[]>([])
 
     const _isOrchestratorInstalled = ref(false)
 
-    const buildPromise = (
-      _id: ControllerKey
-    ): {
-      value: PromiseWithModal | PromiseWithModalBoolean
-      resolve: (value: BvTriggerableEvent | boolean | null) => void
-      stop?: WatchHandle
-    } => {
-      let resolveFunc: (value: BvTriggerableEvent | boolean | null) => void = () => {}
-
-      const promise = new Promise<BvTriggerableEvent | boolean | null>((resolve) => {
-        resolveFunc = resolve
-      }) as PromiseWithModal | PromiseWithModalBoolean
-      Object.assign(promise, {
-        id: _id,
-        ref: null,
-        show() {
-          if (!this.ref) return this.set({modelValue: true})
-          this.ref.show()
-          return promise
-        },
-        hide(trigger?: string) {
-          if (!this.ref) return this.set({modelValue: false})
-          this.ref.hide(trigger, true)
-          return promise
-        },
-        toggle() {
-          if (!this.ref) return this.set({modelValue: !this.get()?.modelValue})
-          this.ref.toggle()
-          return promise
-        },
-        get() {
-          return modals.value.get(_id)
-        },
-        set(val: Partial<ModalOrchestratorParam>) {
-          const modal = modals.value.get(_id)
-          if (modal) {
-            const v = {...toValue(modal), ...toValue(val)}
-            // add modal to v
-            if (modal.modelValue !== v.modelValue) {
-              modal['onUpdate:modelValue']?.(v.modelValue as boolean)
-            }
-            modals.value.set(_id, {
-              ...v,
-              title: toValue(v.title),
-              body: toValue(v.body),
-              modelValue: toValue(v.modelValue),
-            })
-          }
-          return promise
-        },
-        async destroy() {
-          const modal = modals.value.get(_id)
-          if (!modal) return
-          modal.promise.stop?.()
-          if (modal.modelValue) {
-            await new Promise((resolve) => {
-              modal.modelValue = false
-              const prev = modal['onHidden']
-              modal['onHidden'] = (e) => {
-                prev?.(e)
-                resolve(e)
-              }
-              nextTick(() => {
-                modal['onUpdate:modelValue']?.(false)
-              })
-            })
-          }
-          modals.value.delete(_id)
-        },
-
-        async [Symbol.asyncDispose]() {
-          await this.destroy()
-        },
-      } as PromiseWithModalInternal)
-
-      return {
-        value: promise,
-        resolve: resolveFunc,
-      }
-    }
-
-    /**
-     * @returns {PromiseWithModal}  Returns a promise object with methods to control the modal (show, hide, toggle, get, set, destroy)
-     */
-    const create = (
-      obj: ModalOrchestratorCreateParam = {},
-      options: ModalOrchestratorCreateOptions = {}
-    ): PromiseWithModal | PromiseWithModalBoolean => {
-      if (!_isOrchestratorInstalled.value) {
-        throw new Error(
-          'The BModalOrchestrator component must be mounted to use the modal controller'
-        )
-      }
-
-      const {component, slots} = toValue(obj)
-      if (component) {
-        if (isRef(obj)) obj.value.component = markRaw(component)
-        else if (typeof obj === 'object') obj.component = markRaw(component)
-      }
-      if (slots) {
-        if (isRef(obj)) obj.value.slots = markRaw(slots)
-        else if (typeof obj === 'object') obj.slots = markRaw(slots)
-      }
-      const resolvedProps = toRef(obj)
-      const _self = resolvedProps.value?.id || Symbol('Modals controller')
-
-      const promise = buildPromise(_self)
-
-      promise.stop = watch(
-        resolvedProps,
-        (_newValue) => {
-          const newValue = {...toValue(_newValue)}
-          const previous = modals.value.get(_self)
-          // if (!previous) return
-          const v = {
-            ...(previous || {}),
-          }
-
-          if (newValue.props) {
-            Object.assign(v, newValue.props)
-            newValue.props = undefined
-          }
-          for (const key in newValue) {
-            if (key.startsWith('on')) {
-              v[key as keyof ModalOrchestratorCreateParam] =
-                newValue[key as keyof ModalOrchestratorCreateParam]
-            } else {
-              v[key as keyof ModalOrchestratorCreateParam] = toValue(
-                newValue[key as keyof ModalOrchestratorCreateParam]
-              )
-            }
-          }
-          modals.value.set(_self, {
-            ...v,
-            ...(v.modelValue === undefined && {modelValue: true}),
-            'onUpdate:modelValue': (val: boolean) => {
-              newValue['onUpdate:modelValue']?.(val)
-              const {modelValue} = toValue(obj)
-              if (isRef(obj) && !isRef(modelValue)) obj.value.modelValue = val
-              if (isRef(modelValue) && !isReadonly(modelValue)) {
-                ;(modelValue as Ref<ModalOrchestratorMapValue['modelValue']>).value = val
-              }
-              const modal = modals.value.get(_self)
-              if (modal) {
-                modals.value.set(_self, {
-                  ...modal,
-                  modelValue: val,
-                })
-              }
-            },
-            options,
-            promise,
-          })
-        },
-        {
-          immediate: true,
-          deep: true,
-        }
-      )
-      onScopeDispose(() => {
-        const modal = modals.value.get(_self)
-        if (modal) {
-          modal.promise.value.destroy?.()
-        }
-      }, true)
-      return promise.value
-    }
-
-    /*
-     * @deprecated use create({}).show() instead
-     */
-    const show = (obj: ModalOrchestratorCreateParam = {}): PromiseWithModalBoolean => {
-      // eslint-disable-next-line no-console
-      console.warn(
-        '[BootstrapVueNext] useModalController: The show() method is deprecated. Use create({}).show() instead.'
-      )
-      return create(obj, {returnBoolean: true}).show() as PromiseWithModalBoolean
-    }
-    /*
-     * @deprecated use create({}).show() instead
-     */
-    const confirm = (obj: ModalOrchestratorCreateParam = {}): PromiseWithModalBoolean => {
-      // eslint-disable-next-line no-console
-      console.warn(
-        '[BootstrapVueNext] useModalController: The confirm() method is deprecated. Use create({}).show() instead.'
-      )
-      return create(obj, {returnBoolean: true}).show() as PromiseWithModalBoolean
-    }
-
     app.provide(modalControllerPluginKey, {
       _isOrchestratorInstalled,
-      create,
       modals,
-      show,
-      confirm,
     })
   },
 }
diff --git a/packages/bootstrap-vue-next/src/plugins/popoverController/index.ts b/packages/bootstrap-vue-next/src/plugins/popoverController/index.ts
index 5a050fd47..eea7407d5 100644
--- a/packages/bootstrap-vue-next/src/plugins/popoverController/index.ts
+++ b/packages/bootstrap-vue-next/src/plugins/popoverController/index.ts
@@ -1,212 +1,15 @@
-import {
-  isReadonly,
-  isRef,
-  markRaw,
-  nextTick,
-  onScopeDispose,
-  type Plugin,
-  ref,
-  type Ref,
-  toRef,
-  toValue,
-  watch,
-  type WatchHandle,
-} from 'vue'
+import {type Plugin, ref} from 'vue'
 import {popoverPluginKey} from '../../utils/keys'
-import type {
-  ControllerKey,
-  PopoverOrchestratorCreateParam,
-  PopoverOrchestratorMapValue,
-  PopoverOrchestratorParam,
-  PromiseWithPopover,
-  PromiseWithPopoverInternal,
-  TooltipOrchestratorCreateParam,
-  TooltipOrchestratorMapValue,
-  TooltipOrchestratorParam,
-} from '../../types/ComponentOrchestratorTypes'
-import type {BvTriggerableEvent} from '../../utils'
+import type {PopoverOrchestratorArrayValue} from '../../types/ComponentOrchestratorTypes'
 
 export const popoverPlugin: Plugin = {
   install(app) {
     const _isOrchestratorInstalled = ref(false)
-    const popovers = ref(
-      new Map<ControllerKey, PopoverOrchestratorMapValue | TooltipOrchestratorMapValue>()
-    )
-
-    const buildPromise = (
-      _id: ControllerKey,
-      store: Ref<Map<ControllerKey, PopoverOrchestratorMapValue | TooltipOrchestratorMapValue>>
-    ): {
-      value: PromiseWithPopover
-      resolve: (value: BvTriggerableEvent) => void
-      stop?: WatchHandle
-    } => {
-      let resolveFunc: (value: BvTriggerableEvent) => void = () => {}
-
-      const promise = new Promise<BvTriggerableEvent>((resolve) => {
-        resolveFunc = resolve
-      }) as PromiseWithPopover
-      Object.assign(promise, {
-        id: _id,
-        ref: null,
-        show() {
-          if (!this.ref) return this.set({modelValue: true})
-          this.ref.show()
-          return promise
-        },
-        hide(trigger?: string) {
-          if (!this.ref) return this.set({modelValue: false})
-          this.ref.hide(trigger, true)
-          return promise
-        },
-        toggle() {
-          if (!this.ref) return this.set({modelValue: !this.get()?.modelValue})
-          this.ref.toggle()
-          return promise
-        },
-        get() {
-          return store.value.get(_id)
-        },
-        set(val: Partial<PopoverOrchestratorParam | TooltipOrchestratorParam>) {
-          const item = store.value.get(_id)
-          if (item) {
-            const v = {...toValue(item), ...toValue(val)}
-            // add modal to v
-            if (item.modelValue !== v.modelValue) {
-              item['onUpdate:modelValue']?.(v.modelValue as boolean)
-            }
-            store.value.set(_id, {
-              ...v,
-              title: toValue(v.title),
-              body: toValue(v.body),
-              modelValue: toValue(v.modelValue),
-            })
-          }
-          return promise
-        },
-        async destroy() {
-          const item = store.value.get(_id)
-          if (!item) return
-          item.promise.stop?.()
-          if (item.modelValue) {
-            await new Promise((resolve) => {
-              item.modelValue = false
-              const prev = item['onHidden']
-              item['onHidden'] = (e) => {
-                prev?.(e)
-                resolve(e)
-              }
-              nextTick(() => {
-                item['onUpdate:modelValue']?.(false)
-              })
-            })
-          }
-          store.value.delete(_id)
-        },
-
-        async [Symbol.asyncDispose]() {
-          await this.destroy()
-        },
-      } as PromiseWithPopoverInternal)
-
-      return {
-        value: promise,
-        resolve: resolveFunc,
-      }
-    }
-
-    /**
-     * Create a popover or tooltip
-     * @param obj The popover or tooltip props
-     * @param tooltip If true, create a tooltip, otherwise create a popover
-     * @returns {PromiseWithPopover} A promise object with methods to control the popover (show, hide, toggle, get, set, destroy)
-     */
-    const create = (obj: PopoverOrchestratorCreateParam, tooltip?: boolean): PromiseWithPopover => {
-      if (!_isOrchestratorInstalled.value) {
-        throw new Error(
-          'The BPopoverOrchestrator component must be mounted to use the popover controller'
-        )
-      }
-      const {component, slots} = toValue(obj)
-      if (component) {
-        if (isRef(obj)) obj.value.component = markRaw(component)
-        else if (typeof obj === 'object') obj.component = markRaw(component)
-      }
-      if (slots) {
-        if (isRef(obj)) obj.value.slots = markRaw(slots)
-        else if (typeof obj === 'object') obj.slots = markRaw(slots)
-      }
-      const resolvedProps = toRef(obj)
-      const _self = resolvedProps.value?.id || Symbol('Popover controller')
-
-      const promise = buildPromise(_self, popovers)
-
-      promise.stop = watch(
-        resolvedProps,
-        (_newValue) => {
-          const newValue = {...toValue(_newValue)}
-          const previous = popovers.value.get(_self)
-          // if (!previous) return
-          const v: Partial<PopoverOrchestratorMapValue> = {
-            ...(previous || {}),
-          }
-
-          for (const key in newValue) {
-            if (key.startsWith('on')) {
-              v[key as keyof PopoverOrchestratorCreateParam] =
-                newValue[key as keyof PopoverOrchestratorCreateParam]
-            } else {
-              v[key as keyof PopoverOrchestratorCreateParam] = toValue(
-                newValue[key as keyof PopoverOrchestratorCreateParam]
-              )
-            }
-          }
-          popovers.value.set(_self, {
-            ...v,
-            ...(v.modelValue === undefined && {modelValue: false}),
-            'onUpdate:modelValue': (val: boolean) => {
-              newValue['onUpdate:modelValue']?.(val)
-              const {modelValue} = toValue(obj)
-              if (isRef(obj) && !isRef(modelValue)) obj.value.modelValue = val
-              if (isRef(modelValue) && !isReadonly(modelValue)) {
-                ;(modelValue as Ref<PopoverOrchestratorParam['modelValue']>).value = val
-              }
-              if (v.modelValue !== val) {
-                const popover = popovers.value.get(_self)
-                if (popover) {
-                  popover.modelValue = val
-                }
-              }
-            },
-            tooltip,
-            promise,
-          })
-        },
-        {
-          immediate: true,
-          deep: true,
-        }
-      )
-
-      onScopeDispose(() => {
-        const popover = popovers.value.get(_self)
-        if (popover) {
-          popover.promise.value.destroy?.()
-        }
-      }, true)
-
-      return promise.value
-    }
-
-    const tooltip = (obj: TooltipOrchestratorCreateParam): PromiseWithPopover => create(obj, true)
-
-    const popover = (obj: PopoverOrchestratorCreateParam): PromiseWithPopover => create(obj, false)
+    const popovers = ref<PopoverOrchestratorArrayValue[]>([])
 
     app.provide(popoverPluginKey, {
       _isOrchestratorInstalled,
       popovers,
-      tooltip,
-      popover,
     })
   },
 }
diff --git a/packages/bootstrap-vue-next/src/plugins/toastController/index.ts b/packages/bootstrap-vue-next/src/plugins/toastController/index.ts
index 2a17829da..f7c42b834 100644
--- a/packages/bootstrap-vue-next/src/plugins/toastController/index.ts
+++ b/packages/bootstrap-vue-next/src/plugins/toastController/index.ts
@@ -1,31 +1,6 @@
-import {
-  isReadonly,
-  isRef,
-  markRaw,
-  nextTick,
-  onScopeDispose,
-  type Plugin,
-  ref,
-  type Ref,
-  toRef,
-  toValue,
-  watch,
-  type WatchHandle,
-} from 'vue'
+import {type Plugin, ref} from 'vue'
 import {toastPluginKey} from '../../utils/keys'
-import type {ContainerPosition} from '../../types/Alignment'
-import type {
-  ControllerKey,
-  PromiseWithToast,
-  PromiseWithToastInternal,
-  ToastOrchestratorArrayValue,
-  ToastOrchestratorCreateOptions,
-  ToastOrchestratorCreateParam,
-  ToastOrchestratorParam,
-} from '../../types/ComponentOrchestratorTypes'
-import type {BvTriggerableEvent} from '../../utils'
-
-const posDefault: ContainerPosition = 'top-end'
+import type {ToastOrchestratorArrayValue} from '../../types/ComponentOrchestratorTypes'
 
 export const toastPlugin: Plugin = {
   install(app) {
@@ -33,201 +8,10 @@ export const toastPlugin: Plugin = {
 
     const _isAppend = ref(false)
 
-    const buildPromise = (
-      _id: ControllerKey
-    ): {
-      value: PromiseWithToast
-      resolve: (value: BvTriggerableEvent) => void
-      stop?: WatchHandle
-    } => {
-      let resolveFunc: (value: BvTriggerableEvent) => void = () => {}
-
-      const promise = new Promise<BvTriggerableEvent>((resolve) => {
-        resolveFunc = resolve
-      }) as PromiseWithToast
-      Object.assign(promise, {
-        id: _id,
-        ref: null,
-        show() {
-          if (!this.ref) return this.set({modelValue: true})
-          this.ref.show()
-          return promise
-        },
-        hide(trigger?: string) {
-          if (!this.ref) return this.set({modelValue: false})
-          this.ref.hide(trigger, true)
-          return promise
-        },
-        toggle() {
-          if (!this.ref) return this.set({modelValue: !this.get()?.modelValue})
-          this.ref.toggle()
-          return promise
-        },
-        get() {
-          return toasts.value.find((el) => el._self === _id)
-        },
-        set(val: Partial<ToastOrchestratorParam>) {
-          const toastIndex = toasts.value.findIndex((el) => el._self === _id)
-          const toast = toasts.value[toastIndex]
-          if (toast) {
-            const v = {...toValue(toast), ...toValue(val)}
-            if (toast.modelValue !== v.modelValue) {
-              toast['onUpdate:modelValue']?.(v.modelValue as boolean)
-            }
-            toasts.value.splice(toastIndex, 1, {
-              ...v,
-              title: toValue(v.title),
-              body: toValue(v.body),
-              modelValue: toValue(v.modelValue),
-            })
-          }
-          return promise
-        },
-        async destroy() {
-          const toast = toasts.value.find((el) => el._self === _id)
-          if (!toast) return
-          toast.promise.stop?.()
-          if (toast.modelValue) {
-            await new Promise((resolve) => {
-              toast.modelValue = false
-              const prev = toast['onHidden']
-              toast['onHidden'] = (e) => {
-                prev?.(e)
-                resolve(e)
-              }
-              nextTick(() => {
-                toast['onUpdate:modelValue']?.(false)
-              })
-            })
-          }
-          toasts.value.splice(
-            toasts.value.findIndex((el) => el._self === _id),
-            1
-          )
-        },
-        async [Symbol.asyncDispose]() {
-          await this.destroy()
-        },
-      } as PromiseWithToastInternal)
-
-      return {
-        value: promise,
-        resolve: resolveFunc,
-      }
-    }
-
-    /**
-     * @returns {PromiseWithToast} Returns a promise object with methods to control the toast (show, hide, toggle, get, set, destroy)
-     */
-    const create = (
-      obj: ToastOrchestratorCreateParam = {},
-      options: ToastOrchestratorCreateOptions = {}
-    ): PromiseWithToast => {
-      const {component, slots} = toValue(obj)
-      if (component) {
-        if (isRef(obj)) obj.value.component = markRaw(component)
-        else if (typeof obj === 'object') obj.component = markRaw(component)
-      }
-      if (slots) {
-        if (isRef(obj)) obj.value.slots = markRaw(slots)
-        else if (typeof obj === 'object') obj.slots = markRaw(slots)
-      }
-      const resolvedProps = toRef(obj)
-
-      const _self = resolvedProps.value?.id || Symbol('Toast controller')
-      const promise = buildPromise(_self)
-
-      promise.stop = watch(
-        resolvedProps,
-        (_newValue) => {
-          const newValue = {...toValue(_newValue)}
-          const previousIndex = toasts.value.findIndex((el) => el._self === _self)
-          const previous = previousIndex === -1 ? {} : toasts.value[previousIndex]
-          const v: ToastOrchestratorArrayValue = {
-            _self,
-            ...(previous || {}),
-            promise,
-            options,
-          }
-          if (newValue.props) {
-            Object.assign(v, newValue.props)
-            newValue.props = undefined
-          }
-          if (newValue.pos) {
-            v.position = newValue.pos
-            newValue.pos = undefined
-          }
-          for (const key in newValue) {
-            if (key.startsWith('on')) {
-              v[key as keyof ToastOrchestratorCreateParam] =
-                newValue[key as keyof ToastOrchestratorCreateParam]
-            } else {
-              v[key as keyof ToastOrchestratorCreateParam] = toValue(
-                newValue[key as keyof ToastOrchestratorCreateParam]
-              )
-            }
-          }
-          v.position = v.position || posDefault
-          v.modelValue = v.modelValue ?? 5000
-          v['onUpdate:modelValue'] = (val: boolean) => {
-            newValue['onUpdate:modelValue']?.(val)
-            const {modelValue} = toValue(obj)
-            if (isRef(obj) && !isRef(modelValue)) obj.value.modelValue = val
-            if (isRef(modelValue) && !isReadonly(modelValue)) {
-              ;(modelValue as Ref<ToastOrchestratorArrayValue['modelValue']>).value = val
-            }
-            if (v.modelValue !== val) {
-              const toast = toasts.value.find((el) => el._self === _self)
-              if (toast) {
-                toast.modelValue = val
-              }
-            }
-          }
-          if (previousIndex === -1) {
-            if (
-              resolvedProps.value?.appendToast !== undefined
-                ? resolvedProps.value.appendToast
-                : _isAppend.value
-            ) {
-              toasts.value.push(v)
-            } else {
-              toasts.value.unshift(v)
-            }
-          } else {
-            toasts.value.splice(previousIndex, 1, v)
-          }
-        },
-        {
-          deep: true,
-          immediate: true,
-        }
-      )
-      onScopeDispose(() => {
-        const toast = toasts.value.find((el) => el._self === _self)
-        if (toast) {
-          toast.promise.value.destroy?.()
-        }
-      }, true)
-      return promise.value
-    }
-
-    /*
-     * @deprecated The `show` method is deprecated. Use the `create` method instead.
-     */
-    const show = (obj: ToastOrchestratorCreateParam = {}): PromiseWithToast => {
-      // eslint-disable-next-line no-console
-      console.warn(
-        '[BootstrapVueNext] useToastController: The `show` method is deprecated. Use the `create` method instead.'
-      )
-      return create(obj)
-    }
-
     app.provide(toastPluginKey, {
       _isAppend,
       _isOrchestratorInstalled: ref(false),
       toasts,
-      create,
-      show,
     })
   },
 }
diff --git a/packages/bootstrap-vue-next/src/types/BootstrapVueOptions.ts b/packages/bootstrap-vue-next/src/types/BootstrapVueOptions.ts
index 99f8a8dc0..8ce2a502e 100644
--- a/packages/bootstrap-vue-next/src/types/BootstrapVueOptions.ts
+++ b/packages/bootstrap-vue-next/src/types/BootstrapVueOptions.ts
@@ -17,6 +17,7 @@ export const componentsWithExternalPath = {
   BAccordion: '/components/BAccordion',
   BAccordionItem: '/components/BAccordion',
   BAlert: '/components/BAlert',
+  BApp: '/components/BApp',
   BAvatar: '/components/BAvatar',
   BAvatarGroup: '/components/BAvatar',
   BBadge: '/components/BBadge',
@@ -196,6 +197,7 @@ export interface BootstrapVueOptions {
 type UnmappedComponentProps<BFormSelectOption = any, BTableLite = any, BTable = any> = {
   BLink: ComponentProps.BLinkProps
   BAccordion: ComponentProps.BAccordionProps
+  BApp: ComponentProps.BAppProps
   BDropdownDivider: ComponentProps.BDropdownDividerProps
   BDropdownGroup: ComponentProps.BDropdownGroupProps
   BDropdownItem: ComponentProps.BDropdownItemProps
diff --git a/packages/bootstrap-vue-next/src/types/ComponentOrchestratorTypes.ts b/packages/bootstrap-vue-next/src/types/ComponentOrchestratorTypes.ts
index 687bf947a..ae9db928b 100644
--- a/packages/bootstrap-vue-next/src/types/ComponentOrchestratorTypes.ts
+++ b/packages/bootstrap-vue-next/src/types/ComponentOrchestratorTypes.ts
@@ -10,6 +10,21 @@ import type BPopover from '../components/BPopover/BPopover.vue'
 import type BTooltip from '../components/BTooltip/BTooltip.vue'
 
 export type ControllerKey = symbol | string
+
+export interface PromiseWithComponent<T, P>
+  extends Promise<BvTriggerableEvent | boolean | null>,
+    PromiseWithComponentInternal<T, P> {}
+export interface PromiseWithComponentInternal<T, P> extends AsyncDisposable {
+  id: ControllerKey
+  ref: ComponentPublicInstance<T> | null
+  show: () => PromiseWithComponent<T, P>
+  hide: (trigger?: string, noTriggerEmit?: boolean) => PromiseWithComponent<T, P>
+  toggle: () => PromiseWithComponent<T, P>
+  set: (val: Partial<P>) => PromiseWithComponent<T, P>
+  get: () => P | undefined
+  destroy: () => void
+}
+
 export interface PromiseWithModalInternal extends AsyncDisposable {
   id: ControllerKey
   ref: ComponentPublicInstance<typeof BModal> | null
@@ -38,12 +53,13 @@ export interface PromiseWithToastInternal extends AsyncDisposable {
   id: ControllerKey
   ref: ComponentPublicInstance<typeof BToast> | null
   show: () => PromiseWithToast
-  hide: (trigger?: string) => void
-  toggle: () => void
-  set: (val: Partial<ToastOrchestratorParam>) => void
+  hide: (trigger?: string) => PromiseWithToast
+  toggle: () => PromiseWithToast
+  set: (val: Partial<ToastOrchestratorParam>) => PromiseWithToast
   get: () => ToastOrchestratorParam | undefined
   destroy: () => void
 }
+
 export interface PromiseWithPopover
   extends Promise<BvTriggerableEvent>,
     PromiseWithPopoverInternal {}
@@ -86,12 +102,13 @@ export type ToastOrchestratorArrayValue = Omit<BToastProps, 'modelValue'> & {
   '_self': ControllerKey
   'onUpdate:modelValue'?: (val: boolean) => void
   'component'?: Readonly<Component>
-  'options': ToastOrchestratorCreateOptions
+  'options': OrchestratorCreateOptions
   'promise': {
-    value: PromiseWithToast
-    resolve: (value: BvTriggerableEvent) => void
+    value: PromiseWithComponent<typeof BToast, ToastOrchestratorParam>
+    resolve: (value: BvTriggerableEvent | boolean | null) => void
     stop?: WatchHandle
   }
+  'type': 'toast'
 } & {
   [K in keyof BToastEmits as CamelCase<Prefix<'on-', K>>]?: (e: BToastEmits[K][0]) => void
 } & {
@@ -143,6 +160,25 @@ export type ToastOrchestratorParam = Omit<BToastProps, 'modelValue'> & {
 
 export type ToastOrchestratorCreateParam = MaybeRef<ToastOrchestratorParam>
 
+export type TooltipOrchestratorArrayValue = BTooltipProps & {
+  'type': 'tooltip'
+  '_self': ControllerKey
+  'position': 'popover'
+  'options': OrchestratorCreateOptions
+  'onUpdate:modelValue'?: (val: boolean) => void
+  'component'?: Readonly<Component>
+  'promise': {
+    value: PromiseWithPopover
+    resolve: (value: BvTriggerableEvent) => void
+    stop?: WatchHandle
+  }
+  'slots'?: {
+    [K in keyof Omit<BPopoverSlots, 'target'>]?: BPopoverSlots[K] | Readonly<Component>
+  }
+} & {
+  [K in keyof BPopoverEmits as CamelCase<Prefix<'on-', K>>]?: (e: BPopoverEmits[K][0]) => void
+}
+
 export type TooltipOrchestratorMapValue = BTooltipProps & {
   'onUpdate:modelValue'?: (val: boolean) => void
   'component'?: Readonly<Component>
@@ -175,6 +211,26 @@ export type TooltipOrchestratorParam = Omit<BTooltipProps, 'body' | 'title' | 'm
 
 export type TooltipOrchestratorCreateParam = MaybeRef<TooltipOrchestratorParam>
 
+export type PopoverOrchestratorArrayValue = BPopoverProps &
+  BTooltipProps & {
+    'type': 'popover'
+    '_self': ControllerKey
+    'position': 'popover'
+    'options': OrchestratorCreateOptions
+    'onUpdate:modelValue'?: (val: boolean) => void
+    'component'?: Readonly<Component>
+    'promise': {
+      value: PromiseWithComponent<typeof BPopover | typeof BTooltip, PopoverOrchestratorParam>
+      resolve: (value: BvTriggerableEvent | boolean | null) => void
+      stop?: WatchHandle
+    }
+    'slots'?: {
+      [K in keyof Omit<BPopoverSlots, 'target'>]?: BPopoverSlots[K] | Readonly<Component>
+    }
+  } & {
+    [K in keyof BPopoverEmits as CamelCase<Prefix<'on-', K>>]?: (e: BPopoverEmits[K][0]) => void
+  }
+
 export type PopoverOrchestratorMapValue = BPopoverProps &
   BTooltipProps & {
     'onUpdate:modelValue'?: (val: boolean) => void
@@ -208,6 +264,25 @@ export type PopoverOrchestratorParam = Omit<BPopoverProps, 'body' | 'title' | 'm
 
 export type PopoverOrchestratorCreateParam = MaybeRef<PopoverOrchestratorParam>
 
+export type ModalOrchestratorArrayValue = BModalProps & {
+  'type': 'modal'
+  '_self': ControllerKey
+  'position': 'modal'
+  'onUpdate:modelValue'?: (val: boolean) => void
+  'options': ModalOrchestratorCreateOptions
+  'promise': {
+    value: PromiseWithModal | PromiseWithModalBoolean
+    resolve: (value: BvTriggerableEvent | boolean | null) => void
+    stop?: WatchHandle
+  }
+  'component'?: Readonly<Component>
+  'slots'?: {
+    [K in keyof BModalSlots]?: BModalSlots[K] | Readonly<Component>
+  }
+} & {
+  [K in keyof BModalEmits as CamelCase<Prefix<'on-', K>>]?: (e: BModalEmits[K][0]) => void
+}
+
 export type ModalOrchestratorMapValue = BModalProps & {
   'onUpdate:modelValue'?: (val: boolean) => void
   'options': ModalOrchestratorCreateOptions
@@ -252,7 +327,11 @@ export type ModalOrchestratorCreateOptions = {
    */
   returnBoolean?: boolean
 }
-export type ToastOrchestratorCreateOptions = {
+export type OrchestratorCreateOptions = {
   keep?: boolean
   resolveOnHide?: boolean
+  /*
+   * @deprecated
+   */
+  returnBoolean?: boolean
 }
diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
index 06a0a781d..75bb8ef88 100644
--- a/packages/bootstrap-vue-next/src/types/ComponentProps.ts
+++ b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -6,7 +6,7 @@ import type {
   RootBoundary,
   Strategy,
 } from '@floating-ui/vue'
-import type {AriaAttributes, ComponentPublicInstance, TransitionProps} from 'vue'
+import type {AriaAttributes, ComponentPublicInstance, TeleportProps, TransitionProps} from 'vue'
 import type {RouteLocationRaw} from 'vue-router'
 import type {LinkTarget} from './LinkTarget'
 import type {
@@ -68,6 +68,32 @@ import type {
 } from './TableTypes'
 import type {PopoverPlacement} from './PopoverPlacement'
 import type {InputType} from './InputType'
+import type {BvnComponentProps} from './BootstrapVueOptions'
+
+export interface BAppProps {
+  defaults?: Partial<BvnComponentProps>
+  mergeDefaults?: boolean
+  deepMerge?: boolean
+  teleportTo?: TeleportProps['to']
+  noModals?: boolean
+  noToasts?: boolean
+  noPopovers?: boolean
+  noOrchestrator?: boolean
+  appendToast?: boolean
+  inhert?: boolean
+  rtl?:
+    | boolean
+    | {
+        /**
+         * @default false
+         */
+        rtlInitial: boolean
+        /**
+         * @default undefined
+         */
+        localeInitial: string | undefined
+      }
+}
 
 export interface BLinkProps {
   active?: boolean
diff --git a/packages/bootstrap-vue-next/src/utils/keys.ts b/packages/bootstrap-vue-next/src/utils/keys.ts
index b6707877d..dbf8b8252 100644
--- a/packages/bootstrap-vue-next/src/utils/keys.ts
+++ b/packages/bootstrap-vue-next/src/utils/keys.ts
@@ -15,20 +15,9 @@ import type {CheckboxValue} from '../types/CheckboxTypes'
 import type {RadioValue} from '../types/RadioTypes'
 import type {BreadcrumbItemRaw} from '../types/BreadcrumbTypes'
 import type {
-  ControllerKey,
-  ModalOrchestratorCreateOptions,
-  ModalOrchestratorCreateParam,
-  ModalOrchestratorMapValue,
-  PopoverOrchestratorCreateParam,
-  PopoverOrchestratorMapValue,
-  PromiseWithModal,
-  PromiseWithModalBoolean,
-  PromiseWithPopover,
-  PromiseWithToast,
+  ModalOrchestratorArrayValue,
+  PopoverOrchestratorArrayValue,
   ToastOrchestratorArrayValue,
-  ToastOrchestratorCreateOptions,
-  ToastOrchestratorCreateParam,
-  TooltipOrchestratorCreateParam,
 } from '../types/ComponentOrchestratorTypes'
 import type {BvnComponentProps} from '../types/BootstrapVueOptions'
 
@@ -225,40 +214,15 @@ export const toastPluginKey: InjectionKey<{
   toasts: Ref<ToastOrchestratorArrayValue[]>
   _isAppend: Ref<boolean>
   _isOrchestratorInstalled: Ref<boolean>
-  create: (
-    obj: ToastOrchestratorCreateParam,
-    options?: ToastOrchestratorCreateOptions
-  ) => PromiseWithToast
-  /**
-   * show
-   * @deprecated
-   */
-  show: (obj: ToastOrchestratorCreateParam) => PromiseWithToast
 }> = createBvnPluginInjectionKey('toast')
 
 export const modalControllerPluginKey: InjectionKey<{
-  modals: Ref<Map<ControllerKey, ModalOrchestratorMapValue>>
+  modals: Ref<ModalOrchestratorArrayValue[]>
   _isOrchestratorInstalled: Ref<boolean>
-  create: (
-    obj: ModalOrchestratorCreateParam,
-    options?: ModalOrchestratorCreateOptions
-  ) => PromiseWithModal | PromiseWithModalBoolean
-  /**
-   * show
-   * @deprecated
-   */
-  show: (obj: ModalOrchestratorCreateParam) => PromiseWithModalBoolean
-  /**
-   * show
-   * @deprecated
-   */
-  confirm: (obj: ModalOrchestratorCreateParam) => PromiseWithModalBoolean
 }> = createBvnPluginInjectionKey('modalController')
 
 export const popoverPluginKey: InjectionKey<{
-  popovers: Ref<Map<ControllerKey, PopoverOrchestratorMapValue>>
-  popover: (obj: PopoverOrchestratorCreateParam) => PromiseWithPopover
-  tooltip: (obj: TooltipOrchestratorCreateParam) => PromiseWithPopover
+  popovers: Ref<PopoverOrchestratorArrayValue[]>
   _isOrchestratorInstalled: Ref<boolean>
 }> = createBvnPluginInjectionKey('popover')
 

From 7e73b4a7e384a74f58598adf1a7ddf6478411ed8 Mon Sep 17 00:00:00 2001
From: Jukka Raimovaara <roska@mentalhouse.fi>
Date: Fri, 6 Jun 2025 12:44:06 +0300
Subject: [PATCH 2/4] small fiexes

---
 .../src/components/BApp/BApp.vue              | 44 +++++++++++--------
 .../src/components/BApp/BAppOrchestrator.vue  |  2 +-
 .../components/BToast/BToastOrchestrator.vue  |  4 +-
 .../src/types/ComponentProps.ts               |  2 +-
 4 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BApp/BApp.vue b/packages/bootstrap-vue-next/src/components/BApp/BApp.vue
index 1faeb10b9..9cf05a392 100644
--- a/packages/bootstrap-vue-next/src/components/BApp/BApp.vue
+++ b/packages/bootstrap-vue-next/src/components/BApp/BApp.vue
@@ -53,7 +53,7 @@ const props = withDefaults(defineProps<BAppProps>(), {
   noModals: false,
   noToasts: false,
   noPopovers: false,
-  inhert: false,
+  inherit: false,
   appendToast: false,
   teleportTo: undefined,
   defaults: undefined,
@@ -71,7 +71,12 @@ function deepMerge(
   source: Record<string, unknown>
 ): Record<string, unknown> {
   for (const key in source) {
-    if (source[key] instanceof Object && target[key] instanceof Object) {
+    if (
+      source[key] instanceof Object &&
+      target[key] instanceof Object &&
+      !Array.isArray(source[key]) &&
+      !Array.isArray(target[key])
+    ) {
       deepMerge(target[key] as Record<string, unknown>, source[key] as Record<string, unknown>)
     } else {
       target[key] = source[key]
@@ -109,35 +114,38 @@ const toastController = inject(toastPluginKey, undefined)
 const modalController = inject(modalControllerPluginKey, undefined)
 
 if (!props.noPopovers) {
-  if (popoverController && props.inhert) {
+  if (popoverController && props.inherit) {
     provide(popoverPluginKey, popoverController)
+  } else {
+    provide(popoverPluginKey, {
+      popovers: ref<PopoverOrchestratorArrayValue[]>([]),
+      _isOrchestratorInstalled: ref(false),
+    })
   }
-  provide(popoverPluginKey, {
-    popovers: ref<PopoverOrchestratorArrayValue[]>([]),
-    _isOrchestratorInstalled: ref(false),
-  })
 }
 
 if (!props.noToasts) {
-  if (toastController && props.inhert) {
+  if (toastController && props.inherit) {
     toastController._isOrchestratorInstalled.value = true
     provide(toastPluginKey, toastController)
+  } else {
+    provide(toastPluginKey, {
+      toasts: ref<ToastOrchestratorArrayValue[]>([]),
+      _isAppend: ref(false),
+      _isOrchestratorInstalled: ref(false),
+    })
   }
-  provide(toastPluginKey, {
-    toasts: ref<ToastOrchestratorArrayValue[]>([]),
-    _isAppend: ref(false),
-    _isOrchestratorInstalled: ref(false),
-  })
 }
 if (!props.noModals) {
-  if (modalController && props.inhert) {
+  if (modalController && props.inherit) {
     modalController._isOrchestratorInstalled.value = true
     provide(modalControllerPluginKey, modalController)
+  } else {
+    provide(modalControllerPluginKey, {
+      modals: ref<ModalOrchestratorArrayValue[]>([]),
+      _isOrchestratorInstalled: ref(false),
+    })
   }
-  provide(modalControllerPluginKey, {
-    modals: ref<ModalOrchestratorArrayValue[]>([]),
-    _isOrchestratorInstalled: ref(false),
-  })
 }
 
 const showHideStorage = inject(globalShowHideStorageInjectionKey, undefined)
diff --git a/packages/bootstrap-vue-next/src/components/BApp/BAppOrchestrator.vue b/packages/bootstrap-vue-next/src/components/BApp/BAppOrchestrator.vue
index 473ca811f..d2d8daa45 100644
--- a/packages/bootstrap-vue-next/src/components/BApp/BAppOrchestrator.vue
+++ b/packages/bootstrap-vue-next/src/components/BApp/BAppOrchestrator.vue
@@ -3,7 +3,7 @@
   <div id="__BVID__toaster-container" v-bind="$attrs">
     <div
       v-for="(value, key) in ComputedPositionClasses"
-      :key
+      :key="key"
       :class="value.class"
       :style="value.style"
     >
diff --git a/packages/bootstrap-vue-next/src/components/BToast/BToastOrchestrator.vue b/packages/bootstrap-vue-next/src/components/BToast/BToastOrchestrator.vue
index d4260148b..2b1d1dd36 100644
--- a/packages/bootstrap-vue-next/src/components/BToast/BToastOrchestrator.vue
+++ b/packages/bootstrap-vue-next/src/components/BToast/BToastOrchestrator.vue
@@ -13,8 +13,8 @@
           <span
             v-for="{
               _self,
-              type,
-              position,
+              type: _type,
+              position: _position,
               slots,
               promise,
               options,
diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
index 75bb8ef88..e001a3c7e 100644
--- a/packages/bootstrap-vue-next/src/types/ComponentProps.ts
+++ b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -80,7 +80,7 @@ export interface BAppProps {
   noPopovers?: boolean
   noOrchestrator?: boolean
   appendToast?: boolean
-  inhert?: boolean
+  inherit?: boolean
   rtl?:
     | boolean
     | {

From c64f48b1b32a3ec11c2112dcd01767728284c66d Mon Sep 17 00:00:00 2001
From: Jukka Raimovaara <roska@mentalhouse.fi>
Date: Wed, 18 Jun 2025 12:42:51 +0300
Subject: [PATCH 3/4] fix demos

---
 apps/docs/src/docs/demo/ModalConfirm.vue    | 4 ++--
 apps/docs/src/docs/demo/ModalMessageBox.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/docs/src/docs/demo/ModalConfirm.vue b/apps/docs/src/docs/demo/ModalConfirm.vue
index d5cfdbf5b..0b3847ce4 100644
--- a/apps/docs/src/docs/demo/ModalConfirm.vue
+++ b/apps/docs/src/docs/demo/ModalConfirm.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script setup lang="ts">
-import {useModalController} from 'bootstrap-vue-next'
+import {type BvTriggerableEvent, useModalController} from 'bootstrap-vue-next'
 import {ref} from 'vue'
 
 const {confirm} = useModalController()
-const confirmResult = ref<boolean | null | undefined>(null)
+const confirmResult = ref<boolean | null | BvTriggerableEvent>(null)
 
 const confirmBox = async () => {
   confirmResult.value = await confirm?.({
diff --git a/apps/docs/src/docs/demo/ModalMessageBox.vue b/apps/docs/src/docs/demo/ModalMessageBox.vue
index 1f4ada195..c98b526cd 100644
--- a/apps/docs/src/docs/demo/ModalMessageBox.vue
+++ b/apps/docs/src/docs/demo/ModalMessageBox.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script setup lang="ts">
-import {useModalController} from 'bootstrap-vue-next'
+import {type BvTriggerableEvent, useModalController} from 'bootstrap-vue-next'
 import {ref} from 'vue'
 
 const {show} = useModalController()
 
-const okResult = ref<boolean | null | undefined>(undefined)
+const okResult = ref<boolean | null | BvTriggerableEvent>(null)
 
 const okBox = async () => {
   okResult.value = await show?.({

From 00fa1ee66245aa8d160de8ef9810e887fbe85a1c Mon Sep 17 00:00:00 2001
From: Jukka Raimovaara <roska@mentalhouse.fi>
Date: Wed, 18 Jun 2025 13:36:35 +0300
Subject: [PATCH 4/4] fix

---
 packages/bootstrap-vue-next/src/components/BApp/BApp.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/bootstrap-vue-next/src/components/BApp/BApp.vue b/packages/bootstrap-vue-next/src/components/BApp/BApp.vue
index 9cf05a392..1b0bc68c0 100644
--- a/packages/bootstrap-vue-next/src/components/BApp/BApp.vue
+++ b/packages/bootstrap-vue-next/src/components/BApp/BApp.vue
@@ -177,6 +177,13 @@ if (!showHideStorage) {
         // delete values.value[id]
         values.value.delete(id)
       },
+      updateId(newId: string, oldId: string) {
+        const existingValue = values.value.get(oldId)
+        if (existingValue) {
+          values.value.set(newId, {...existingValue, id: newId})
+          values.value.delete(oldId)
+        }
+      },
     }
   }
   provide(globalShowHideStorageInjectionKey, {register, values})