@morscherlab/mint-sdk 1.3.9 → 1.4.0-beta.1

package/src/components/AppTopBar.vue

@@ -1,35 +1,24 @@
 <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. */
+import { ref, computed, inject, defineAsyncComponent, onMounted, onBeforeUnmount, toValue, 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 { integrationHost } from '../utils/integrationHost'
 import { trackTopBarForToasts } from './AppTopBar.toastOffset'
 
 interface Props {
@@ -37,78 +26,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,17 +70,8 @@ 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')
 
@@ -143,14 +85,20 @@ const pluginIcon = computed(() => {
 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)
+const hasPillNav = computed(() => !!config.value.pills?.length)
 const hasTitleGroup = computed(
   () =>
     !hasPageSelector.value &&
@@ -165,34 +113,17 @@ const hasTitleOnly = computed(
     !hasTitleGroup.value &&
     !!props.title,
 )
-const platformPageSelector = computed<PageSelectorItem[]>(() =>
-  hasPlatformPageSelector.value
-    ? plugin.value?.nav_items?.map((item, index) =>
-      pluginNavItemToPageSelectorItem(item, index, {
-        pluginIcon: plugin.value?.icon,
-      })
-    ) ?? []
-    : [],
-)
 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,23 +132,23 @@ 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"
+          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 || showLogo" class="mint-topbar__identity">
+          <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || config.logo" class="mint-topbar__identity">
             <PluginIcon
               v-if="isIntegrated"
               class="mint-topbar__plugin-icon"
               :icon="plugin?.icon"
-              :tone="plugin?.color"
+              :color="plugin?.color"
               size="topbar"
               variant="solid"
             />
@@ -226,12 +157,12 @@ const effectiveCurrentPageSelectorId = computed(() =>
                 v-if="pluginIcon"
                 class="mint-topbar__plugin-icon"
                 :icon="pluginIcon.icon"
-                :tone="pluginIcon.color"
+                :color="pluginIcon.color"
                 size="topbar"
                 variant="solid"
               />
               <slot v-else name="logo">
-                <div v-if="showLogo" class="mint-topbar__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>
@@ -241,16 +172,16 @@ const effectiveCurrentPageSelectorId = computed(() =>
           </span>
         </a>
         <router-link
-          v-else-if="homePath"
-          :to="homePath"
+          v-else-if="config.homePath"
+          :to="config.homePath"
           class="mint-topbar-home-link"
         >
-          <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || showLogo" class="mint-topbar__identity">
+          <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || config.logo" class="mint-topbar__identity">
             <PluginIcon
               v-if="isIntegrated"
               class="mint-topbar__plugin-icon"
               :icon="plugin?.icon"
-              :tone="plugin?.color"
+              :color="plugin?.color"
               size="topbar"
               variant="solid"
             />
@@ -259,12 +190,12 @@ const effectiveCurrentPageSelectorId = computed(() =>
                 v-if="pluginIcon"
                 class="mint-topbar__plugin-icon"
                 :icon="pluginIcon.icon"
-                :tone="pluginIcon.color"
+                :color="pluginIcon.color"
                 size="topbar"
                 variant="solid"
               />
               <slot v-else name="logo">
-                <div v-if="showLogo" class="mint-topbar__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>
@@ -274,12 +205,12 @@ const effectiveCurrentPageSelectorId = computed(() =>
           </span>
         </router-link>
         <template v-else>
-          <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || showLogo" class="mint-topbar__identity">
+          <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || config.logo" class="mint-topbar__identity">
             <PluginIcon
               v-if="isIntegrated"
               class="mint-topbar__plugin-icon"
               :icon="plugin?.icon"
-              :tone="plugin?.color"
+              :color="plugin?.color"
               size="topbar"
               variant="solid"
             />
@@ -288,12 +219,12 @@ const effectiveCurrentPageSelectorId = computed(() =>
                 v-if="pluginIcon"
                 class="mint-topbar__plugin-icon"
                 :icon="pluginIcon.icon"
-                :tone="pluginIcon.color"
+                :color="pluginIcon.color"
                 size="topbar"
                 variant="solid"
               />
               <slot v-else name="logo">
-                <div v-if="showLogo" class="mint-topbar__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>
@@ -309,11 +240,12 @@ const effectiveCurrentPageSelectorId = computed(() =>
         <span class="mint-topbar__plugin-name">{{ identityName }}</span>
       </span>
 
-      <!-- Left: page selector -->
+      <!-- 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-if="hasPageSelector"
+        v-else-if="hasPropPageSelector"
         :pages="normalizedPageSelector"
-        :current-page-id="effectiveCurrentPageSelectorId"
+        :current-page-id="currentPageSelectorId"
         @select="emit('page-selector-select', $event)"
       >
         <template v-if="$slots['page-selector-icon']" #icon="slotProps">
@@ -339,10 +271,10 @@ const effectiveCurrentPageSelectorId = computed(() =>
       <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 +282,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 +294,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 +312,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 +341,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>

package/src/components/ArtifactSaveDialog.story.vue

@@ -105,7 +105,7 @@ const isOpenError = ref(false)
           >{{ formatPayload(lastPayload) }}</pre>
 
           <ArtifactSaveDialog
-            v-model="isOpenFile"
+            v-model:open="isOpenFile"
             :experiment-id="42"
             :mode="state.mode"
             :result="mockResult"
@@ -142,7 +142,7 @@ const isOpenError = ref(false)
         </button>
 
         <ArtifactSaveDialog
-          v-model="isOpenJson"
+          v-model:open="isOpenJson"
           :experiment-id="42"
           mode="json"
           :result="mockResult"
@@ -165,7 +165,7 @@ const isOpenError = ref(false)
         </button>
 
         <ArtifactSaveDialog
-          v-model="isOpenBoth"
+          v-model:open="isOpenBoth"
           :experiment-id="42"
           mode="both"
           :result="mockResult"
@@ -188,7 +188,7 @@ const isOpenError = ref(false)
         </button>
 
         <ArtifactSaveDialog
-          v-model="isOpenUpdateFile"
+          v-model:open="isOpenUpdateFile"
           :experiment-id="42"
           :existing-artifact="existingFileArtifact"
           accept=".pdf"
@@ -211,7 +211,7 @@ const isOpenError = ref(false)
         </button>
 
         <ArtifactSaveDialog
-          v-model="isOpenHandlerFile"
+          v-model:open="isOpenHandlerFile"
           :experiment-id="42"
           mode="file"
           file-source="handler"
@@ -235,7 +235,7 @@ const isOpenError = ref(false)
         </button>
 
         <ArtifactSaveDialog
-          v-model="isOpenUpdateJson"
+          v-model:open="isOpenUpdateJson"
           :experiment-id="42"
           :existing-artifact="existingJsonArtifact"
           :result="mockResult"
@@ -259,7 +259,7 @@ const isOpenError = ref(false)
         </button>
 
         <ArtifactSaveDialog
-          v-model="isOpenCollision"
+          v-model:open="isOpenCollision"
           :experiment-id="42"
           mode="json"
           :result="mockResult"
@@ -284,7 +284,7 @@ const isOpenError = ref(false)
         </button>
 
         <ArtifactSaveDialog
-          v-model="isOpenFileConflict"
+          v-model:open="isOpenFileConflict"
           :experiment-id="42"
           mode="file"
           default-artifact-key="qc-report"
@@ -307,7 +307,7 @@ const isOpenError = ref(false)
         </button>
 
         <ArtifactSaveDialog
-          v-model="isOpenError"
+          v-model:open="isOpenError"
           :experiment-id="42"
           mode="json"
           :result="mockResult"