@morscherlab/mint-sdk 1.2.0-beta.4 → 1.2.0-beta.5

package/src/__tests__/components/SecretInput.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SecretInput from '../../components/SecretInput.vue'
+import {
+  isPluginSecretRef,
+  keepPluginSecret,
+  pluginSecretLabel,
+  pluginSecretState,
+} from '../../utils/pluginSecrets'
+
+const storedRef = { $secret: 'sec_0f2a4c6e8a0c2e4a6c8e0a2c4e6a8c0e', set: true }
+const lockedRef = { $secret: null, locked: true }
+
+describe('pluginSecrets helpers', () => {
+  it('should classify each marker the settings response can publish', () => {
+    expect([
+      pluginSecretState(storedRef),
+      pluginSecretState(null),
+      pluginSecretState(lockedRef),
+      pluginSecretLabel(storedRef),
+      pluginSecretLabel(null),
+      pluginSecretLabel(lockedRef),
+    ]).toEqual(['set', 'unset', 'environment', 'Set', 'Not set', 'Provided by environment'])
+  })
+
+  it('should only treat reserved marker shapes as references', () => {
+    expect([
+      isPluginSecretRef(storedRef),
+      isPluginSecretRef({ $mint: 'placeholder' }),
+      isPluginSecretRef({ $secret: 'x', label: 'not a marker' }),
+      isPluginSecretRef('plain-string'),
+      keepPluginSecret(storedRef),
+      keepPluginSecret('typed'),
+    ]).toEqual([true, false, false, false, { ...storedRef }, null])
+  })
+})
+
+describe('SecretInput', () => {
+  it('should show the stored state without exposing a value', () => {
+    const wrapper = mount(SecretInput, { props: { modelValue: storedRef } })
+
+    expect([
+      wrapper.find('.mint-secret-input__badge').text(),
+      wrapper.find('input').exists(),
+    ]).toEqual(['Set', false])
+  })
+
+  it('should submit the typed string once the user enters a new value', async () => {
+    const wrapper = mount(SecretInput, { props: { modelValue: storedRef } })
+
+    await wrapper.findAll('button')[0]!.trigger('click')
+    await wrapper.setProps({ modelValue: '' })
+    await wrapper.find('input').setValue('typed-secret')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([[''], ['typed-secret']])
+  })
+
+  it('should submit null when the user clears a stored secret', async () => {
+    const wrapper = mount(SecretInput, { props: { modelValue: storedRef } })
+
+    const clear = wrapper.findAll('button').at(-1)!
+    await clear.trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([[null]])
+  })
+
+  it('should restore the stored reference when an edit is cancelled', async () => {
+    const wrapper = mount(SecretInput, { props: { modelValue: storedRef } })
+
+    await wrapper.findAll('button')[0]!.trigger('click')
+    await wrapper.setProps({ modelValue: 'partial' })
+    await wrapper.findAll('button')[0]!.trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{ ...storedRef }])
+  })
+
+  it('should keep an environment-provided secret read-only', async () => {
+    const wrapper = mount(SecretInput, { props: { modelValue: lockedRef } })
+
+    expect([
+      wrapper.find('.mint-secret-input__badge').text(),
+      wrapper.find('.mint-secret-input__hint').exists(),
+      wrapper.findAll('button').every(button => button.attributes('disabled') !== undefined),
+      wrapper.emitted('update:modelValue'),
+    ]).toEqual(['Provided by environment', true, true, undefined])
+  })
+})

package/src/__tests__/components/WellEditPopupInternal.test.ts

@@ -0,0 +1,108 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import WellEditPopupInternal from '../../components/internal/WellEditPopupInternal.vue'
+
+function mountPopup(attachTo?: HTMLElement) {
+  return mount(WellEditPopupInternal, {
+    props: {
+      wellId: 'A1',
+      position: { x: 10, y: 10 },
+    },
+    attachTo,
+    global: {
+      stubs: { teleport: true },
+    },
+  })
+}
+
+describe('WellEditPopupInternal focus trap', () => {
+  it('moves focus into the popup on mount', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const wrapper = mountPopup(host)
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('.mint-well-edit-popup').element.contains(document.activeElement)).toBe(true)
+
+    wrapper.unmount()
+    host.remove()
+  })
+
+  it('restores focus to the previously focused element on unmount', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const trigger = document.createElement('button')
+    host.appendChild(trigger)
+    trigger.focus()
+    expect(document.activeElement).toBe(trigger)
+
+    const wrapper = mountPopup(host)
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+    expect(document.activeElement).not.toBe(trigger)
+
+    wrapper.unmount()
+    expect(document.activeElement).toBe(trigger)
+
+    host.remove()
+  })
+
+  it('wraps Tab from the last focusable element back to the first', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const wrapper = mountPopup(host)
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+
+    const focusable = (wrapper.element as HTMLElement).querySelectorAll<HTMLElement>(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+    )
+    expect(focusable.length).toBeGreaterThan(1)
+    const last = focusable[focusable.length - 1]
+    const first = focusable[0]
+    last.focus()
+
+    const event = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true })
+    document.dispatchEvent(event)
+
+    expect(document.activeElement).toBe(first)
+
+    wrapper.unmount()
+    host.remove()
+  })
+
+  it('wraps Shift+Tab from the first focusable element back to the last', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const wrapper = mountPopup(host)
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+
+    const focusable = (wrapper.element as HTMLElement).querySelectorAll<HTMLElement>(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+    )
+    const first = focusable[0]
+    const last = focusable[focusable.length - 1]
+    first.focus()
+
+    const event = new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true, bubbles: true, cancelable: true })
+    document.dispatchEvent(event)
+
+    expect(document.activeElement).toBe(last)
+
+    wrapper.unmount()
+    host.remove()
+  })
+
+  it('closes on Escape', async () => {
+    const wrapper = mountPopup()
+    await wrapper.vm.$nextTick()
+
+    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
+    document.dispatchEvent(event)
+
+    expect(wrapper.emitted('close')).toHaveLength(1)
+    wrapper.unmount()
+  })
+})

package/src/__tests__/composables/usePluginClient.test.ts

@@ -848,6 +848,146 @@ describe('usePluginClient', () => {
     })
   })
 
+  describe('secret settings references', () => {
+    const secretRef = { $secret: 'sec_0f2a4c6e8a0c2e4a6c8e0a2c4e6a8c0e', set: true }
+
+    function integratedPluginSettingsHost(): void {
+      ;(window as unknown as { __MINT_PLATFORM__?: unknown }).__MINT_PLATFORM__ = {
+        isIntegrated: true,
+        theme: 'light',
+        platformApiUrl: '/api',
+        plugin: {
+          id: 'drp',
+          name: 'drp',
+          version: '1.0.0',
+          route_prefix: '/drp',
+          api_prefix: '/api/drp',
+          settings_api: 'plugin',
+        },
+      }
+      nextGetData = {
+        settings: { apiKey: secretRef, method: 'first' },
+        secret_format: 'ref',
+        mode: 'integrated',
+        revision: 'revision-1',
+      }
+      nextPutData = {
+        settings: { apiKey: secretRef, method: 'second' },
+        secret_format: 'ref',
+        mode: 'integrated',
+        revision: 'revision-2',
+      }
+    }
+
+    it('should round-trip an untouched secret reference unchanged', async () => {
+      integratedPluginSettingsHost()
+
+      const settings = usePluginSettings<{ apiKey?: unknown; method?: string }>({
+        pluginName: 'drp',
+      })
+      await settings.load()
+      const saved = await settings.save({ ...settings.values.value, method: 'second' })
+
+      expect({ saved, body: requestBodies[0] }).toEqual({
+        saved: true,
+        body: { apiKey: secretRef, method: 'second', secret_format: 'ref' },
+      })
+    })
+
+    it('should submit a typed string when the user enters a new secret', async () => {
+      integratedPluginSettingsHost()
+
+      const settings = usePluginSettings<{ apiKey?: unknown; method?: string }>({
+        pluginName: 'drp',
+      })
+      await settings.load()
+      await settings.save({ apiKey: 'typed-secret', method: 'first' })
+
+      expect(requestBodies[0]).toEqual({
+        apiKey: 'typed-secret',
+        method: 'first',
+        secret_format: 'ref',
+      })
+    })
+
+    it('should submit null when the user clears a secret', async () => {
+      integratedPluginSettingsHost()
+
+      const settings = usePluginSettings<{ apiKey?: unknown; method?: string }>({
+        pluginName: 'drp',
+      })
+      await settings.load()
+      await settings.save({ apiKey: null, method: 'first' })
+
+      expect(requestBodies[0]).toEqual({
+        apiKey: null,
+        method: 'first',
+        secret_format: 'ref',
+      })
+    })
+
+    it('should declare the reference format on platform config patches', async () => {
+      ;(window as unknown as { __MINT_PLATFORM__?: unknown }).__MINT_PLATFORM__ = {
+        isIntegrated: true,
+        theme: 'light',
+        platformApiUrl: '/api',
+        plugin: {
+          id: 'drp',
+          name: 'drp',
+          version: '1.0.0',
+          route_prefix: '/drp',
+          api_prefix: '/api/drp',
+        },
+      }
+      nextGetData = {
+        plugin_name: 'drp',
+        config: { apiKey: secretRef, method: 'first' },
+        secret_format: 'ref',
+        revision: 'revision-1',
+      }
+      nextPatchData = {
+        plugin_name: 'drp',
+        config: { apiKey: secretRef, method: 'second' },
+        secret_format: 'ref',
+        revision: 'revision-2',
+      }
+
+      const settings = usePluginSettings<{ apiKey?: unknown; method?: string }>({
+        pluginName: 'drp',
+      })
+      await settings.load()
+      await settings.save({ apiKey: secretRef, method: 'second' })
+
+      expect(requestBodies[0]).toEqual({
+        config: { method: 'second', secret_format: 'ref' },
+      })
+    })
+
+    it('should omit the format marker for a host that does not publish one', async () => {
+      ;(window as unknown as { __MINT_PLATFORM__?: unknown }).__MINT_PLATFORM__ = {
+        isIntegrated: true,
+        theme: 'light',
+        platformApiUrl: '/api',
+        plugin: {
+          id: 'drp',
+          name: 'drp',
+          version: '1.0.0',
+          route_prefix: '/drp',
+          api_prefix: '/api/drp',
+          settings_api: 'plugin',
+        },
+      }
+      nextGetData = { settings: { method: 'first' }, mode: 'integrated', revision: 'revision-1' }
+      nextPutData = { settings: { method: 'second' }, mode: 'integrated', revision: 'revision-2' }
+
+      const settings = usePluginSettings<{ method?: string }>({ pluginName: 'drp' })
+      await settings.load()
+      await settings.save({ method: 'second' })
+
+      expect(requestBodies[0]).toEqual({ method: 'second' })
+    })
+  })
+
   it('should preserve the contract v2 form schema in settingsConfig', () => {
     const settings = usePluginSettings({
       apiBaseUrl: '/api/drp',

package/src/components/AppAvatarMenu.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /** Avatar-triggered dropdown with user name/email header, configurable menu items, dividers, and a sign-out action. */
-import { computed } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import { useDropdownState } from '../composables/useDropdownState'
+import { useMenuKeyboard } from '../composables/useMenuKeyboard'
 import type { AccountMenuItem } from '../types/components'
 import ActionItemInternal from './internal/ActionItemInternal.vue'
 
@@ -27,11 +28,33 @@ const emit = defineEmits<{
   'menu-close': []
 }>()
 
-const { isOpen, rootRef, close, toggle } = useDropdownState({
+const { isOpen, rootRef, open, close: closeDropdown, toggle } = useDropdownState({
   onOpen: () => emit('menu-open'),
   onClose: () => emit('menu-close'),
 })
 
+const triggerRef = ref<HTMLElement | null>(null)
+const panelRef = ref<HTMLElement | null>(null)
+
+function menuItems(): HTMLElement[] {
+  if (!panelRef.value) return []
+  return Array.from(panelRef.value.querySelectorAll<HTMLElement>('[role="menuitem"]'))
+}
+
+function close(returnFocus = false) {
+  closeDropdown()
+  if (returnFocus) {
+    void nextTick(() => triggerRef.value?.focus())
+  }
+}
+
+const { handleTriggerKeydown, handlePanelKeydown } = useMenuKeyboard({
+  items: menuItems,
+  isOpen: () => isOpen.value,
+  open,
+  close,
+})
+
 const initials = computed(() => {
   if (props.userInitial) return props.userInitial.slice(0, 2).toUpperCase()
   if (props.userName) {
@@ -64,6 +87,7 @@ function handleSignOut() {
 <template>
   <div ref="rootRef" class="mint-avatar-menu">
     <button
+      ref="triggerRef"
       type="button"
       class="mint-avatar-menu__trigger"
       :class="{ 'mint-avatar-menu__trigger--open': isOpen }"
@@ -71,6 +95,7 @@ function handleSignOut() {
       aria-haspopup="menu"
       :title="userName ? `${userName} · Account menu` : 'Account menu'"
       @click.stop="toggle"
+      @keydown="handleTriggerKeydown"
     >
       <span class="mint-avatar-menu__avatar">
         <slot name="avatar" :initials="initials">
@@ -80,7 +105,13 @@ function handleSignOut() {
       <span v-if="userName" class="mint-avatar-menu__name">{{ userName }}</span>
     </button>
 
-    <div v-if="isOpen" class="mint-avatar-menu__panel" role="menu">
+    <div
+      v-if="isOpen"
+      ref="panelRef"
+      class="mint-avatar-menu__panel"
+      role="menu"
+      @keydown="handlePanelKeydown"
+    >
       <div v-if="userName || userEmail" class="mint-avatar-menu__header">
         <div v-if="userName" class="mint-avatar-menu__user-name">{{ userName }}</div>
         <div v-if="userEmail" class="mint-avatar-menu__user-email">{{ userEmail }}</div>

package/src/components/BaseModal.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 /** Modal dialog with backdrop, focus trap, Escape-to-close, and configurable size/variant/layout. */
-import { computed, ref, watch, nextTick, onUnmounted, type ComponentPublicInstance } from 'vue'
+import { computed, ref, toRef, watch, onUnmounted, type ComponentPublicInstance } from 'vue'
 import type { ModalLayout, ModalSize, ModalTab, ModalVariant } from '../types'
 import { useEventListener } from '../composables/useEventListener'
+import { useFocusTrap } from '../composables/useFocusTrap'
 
 interface Props {
   modelValue: boolean
@@ -75,47 +76,16 @@ function isPathIcon(icon: ModalTab['icon']): icon is string | string[] {
 }
 
 const containerRef = ref<HTMLElement | null>(null)
-let previouslyFocused: HTMLElement | null = null
 
-const FOCUSABLE_SELECTOR = [
-  'a[href]',
-  'button:not([disabled])',
-  'input:not([disabled])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
-  '[tabindex]:not([tabindex="-1"])',
-].join(', ')
+useFocusTrap({ containerRef, active: toRef(props, 'modelValue') })
 
-function getFocusableElements(): HTMLElement[] {
-  if (!containerRef.value) return []
-  return Array.from(containerRef.value.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
-    // Roving tabindex (inactive tabs/rail items) stays out of the Tab cycle.
-    .filter((el) => el.tabIndex !== -1)
-}
+watch(() => props.modelValue, (isOpen) => {
+  document.body.style.overflow = isOpen ? 'hidden' : ''
+})
 
-function handleKeydown(event: KeyboardEvent) {
+function handleEscapeKeydown(event: KeyboardEvent) {
   if (event.key === 'Escape' && props.closeOnEscape && props.modelValue) {
     close()
-    return
-  }
-
-  if (event.key !== 'Tab' || !containerRef.value) return
-
-  const focusable = getFocusableElements()
-  if (focusable.length === 0) {
-    event.preventDefault()
-    return
-  }
-
-  const first = focusable[0]
-  const last = focusable[focusable.length - 1]
-
-  if (event.shiftKey && document.activeElement === first) {
-    event.preventDefault()
-    last.focus()
-  } else if (!event.shiftKey && document.activeElement === last) {
-    event.preventDefault()
-    first.focus()
   }
 }
 
@@ -132,25 +102,7 @@ function handleOverlayClick(event: MouseEvent) {
   }
 }
 
-watch(() => props.modelValue, async (isOpen) => {
-  if (isOpen) {
-    previouslyFocused = document.activeElement as HTMLElement | null
-    document.body.style.overflow = 'hidden'
-    await nextTick()
-    const focusable = getFocusableElements()
-    if (focusable.length > 0) {
-      focusable[0].focus()
-    } else {
-      containerRef.value?.focus()
-    }
-  } else {
-    document.body.style.overflow = ''
-    previouslyFocused?.focus()
-    previouslyFocused = null
-  }
-})
-
-useEventListener(() => document, 'keydown', handleKeydown)
+useEventListener(() => document, 'keydown', handleEscapeKeydown)
 
 onUnmounted(() => {
   document.body.style.overflow = ''

package/src/components/BaseTabs.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 /** Renders a tab bar with underline or pills variant, badges, icons, and disabled tab support. */
-import { computed } from 'vue'
+import { computed, type ComponentPublicInstance } from 'vue'
 import type { TabItem, TabItemInput } from '../types'
 import { normalizeItemInput } from '../utils/items'
+import { useRovingFocus } from '../composables/useRovingFocus'
 
 interface Props {
   modelValue: string
@@ -32,23 +33,47 @@ function selectTab(tabId: string) {
     emit('update:modelValue', tabId)
   }
 }
+
+const tabButtonRefs = new Map<string, HTMLElement>()
+
+function setTabButtonRef(id: string, el: Element | ComponentPublicInstance | null) {
+  if (el instanceof HTMLElement) {
+    tabButtonRefs.set(id, el)
+  } else {
+    tabButtonRefs.delete(id)
+  }
+}
+
+// Left/Right only — BaseTabs renders a single horizontal strip with no vertical
+// variant, so there is no Up/Down axis to support.
+const { handleKeydown } = useRovingFocus({
+  ids: () => normalizedTabs.value.filter(tab => !tab.disabled).map(tab => tab.id),
+  activeId: () => activeTab.value,
+  activate: selectTab,
+  getElement: (id) => tabButtonRefs.get(id),
+})
 </script>
 
 <template>
   <div :class="['mint-tabs', `mint-tabs--${variant}`]" role="tablist">
     <button
       v-for="tab in normalizedTabs"
+      :id="`mint-tab-${tab.id}`"
       :key="tab.id"
+      :ref="(el) => setTabButtonRef(tab.id, el)"
       type="button"
       role="tab"
       :aria-selected="activeTab === tab.id"
       :aria-disabled="tab.disabled"
+      :aria-controls="`mint-tabpanel-${tab.id}`"
+      :tabindex="activeTab === tab.id ? 0 : -1"
       :class="[
         'mint-tab',
         activeTab === tab.id ? 'mint-tab--active' : '',
         tab.disabled ? 'mint-tab--disabled' : '',
       ]"
       @click="selectTab(tab.id)"
+      @keydown="handleKeydown"
     >
       <span class="mint-tab__content">
         <svg

package/src/components/BioTemplateExperimentWorkspaceView.vue

@@ -19,6 +19,7 @@ import {
   type BioTemplateComponentPropsLookupOptions,
   type TemplateCollectionEnvelope,
 } from '../templates'
+import { bioTemplateExperimentWorkspaceProps } from '../composables/workspaceRecipes'
 import AlertBox from './AlertBox.vue'
 import BaseButton from './BaseButton.vue'
 import BioTemplateRenderer from './BioTemplateRenderer.vue'
@@ -114,27 +115,15 @@ const statusMessage = computed(() => {
   return `${props.label} template data saves to experiment design_data.`
 })
 
-const resolvedLoading = computed(() => {
-  if (props.status?.loading !== undefined || props.status?.saving !== undefined) {
-    return Boolean(props.status.loading) || Boolean(props.status.saving)
-  }
-  return props.loading
-})
-const resolvedError = computed(() =>
-  props.status?.error !== undefined ? props.status.error : props.error,
-)
-const resolvedHasExperiment = computed(() =>
-  props.status?.hasExperiment ?? props.hasExperiment,
-)
-const resolvedCurrentExperimentId = computed(() =>
-  props.status?.currentExperimentId ?? props.currentExperimentId,
-)
-const resolvedLastLoadedAt = computed(() =>
-  props.status?.lastLoadedAt !== undefined ? props.status.lastLoadedAt : props.lastLoadedAt,
-)
-const resolvedLastSavedAt = computed(() =>
-  props.status?.lastSavedAt !== undefined ? props.status.lastSavedAt : props.lastSavedAt,
-)
+// Thin recipe over bioTemplateExperimentWorkspaceProps(): merges the grouped `status` prop
+// over the individual loading/error/experiment props (see workspaceRecipes.ts).
+const resolvedStatus = computed(() => bioTemplateExperimentWorkspaceProps(props))
+const resolvedLoading = computed(() => resolvedStatus.value.loading)
+const resolvedError = computed(() => resolvedStatus.value.error)
+const resolvedHasExperiment = computed(() => resolvedStatus.value.hasExperiment)
+const resolvedCurrentExperimentId = computed(() => resolvedStatus.value.currentExperimentId)
+const resolvedLastLoadedAt = computed(() => resolvedStatus.value.lastLoadedAt)
+const resolvedLastSavedAt = computed(() => resolvedStatus.value.lastSavedAt)
 
 const templateSummaries = computed(() =>
   Object.values(extractTemplateCollection(props.target)).map(template => ({

package/src/components/BioTemplatePackWorkspaceView.vue

@@ -14,6 +14,7 @@ import type {
   UseBioTemplatePackWorkspaceReturn,
 } from '../composables/useBioTemplatePackWorkspace'
 import { useBioTemplatePackWorkspace } from '../composables/useBioTemplatePackWorkspace'
+import { bioTemplatePackWorkspaceProps } from '../composables/workspaceRecipes'
 import BioTemplateExperimentWorkspaceView from './BioTemplateExperimentWorkspaceView.vue'
 
 interface BioTemplatePackWorkspaceSlotProps {
@@ -140,6 +141,15 @@ const resolvedActions = computed<PackWorkspaceActions>(() => ({
   save: props.actions?.save ?? (() => resolvedWorkspace.value.saveCurrent()),
 }))
 
+// Thin recipe over bioTemplatePackWorkspaceProps(): forwards this view's own display props
+// plus the pack-derived target/label/status/actions to BioTemplateExperimentWorkspaceView.
+const experimentWorkspaceRecipe = computed(() => bioTemplatePackWorkspaceProps(props, {
+  target: target.value,
+  label: label.value,
+  status: resolvedStatus.value,
+  actions: resolvedActions.value,
+}))
+
 watch(
   [() => props.pack, () => props.workspaceOptions],
   () => {
@@ -152,21 +162,7 @@ onScopeDispose(() => generatedWorkspaceScope?.stop())
 </script>
 
 <template>
-  <BioTemplateExperimentWorkspaceView
-    :target="target"
-    kind="collection"
-    :label="label"
-    :message="message"
-    :status="resolvedStatus"
-    :actions="resolvedActions"
-    :dense="dense"
-    :readonly="readonly"
-    :show-status="showStatus"
-    :show-template-summary="showTemplateSummary"
-    :load-label="loadLabel"
-    :reset-label="resetLabel"
-    :save-label="saveLabel"
-  >
+  <BioTemplateExperimentWorkspaceView v-bind="experimentWorkspaceRecipe">
     <template v-if="hasDefaultSlot" #default="slotProps">
       <slot
         v-bind="slotProps"