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

package/src/composables/useAppExperiment.ts

@@ -4,14 +4,28 @@ import {
   readonly,
   provide,
   toValue,
+  watch,
   onScopeDispose,
   type Ref,
   type ComputedRef,
   type InjectionKey,
 } from 'vue'
 import type { ExperimentSummary, ExperimentStatus } from '../types'
+import { resolveExperimentCode } from './experiment-utils'
+
+export type AppExperimentRecord = Pick<ExperimentSummary, 'id' | 'name' | 'status' | 'experiment_code'>
+
+export type AppExperimentSource =
+  | AppExperimentRecord
+  | null
+  | undefined
+  | Ref<AppExperimentRecord | null | undefined>
+  | ComputedRef<AppExperimentRecord | null | undefined>
+  | (() => AppExperimentRecord | null | undefined)
 
 export interface UseAppExperimentOptions {
+  /** Current experiment source to mirror into the app shell. Accepts a value, ref, computed, or getter. */
+  experiment?: AppExperimentSource
   onSelect?: (experiment: ExperimentSummary) => void | Promise<void>
   onSave?: () => string | null | Promise<string | null>
   onDetach?: () => void
@@ -19,12 +33,37 @@ export interface UseAppExperimentOptions {
   saveDisabledMessage?: string | Ref<string | undefined> | ComputedRef<string | undefined>
 }
 
+export interface AppExperimentPopoverBinding {
+  experimentName?: string
+  experimentCode?: string
+  experimentStatus?: ExperimentStatus
+  showSave: boolean
+  showDetach: boolean
+  saveDisabled: boolean
+  saveDisabledMessage?: string
+  saveLoading: boolean
+  saveSuccessMessage?: string
+}
+
+export interface AppExperimentSelectorModalBinding {
+  modelValue: boolean
+  currentExperimentId: number | null
+}
+
 export interface UseAppExperimentReturn {
-  set: (experiment: Pick<ExperimentSummary, 'id' | 'name' | 'status' | 'experiment_code'>) => void
+  set: (experiment: AppExperimentRecord) => void
   clear: () => void
   experimentName: Readonly<Ref<string | undefined>>
   experimentCode: Readonly<Ref<string | undefined>>
+  experimentStatus: Readonly<Ref<ExperimentStatus | undefined>>
   experimentId: Readonly<Ref<number | null>>
+  popover: ComputedRef<AppExperimentPopoverBinding>
+  selectorModal: ComputedRef<AppExperimentSelectorModalBinding>
+  openModal: () => void
+  closeModal: () => void
+  handleSelect: (experiment: ExperimentSummary) => void
+  handleSave: () => Promise<void>
+  handleDetach: () => void
 }
 
 export interface AppExperimentState {
@@ -40,6 +79,8 @@ export interface AppExperimentState {
   closeModal: () => void
   saveDisabled: ComputedRef<boolean>
   saveDisabledMessage: ComputedRef<string | undefined>
+  popover: ComputedRef<AppExperimentPopoverBinding>
+  selectorModal: ComputedRef<AppExperimentSelectorModalBinding>
   openModal: () => void
   handleSelect: (experiment: ExperimentSummary) => void
   handleSave: () => Promise<void>
@@ -48,7 +89,7 @@ export interface AppExperimentState {
 
 export const APP_EXPERIMENT_KEY: InjectionKey<AppExperimentState> = Symbol('app-experiment')
 
-/** Manages the active experiment selection, save flow, and detach action for a plugin's app shell. */
+/** Manages the current experiment selection, save flow, and detach action for a plugin's AppTopBar app shell. */
 export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppExperimentReturn {
   const experimentName = ref<string | undefined>()
   const experimentCode = ref<string | undefined>()
@@ -64,19 +105,26 @@ export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppE
   const showDetach = computed(() => experimentId.value !== null)
   const saveDisabled = computed(() => toValue(options.saveDisabled) ?? false)
   const saveDisabledMessage = computed(() => toValue(options.saveDisabledMessage))
-
-  function set(experiment: Pick<ExperimentSummary, 'id' | 'name' | 'status' | 'experiment_code'>) {
+  const popover = computed<AppExperimentPopoverBinding>(() => ({
+    experimentName: experimentName.value,
+    experimentCode: experimentCode.value,
+    experimentStatus: experimentStatus.value,
+    showSave: showSave.value,
+    showDetach: showDetach.value,
+    saveDisabled: saveDisabled.value,
+    saveDisabledMessage: saveDisabledMessage.value,
+    saveLoading: saveLoading.value,
+    saveSuccessMessage: saveSuccessMessage.value,
+  }))
+  const selectorModal = computed<AppExperimentSelectorModalBinding>(() => ({
+    modelValue: showModal.value,
+    currentExperimentId: experimentId.value,
+  }))
+
+  function set(experiment: AppExperimentRecord) {
     experimentId.value = experiment.id
     experimentName.value = experiment.name
-    // Fallback: if no explicit experiment_code, derive `EXP-${id}` so the
-    // topbar always has a compact identifier to show instead of the long
-    // name. Matches the `EXP-${id}` format used elsewhere (e.g., queue
-    // cards in mint-ms-planner). Callers with the real code should pass it
-    // via `experiment_code` to keep the topbar chip in sync with the
-    // formal code shown in the popover panel.
-    experimentCode.value = experiment.experiment_code ?? (
-      experiment.id != null ? `EXP-${experiment.id}` : undefined
-    )
+    experimentCode.value = resolveExperimentCode(experiment)
     experimentStatus.value = experiment.status
   }
 
@@ -87,6 +135,20 @@ export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppE
     experimentStatus.value = undefined
   }
 
+  if (options.experiment !== undefined) {
+    watch(
+      () => toValue(options.experiment),
+      (experiment) => {
+        if (experiment) {
+          set(experiment)
+        } else {
+          clear()
+        }
+      },
+      { immediate: true },
+    )
+  }
+
   function openModal() {
     showModal.value = true
   }
@@ -140,6 +202,8 @@ export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppE
     showDetach,
     saveDisabled,
     saveDisabledMessage,
+    popover,
+    selectorModal,
     openModal,
     closeModal,
     handleSelect,
@@ -154,6 +218,14 @@ export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppE
     clear,
     experimentName: readonly(experimentName),
     experimentCode: readonly(experimentCode),
+    experimentStatus: readonly(experimentStatus),
     experimentId: readonly(experimentId),
+    popover,
+    selectorModal,
+    openModal,
+    closeModal,
+    handleSelect,
+    handleSave,
+    handleDetach,
   }
 }

package/src/composables/useBioTemplateComponents.ts

@@ -2,17 +2,21 @@ import {
   getBioTemplateComponentBindings,
   getBioTemplateComponentProps as getTemplateComponentProps,
   toBioTemplateComponentImports,
+  toBioTemplateComponentBindings,
+  toBioTemplateComponentBindingsById,
   toBioTemplateComponentProps,
   toBioTemplateComponentPropsByComponent as toTemplateComponentPropsByComponent,
   toBioTemplateComponentPropsById,
   toBioTemplateComponentSnippets,
   toBioTemplateComponentUsage,
   type BioTemplateComponentBinding,
+  type BioTemplateComponentBindingsById,
   type BioTemplateComponentImport,
   type BioTemplateComponentPropsByComponent,
   type BioTemplateComponentPropsBinding,
   type BioTemplateComponentPropsById,
   type BioTemplateComponentPropsLookupOptions,
+  type BioTemplateResolvedComponentBinding,
   type BioTemplateComponentSnippet,
   type BioTemplateComponentTarget,
   type BioTemplateComponentUsage,
@@ -24,6 +28,8 @@ import type {
 
 export {
   getBioTemplateComponentBindings,
+  toBioTemplateComponentBindings,
+  toBioTemplateComponentBindingsById,
   toBioTemplateComponentImports,
   toBioTemplateComponentProps,
   toBioTemplateComponentPropsById,
@@ -33,11 +39,13 @@ export {
 
 export type {
   BioTemplateComponentBinding,
+  BioTemplateComponentBindingsById,
   BioTemplateComponentImport,
   BioTemplateComponentPropsByComponent,
   BioTemplateComponentPropsBinding,
   BioTemplateComponentPropsById,
   BioTemplateComponentPropsLookupOptions,
+  BioTemplateResolvedComponentBinding,
   BioTemplateComponentSnippet,
   BioTemplateComponentTarget,
   BioTemplateComponentUsage,
@@ -46,6 +54,8 @@ export type {
 export interface UseBioTemplateComponentsReturn {
   bindings: BioTemplateComponentBinding[]
   imports: BioTemplateComponentImport[]
+  componentBindings: BioTemplateResolvedComponentBinding[]
+  componentBindingsById: BioTemplateComponentBindingsById
   componentProps: BioTemplateComponentPropsBinding[]
   componentPropsById: BioTemplateComponentPropsById
   componentPropsByComponent: BioTemplateComponentPropsByComponent
@@ -80,6 +90,8 @@ export function useBioTemplateComponents(
   return {
     bindings: getBioTemplateComponentBindings(target),
     imports: toBioTemplateComponentImports(target),
+    componentBindings: typeof target === 'string' ? [] : toBioTemplateComponentBindings(target),
+    componentBindingsById: typeof target === 'string' ? {} : toBioTemplateComponentBindingsById(target),
     componentProps: typeof target === 'string' ? [] : toBioTemplateComponentProps(target),
     componentPropsById: typeof target === 'string' ? {} : toBioTemplateComponentPropsById(target),
     componentPropsByComponent: typeof target === 'string' ? {} : toBioTemplateComponentPropsByComponent(target),

package/src/composables/useBioTemplatePackWorkspace.ts

@@ -29,6 +29,7 @@ import {
 } from './useBioTemplateWorkspace'
 import type {
   BioTemplateComponentBinding,
+  BioTemplateComponentBindingsById,
   BioTemplateComponentImport,
   BioTemplateComponentPropsByComponent,
   BioTemplateComponentPropsBinding,
@@ -56,11 +57,12 @@ export interface UseBioTemplatePackWorkspaceReturn {
   workspace: ComputedRef<UseBioTemplateWorkspaceReturn>
   form: ComputedRef<UseBioTemplateWorkspaceReturn['form']>
   sidebar: ComputedRef<UseBioTemplateWorkspaceReturn['sidebar']>
-  topBar: ComputedRef<UseBioTemplateWorkspaceReturn['topBar']>
+  topBar: ComputedRef<UseBioTemplateWorkspaceReturn['topBar']['value']>
   pillNav: ComputedRef<UseBioTemplateWorkspaceReturn['pillNav']>
   topBarSettings: ComputedRef<UseBioTemplateWorkspaceReturn['topBarSettings']>
   bindings: ComputedRef<BioTemplateWorkspaceBindings>
   componentBindings: ComputedRef<BioTemplateComponentBinding[]>
+  componentBindingsById: ComputedRef<BioTemplateComponentBindingsById>
   componentImports: ComputedRef<BioTemplateComponentImport[]>
   componentProps: ComputedRef<BioTemplateComponentPropsBinding[]>
   componentPropsById: ComputedRef<BioTemplateComponentPropsById>
@@ -106,11 +108,12 @@ export function useBioTemplatePackWorkspace(
   const renderer = computed<BioTemplateRendererBinding>(() => ({ target: collection.value }))
   const form = computed(() => workspace.value.form)
   const sidebar = computed(() => workspace.value.sidebar)
-  const topBar = computed(() => workspace.value.topBar)
+  const topBar = computed(() => workspace.value.topBar.value)
   const pillNav = computed(() => workspace.value.pillNav)
   const topBarSettings = computed(() => workspace.value.topBarSettings)
   const bindings = computed(() => workspace.value.bindings)
   const componentBindings = computed(() => workspace.value.componentBindings)
+  const componentBindingsById = computed(() => workspace.value.componentBindingsById)
   const componentImports = computed(() => workspace.value.componentImports)
   const componentProps = computed(() => workspace.value.componentProps)
   const componentPropsById = computed(() => workspace.value.componentPropsById)
@@ -163,6 +166,7 @@ export function useBioTemplatePackWorkspace(
     topBarSettings,
     bindings,
     componentBindings,
+    componentBindingsById,
     componentImports,
     componentProps,
     componentPropsById,

package/src/composables/useBioTemplatePresetWorkspace.ts

@@ -16,8 +16,6 @@ import {
   type TemplatePresetId,
 } from '../templates'
 import type {
-  ControlWorkspaceAppTopBarPillBinding,
-  ControlWorkspaceAppTopBarTabsBinding,
   ControlWorkspaceOptions,
   ControlWorkspaceFormBinding,
   ControlWorkspacePillNavBinding,
@@ -38,6 +36,7 @@ import {
 } from './useBioTemplateWorkspace'
 import type {
   BioTemplateComponentBinding,
+  BioTemplateComponentBindingsById,
   BioTemplateComponentImport,
   BioTemplateComponentPropsByComponent,
   BioTemplateComponentPropsBinding,
@@ -76,13 +75,14 @@ export interface UseBioTemplatePresetWorkspaceReturn {
   activeControlView: Ref<string>
   form: ControlWorkspaceFormBinding
   sidebar: ControlWorkspaceSidebarBinding
-  topBar: ControlWorkspaceTopBarBinding
+  topBar: ComputedRef<ControlWorkspaceTopBarBinding>
   pillNav: ControlWorkspacePillNavBinding
   topBarSettings: ControlWorkspaceTopBarSettingsBinding
   bindings: BioTemplatePresetWorkspaceBindings
   renderer: ComputedRef<BioTemplateRendererBinding>
   workspace: ComputedRef<UseBioTemplateWorkspaceReturn>
   componentBindings: ComputedRef<BioTemplateComponentBinding[]>
+  componentBindingsById: ComputedRef<BioTemplateComponentBindingsById>
   componentImports: ComputedRef<BioTemplateComponentImport[]>
   componentProps: ComputedRef<BioTemplateComponentPropsBinding[]>
   componentPropsById: ComputedRef<BioTemplateComponentPropsById>
@@ -103,11 +103,11 @@ export interface BioTemplatePresetWorkspaceBindings {
   renderer: ComputedRef<BioTemplateRendererBinding>
   form: ControlWorkspaceFormBinding
   sidebar: ControlWorkspaceSidebarBinding
-  topBar: ComputedRef<ControlWorkspaceAppTopBarPillBinding>
-  topBarTabs: ComputedRef<ControlWorkspaceAppTopBarTabsBinding>
+  topBar: ComputedRef<ControlWorkspaceTopBarBinding>
   topBarSettings: ControlWorkspaceTopBarSettingsBinding
   pillNav: ControlWorkspacePillNavBinding
   componentBindings: ComputedRef<BioTemplateComponentBinding[]>
+  componentBindingsById: ComputedRef<BioTemplateComponentBindingsById>
   componentProps: ComputedRef<BioTemplateComponentPropsBinding[]>
   componentPropsById: ComputedRef<BioTemplateComponentPropsById>
   componentPropsByComponent: ComputedRef<BioTemplateComponentPropsByComponent>
@@ -139,6 +139,7 @@ export function useBioTemplatePresetWorkspace(
   const workspace = computed(() => useBioTemplateWorkspace(collection.value, resolvedControlOptions))
   const renderer = computed<BioTemplateRendererBinding>(() => ({ target: collection.value }))
   const componentBindings = computed(() => workspace.value.componentBindings)
+  const componentBindingsById = computed(() => workspace.value.componentBindingsById)
   const componentImports = computed(() => workspace.value.componentImports)
   const componentProps = computed(() => workspace.value.componentProps)
   const componentPropsById = computed(() => workspace.value.componentPropsById)
@@ -158,11 +159,6 @@ export function useBioTemplatePresetWorkspace(
     values: controlValues.value,
     'onUpdate:values': setControlValues,
   }) as ControlWorkspaceSidebarBinding
-  const topBar = reactive({
-    tabs: controls.topBarTabs,
-    currentTabId: activeControlView.value,
-    onTabSelect: (tab: { id: string }) => setActiveControlView(tab.id),
-  }) as ControlWorkspaceTopBarBinding
   const pillNav = reactive({
     items: controls.viewItems,
     currentItemId: activeControlView.value,
@@ -176,18 +172,12 @@ export function useBioTemplatePresetWorkspace(
     },
     onSettingsValuesChange: setControlValues,
   }) as ControlWorkspaceTopBarSettingsBinding
-  const topBarProps = computed<ControlWorkspaceAppTopBarPillBinding>(() => ({
+  const topBarProps = computed<ControlWorkspaceTopBarBinding>(() => ({
     pillNav: pillNav.items,
     currentPillId: pillNav.currentItemId,
     onPillSelect: pillNav.onSelect,
     ...topBarSettings,
   }))
-  const topBarTabsProps = computed<ControlWorkspaceAppTopBarTabsBinding>(() => ({
-    tabs: topBar.tabs,
-    currentTabId: topBar.currentTabId,
-    onTabSelect: topBar.onTabSelect,
-    ...topBarSettings,
-  }))
 
   function getComponentProps(
     component: string,
@@ -201,10 +191,10 @@ export function useBioTemplatePresetWorkspace(
     form,
     sidebar,
     topBar: topBarProps,
-    topBarTabs: topBarTabsProps,
     topBarSettings,
     pillNav,
     componentBindings,
+    componentBindingsById,
     componentProps,
     componentPropsById,
     componentPropsByComponent,
@@ -228,11 +218,9 @@ export function useBioTemplatePresetWorkspace(
 
   watch(activeControlView, (viewId) => {
     sidebar.activeView = viewId
-    topBar.currentTabId = viewId
     pillNav.currentItemId = viewId
   }, { flush: 'sync' })
   watch(() => sidebar.activeView, setActiveControlView, { flush: 'sync' })
-  watch(() => topBar.currentTabId, setActiveControlView, { flush: 'sync' })
   watch(() => pillNav.currentItemId, setActiveControlView, { flush: 'sync' })
 
   function applyCollection(value: TemplateCollectionEnvelope): TemplateCollectionEnvelope {
@@ -292,13 +280,14 @@ export function useBioTemplatePresetWorkspace(
     activeControlView,
     form,
     sidebar,
-    topBar,
+    topBar: topBarProps,
     pillNav,
     topBarSettings,
     bindings,
     renderer,
     workspace,
     componentBindings,
+    componentBindingsById,
     componentImports,
     componentProps,
     componentPropsById,

package/src/composables/useBioTemplateWorkspace.ts

@@ -7,7 +7,6 @@ import type {
   ControlWorkspaceOptions,
   ControlWorkspacePillNavBinding,
   ControlWorkspaceSidebarBinding,
-  ControlWorkspaceTopBarBinding,
   ControlWorkspaceTopBarSettingsBinding,
   UseControlSchemaReturn,
   UseControlWorkspaceReturn,
@@ -23,6 +22,7 @@ import {
 import {
   useBioTemplateComponents,
   type BioTemplateComponentBinding,
+  type BioTemplateComponentBindingsById,
   type BioTemplateComponentImport,
   type BioTemplateComponentPropsByComponent,
   type BioTemplateComponentPropsBinding,
@@ -43,10 +43,10 @@ export interface BioTemplateWorkspaceBindings {
   form: ControlWorkspaceFormBinding
   sidebar: ControlWorkspaceSidebarBinding
   topBar: UseControlWorkspaceReturn<BioTemplateControlSchema>['bindings']['topBar']
-  topBarTabs: UseControlWorkspaceReturn<BioTemplateControlSchema>['bindings']['topBarTabs']
   topBarSettings: ControlWorkspaceTopBarSettingsBinding
   pillNav: ControlWorkspacePillNavBinding
   componentBindings: BioTemplateComponentBinding[]
+  componentBindingsById: BioTemplateComponentBindingsById
   componentProps: BioTemplateComponentPropsBinding[]
   componentPropsById: BioTemplateComponentPropsById
   componentPropsByComponent: BioTemplateComponentPropsByComponent
@@ -65,12 +65,13 @@ export interface UseBioTemplateWorkspaceReturn {
   activeView: UseControlWorkspaceReturn<BioTemplateControlSchema>['activeView']
   form: ControlWorkspaceFormBinding
   sidebar: ControlWorkspaceSidebarBinding
-  topBar: ControlWorkspaceTopBarBinding
+  topBar: UseControlWorkspaceReturn<BioTemplateControlSchema>['topBar']
   pillNav: ControlWorkspacePillNavBinding
   topBarSettings: ControlWorkspaceTopBarSettingsBinding
   bindings: BioTemplateWorkspaceBindings
   renderer: BioTemplateRendererBinding | null
   componentBindings: BioTemplateComponentBinding[]
+  componentBindingsById: BioTemplateComponentBindingsById
   componentImports: BioTemplateComponentImport[]
   componentProps: BioTemplateComponentPropsBinding[]
   componentPropsById: BioTemplateComponentPropsById
@@ -94,10 +95,10 @@ export function useBioTemplateWorkspace(
     form: workspace.bindings.form,
     sidebar: workspace.bindings.sidebar,
     topBar: workspace.bindings.topBar,
-    topBarTabs: workspace.bindings.topBarTabs,
     topBarSettings: workspace.bindings.topBarSettings,
     pillNav: workspace.bindings.pillNav,
     componentBindings: components.bindings,
+    componentBindingsById: components.componentBindingsById,
     componentProps: components.componentProps,
     componentPropsById: components.componentPropsById,
     componentPropsByComponent: components.componentPropsByComponent,
@@ -122,6 +123,7 @@ export function useBioTemplateWorkspace(
     bindings,
     renderer,
     componentBindings: components.bindings,
+    componentBindingsById: components.componentBindingsById,
     componentImports: components.imports,
     componentProps: components.componentProps,
     componentPropsById: components.componentPropsById,