@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

package/src/components/AppTopBar.vue

@@ -1,35 +1,29 @@
 <script setup lang="ts">
-/** Full application top bar with brand logo, static plugin identity, page selector, centered pill nav, experiment popover, and avatar menu. */
-import { ref, computed, inject, defineAsyncComponent, onMounted, onBeforeUnmount } from 'vue'
+/**
+ * Full application top bar with brand logo, static plugin identity, page selector, centered pill nav, experiment popover, and an account slot.
+ *
+ * The `#icon` slot applies in standalone mode only; integrated branding comes from `Metadata.icon`.
+ */
+import { ref, computed, inject, defineAsyncComponent, onMounted, onBeforeUnmount, toValue, useSlots, watch } from 'vue'
 import type {
   PillNavOption,
-  TopBarSettingsConfig,
-  TopBarVariant,
   PillNavItem,
   PillNavItemInput,
   PageSelectorItem,
   PageSelectorItemInput,
-  AccountMenuItem,
+  PluginWorkspaceTopBarSpec,
   SettingsTab,
 } from '../types/components'
 import { normalizeItemInput } from '../utils/items'
+import { applySpecDefaults } from '../composables/componentSpecs'
 import ThemeToggle from './ThemeToggle.vue'
 import AppTopBarPageSelectorInternal from './internal/AppTopBarPageSelectorInternal.vue'
 import AppTopBarPillNavInternal from './internal/AppTopBarPillNavInternal.vue'
-import AppAvatarMenu from './AppAvatarMenu.vue'
 import PluginIcon from './PluginIcon.vue'
-import RuntimeUpdateNotice from './RuntimeUpdateNotice.vue'
-import { usePlatformContext } from '../composables/usePlatformContext'
-import { usePresenceHeartbeat } from '../composables/usePresenceHeartbeat'
-import {
-  getInjectedFrontendRevision,
-  useRuntimeAlignment,
-} from '../composables/useRuntimeAlignment'
+import { usePlatform } from '../composables/usePlatform'
 import { APP_EXPERIMENT_KEY } from '../composables/useAppExperiment'
-import {
-  currentItemIdFromLocation,
-  pluginNavItemToPageSelectorItem,
-} from './AppTopBar.navigation'
+import { pluginIdentity } from '../composables/pluginIdentity'
+import { integrationHost } from '../utils/integrationHost'
 import { trackTopBarForToasts } from './AppTopBar.toastOffset'
 
 interface Props {
@@ -37,78 +31,40 @@ interface Props {
   title?: string
   /** Secondary title copy shown under the title in title-group layouts. */
   subtitle?: string
-  /** Show the default MINT logo when the icon/logo slot is not provided. */
-  showLogo?: boolean
-  /** Top bar visual treatment. */
-  variant?: TopBarVariant
-  /** Home link used by the brand icon. */
-  homePath?: string
-
-  /** Preferred route-level page switch entries for plugin and platform pages. Integrated plugins read platform plugin.nav_items metadata automatically when pageSelector is omitted. */
+  /** Structure: variant, home link, logo, pills, theme toggle, settings, standalone badge. Optional: every option has a default. */
+  spec?: PluginWorkspaceTopBarSpec
+  /** Active pill id. Bind with `v-model:pill`. */
+  pill?: string
+  /** Page selector of a platform page. Plugin pages get theirs from the plugin.nav_items metadata through the platform integration script. */
   pageSelector?: PageSelectorItemInput[]
-  /** Active id for the preferred page selector. */
+  /** Active id of the platform page selector. */
   currentPageSelectorId?: string
-
-  /** Preferred centered navigation for local modes inside the current route. */
-  pillNav?: PillNavItemInput[]
-  /** Active id for the preferred centered pill navigation. */
-  currentPillId?: string
-
-  /** Account dropdown entries. */
-  accountMenu?: AccountMenuItem[]
-  /** Show the notifications icon button. */
-  showNotifications?: boolean
-  /** Draw a notification dot on the notifications icon. */
-  hasNotificationDot?: boolean
-
-  /** Show the theme toggle button. */
-  showThemeToggle?: boolean
-  /** Show the settings button and modal. */
-  showSettings?: boolean
-  /** Built-in SettingsModal configuration. */
-  settingsConfig?: TopBarSettingsConfig
-  /** Show the standalone badge when the plugin is not integrated into the platform. */
-  showStandaloneLabel?: boolean
-  /** Custom standalone badge label. */
-  standaloneLabel?: string
-  /** Show the admin shortcut. */
-  showAdmin?: boolean
-  /** Route used by the admin shortcut. */
-  adminPath?: string
-  /** Account display name. */
-  userName?: string
-  /** Explicit account avatar initial. */
-  userInitial?: string
-  /** Account email shown in the avatar menu. */
-  userEmail?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  showLogo: true,
+  spec: () => ({}),
+})
+
+const config = computed(() => applySpecDefaults({
   variant: 'card',
   homePath: '/',
-  showThemeToggle: false,
-  showSettings: false,
-  showStandaloneLabel: true,
+  logo: true,
+  themeToggle: false,
+  settings: false,
   standaloneLabel: 'Standalone',
-  showAdmin: false,
-  adminPath: '/admin',
-  showNotifications: false,
-  hasNotificationDot: false,
-})
+}, props.spec))
+const settingsConfig = computed(() => toValue(config.value.settings) || undefined)
+const showSettings = computed(() => settingsConfig.value !== undefined)
 
 const SettingsModal = defineAsyncComponent(() => import('./SettingsModal.vue'))
 const ExperimentPopover = defineAsyncComponent(() => import('./ExperimentPopover.vue'))
 const ExperimentSelectorModal = defineAsyncComponent(() => import('./ExperimentSelectorModal.vue'))
 
 const emit = defineEmits<{
-  'admin-click': []
   'page-selector-select': [page: PageSelectorItem]
+  'update:pill': [pillId: string]
   'pill-select': [item: PillNavItem]
   'pill-option-select': [option: PillNavOption, item: PillNavItem]
-  'account-menu-select': [item: AccountMenuItem]
-  'sign-out': []
-  'notifications-click': []
   'settings-values-change': [data: Record<string, unknown>]
 }>()
 
@@ -119,80 +75,62 @@ onMounted(() => {
   if (headerEl.value) untrackToastOffset = trackTopBarForToasts(headerEl.value)
 })
 onBeforeUnmount(() => untrackToastOffset?.())
-const { isIntegrated, plugin } = usePlatformContext()
+const { integrated: isIntegrated, plugin } = usePlatform()
 const isStandalone = computed(() => !isIntegrated.value)
-const presenceScope = computed(() => plugin.value?.id || plugin.value?.name || '')
-const runtimeAlignment = useRuntimeAlignment({
-  currentRevision: getInjectedFrontendRevision(),
-})
-usePresenceHeartbeat({
-  enabled: isIntegrated,
-  scope: presenceScope,
-  onResponse: runtimeAlignment.observe,
-})
 const appExperiment = inject(APP_EXPERIMENT_KEY, null)
 const canBindExperiment = computed(() => plugin.value?.plugin_type !== 'static')
 
-const pluginIcon = computed(() => {
-  const currentPlugin = plugin.value
-  return currentPlugin?.icon
-    ? { icon: currentPlugin.icon, color: currentPlugin.color }
-    : null
-})
+const slots = useSlots()
+// Standalone: the seeded identity (providePluginIdentity) stands in for a missing icon and title.
+const pluginIcon = computed(() => plugin.value?.icon || (slots.logo ? undefined : pluginIdentity.icon))
+const seeded = computed(() => isStandalone.value && !props.title && !props.subtitle)
+const titleText = computed(() => props.title || (seeded.value ? pluginIdentity.name : undefined))
+const subtitleText = computed(() => props.subtitle || (seeded.value ? pluginIdentity.subtitle : undefined))
 
 const hasPlatformPageSelector = computed(() =>
   props.pageSelector === undefined && (plugin.value?.nav_items?.length ?? 0) > 1,
 )
-const hasPageSelector = computed(() => (props.pageSelector?.length ?? 0) > 1 || hasPlatformPageSelector.value)
+const hasPropPageSelector = computed(() => (props.pageSelector?.length ?? 0) > 1)
+const hasPageSelector = computed(() => hasPropPageSelector.value || hasPlatformPageSelector.value)
+const platformPageSelectorEl = ref<HTMLElement | null>(null)
+// Sync: the host mounts as soon as the element exists and unmounts with it.
+watch(platformPageSelectorEl, (element, _previous, onCleanup) => {
+  const unmount = element ? integrationHost()?.mountPageSelector(element) : undefined
+  if (unmount) onCleanup(unmount)
+}, { flush: 'sync' })
 /** Integrated plugins show their name as a static identity in place of the title; the page selector replaces it. */
 // Platforms before 1.3 send no display_name.
 const identityName = computed(() =>
   isIntegrated.value && !hasPageSelector.value ? plugin.value?.display_name || plugin.value?.name : undefined,
 )
-const hasPillNav = computed(() => !!props.pillNav?.length)
-const hasAccountMenu = computed(() => !!props.accountMenu?.length)
+// Platforms before 1.4 send no subtitle; the description fills line 2.
+const identitySubtitle = computed(() => plugin.value?.subtitle || plugin.value?.description)
+const hasPillNav = computed(() => !!config.value.pills?.length)
 const hasTitleGroup = computed(
   () =>
     !hasPageSelector.value &&
     !identityName.value &&
-    !!props.title &&
-    !!props.subtitle
+    !!titleText.value &&
+    !!subtitleText.value
 )
 const hasTitleOnly = computed(
   () =>
     !hasPageSelector.value &&
     !identityName.value &&
     !hasTitleGroup.value &&
-    !!props.title,
-)
-const platformPageSelector = computed<PageSelectorItem[]>(() =>
-  hasPlatformPageSelector.value
-    ? plugin.value?.nav_items?.map((item, index) =>
-      pluginNavItemToPageSelectorItem(item, index, {
-        pluginIcon: plugin.value?.icon,
-      })
-    ) ?? []
-    : [],
+    !!titleText.value,
 )
 const normalizedPageSelector = computed<PageSelectorItem[]>(() =>
-  props.pageSelector !== undefined
-    ? props.pageSelector.map(normalizeItemInput)
-    : platformPageSelector.value,
+  props.pageSelector?.map(normalizeItemInput) ?? [],
 )
-const normalizedPillNav = computed<PillNavItemInput[]>(() => props.pillNav ?? [])
+const normalizedPillNav = computed<PillNavItemInput[]>(() => config.value.pills ?? [])
+function handlePillSelect(item: PillNavItem) {
+  emit('update:pill', item.id)
+  emit('pill-select', item)
+}
+
 const normalizedSettingsTabs = computed<SettingsTab[]>(() =>
-  props.settingsConfig?.tabs?.map(normalizeItemInput) ?? [],
-)
-const effectiveCurrentPageSelectorId = computed(() =>
-  props.currentPageSelectorId
-    ?? (hasPlatformPageSelector.value
-      ? currentItemIdFromLocation(
-        normalizedPageSelector.value,
-        typeof window === 'undefined' ? undefined : window.location.pathname,
-        plugin.value?.route_prefix,
-      )
-      : undefined)
-    ?? (hasPlatformPageSelector.value ? normalizedPageSelector.value[0]?.id : undefined),
+  settingsConfig.value?.tabs?.map(normalizeItemInput) ?? [],
 )
 </script>
 
@@ -201,148 +139,146 @@ const effectiveCurrentPageSelectorId = computed(() =>
     ref="headerEl"
     :class="[
       'mint-topbar',
-      `mint-topbar--${props.variant}`,
+      `mint-topbar--${config.variant}`,
     ]"
   >
     <div class="mint-topbar__container">
       <!-- Left: brand -->
-      <div class="mint-topbar__brand">
-        <a
-          v-if="homePath && (homePath.startsWith('http') || homePath.startsWith('/'))"
-          :href="homePath"
-          class="mint-topbar-home-link"
-        >
-          <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || showLogo" class="mint-topbar__identity">
-            <PluginIcon
-              v-if="isIntegrated"
-              class="mint-topbar__plugin-icon"
-              :icon="plugin?.icon"
-              :tone="plugin?.color"
-              size="topbar"
-              variant="solid"
-            />
-            <slot v-else name="icon">
+      <div class="mint-topbar__start">
+        <div class="mint-topbar__brand">
+          <a
+            v-if="config.homePath && (config.homePath.startsWith('http') || config.homePath.startsWith('/'))"
+            :href="config.homePath"
+            class="mint-topbar-home-link"
+          >
+            <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || config.logo" class="mint-topbar__identity">
               <PluginIcon
-                v-if="pluginIcon"
+                v-if="isIntegrated"
                 class="mint-topbar__plugin-icon"
-                :icon="pluginIcon.icon"
-                :tone="pluginIcon.color"
+                :icon="plugin?.icon"
                 size="topbar"
                 variant="solid"
               />
-              <slot v-else name="logo">
-                <div v-if="showLogo" class="mint-topbar__logo">
-                  <div class="mint-topbar__logo-icon">
-                    <span class="mint-topbar__logo-text">M</span>
+              <slot v-else name="icon">
+                <PluginIcon
+                  v-if="pluginIcon"
+                  class="mint-topbar__plugin-icon"
+                  :icon="pluginIcon"
+                  size="topbar"
+                  variant="solid"
+                />
+                <slot v-else name="logo">
+                  <div v-if="config.logo" class="mint-topbar__logo">
+                    <div class="mint-topbar__logo-icon">
+                      <span class="mint-topbar__logo-text">M</span>
+                    </div>
                   </div>
-                </div>
+                </slot>
               </slot>
-            </slot>
-          </span>
-        </a>
-        <router-link
-          v-else-if="homePath"
-          :to="homePath"
-          class="mint-topbar-home-link"
-        >
-          <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || showLogo" class="mint-topbar__identity">
-            <PluginIcon
-              v-if="isIntegrated"
-              class="mint-topbar__plugin-icon"
-              :icon="plugin?.icon"
-              :tone="plugin?.color"
-              size="topbar"
-              variant="solid"
-            />
-            <slot v-else name="icon">
+            </span>
+          </a>
+          <router-link
+            v-else-if="config.homePath"
+            :to="config.homePath"
+            class="mint-topbar-home-link"
+          >
+            <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || config.logo" class="mint-topbar__identity">
               <PluginIcon
-                v-if="pluginIcon"
+                v-if="isIntegrated"
                 class="mint-topbar__plugin-icon"
-                :icon="pluginIcon.icon"
-                :tone="pluginIcon.color"
+                :icon="plugin?.icon"
                 size="topbar"
                 variant="solid"
               />
-              <slot v-else name="logo">
-                <div v-if="showLogo" class="mint-topbar__logo">
-                  <div class="mint-topbar__logo-icon">
-                    <span class="mint-topbar__logo-text">M</span>
+              <slot v-else name="icon">
+                <PluginIcon
+                  v-if="pluginIcon"
+                  class="mint-topbar__plugin-icon"
+                  :icon="pluginIcon"
+                  size="topbar"
+                  variant="solid"
+                />
+                <slot v-else name="logo">
+                  <div v-if="config.logo" class="mint-topbar__logo">
+                    <div class="mint-topbar__logo-icon">
+                      <span class="mint-topbar__logo-text">M</span>
+                    </div>
                   </div>
-                </div>
+                </slot>
               </slot>
-            </slot>
-          </span>
-        </router-link>
-        <template v-else>
-          <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || showLogo" class="mint-topbar__identity">
-            <PluginIcon
-              v-if="isIntegrated"
-              class="mint-topbar__plugin-icon"
-              :icon="plugin?.icon"
-              :tone="plugin?.color"
-              size="topbar"
-              variant="solid"
-            />
-            <slot v-else name="icon">
+            </span>
+          </router-link>
+          <template v-else>
+            <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || config.logo" class="mint-topbar__identity">
               <PluginIcon
-                v-if="pluginIcon"
+                v-if="isIntegrated"
                 class="mint-topbar__plugin-icon"
-                :icon="pluginIcon.icon"
-                :tone="pluginIcon.color"
+                :icon="plugin?.icon"
                 size="topbar"
                 variant="solid"
               />
-              <slot v-else name="logo">
-                <div v-if="showLogo" class="mint-topbar__logo">
-                  <div class="mint-topbar__logo-icon">
-                    <span class="mint-topbar__logo-text">M</span>
+              <slot v-else name="icon">
+                <PluginIcon
+                  v-if="pluginIcon"
+                  class="mint-topbar__plugin-icon"
+                  :icon="pluginIcon"
+                  size="topbar"
+                  variant="solid"
+                />
+                <slot v-else name="logo">
+                  <div v-if="config.logo" class="mint-topbar__logo">
+                    <div class="mint-topbar__logo-icon">
+                      <span class="mint-topbar__logo-text">M</span>
+                    </div>
                   </div>
-                </div>
+                </slot>
               </slot>
-            </slot>
-          </span>
-        </template>
-      </div>
+            </span>
+          </template>
+        </div>
 
-      <!-- Left: static plugin identity (not a control) -->
-      <span v-if="identityName" class="mint-topbar__plugin-identity">
-        <span class="mint-topbar__plugin-name">{{ identityName }}</span>
-      </span>
+        <!-- Left: static plugin identity (not a control) -->
+        <span v-if="identityName" class="mint-topbar__plugin-identity">
+          <span class="mint-topbar__plugin-name">{{ identityName }}</span>
+          <span v-if="identitySubtitle" class="mint-topbar__plugin-subtitle">{{ identitySubtitle }}</span>
+        </span>
 
-      <!-- Left: page selector -->
-      <AppTopBarPageSelectorInternal
-        v-if="hasPageSelector"
-        :pages="normalizedPageSelector"
-        :current-page-id="effectiveCurrentPageSelectorId"
-        @select="emit('page-selector-select', $event)"
-      >
-        <template v-if="$slots['page-selector-icon']" #icon="slotProps">
-          <slot name="page-selector-icon" v-bind="slotProps" />
-        </template>
-        <template v-if="$slots['page-selector-item-icon']" #item-icon="slotProps">
-          <slot name="page-selector-item-icon" v-bind="slotProps" />
-        </template>
-      </AppTopBarPageSelectorInternal>
+        <!-- Left: page selector (the platform integration script renders the nav_items one) -->
+        <span v-if="hasPlatformPageSelector" ref="platformPageSelectorEl" class="mint-topbar__platform-page-selector" />
+        <AppTopBarPageSelectorInternal
+          v-else-if="hasPropPageSelector"
+          :pages="normalizedPageSelector"
+          :current-page-id="currentPageSelectorId"
+          @select="emit('page-selector-select', $event)"
+        >
+          <template v-if="$slots['page-selector-icon']" #icon="slotProps">
+            <slot name="page-selector-icon" v-bind="slotProps" />
+          </template>
+          <template v-if="$slots['page-selector-item-icon']" #item-icon="slotProps">
+            <slot name="page-selector-item-icon" v-bind="slotProps" />
+          </template>
+        </AppTopBarPageSelectorInternal>
 
-      <!-- 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>
+        <!-- Left: title -->
+        <div v-if="hasTitleGroup" class="mint-topbar-title-group">
+          <span class="mint-topbar-title">{{ titleText }}</span>
+          <span class="mint-topbar-subtitle">{{ subtitleText }}</span>
+        </div>
 
-      <span v-else-if="hasTitleOnly" class="mint-topbar__title-only">{{ title }}</span>
+        <span v-else-if="hasTitleOnly" class="mint-topbar__title-only">{{ titleText }}</span>
 
-      <!-- Nav slot (inline, after brand/selector) -->
-      <slot name="nav" />
+        <!-- Nav slot (inline, after brand/selector) -->
+        <slot name="nav" />
+      </div>
 
       <!-- Center: pill nav -->
       <div v-if="hasPillNav || $slots.center" class="mint-topbar__center">
         <slot name="center">
           <AppTopBarPillNavInternal
-            v-if="hasPillNav && pillNav"
+            v-if="hasPillNav"
             :items="normalizedPillNav"
-            :current-item-id="currentPillId"
-            @select="emit('pill-select', $event)"
+            :current-item-id="pill"
+            @select="handlePillSelect"
             @option-select="(option, item) => emit('pill-option-select', option, item)"
           />
         </slot>
@@ -350,8 +286,8 @@ const effectiveCurrentPageSelectorId = computed(() =>
 
       <!-- Right section -->
       <div class="mint-topbar__right">
-        <span v-if="showStandaloneLabel && isStandalone && !appExperiment" class="mint-topbar__standalone-badge">
-          {{ standaloneLabel }}
+        <span v-if="config.standaloneLabel !== false && isStandalone" class="mint-topbar__standalone-badge">
+          {{ config.standaloneLabel }}
         </span>
 
         <ExperimentPopover
@@ -362,29 +298,10 @@ const effectiveCurrentPageSelectorId = computed(() =>
           @detach="appExperiment.handleDetach()"
         />
 
-        <span v-if="appExperiment && isStandalone" class="mint-topbar__standalone-badge">
-          {{ standaloneLabel }}
-        </span>
-
         <slot name="actions" />
 
-        <!-- Notifications -->
-        <button
-          v-if="showNotifications"
-          type="button"
-          class="mint-topbar__icon-btn"
-          aria-label="Notifications"
-          @click="emit('notifications-click')"
-        >
-          <svg class="mint-topbar__icon-btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
-            <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
-          </svg>
-          <span v-if="hasNotificationDot" class="mint-topbar__icon-btn-dot" aria-hidden="true" />
-        </button>
-
         <!-- Theme toggle -->
-        <ThemeToggle v-if="showThemeToggle" size="sm" />
+        <ThemeToggle v-if="config.themeToggle" size="sm" />
 
         <!-- Settings -->
         <button
@@ -399,60 +316,23 @@ const effectiveCurrentPageSelectorId = computed(() =>
           </svg>
         </button>
 
-        <!-- Admin link -->
-        <router-link
-          v-if="showAdmin"
-          :to="adminPath"
-          class="mint-topbar__admin-btn"
-          aria-label="Admin Dashboard"
-          @click="emit('admin-click')"
-        >
-          <svg class="mint-topbar__admin-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /><path d="m9 12 2 2 4-4" />
-          </svg>
-        </router-link>
-
-        <!-- Account menu -->
-        <AppAvatarMenu
-          v-if="hasAccountMenu || $slots['account-menu-items']"
-          :user-name="userName"
-          :user-initial="userInitial"
-          :user-email="userEmail"
-          :items="accountMenu"
-          @select="emit('account-menu-select', $event)"
-          @sign-out="emit('sign-out')"
-        >
-          <template v-if="$slots['account-menu-items']" #items="slotProps">
-            <slot name="account-menu-items" v-bind="slotProps" />
-          </template>
-          <template v-if="$slots['account-menu-item-icon']" #item-icon="slotProps">
-            <slot name="account-menu-item-icon" v-bind="slotProps" />
-          </template>
-        </AppAvatarMenu>
+        <!-- Account: the host application renders its account controls here -->
+        <slot name="account" />
       </div>
     </div>
   </header>
 
-  <RuntimeUpdateNotice
-    :visible="runtimeAlignment.updateAvailable.value"
-    @reload="runtimeAlignment.reload"
-  />
-
   <SettingsModal
     v-if="showSettings && settingsOpen"
-    v-model="settingsOpen"
+    v-model:open="settingsOpen"
     :title="settingsConfig?.title"
     :tabs="normalizedSettingsTabs"
     :show-appearance="settingsConfig?.showAppearance ?? true"
     :appearance-first="settingsConfig?.appearanceFirst"
     :size="settingsConfig?.size"
     :layout="settingsConfig?.layout"
-    :schema="settingsConfig?.schema"
-    :model="settingsConfig?.model"
-    :controls="settingsConfig?.controls"
-    :control-options="settingsConfig?.controlOptions"
+    :spec="settingsConfig?.spec"
     :values="settingsConfig?.values"
-    :enhancements="settingsConfig?.enhancements"
     :user-type="settingsConfig?.userType"
     @update:values="emit('settings-values-change', $event)"
   >
@@ -465,8 +345,8 @@ const effectiveCurrentPageSelectorId = computed(() =>
   </SettingsModal>
 
   <ExperimentSelectorModal
-    v-if="appExperiment && !isStandalone && canBindExperiment && appExperiment.selectorModal.value.modelValue"
+    v-if="appExperiment && !isStandalone && canBindExperiment && appExperiment.selectorModal.value.open"
     v-bind="appExperiment.selectorModal.value"
-    @update:model-value="$event ? appExperiment.openModal() : appExperiment.closeModal()"
+    @update:open="$event ? appExperiment.openModal() : appExperiment.closeModal()"
   />
 </template>