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

package/src/components/AppTopBar.vue

@@ -2,12 +2,7 @@
 /** Full application top bar with brand logo, page selector or plugin switcher, centered pill nav, experiment popover, and avatar menu. */
 import { ref, computed, inject } from 'vue'
 import type {
-  TopBarPage,
-  TopBarPageInput,
-  TopBarTab,
-  TopBarTabInput,
-  TopBarTabOption,
-  TopBarTabOptionInput,
+  PillNavOption,
   TopBarSettingsConfig,
   TopBarVariant,
   PillNavItem,
@@ -21,20 +16,17 @@ import type {
 } from '../types/components'
 import type { PluginNavItem } from '../types/platform'
 import { normalizeItemInput } from '../utils/items'
-import { isPluginIconFormat } from '../utils/pluginIcon'
 import ThemeToggle from './ThemeToggle.vue'
 import SettingsModal from './SettingsModal.vue'
 import ExperimentPopover from './ExperimentPopover.vue'
 import ExperimentSelectorModal from './ExperimentSelectorModal.vue'
-import AppPageSelector from './AppPageSelector.vue'
-import AppPillNav from './AppPillNav.vue'
+import AppTopBarPageSelectorInternal from './internal/AppTopBarPageSelectorInternal.vue'
+import AppTopBarPillNavInternal from './internal/AppTopBarPillNavInternal.vue'
 import AppAvatarMenu from './AppAvatarMenu.vue'
 import AppPluginSwitcher from './AppPluginSwitcher.vue'
 import PluginIcon from './PluginIcon.vue'
 import { usePlatformContext } from '../composables/usePlatformContext'
 import { APP_EXPERIMENT_KEY } from '../composables/useAppExperiment'
-import { useEventListener } from '../composables/useEventListener'
-import { useDropdownState } from '../composables/useDropdownState'
 
 interface Props {
   /** App or plugin title shown in the left title group when no page selector is present. */
@@ -45,10 +37,10 @@ interface Props {
   showLogo?: boolean
   /** Top bar visual treatment. */
   variant?: TopBarVariant
-  /** Home link used by classic breadcrumb layouts. */
+  /** Home link used by the brand icon. */
   homePath?: string
 
-  /** Preferred route-level page switch entries for plugin and platform pages. */
+  /** Preferred route-level page switch entries for plugin and platform pages. Integrated plugins read platform plugin.nav_items metadata automatically when pageSelector is omitted. */
   pageSelector?: PageSelectorItemInput[]
   /** Active id for the preferred page selector. */
   currentPageSelectorId?: string
@@ -67,17 +59,6 @@ interface Props {
   /** Draw a notification dot on the notifications icon. */
   hasNotificationDot?: boolean
 
-  /** Compatibility breadcrumb plugin name. Prefer pageSelector for route-level pages. */
-  pluginName?: string
-  /** Compatibility page dropdown items. Prefer pageSelector for new route-level navigation. */
-  pages?: TopBarPageInput[]
-  /** Active id for the compatibility page dropdown. */
-  currentPageId?: string
-  /** Compatibility center tabs. Prefer pillNav for new in-page modes. */
-  tabs?: TopBarTabInput[]
-  /** Active id for compatibility center tabs. */
-  currentTabId?: string
-
   /** Show the theme toggle button. */
   showThemeToggle?: boolean
   /** Show the settings button and modal. */
@@ -118,14 +99,11 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  'page-select': [page: TopBarPage]
-  'tab-select': [tab: TopBarTab]
-  'tab-option-select': [option: TopBarTabOption, tab: TopBarTab]
   'profile-click': []
   'admin-click': []
-  // New
   'page-selector-select': [page: PageSelectorItem]
   'pill-select': [item: PillNavItem]
+  'pill-option-select': [option: PillNavOption, item: PillNavItem]
   'plugin-switcher-select': [plugin: PluginSwitcherPlugin]
   'plugin-switcher-install': []
   'account-menu-select': [item: AccountMenuItem]
@@ -147,20 +125,17 @@ const profileInitial = computed(() => {
   return 'U'
 })
 
-const hasPlatformPages = computed(() => props.pages === undefined && !!plugin.value?.nav_items?.length)
-const effectivePluginName = computed(() => props.pluginName ?? (hasPlatformPages.value ? plugin.value?.name : '') ?? '')
-const hasPageSelector = computed(() => !!props.pageSelector?.length)
+const hasPlatformPageSelector = computed(() =>
+  props.pageSelector === undefined && (plugin.value?.nav_items?.length ?? 0) > 1,
+)
+const hasPageSelector = computed(() => (props.pageSelector?.length ?? 0) > 1 || hasPlatformPageSelector.value)
 const hasPluginSwitcher = computed(() => !!props.pluginSwitcher)
 const hasPillNav = computed(() => !!props.pillNav?.length)
 const hasAccountMenu = computed(() => !!props.accountMenu?.length)
-const hasLegacyBreadcrumb = computed(
-  () => !hasPageSelector.value && !hasPluginSwitcher.value && (!!effectivePluginName.value || normalizedPages.value.length > 0),
-)
 const hasTitleGroup = computed(
   () =>
     !hasPageSelector.value &&
     !hasPluginSwitcher.value &&
-    !hasLegacyBreadcrumb.value &&
     !!props.title &&
     !!props.subtitle
 )
@@ -169,58 +144,28 @@ const hasTitleOnly = computed(
     !hasPageSelector.value &&
     !hasPluginSwitcher.value &&
     !hasTitleGroup.value &&
-    !hasLegacyBreadcrumb.value &&
     !!props.title,
 )
-const normalizedPages = computed<TopBarPage[]>(() =>
-  props.pages !== undefined
-    ? props.pages.map(normalizeItemInput)
-    : plugin.value?.nav_items?.map(pluginNavItemToPage) ?? [],
+const platformPageSelector = computed<PageSelectorItem[]>(() =>
+  hasPlatformPageSelector.value
+    ? plugin.value?.nav_items?.map(pluginNavItemToPageSelectorItem) ?? []
+    : [],
 )
-const normalizedTabs = computed<TopBarTab[]>(() => props.tabs?.map(normalizeTopBarTabInput) ?? [])
-const normalizedPageSelector = computed<PageSelectorItem[]>(() => props.pageSelector?.map(normalizeItemInput) ?? [])
-const normalizedPillNav = computed<PillNavItem[]>(() => props.pillNav?.map(normalizeItemInput) ?? [])
+const normalizedPageSelector = computed<PageSelectorItem[]>(() =>
+  props.pageSelector !== undefined
+    ? props.pageSelector.map(normalizeItemInput)
+    : platformPageSelector.value,
+)
+const normalizedPillNav = computed<PillNavItemInput[]>(() => props.pillNav ?? [])
 const normalizedSettingsTabs = computed<SettingsTab[]>(() =>
   props.settingsConfig?.tabs?.map(normalizeItemInput) ?? [],
 )
-const effectiveCurrentPageId = computed(() =>
-  props.currentPageId
-    ?? (hasPlatformPages.value ? currentPageIdFromLocation(normalizedPages.value) : undefined)
-    ?? (hasPlatformPages.value ? normalizedPages.value[0]?.id : undefined),
-)
-const currentLegacyPage = computed(() =>
-  normalizedPages.value.find((page) => page.id === effectiveCurrentPageId.value),
-)
-const effectiveTitle = computed(() =>
-  props.title ?? (hasPlatformPages.value ? currentLegacyPage.value?.label : undefined),
+const effectiveCurrentPageSelectorId = computed(() =>
+  props.currentPageSelectorId
+    ?? (hasPlatformPageSelector.value ? currentItemIdFromLocation(normalizedPageSelector.value) : undefined)
+    ?? (hasPlatformPageSelector.value ? normalizedPageSelector.value[0]?.id : undefined),
 )
 
-const {
-  isOpen: showPagesDropdown,
-  rootRef: dropdownRef,
-  close: closePagesDropdown,
-  toggle: togglePagesDropdownBase,
-} = useDropdownState()
-const openTabDropdown = ref<string | null>(null)
-const tabDropdownRefs = ref<Map<string, HTMLElement>>(new Map())
-
-function togglePagesDropdown() {
-  togglePagesDropdownBase()
-  openTabDropdown.value = null
-}
-
-function normalizeTopBarTabInput(tab: TopBarTabInput): TopBarTab {
-  const normalized = normalizeItemInput<Omit<TopBarTab, 'children'> & { children?: TopBarTabOptionInput[] }>(tab)
-  return {
-    ...normalized,
-    children: normalized.children?.map(normalizeItemInput),
-  }
-}
-
-function isSvgTabIcon(icon?: string): icon is string {
-  return !!icon && (icon.startsWith('M') || icon.startsWith('m'))
-}
-
 function normalizeNavPath(path?: string): string {
   const raw = path?.trim() || '/'
   const prefixed = raw.startsWith('/') ? raw : `/${raw}`
@@ -233,14 +178,14 @@ function pageIdFromPath(path: string, fallback: string): string {
   return normalized.replace(/^\/+/, '').replace(/\/+/g, '-') || fallback
 }
 
-function pluginNavItemToPage(item: PluginNavItem, index: number): TopBarPage {
+function pluginNavItemToPageSelectorItem(item: PluginNavItem, index: number): PageSelectorItem {
   const path = normalizeNavPath(item.path)
   return {
     id: item.id || pageIdFromPath(path, `page-${index + 1}`),
     label: item.label,
     to: path,
     icon: item.icon || plugin.value?.icon,
-    description: item.description,
+    hint: item.description || plugin.value?.name,
   }
 }
 
@@ -256,59 +201,11 @@ function currentPagePath(): string | undefined {
   return pathname
 }
 
-function currentPageIdFromLocation(pages: TopBarPage[]): string | undefined {
+function currentItemIdFromLocation(pages: Array<Pick<PageSelectorItem, 'id' | 'to' | 'href'>>): string | undefined {
   const path = currentPagePath()
   if (!path) return undefined
   return pages.find((page) => normalizeNavPath(page.to || page.href) === path)?.id
 }
-
-function handlePageClick(page: TopBarPage) {
-  if (page.disabled) return
-  emit('page-select', page)
-  closePagesDropdown()
-}
-
-function toggleTabDropdown(tabId: string) {
-  closePagesDropdown()
-  openTabDropdown.value = openTabDropdown.value === tabId ? null : tabId
-}
-
-function handleTabClick(tab: TopBarTab) {
-  if (tab.disabled) return
-  if (tab.children?.length) {
-    toggleTabDropdown(tab.id)
-  } else {
-    emit('tab-select', tab)
-    openTabDropdown.value = null
-  }
-}
-
-function handleTabOptionClick(option: TopBarTabOption, tab: TopBarTab) {
-  if (option.disabled) return
-  emit('tab-option-select', option, tab)
-  openTabDropdown.value = null
-}
-
-function setTabDropdownRef(el: HTMLElement | null, tabId: string) {
-  if (el) {
-    tabDropdownRefs.value.set(tabId, el)
-  } else {
-    tabDropdownRefs.value.delete(tabId)
-  }
-}
-
-function handleClickOutside(event: MouseEvent) {
-  const target = event.target as Node
-
-  if (openTabDropdown.value !== null) {
-    const clickedInside = Array.from(tabDropdownRefs.value.values()).some((el) => el.contains(target))
-    if (!clickedInside) {
-      openTabDropdown.value = null
-    }
-  }
-}
-
-useEventListener(() => document, 'click', handleClickOutside)
 </script>
 
 <template>
@@ -398,10 +295,10 @@ useEventListener(() => document, 'click', handleClickOutside)
         @select="emit('plugin-switcher-select', $event)"
         @install-click="emit('plugin-switcher-install')"
       />
-      <AppPageSelector
+      <AppTopBarPageSelectorInternal
         v-else-if="hasPageSelector"
         :pages="normalizedPageSelector"
-        :current-page-id="currentPageSelectorId"
+        :current-page-id="effectiveCurrentPageSelectorId"
         @select="emit('page-selector-select', $event)"
       >
         <template v-if="$slots['page-selector-icon']" #icon="slotProps">
@@ -410,121 +307,14 @@ useEventListener(() => document, 'click', handleClickOutside)
         <template v-if="$slots['page-selector-item-icon']" #item-icon="slotProps">
           <slot name="page-selector-item-icon" v-bind="slotProps" />
         </template>
-      </AppPageSelector>
+      </AppTopBarPageSelectorInternal>
 
-      <!-- Left: classic title / breadcrumb (classic prop surface) -->
+      <!-- Left: title -->
       <div v-if="hasTitleGroup" class="mint-topbar-title-group">
         <span class="mint-topbar-title">{{ title }}</span>
         <span class="mint-topbar-subtitle">{{ subtitle }}</span>
       </div>
 
-      <div v-else-if="hasLegacyBreadcrumb" ref="dropdownRef" class="mint-topbar-breadcrumb">
-        <button
-          v-if="normalizedPages.length"
-          type="button"
-          class="mint-topbar-plugin-name"
-          @click.stop="togglePagesDropdown"
-        >
-          {{ effectivePluginName }}
-          <svg
-            class="mint-topbar-chevron"
-            :class="{ 'mint-topbar-chevron--open': showPagesDropdown }"
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="m6 9 6 6 6-6" />
-          </svg>
-        </button>
-        <span v-else class="mint-topbar-plugin-name--static">{{ effectivePluginName }}</span>
-
-        <svg
-          v-if="effectiveTitle"
-          class="mint-topbar-separator"
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="m9 18 6-6-6-6" />
-        </svg>
-        <span v-if="effectiveTitle" class="mint-topbar-current-page">{{ effectiveTitle }}</span>
-
-        <div v-show="showPagesDropdown" class="mint-topbar-dropdown">
-          <template v-for="page in normalizedPages" :key="page.id">
-            <a
-              v-if="page.href"
-              :href="page.href"
-              :class="['mint-topbar-dropdown-item', { 'mint-topbar-dropdown-item--active': page.id === effectiveCurrentPageId, 'mint-topbar-dropdown-item--disabled': page.disabled }]"
-              @click="closePagesDropdown"
-            >
-              <span class="mint-topbar-dropdown-item__page">
-                <PluginIcon
-                  v-if="isPluginIconFormat(page.icon)"
-                  class="mint-topbar-dropdown-item__icon"
-                  :icon="page.icon"
-                  size="sm"
-                  variant="tinted"
-                />
-                <span class="mint-topbar-dropdown-item__copy">
-                  <span class="mint-topbar-dropdown-item__label">{{ page.label }}</span>
-                  <span v-if="page.description" class="mint-topbar-dropdown-item__description">{{ page.description }}</span>
-                </span>
-              </span>
-            </a>
-            <router-link
-              v-else-if="page.to"
-              :to="page.to"
-              :class="['mint-topbar-dropdown-item', { 'mint-topbar-dropdown-item--active': page.id === effectiveCurrentPageId, 'mint-topbar-dropdown-item--disabled': page.disabled }]"
-              @click="closePagesDropdown"
-            >
-              <span class="mint-topbar-dropdown-item__page">
-                <PluginIcon
-                  v-if="isPluginIconFormat(page.icon)"
-                  class="mint-topbar-dropdown-item__icon"
-                  :icon="page.icon"
-                  size="sm"
-                  variant="tinted"
-                />
-                <span class="mint-topbar-dropdown-item__copy">
-                  <span class="mint-topbar-dropdown-item__label">{{ page.label }}</span>
-                  <span v-if="page.description" class="mint-topbar-dropdown-item__description">{{ page.description }}</span>
-                </span>
-              </span>
-            </router-link>
-            <button
-              v-else
-              type="button"
-              :class="['mint-topbar-dropdown-item', { 'mint-topbar-dropdown-item--active': page.id === effectiveCurrentPageId, 'mint-topbar-dropdown-item--disabled': page.disabled }]"
-              @click="handlePageClick(page)"
-            >
-              <span class="mint-topbar-dropdown-item__page">
-                <PluginIcon
-                  v-if="isPluginIconFormat(page.icon)"
-                  class="mint-topbar-dropdown-item__icon"
-                  :icon="page.icon"
-                  size="sm"
-                  variant="tinted"
-                />
-                <span class="mint-topbar-dropdown-item__copy">
-                  <span class="mint-topbar-dropdown-item__label">{{ page.label }}</span>
-                  <span v-if="page.description" class="mint-topbar-dropdown-item__description">{{ page.description }}</span>
-                </span>
-              </span>
-            </button>
-          </template>
-        </div>
-      </div>
-
       <span v-else-if="hasTitleOnly" class="mint-topbar__title-only">{{ title }}</span>
 
       <!-- Nav slot (inline, after brand/selector) -->
@@ -533,187 +323,16 @@ useEventListener(() => document, 'click', handleClickOutside)
       <!-- Center: pill nav (new) -->
       <div v-if="hasPillNav || $slots.center" class="mint-topbar__center">
         <slot name="center">
-          <AppPillNav
+          <AppTopBarPillNavInternal
             v-if="hasPillNav && pillNav"
             :items="normalizedPillNav"
             :current-item-id="currentPillId"
             @select="emit('pill-select', $event)"
+            @option-select="(option, item) => emit('pill-option-select', option, item)"
           />
         </slot>
       </div>
 
-      <!-- Center: classic tabs (when no pillNav) — wrapped in the same centered
-           container as AppPillNav so classic :tabs consumers get centered pill
-           layout without migrating to :pill-nav. -->
-      <div v-if="!hasPillNav && normalizedTabs.length" class="mint-topbar__center">
-        <div class="mint-topbar__tabs">
-          <template v-for="tab in normalizedTabs" :key="tab.id">
-          <div
-            :ref="(el) => tab.children?.length ? setTabDropdownRef(el as HTMLElement, tab.id) : null"
-            class="mint-topbar-tab-wrapper"
-          >
-            <button
-              v-if="tab.children?.length"
-              type="button"
-              :class="[
-                'mint-topbar-tab',
-                { 'mint-topbar-tab--active': tab.id === currentTabId || tab.children.some(c => c.id === currentTabId) },
-                { 'mint-topbar-tab--disabled': tab.disabled }
-              ]"
-              @click.stop="handleTabClick(tab)"
-            >
-              <svg
-                v-if="isSvgTabIcon(tab.icon)"
-                class="mint-topbar-tab-icon"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                aria-hidden="true"
-              >
-                <path :d="tab.icon" />
-              </svg>
-              {{ tab.label }}
-              <svg
-                class="mint-topbar-tab-chevron"
-                :class="{ 'mint-topbar-tab-chevron--open': openTabDropdown === tab.id }"
-                width="14"
-                height="14"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path d="m6 9 6 6 6-6" />
-              </svg>
-            </button>
-
-            <a
-              v-else-if="tab.href"
-              :href="tab.href"
-              :class="[
-                'mint-topbar-tab',
-                { 'mint-topbar-tab--active': tab.id === currentTabId },
-                { 'mint-topbar-tab--disabled': tab.disabled }
-              ]"
-            >
-              <svg
-                v-if="isSvgTabIcon(tab.icon)"
-                class="mint-topbar-tab-icon"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                aria-hidden="true"
-              >
-                <path :d="tab.icon" />
-              </svg>
-              {{ tab.label }}
-            </a>
-            <router-link
-              v-else-if="tab.to"
-              :to="tab.to"
-              :class="[
-                'mint-topbar-tab',
-                { 'mint-topbar-tab--active': tab.id === currentTabId },
-                { 'mint-topbar-tab--disabled': tab.disabled }
-              ]"
-            >
-              <svg
-                v-if="isSvgTabIcon(tab.icon)"
-                class="mint-topbar-tab-icon"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                aria-hidden="true"
-              >
-                <path :d="tab.icon" />
-              </svg>
-              {{ tab.label }}
-            </router-link>
-            <button
-              v-else
-              type="button"
-              :class="[
-                'mint-topbar-tab',
-                { 'mint-topbar-tab--active': tab.id === currentTabId },
-                { 'mint-topbar-tab--disabled': tab.disabled }
-              ]"
-              @click="handleTabClick(tab)"
-            >
-              <svg
-                v-if="isSvgTabIcon(tab.icon)"
-                class="mint-topbar-tab-icon"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                aria-hidden="true"
-              >
-                <path :d="tab.icon" />
-              </svg>
-              {{ tab.label }}
-            </button>
-
-            <div v-if="tab.children?.length" v-show="openTabDropdown === tab.id" class="mint-topbar-tab-dropdown">
-              <template v-for="option in tab.children" :key="option.id">
-                <a
-                  v-if="option.href"
-                  :href="option.href"
-                  :class="[
-                    'mint-topbar-dropdown-item',
-                    { 'mint-topbar-dropdown-item--active': option.id === currentTabId },
-                    { 'mint-topbar-dropdown-item--disabled': option.disabled }
-                  ]"
-                  @click="openTabDropdown = null"
-                >
-                  <span class="mint-topbar-dropdown-item__label">{{ option.label }}</span>
-                  <span v-if="option.description" class="mint-topbar-dropdown-item__description">{{ option.description }}</span>
-                </a>
-                <router-link
-                  v-else-if="option.to"
-                  :to="option.to"
-                  :class="[
-                    'mint-topbar-dropdown-item',
-                    { 'mint-topbar-dropdown-item--active': option.id === currentTabId },
-                    { 'mint-topbar-dropdown-item--disabled': option.disabled }
-                  ]"
-                  @click="openTabDropdown = null"
-                >
-                  <span class="mint-topbar-dropdown-item__label">{{ option.label }}</span>
-                  <span v-if="option.description" class="mint-topbar-dropdown-item__description">{{ option.description }}</span>
-                </router-link>
-                <button
-                  v-else
-                  type="button"
-                  :class="[
-                    'mint-topbar-dropdown-item',
-                    { 'mint-topbar-dropdown-item--active': option.id === currentTabId },
-                    { 'mint-topbar-dropdown-item--disabled': option.disabled }
-                  ]"
-                  @click="handleTabOptionClick(option, tab)"
-                >
-                  <span class="mint-topbar-dropdown-item__label">{{ option.label }}</span>
-                  <span v-if="option.description" class="mint-topbar-dropdown-item__description">{{ option.description }}</span>
-                </button>
-              </template>
-            </div>
-          </div>
-        </template>
-        </div>
-      </div>
-
       <!-- Right section -->
       <div class="mint-topbar__right">
         <span v-if="showStandaloneLabel && isStandalone && !appExperiment" class="mint-topbar__standalone-badge">
@@ -722,15 +341,7 @@ useEventListener(() => document, 'click', handleClickOutside)
 
         <ExperimentPopover
           v-if="appExperiment && !isStandalone"
-          :experiment-name="appExperiment.experimentName.value"
-          :experiment-code="appExperiment.experimentCode.value"
-          :experiment-status="appExperiment.experimentStatus.value"
-          :show-save="appExperiment.showSave.value"
-          :show-detach="appExperiment.showDetach.value"
-          :save-disabled="appExperiment.saveDisabled.value"
-          :save-disabled-message="appExperiment.saveDisabledMessage.value"
-          :save-loading="appExperiment.saveLoading.value"
-          :save-success-message="appExperiment.saveSuccessMessage.value"
+          v-bind="appExperiment.popover.value"
           @select="appExperiment.openModal()"
           @save="appExperiment.handleSave()"
           @detach="appExperiment.handleDetach()"
@@ -847,8 +458,7 @@ useEventListener(() => document, 'click', handleClickOutside)
 
   <ExperimentSelectorModal
     v-if="appExperiment && !isStandalone"
-    :model-value="appExperiment.showModal.value"
-    :current-experiment-id="appExperiment.experimentId.value"
+    v-bind="appExperiment.selectorModal.value"
     @update:model-value="$event ? appExperiment.openModal() : appExperiment.closeModal()"
     @select="appExperiment.handleSelect($event)"
     @deselect="appExperiment.handleDetach()"

package/src/components/BioTemplateExperimentWorkspaceView.story.vue

@@ -69,14 +69,14 @@ function initState() {
           <div class="experiment-component-layout">
             <div class="experiment-component-panel experiment-component-panel--plate">
               <WellPlate
-                v-bind="bindings.componentPropsById['plate-map:WellPlate']"
+                v-bind="bindings.componentBindingsById['plate-map:WellPlate'].props"
                 size="sm"
                 readonly
               />
             </div>
             <div class="experiment-component-panel experiment-component-panel--dose">
               <DoseCalculator
-                v-bind="bindings.componentPropsById['dose-response:DoseCalculator']"
+                v-bind="bindings.componentBindingsById['dose-response:DoseCalculator'].props"
               />
             </div>
           </div>

package/src/components/BioTemplateExperimentWorkspaceView.vue

@@ -4,6 +4,7 @@ import { computed } from 'vue'
 import {
   extractTemplateCollection,
   getBioTemplateComponentProps,
+  toBioTemplateComponentBindingsById,
   toBioTemplateComponentProps,
   toBioTemplateComponentPropsByComponent,
   toBioTemplateComponentPropsById,
@@ -135,6 +136,7 @@ const templateSummaries = computed(() =>
   }))
 )
 const componentProps = computed(() => toBioTemplateComponentProps(props.target))
+const componentBindingsById = computed(() => toBioTemplateComponentBindingsById(props.target))
 const componentPropsById = computed(() => toBioTemplateComponentPropsById(props.target))
 const componentPropsByComponent = computed(() => toBioTemplateComponentPropsByComponent(props.target))
 const renderer = computed(() => ({ target: props.target }))
@@ -146,6 +148,7 @@ function getComponentProps(component: string, options?: BioTemplateComponentProp
 interface BioTemplateExperimentWorkspaceBindings {
   renderer: { target: BioTemplateWorkspaceTarget }
   componentProps: ReturnType<typeof toBioTemplateComponentProps>
+  componentBindingsById: ReturnType<typeof toBioTemplateComponentBindingsById>
   componentPropsById: ReturnType<typeof toBioTemplateComponentPropsById>
   componentPropsByComponent: ReturnType<typeof toBioTemplateComponentPropsByComponent>
   getComponentProps: typeof getComponentProps
@@ -154,6 +157,7 @@ interface BioTemplateExperimentWorkspaceBindings {
 const bindings = computed<BioTemplateExperimentWorkspaceBindings>(() => ({
   renderer: renderer.value,
   componentProps: componentProps.value,
+  componentBindingsById: componentBindingsById.value,
   componentPropsById: componentPropsById.value,
   componentPropsByComponent: componentPropsByComponent.value,
   getComponentProps,
@@ -163,6 +167,7 @@ interface BioTemplateExperimentWorkspaceSlotProps {
   target: BioTemplateWorkspaceTarget
   bindings: BioTemplateExperimentWorkspaceBindings
   componentProps: ReturnType<typeof toBioTemplateComponentProps>
+  componentBindingsById: ReturnType<typeof toBioTemplateComponentBindingsById>
   componentPropsById: ReturnType<typeof toBioTemplateComponentPropsById>
   componentPropsByComponent: ReturnType<typeof toBioTemplateComponentPropsByComponent>
   getComponentProps: typeof getComponentProps
@@ -255,6 +260,7 @@ function handleSave() {
       :target="target"
       :bindings="bindings"
       :component-props="componentProps"
+      :component-bindings-by-id="componentBindingsById"
       :component-props-by-id="componentPropsById"
       :component-props-by-component="componentPropsByComponent"
       :get-component-props="getComponentProps"