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

package/src/components/SettingsModal.story.vue

@@ -7,6 +7,7 @@ import BaseSelect from './BaseSelect.vue'
 import BaseCheckbox from './BaseCheckbox.vue'
 import BaseToggle from './BaseToggle.vue'
 import NumberInput from './NumberInput.vue'
+import { defineControlModel } from '../composables/useControlSchema'
 import type {
   SettingsTab,
   SettingsModalLayout,
@@ -19,6 +20,7 @@ const customOpen = ref(false)
 const appearanceOnlyOpen = ref(false)
 const verticalOpen = ref(false)
 const schemaOpen = ref(false)
+const modelOpen = ref(false)
 
 const customTabs: SettingsTab[] = [
   { id: 'general', label: 'General' },
@@ -208,6 +210,66 @@ const settingsSchema: SettingsModalSchema = {
   ],
 }
 
+const settingsModel = defineControlModel({
+  views: {
+    settings: {
+      label: 'Settings',
+      sections: {
+        general: {
+          label: 'General',
+          description: 'Plugin name, defaults, locale',
+          icon: iconGeneral,
+          controls: {
+            pluginName: {
+              label: 'Plugin Display Name',
+              default: 'IC50 Calculator',
+              required: true,
+            },
+            locale: {
+              label: 'Locale',
+              default: 'en-US',
+              options: localeOptions,
+            },
+          },
+        },
+        model: {
+          label: 'Model Parameters',
+          description: 'Curve choice and bounds',
+          icon: iconModel,
+          columns: 2,
+          controls: {
+            curveModel: {
+              label: 'Default Curve Model',
+              default: '4pl',
+              options: curveModelOptions,
+            },
+            bottom: { type: 'number', label: 'Bottom bound', default: 0 },
+            top: { type: 'number', label: 'Top bound', default: 100 },
+          },
+        },
+        fitting: {
+          label: 'Curve Fitting',
+          description: 'Optimizer and transforms',
+          icon: iconCurve,
+          controls: {
+            optimizer: {
+              label: 'Optimizer',
+              default: 'lm',
+              options: optimizerOptions,
+            },
+            logTransform: {
+              label: 'Apply log-dose transform',
+              default: true,
+              type: 'toggle',
+            },
+          },
+        },
+      },
+    },
+  },
+})
+const modelSettings = ref<Record<string, unknown>>({})
+
 const sizes: Array<'md' | 'lg' | 'xl'> = ['md', 'lg', 'xl']
 const layouts: SettingsModalLayout[] = ['horizontal', 'vertical']
 </script>
@@ -406,6 +468,31 @@ const layouts: SettingsModalLayout[] = ['horizontal', 'vertical']
       </div>
     </Variant>
 
+    <Variant title="Model Driven Settings">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: center;">
+        <button
+          type="button"
+          style="padding: 0.5rem 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer; font-size: 0.875rem;"
+          @click="modelOpen = true"
+        >
+          Open Settings (from model)
+        </button>
+        <details style="font-size: 0.75rem; color: var(--text-secondary); max-width: 36rem; width: 100%;">
+          <summary style="cursor: pointer; user-select: none;">Live values</summary>
+          <pre style="margin: 0.5rem 0 0; padding: 0.75rem; background: var(--bg-tertiary); border-radius: 0.375rem; font-size: 0.6875rem; overflow-x: auto;">{{ JSON.stringify(modelSettings, null, 2) }}</pre>
+        </details>
+        <SettingsModal
+          v-model="modelOpen"
+          v-model:values="modelSettings"
+          title="IC50 Plugin Settings"
+          :model="settingsModel"
+          :show-appearance="true"
+          size="xl"
+          layout="vertical"
+        />
+      </div>
+    </Variant>
+
     <Variant title="Schema-Driven (Auto-Render)">
       <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: center;">
         <button

package/src/components/WellPlate.vue

@@ -3,7 +3,7 @@
 import { ref, computed } from 'vue'
 import type { WellPlateFormat, WellPlateSelectionMode, WellPlateSize, Well, HeatmapConfig, WellShape, WellEditField, WellEditData, WellLegendItem, ColumnCondition, RowCondition } from '../types'
 import { useEventListener } from '../composables/useEventListener'
-import WellEditPopup from './WellEditPopup.vue'
+import WellEditPopupInternal from './internal/WellEditPopupInternal.vue'
 
 interface Props {
   modelValue?: string[]
@@ -805,7 +805,7 @@ const tableStyle = computed(() => ({
     </div>
 
     <!-- Edit popup -->
-    <WellEditPopup
+    <WellEditPopupInternal
       v-if="editable && editingWellId"
       :well-id="editingWellId"
       :well-data="wells[editingWellId]"

package/src/components/index.ts

@@ -27,26 +27,23 @@ export { default as FileUploader } from './FileUploader.vue'
 
 // Feedback components
 export { default as AlertBox } from './AlertBox.vue'
-/** @deprecated Use AppToastContainer instead. */
-export { default as ToastNotification } from './ToastNotification.vue'
 export { default as AppToastContainer } from './AppToastContainer.vue'
 
 // Action components
 export { default as IconButton } from './IconButton.vue'
 export { default as ThemeToggle } from './ThemeToggle.vue'
-/** @deprecated Use AppTopBar instead. */
-export { default as SettingsButton } from './SettingsButton.vue'
 
 // Layout components
 export { default as CollapsibleCard } from './CollapsibleCard.vue'
 export { default as AppTopBar } from './AppTopBar.vue'
-export { default as AppPageSelector } from './AppPageSelector.vue'
-export { default as AppPillNav } from './AppPillNav.vue'
 export { default as AppAvatarMenu } from './AppAvatarMenu.vue'
 export { default as AppPluginSwitcher } from './AppPluginSwitcher.vue'
 export { default as AppSidebar } from './AppSidebar.vue'
 export { default as AppLayout } from './AppLayout.vue'
+export { default as PluginWorkspaceView } from './PluginWorkspaceView.vue'
+export { default as ComponentBindingRenderer } from './ComponentBindingRenderer.vue'
 export { default as ControlWorkspaceView } from './ControlWorkspaceView.vue'
+export { default as DoseDesignWorkspaceView } from './DoseDesignWorkspaceView.vue'
 export { default as AppContainer } from './AppContainer.vue'
 export { default as PluginIcon } from './PluginIcon.vue'
 
@@ -77,8 +74,6 @@ export { default as ExperimentTimeline } from './ExperimentTimeline.vue'
 
 // Sample management components
 export { default as SampleSelector } from './SampleSelector.vue'
-/** @deprecated Use AutoGroupModal instead. */
-export { default as GroupingModal } from './GroupingModal.vue'
 export { default as AutoGroupModal } from './AutoGroupModal.vue'
 export { default as GroupAssigner } from './GroupAssigner.vue'
 
@@ -107,11 +102,7 @@ export { default as BatchProgressList } from './BatchProgressList.vue'
 
 // Form builder components
 export { default as FormBuilder } from './FormBuilder.vue'
-/** @deprecated Use FormBuilder instead. */
-export { default as FormSection } from './FormSection.vue'
 export { default as FormActions } from './FormActions.vue'
-/** @deprecated Use FormBuilder instead. */
-export { default as FormFieldRenderer } from './FormFieldRenderer.vue'
 
 // Experiment data display components
 export { default as ExperimentDataViewer } from './ExperimentDataViewer.vue'

package/src/components/{AppPageSelector.vue → internal/AppTopBarPageSelectorInternal.vue}

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 /** Dropdown trigger that switches between named pages, closing on outside click or Escape. */
 import { computed } from 'vue'
-import { useDropdownState } from '../composables/useDropdownState'
-import type { PageSelectorItem, PageSelectorItemInput } from '../types/components'
-import { normalizeItemInput } from '../utils/items'
-import { isPluginIconFormat } from '../utils/pluginIcon'
-import ActionItem from './ActionItem.vue'
-import PluginIcon from './PluginIcon.vue'
+import { useDropdownState } from '../../composables/useDropdownState'
+import type { PageSelectorItem, PageSelectorItemInput } from '../../types/components'
+import { normalizeItemInput } from '../../utils/items'
+import { isPluginIconFormat } from '../../utils/pluginIcon'
+import ActionItemInternal from './ActionItemInternal.vue'
+import PluginIcon from '../PluginIcon.vue'
 
 interface Props {
   pages: PageSelectorItemInput[]
@@ -87,7 +87,7 @@ function handleSelect(page: PageSelectorItem) {
 
     <div v-if="isOpen" class="mint-page-selector__menu" role="menu">
       <div class="mint-page-selector__menu-title">Go to</div>
-      <ActionItem
+      <ActionItemInternal
         v-for="page in normalizedPages"
         :key="page.id"
         :href="page.href"
@@ -118,11 +118,11 @@ function handleSelect(page: PageSelectorItem) {
         </span>
         <span class="mint-page-selector__item-label">{{ page.label }}</span>
         <span v-if="page.hint" class="mint-page-selector__item-hint">{{ page.hint }}</span>
-      </ActionItem>
+      </ActionItemInternal>
     </div>
   </div>
 </template>
 
 <style>
-@import '../styles/components/app-page-selector.css';
+@import '../../styles/components/app-page-selector.css';
 </style>

package/src/components/internal/AppTopBarPillNavInternal.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+/** Horizontal pill-style navigation bar that emits select events and supports href, router-link, button, or dropdown items. */
+import { computed, ref } from 'vue'
+import type { PillNavItem, PillNavItemInput, PillNavOption, PillNavOptionInput } from '../../types/components'
+import { normalizeItemInput } from '../../utils/items'
+import { useEventListener } from '../../composables/useEventListener'
+import ActionItemInternal from './ActionItemInternal.vue'
+
+interface Props {
+  items: PillNavItemInput[]
+  currentItemId?: string
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  select: [item: PillNavItem]
+  'option-select': [option: PillNavOption, item: PillNavItem]
+}>()
+
+const openItemId = ref<string | null>(null)
+const itemRefs = ref<Map<string, HTMLElement>>(new Map())
+
+const normalizedItems = computed<PillNavItem[]>(() => props.items.map(normalizePillNavItem))
+
+function handleClick(item: PillNavItem) {
+  if (item.disabled) return
+  if (item.children?.length) {
+    toggleDropdown(item.id)
+    return
+  }
+  if (item.href || item.to) return
+  emit('select', item)
+}
+
+function handleOptionClick(option: PillNavOption, item: PillNavItem) {
+  if (option.disabled) return
+  if (!option.href && !option.to) emit('option-select', option, item)
+  openItemId.value = null
+}
+
+function normalizePillNavItem(item: PillNavItemInput): PillNavItem {
+  const normalized = normalizeItemInput<Omit<PillNavItem, 'children'> & { children?: PillNavOptionInput[] }>(item)
+  return {
+    ...normalized,
+    children: normalized.children?.map(normalizeItemInput),
+  }
+}
+
+function toggleDropdown(itemId: string) {
+  openItemId.value = openItemId.value === itemId ? null : itemId
+}
+
+function setItemRef(el: HTMLElement | null, itemId: string) {
+  if (el) {
+    itemRefs.value.set(itemId, el)
+  } else {
+    itemRefs.value.delete(itemId)
+  }
+}
+
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as Node
+  const clickedInside = Array.from(itemRefs.value.values()).some(el => el.contains(target))
+  if (!clickedInside) openItemId.value = null
+}
+
+const hasActiveChild = (item: PillNavItem) =>
+  item.children?.some(child => child.id === props.currentItemId) ?? false
+
+function isSvgIcon(icon: PillNavItem['icon']): icon is string | string[] {
+  if (!icon) return false
+  return Array.isArray(icon) || icon.startsWith('M') || icon.startsWith('m')
+}
+
+useEventListener(() => document, 'click', handleClickOutside)
+</script>
+
+<template>
+  <nav class="mint-pill-nav" aria-label="Primary">
+    <div
+      v-for="item in normalizedItems"
+      :key="item.id"
+      :ref="(el) => setItemRef(el as HTMLElement | null, item.id)"
+      class="mint-pill-nav__item-wrap"
+    >
+      <button
+        v-if="item.children?.length"
+        type="button"
+        :class="[
+          'mint-pill-nav__item',
+          { 'mint-pill-nav__item--active': item.id === currentItemId || hasActiveChild(item) },
+          { 'mint-pill-nav__item--disabled': item.disabled },
+        ]"
+        :disabled="item.disabled"
+        :aria-expanded="openItemId === item.id"
+        aria-haspopup="menu"
+        @click.stop="handleClick(item)"
+      >
+        <svg
+          v-if="isSvgIcon(item.icon)"
+          class="mint-pill-nav__icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <template v-if="Array.isArray(item.icon)">
+            <path v-for="(d, index) in item.icon" :key="index" :d="d" />
+          </template>
+          <path v-else :d="item.icon" />
+        </svg>
+        {{ item.label }}
+        <svg
+          class="mint-pill-nav__chevron"
+          :class="{ 'mint-pill-nav__chevron--open': openItemId === item.id }"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+
+      <ActionItemInternal
+        v-else
+        :href="item.href"
+        :to="item.to"
+        :disabled="item.disabled"
+        :class="[
+          'mint-pill-nav__item',
+          { 'mint-pill-nav__item--active': item.id === currentItemId },
+          { 'mint-pill-nav__item--disabled': item.disabled },
+        ]"
+        @click="handleClick(item)"
+      >
+        <svg
+          v-if="isSvgIcon(item.icon)"
+          class="mint-pill-nav__icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <template v-if="Array.isArray(item.icon)">
+            <path v-for="(d, index) in item.icon" :key="index" :d="d" />
+          </template>
+          <path v-else :d="item.icon" />
+        </svg>
+        {{ item.label }}
+      </ActionItemInternal>
+
+      <div
+        v-if="item.children?.length && openItemId === item.id"
+        class="mint-pill-nav__dropdown"
+        role="menu"
+      >
+        <ActionItemInternal
+          v-for="option in item.children"
+          :key="option.id"
+          :href="option.href"
+          :to="option.to"
+          :disabled="option.disabled"
+          :class="[
+            'mint-pill-nav__dropdown-item',
+            { 'mint-pill-nav__dropdown-item--active': option.id === currentItemId },
+            { 'mint-pill-nav__dropdown-item--disabled': option.disabled },
+          ]"
+          role="menuitem"
+          @click="handleOptionClick(option, item)"
+        >
+          <span class="mint-pill-nav__dropdown-label">{{ option.label }}</span>
+          <span v-if="option.description" class="mint-pill-nav__dropdown-description">
+            {{ option.description }}
+          </span>
+        </ActionItemInternal>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<style>
+@import '../../styles/components/app-pill-nav.css';
+</style>

package/src/components/{CalendarGridPanel.vue → internal/CalendarGridPanelInternal.vue}

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Shared calendar grid panel used by date-oriented picker components. */
-import type { CalendarGridDay } from '../composables/useCalendarGrid'
+import type { CalendarGridDay } from '../../composables/useCalendarGrid'
 
 interface Props {
   weekDays: readonly string[]

package/src/components/{WellEditPopup.vue → internal/WellEditPopupInternal.vue}

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue'
-import type { Well, WellEditData, WellEditField } from '../types'
-import { useEventListener } from '../composables/useEventListener'
+import type { Well, WellEditData, WellEditField } from '../../types'
+import { useEventListener } from '../../composables/useEventListener'
 
 interface Props {
   wellId: string
@@ -225,5 +225,5 @@ const sampleTypeButtons = [
 </template>
 
 <style>
-@import '../styles/components/well-edit-popup.css';
+@import '../../styles/components/well-edit-popup.css';
 </style>

package/src/composables/experiment-utils.ts

@@ -1,5 +1,10 @@
 import type { DatePreset, ExperimentStatus, SelectOption, PillVariant } from '../types'
 
+interface ExperimentCodeSource {
+  id?: number | null
+  experiment_code?: string | null
+}
+
 export function formatExperimentDate(dateStr: string): string {
   try {
     return new Date(dateStr).toLocaleDateString(undefined, {
@@ -41,6 +46,27 @@ export const EXPERIMENT_STATUS_LABELS: Record<ExperimentStatus, string> = {
   cancelled: 'Cancelled',
 }
 
+export function formatExperimentStatus(status?: ExperimentStatus | string | null): string {
+  if (!status) return ''
+  if (status in EXPERIMENT_STATUS_LABELS) {
+    return EXPERIMENT_STATUS_LABELS[status as ExperimentStatus]
+  }
+  const label = String(status).replace(/[-_]+/g, ' ').trim()
+  return label ? label.replace(/^\w/, c => c.toUpperCase()) : ''
+}
+
+export function getExperimentStatusVariant(status?: ExperimentStatus | string | null): PillVariant {
+  if (status && status in EXPERIMENT_STATUS_VARIANT_MAP) {
+    return EXPERIMENT_STATUS_VARIANT_MAP[status as ExperimentStatus]
+  }
+  return 'default'
+}
+
+export function resolveExperimentCode(experiment: ExperimentCodeSource): string | undefined {
+  if (experiment.experiment_code) return experiment.experiment_code
+  return experiment.id != null ? `EXP-${experiment.id}` : undefined
+}
+
 export const DATE_PRESET_OPTIONS: SelectOption<string>[] = [
   { value: '', label: 'Any time' },
   { value: 'last_7_days', label: 'Last 7 days' },

package/src/composables/index.ts

@@ -129,6 +129,9 @@ export {
 } from './useExperimentSelector'
 export {
   formatExperimentDate,
+  formatExperimentStatus,
+  getExperimentStatusVariant,
+  resolveExperimentCode,
   datePresetToISO,
   EXPERIMENT_STATUS_OPTIONS,
   EXPERIMENT_STATUS_VARIANT_MAP,
@@ -149,9 +152,13 @@ export {
 export {
   useAppExperiment,
   APP_EXPERIMENT_KEY,
+  type AppExperimentRecord,
+  type AppExperimentSource,
   type UseAppExperimentOptions,
   type UseAppExperimentReturn,
   type AppExperimentState,
+  type AppExperimentPopoverBinding,
+  type AppExperimentSelectorModalBinding,
 } from './useAppExperiment'
 export {
   useExperimentSave,
@@ -227,11 +234,6 @@ export {
   type UseTextSearchOptions,
   type UseTextSearchReturn,
 } from './useTextSearch'
-/** @deprecated Use generated plugin clients from `mint sdk generate` instead. */
-export {
-  usePluginApi,
-  type UsePluginApiOptions,
-} from './usePluginApi'
 export {
   controlsToFormSchema,
   controlsToSectionFormSchema,
@@ -239,21 +241,29 @@ export {
   controlsToSidebarPanels,
   controlsToSettingsSchema,
   controlsToTopBarSettingsConfig,
-  controlsToTopBarTabs,
   controlsToViewIds,
   controlsToViewItems,
+  controlValuesToComponentBindings,
+  controlValuesToComponentBindingsById,
   controlValuesToComponentProps,
+  defineControlComponentBindings,
   defineControlModel,
   defineDoseDesignControlModel,
   defineDoseCalculatorControlProps,
   defineControls,
   defineWellPlateControlProps,
+  defineWellPlateDoseComponentBindings,
   defineWellPlateDoseControlProps,
   getDefaultControlView,
   getControlDefaults,
   useControlSchema,
   useControlWorkspace,
   type ControlDefinition,
+  type ControlComponentBinding,
+  type ControlComponentBindingConfig,
+  type ControlComponentBindingRecordConfig,
+  type ControlComponentBindingsById,
+  type ControlComponentBindingsConfig,
   type ControlComponentPropSource,
   type ControlComponentPropsByIdMap,
   type ControlComponentPropsMap,
@@ -282,7 +292,6 @@ export {
   type ControlValues,
   type UseControlSchemaReturn,
   type ControlWorkspaceAppTopBarPillBinding,
-  type ControlWorkspaceAppTopBarTabsBinding,
   type ControlWorkspaceComponentBindings,
   type ControlWorkspaceFormBinding,
   type ControlWorkspacePillNavBinding,
@@ -303,15 +312,19 @@ export {
 export {
   getBioTemplateComponentProps,
   getBioTemplateComponentBindings,
+  toBioTemplateComponentBindings,
+  toBioTemplateComponentBindingsById,
   toBioTemplateComponentProps,
   toBioTemplateComponentPropsByComponent,
   toBioTemplateComponentPropsById,
   useBioTemplateComponents,
   type BioTemplateComponentBinding,
+  type BioTemplateComponentBindingsById,
   type BioTemplateComponentPropsByComponent,
   type BioTemplateComponentPropsBinding,
   type BioTemplateComponentPropsById,
   type BioTemplateComponentPropsLookupOptions,
+  type BioTemplateResolvedComponentBinding,
   type BioTemplateComponentTarget,
   type UseBioTemplateComponentsReturn,
 } from './useBioTemplateComponents'
@@ -336,6 +349,7 @@ export {
 export {
   buildPluginEndpointUrl,
   createPluginClient,
+  getPluginPageSelectorItems,
   resolvePluginBaseUrl,
   usePluginClient,
   usePluginSettings,

package/src/composables/useApi.ts

@@ -5,6 +5,13 @@ import { useAuthStore } from '../stores/auth'
 let apiClientInstance: AxiosInstance | null = null
 let interceptorAttached = false
 
+function joinUrlPath(baseUrl: string, path: string): string {
+  if (!path) return baseUrl
+  const normalizedBase = baseUrl.replace(/\/+$/, '')
+  const normalizedPath = path.replace(/^\/+/, '/')
+  return `${normalizedBase}${normalizedPath.startsWith('/') ? normalizedPath : `/${normalizedPath}`}`
+}
+
 function getApiClient(): AxiosInstance {
   if (!apiClientInstance) {
     apiClientInstance = axios.create({
@@ -144,12 +151,12 @@ export function useApi(options: ApiClientOptions = {}): UseApiReturn {
   // Build full URL for external use (e.g., <a href="...">)
   function buildUrl(path: string): string {
     const baseUrl = options.baseUrl ?? settingsStore.getApiBaseUrl()
-    return `${baseUrl}${path}`
+    return joinUrlPath(baseUrl, path)
   }
 
   // WebSocket URL builder
   function buildWsUrl(path: string): string {
-    return `${settingsStore.getWsBaseUrl()}${path}`
+    return joinUrlPath(settingsStore.getWsBaseUrl(), path)
   }
 
   return {