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

package/src/components/AppPluginSwitcher.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /** Dropdown menu for switching between installed plugins with color swatches, version badges, and an install link. */
-import { ref, onMounted, onUnmounted } from 'vue'
+import { useDropdownState } from '../composables/useDropdownState'
 import type { PluginSwitcherPlugin } from '../types/components'
+import ActionItem from './ActionItem.vue'
 
 interface Props {
   current: PluginSwitcherPlugin
@@ -21,55 +22,26 @@ const emit = defineEmits<{
   'install-click': []
 }>()
 
-const isOpen = ref(false)
-const rootRef = ref<HTMLElement | null>(null)
+const { isOpen, rootRef, close, toggle } = useDropdownState()
 
 function initialsOf(plugin: PluginSwitcherPlugin) {
   const label = plugin.label || plugin.id
   return label.slice(0, 2).toUpperCase()
 }
 
-function toggle() {
-  isOpen.value = !isOpen.value
-}
-
 function handleSelect(plugin: PluginSwitcherPlugin) {
   if (plugin.id === props.current.id) {
-    isOpen.value = false
+    close()
     return
   }
   emit('select', plugin)
-  isOpen.value = false
+  close()
 }
 
 function handleInstall() {
   emit('install-click')
-  isOpen.value = false
-}
-
-function handleClickOutside(event: MouseEvent) {
-  if (!isOpen.value) return
-  const target = event.target as Node
-  if (rootRef.value && !rootRef.value.contains(target)) {
-    isOpen.value = false
-  }
+  close()
 }
-
-function handleKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape' && isOpen.value) {
-    isOpen.value = false
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-  document.addEventListener('keydown', handleKeydown)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-  document.removeEventListener('keydown', handleKeydown)
-})
 </script>
 
 <template>
@@ -102,124 +74,48 @@ onUnmounted(() => {
 
     <div v-if="isOpen" class="mint-plugin-switcher__menu" role="menu">
       <div class="mint-plugin-switcher__menu-title">Switch plugin</div>
-      <template v-for="plugin in plugins" :key="plugin.id">
-        <a
-          v-if="plugin.href"
-          :href="plugin.href"
-          :class="[
-            'mint-plugin-switcher__item',
-            { 'mint-plugin-switcher__item--active': plugin.id === current.id },
-          ]"
-          role="menuitem"
-          @click="handleSelect(plugin)"
+      <ActionItem
+        v-for="plugin in plugins"
+        :key="plugin.id"
+        :href="plugin.href"
+        :to="plugin.to"
+        :class="[
+          'mint-plugin-switcher__item',
+          { 'mint-plugin-switcher__item--active': plugin.id === current.id },
+        ]"
+        role="menuitem"
+        @click="handleSelect(plugin)"
+      >
+        <span
+          class="mint-plugin-switcher__item-swatch"
+          :style="{ background: plugin.color ?? 'var(--color-primary)' }"
         >
-          <span
-            class="mint-plugin-switcher__item-swatch"
-            :style="{ background: plugin.color ?? 'var(--color-primary)' }"
-          >
-            {{ initialsOf(plugin) }}
-          </span>
-          <span class="mint-plugin-switcher__item-label">{{ plugin.label }}</span>
-          <span v-if="plugin.version" class="mint-plugin-switcher__item-version">v{{ plugin.version }}</span>
-          <svg
-            v-if="plugin.id === current.id"
-            class="mint-plugin-switcher__item-check"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-          >
-            <path d="M5 13l4 4L19 7" />
-          </svg>
-        </a>
-        <router-link
-          v-else-if="plugin.to"
-          :to="plugin.to"
-          :class="[
-            'mint-plugin-switcher__item',
-            { 'mint-plugin-switcher__item--active': plugin.id === current.id },
-          ]"
-          role="menuitem"
-          @click="handleSelect(plugin)"
-        >
-          <span
-            class="mint-plugin-switcher__item-swatch"
-            :style="{ background: plugin.color ?? 'var(--color-primary)' }"
-          >
-            {{ initialsOf(plugin) }}
-          </span>
-          <span class="mint-plugin-switcher__item-label">{{ plugin.label }}</span>
-          <span v-if="plugin.version" class="mint-plugin-switcher__item-version">v{{ plugin.version }}</span>
-          <svg
-            v-if="plugin.id === current.id"
-            class="mint-plugin-switcher__item-check"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-          >
-            <path d="M5 13l4 4L19 7" />
-          </svg>
-        </router-link>
-        <button
-          v-else
-          type="button"
-          :class="[
-            'mint-plugin-switcher__item',
-            { 'mint-plugin-switcher__item--active': plugin.id === current.id },
-          ]"
-          role="menuitem"
-          @click="handleSelect(plugin)"
+          {{ initialsOf(plugin) }}
+        </span>
+        <span class="mint-plugin-switcher__item-label">{{ plugin.label }}</span>
+        <span v-if="plugin.version" class="mint-plugin-switcher__item-version">v{{ plugin.version }}</span>
+        <svg
+          v-if="plugin.id === current.id"
+          class="mint-plugin-switcher__item-check"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
         >
-          <span
-            class="mint-plugin-switcher__item-swatch"
-            :style="{ background: plugin.color ?? 'var(--color-primary)' }"
-          >
-            {{ initialsOf(plugin) }}
-          </span>
-          <span class="mint-plugin-switcher__item-label">{{ plugin.label }}</span>
-          <span v-if="plugin.version" class="mint-plugin-switcher__item-version">v{{ plugin.version }}</span>
-          <svg
-            v-if="plugin.id === current.id"
-            class="mint-plugin-switcher__item-check"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-          >
-            <path d="M5 13l4 4L19 7" />
-          </svg>
-        </button>
-      </template>
+          <path d="M5 13l4 4L19 7" />
+        </svg>
+      </ActionItem>
 
       <template v-if="plugins.length && (installHref || installTo || $slots.install)">
         <div class="mint-plugin-switcher__divider" role="separator" />
       </template>
       <slot name="install">
-        <a
-          v-if="installHref"
+        <ActionItem
+          v-if="installHref || installTo"
           :href="installHref"
-          class="mint-plugin-switcher__install"
-          role="menuitem"
-          @click="handleInstall"
-        >
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <line x1="12" y1="5" x2="12" y2="19" />
-            <line x1="5" y1="12" x2="19" y2="12" />
-          </svg>
-          <span>{{ installLabel }}</span>
-        </a>
-        <router-link
-          v-else-if="installTo"
           :to="installTo"
           class="mint-plugin-switcher__install"
           role="menuitem"
@@ -230,7 +126,7 @@ onUnmounted(() => {
             <line x1="5" y1="12" x2="19" y2="12" />
           </svg>
           <span>{{ installLabel }}</span>
-        </router-link>
+        </ActionItem>
       </slot>
     </div>
   </div>

package/src/components/AppSidebar.story.vue

@@ -9,6 +9,10 @@ import BaseInput from './BaseInput.vue'
 import NumberInput from './NumberInput.vue'
 import FileUploader from './FileUploader.vue'
 import FormField from './FormField.vue'
+import WellPlate from './WellPlate.vue'
+import { defineControls, getControlDefaults } from '../composables/useControlSchema'
+import { useBioTemplateWorkspace } from '../composables/useBioTemplateWorkspace'
+import { createWellPlateScreenCollection } from '../templates'
 import type { SidebarToolSection } from '../types'
 
 /* --- Icon paths (Lucide-style) --- */
@@ -127,6 +131,57 @@ const container = ref('vial')
 const expNumber = ref(1)
 const initials = ref('XP')
 const toggleState = reactive<Record<string, boolean>>({ naming: true, randomize: false })
+const schemaControls = defineControls({
+  threshold: {
+    type: 'slider',
+    label: 'Threshold',
+    default: 0.05,
+    min: 0,
+    max: 1,
+    props: { step: 0.01 },
+    section: 'parameters',
+    sectionLabel: 'Parameters',
+    sectionSubtitle: 'Analysis controls',
+    view: 'analysis',
+    sidebar: {
+      icon: icons.settings,
+      iconColor: '#6366f1',
+      iconBg: '#e0e7ff',
+    },
+  },
+  method: {
+    label: 'Model',
+    default: 'linear',
+    options: ['linear', 'logistic', 'quadratic'],
+    required: true,
+    section: 'parameters',
+    view: 'analysis',
+  },
+  showOutliers: {
+    label: 'Show outliers',
+    default: true,
+    section: 'display',
+    sectionLabel: 'Display',
+    sectionSubtitle: 'Result filters',
+    view: 'analysis',
+    sidebar: {
+      icon: icons.zap,
+      iconColor: '#0ea5e9',
+      iconBg: '#e0f2fe',
+      defaultOpen: false,
+    },
+  },
+})
+const controlValues = reactive<Record<string, unknown>>({ ...getControlDefaults(schemaControls) })
+const templateCollection = createWellPlateScreenCollection({
+  samples: ['Control', 'Treatment'],
+  compounds: { 'Drug A': [10, 1, 0.1] },
+})
+const templateWorkspace = useBioTemplateWorkspace(templateCollection)
+const templateValues = reactive<Record<string, unknown>>({ ...templateWorkspace.controls.initialValues })
+const templateWellPlateProps = templateWorkspace.componentProps
+  .find(binding => binding.component === 'WellPlate')
+  ?.propsObject ?? {}
 
 function handleToggle(id: string, value: boolean) {
   toggleState[id] = value
@@ -218,6 +273,45 @@ function initSimpleToolkit() {
       </div>
     </Variant>
 
+    <Variant title="Schema Driven Controls">
+      <div style="padding: 2rem; height: 520px; position: relative; background: var(--bg-primary, #f1f5f9);">
+        <AppSidebar
+          :controls="schemaControls"
+          active-view="analysis"
+          v-model="controlValues"
+          width="300px"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Template Driven Controls">
+      <div style="padding: 2rem; min-height: 560px; display: flex; gap: 1rem; background: var(--bg-primary, #f1f5f9);">
+        <AppSidebar
+          v-bind="templateWorkspace.sidebar"
+          active-view="design"
+          v-model="templateValues"
+          width="300px"
+        />
+
+        <div style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem;">
+          <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
+            <span
+              v-for="binding in templateWorkspace.componentBindings"
+              :key="binding.id"
+              style="font-size: 0.75rem; padding: 0.25rem 0.5rem; border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-secondary, #4b5563);"
+            >
+              {{ binding.component }}
+            </span>
+          </div>
+          <WellPlate
+            v-bind="templateWellPlateProps"
+            size="fill"
+            readonly
+          />
+        </div>
+      </div>
+    </Variant>
+
     <Variant title="Simple Toolkit" :init-state="initSimpleToolkit">
       <template #default="{ state }">
         <div style="padding: 2rem; height: 500px; position: relative; background: var(--bg-primary, #f1f5f9);">

package/src/components/AppSidebar.vue

@@ -2,10 +2,9 @@
 /**
  * AppSidebar - Context-sensitive toolkit panel
  *
- * Shows tool sections relevant to the active view. Sections are defined
- * via the `panels` config (mapping view IDs to section arrays) and rendered
- * as CollapsibleCards. Actual controls are provided through named slots:
- * `#section-{sectionId}`.
+ * Shows tool sections relevant to the active view. Sections are defined via
+ * the `panels` config and rendered as CollapsibleCards. Controls can be
+ * provided through named slots or auto-rendered from FormBuilder schemas.
  *
  * When the active view has no matching panels, the sidebar hides entirely.
  *
@@ -20,11 +19,27 @@
  *   </template>
  *   <template #header>Plugin Tools</template>
  * </AppSidebar>
+ *
+ * <!-- Direct schema-driven controls -->
+ * <AppSidebar :controls="controls" :active-view="activeTab" v-model="values" />
  * ```
  */
 import { computed } from 'vue'
-import type { SidebarToolSection } from '../types'
+import type { PillNavItem, SidebarToolSection } from '../types'
+import type { FormEnhancements, FormSchema } from '../types/form-builder'
+import {
+  controlsToSectionFormSchemas,
+  controlsToSidebarPanels,
+  defineControlModel,
+  getControlDefaults,
+  mergeControlWorkspaceOptions,
+  type ControlModel,
+  type ControlModelBinding,
+  type ControlSchema,
+  type ControlWorkspaceOptions,
+} from '../composables/useControlSchema'
 import CollapsibleCard from './CollapsibleCard.vue'
+import FormBuilder from './FormBuilder.vue'
 
 interface Props {
   /** Map of view IDs to their tool sections */
@@ -41,6 +56,36 @@ interface Props {
   side?: 'left' | 'right'
   /** Toggle state map: sectionId → boolean */
   toggleState?: Record<string, boolean>
+  /** Optional FormBuilder schemas keyed by section ID. Used when no section slot is provided. */
+  forms?: Record<string, FormSchema>
+  /** Generated view IDs from useControlSchema(). Consumed for clean v-bind ergonomics. */
+  viewIds?: string[]
+  /** Generated AppPillNav-compatible view items from useControlSchema(). Consumed for clean v-bind ergonomics. */
+  viewItems?: PillNavItem[]
+  /** Default view ID used when activeView is omitted. */
+  defaultView?: string
+  /** Model returned by defineControlModel(), or a raw nested ControlModel for one-step sidebar/form generation. */
+  model?: ControlModel | ControlModelBinding
+  /** Compact control schema. When provided, AppSidebar generates panels, section forms, and default values. */
+  controls?: ControlSchema
+  /** Options passed to compact control schema generation, including shared initialValues. */
+  controlOptions?: ControlWorkspaceOptions
+  /** Shared values for auto-rendered section forms. Supports default v-model. */
+  modelValue?: Record<string, unknown>
+  /** Shared values for auto-rendered section forms */
+  values?: Record<string, unknown>
+  /** Runtime FormBuilder enhancements for auto-rendered section forms */
+  formEnhancements?: FormEnhancements<Record<string, unknown>>
+  /** Show submit/cancel actions inside auto-rendered section forms */
+  showFormActions?: boolean
+  /** Loading/saving state for auto-rendered section forms */
+  formLoading?: boolean
+  /** Disabled state for auto-rendered section forms */
+  formDisabled?: boolean
+  /** Readonly state for auto-rendered section forms */
+  formReadonly?: boolean
+  /** Size passed to auto-rendered section forms */
+  formSize?: 'sm' | 'md' | 'lg'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -51,15 +96,76 @@ const props = withDefaults(defineProps<Props>(), {
   width: '280px',
   side: 'left',
   toggleState: () => ({}),
+  forms: () => ({}),
+  viewIds: () => [],
+  viewItems: () => [],
+  defaultView: '',
+  model: undefined,
+  controlOptions: () => ({}),
+  modelValue: undefined,
+  values: () => ({}),
+  showFormActions: false,
+  formLoading: false,
+  formDisabled: false,
+  formReadonly: false,
+  formSize: 'sm',
 })
 
-defineEmits<{
-  'update:toggle': [sectionId: string, value: boolean]
-}>()
+const resolvedModel = computed<ControlModelBinding | undefined>(() => {
+  if (props.model === undefined) return undefined
+  return isControlModelBinding(props.model) ? props.model : defineControlModel(props.model)
+})
+
+const resolvedControls = computed<ControlSchema | undefined>(() =>
+  props.controls ?? resolvedModel.value?.controls,
+)
+
+const resolvedControlOptions = computed<ControlWorkspaceOptions>(() =>
+  mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, props.controlOptions)
+)
+
+const generatedPanels = computed<Record<string, SidebarToolSection[]>>(() => {
+  if (!resolvedControls.value) return {}
+  return controlsToSidebarPanels(resolvedControls.value, resolvedControlOptions.value)
+})
+
+const generatedForms = computed<Record<string, FormSchema>>(() => {
+  if (!resolvedControls.value) return {}
+  return controlsToSectionFormSchemas(resolvedControls.value, resolvedControlOptions.value)
+})
+
+const generatedDefaults = computed<Record<string, unknown>>(() => {
+  if (!resolvedControls.value) return {}
+  return {
+    ...getControlDefaults(resolvedControls.value),
+    ...(resolvedControlOptions.value.initialValues ?? {}),
+  }
+})
+
+const resolvedPanels = computed<Record<string, SidebarToolSection[]>>(() =>
+  mergeSidebarPanels(generatedPanels.value, props.panels),
+)
+
+const resolvedForms = computed<Record<string, FormSchema>>(() => ({
+  ...generatedForms.value,
+  ...props.forms,
+}))
+
+const resolvedValues = computed<Record<string, unknown>>(() => ({
+  ...generatedDefaults.value,
+  ...(props.modelValue ?? props.values),
+}))
+
+const resolvedActiveView = computed(() => {
+  if (props.activeView) return props.activeView
+  if (props.defaultView) return props.defaultView
+  if (!resolvedControls.value) return ''
+  return firstVisibleViewId(resolvedPanels.value)
+})
 
 const activeSections = computed<SidebarToolSection[]>(() => {
-  if (!props.activeView || !props.panels[props.activeView]) return []
-  return props.panels[props.activeView]
+  if (!resolvedActiveView.value || !resolvedPanels.value[resolvedActiveView.value]) return []
+  return resolvedPanels.value[resolvedActiveView.value]
 })
 
 const isVisible = computed(() => activeSections.value.length > 0)
@@ -75,6 +181,60 @@ const sidebarClasses = computed(() => [
 const sidebarStyle = computed(() => ({
   width: props.width,
 }))
+
+const emit = defineEmits<{
+  'update:toggle': [sectionId: string, value: boolean]
+  'update:modelValue': [values: Record<string, unknown>]
+  'update:values': [values: Record<string, unknown>]
+  'form-submit': [sectionId: string, values: Record<string, unknown>]
+  'form-cancel': [sectionId: string]
+}>()
+
+function handleFormUpdate(values: Record<string, unknown>) {
+  const nextValues = { ...resolvedValues.value, ...values }
+  emit('update:modelValue', nextValues)
+  emit('update:values', nextValues)
+}
+
+function handleFormSubmit(sectionId: string, values: Record<string, unknown>) {
+  emit('form-submit', sectionId, values)
+}
+
+function handleFormCancel(sectionId: string) {
+  emit('form-cancel', sectionId)
+}
+
+function mergeSidebarPanels(
+  generated: Record<string, SidebarToolSection[]>,
+  explicit: Record<string, SidebarToolSection[]>,
+): Record<string, SidebarToolSection[]> {
+  const merged: Record<string, SidebarToolSection[]> = {}
+  const viewIds = new Set([...Object.keys(generated), ...Object.keys(explicit)])
+
+  for (const viewId of viewIds) {
+    const sectionsById = new Map<string, SidebarToolSection>()
+    for (const section of generated[viewId] ?? []) {
+      sectionsById.set(section.id, section)
+    }
+    for (const section of explicit[viewId] ?? []) {
+      sectionsById.set(section.id, section)
+    }
+    merged[viewId] = [...sectionsById.values()]
+  }
+
+  return merged
+}
+
+function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): string {
+  for (const [viewId, sections] of Object.entries(panels)) {
+    if (sections.length > 0) return viewId
+  }
+  return ''
+}
+
+function isControlModelBinding(model: ControlModel | ControlModelBinding): model is ControlModelBinding {
+  return 'controls' in model && 'controlOptions' in model
+}
 </script>
 
 <template>
@@ -101,9 +261,24 @@ const sidebarStyle = computed(() => ({
         :default-open="section.defaultOpen !== false"
         :show-toggle="section.showToggle"
         :toggle-value="toggleState[section.id] ?? false"
-        @update:toggle-value="$emit('update:toggle', section.id, $event)"
+        @update:toggle-value="emit('update:toggle', section.id, $event)"
       >
-        <slot :name="`section-${section.id}`" />
+        <slot :name="`section-${section.id}`">
+          <FormBuilder
+            v-if="resolvedForms[section.id]"
+            :model-value="resolvedValues"
+            :schema="resolvedForms[section.id]"
+            :enhancements="formEnhancements"
+            :loading="formLoading"
+            :disabled="formDisabled"
+            :readonly="formReadonly"
+            :size="formSize"
+            :show-actions="showFormActions"
+            @update:model-value="handleFormUpdate"
+            @submit="handleFormSubmit(section.id, $event)"
+            @cancel="handleFormCancel(section.id)"
+          />
+        </slot>
       </CollapsibleCard>
     </div>
 

package/src/components/{ToastNotification.story.vue → AppToastContainer.story.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ToastNotification from './ToastNotification.vue'
+import AppToastContainer from './AppToastContainer.vue'
 import { useToast } from '../composables/useToast'
 
 const toast = useToast()
@@ -34,7 +34,7 @@ function triggerLongToast(type: 'success' | 'error') {
 </script>
 
 <template>
-  <Story title="Feedback/ToastNotification">
+  <Story title="Feedback/AppToastContainer">
     <Variant title="Playground">
       <template #default="{ state }">
         <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
@@ -71,7 +71,7 @@ function triggerLongToast(type: 'success' | 'error') {
               Info
             </button>
           </div>
-          <ToastNotification />
+          <AppToastContainer />
         </div>
       </template>
 
@@ -112,7 +112,7 @@ function triggerLongToast(type: 'success' | 'error') {
             Info Toast
           </button>
         </div>
-        <ToastNotification />
+        <AppToastContainer />
       </div>
     </Variant>
 
@@ -128,7 +128,7 @@ function triggerLongToast(type: 'success' | 'error') {
         <p style="margin: 0; color: var(--text-muted, #94a3b8); font-size: 0.75rem;">
           Click to see multiple toasts stacked. Click any toast to dismiss it.
         </p>
-        <ToastNotification />
+        <AppToastContainer />
       </div>
     </Variant>
     <Variant title="Progress bar — 4s / 6s TTL">
@@ -150,7 +150,7 @@ function triggerLongToast(type: 'success' | 'error') {
         <p style="margin: 0; font-size: 0.8125rem; color: var(--text-muted);">
           Watch the bottom progress bar shrink over the toast's TTL.
         </p>
-        <ToastNotification />
+        <AppToastContainer />
       </div>
     </Variant>
   </Story>