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

package/src/components/BioTemplatePackWorkspaceView.story.vue

@@ -28,16 +28,16 @@ function initState() {
             <div class="pack-component-layout">
               <div class="pack-component-panel pack-component-panel--plate">
                 <WellPlate
-                  v-if="bindings.componentPropsById['plate-map:WellPlate']"
-                  v-bind="bindings.componentPropsById['plate-map:WellPlate']"
+                  v-if="bindings.componentBindingsById['plate-map:WellPlate']"
+                  v-bind="bindings.componentBindingsById['plate-map:WellPlate'].props"
                   size="sm"
                   readonly
                 />
               </div>
               <div class="pack-component-panel pack-component-panel--dose">
                 <DoseCalculator
-                  v-if="bindings.componentPropsById['dose-response:DoseCalculator']"
-                  v-bind="bindings.componentPropsById['dose-response:DoseCalculator']"
+                  v-if="bindings.componentBindingsById['dose-response:DoseCalculator']"
+                  v-bind="bindings.componentBindingsById['dose-response:DoseCalculator'].props"
                 />
               </div>
             </div>

package/src/components/BioTemplatePackWorkspaceView.vue

@@ -14,6 +14,7 @@ interface BioTemplatePackWorkspaceSlotProps {
   bindings: UseBioTemplatePackWorkspaceReturn['bindings']['value']
   pack: UseBioTemplatePackWorkspaceReturn['pack']
   target: BioTemplateEnvelope<unknown> | TemplateCollectionEnvelope
+  componentBindingsById: UseBioTemplatePackWorkspaceReturn['componentBindingsById']['value']
   componentProps: UseBioTemplatePackWorkspaceReturn['componentProps']['value']
   componentPropsById: UseBioTemplatePackWorkspaceReturn['componentPropsById']['value']
   componentPropsByComponent: UseBioTemplatePackWorkspaceReturn['componentPropsByComponent']['value']

package/src/components/BioTemplatePresetWorkspaceView.story.vue

@@ -6,6 +6,8 @@ import WellPlate from './WellPlate.vue'
 import { useBioTemplatePresetWorkspace } from '../composables/useBioTemplatePresetWorkspace'
 import type { BioTemplateControlValues } from '../templates'
 
+type SidebarVariant = 'analysis' | 'default'
+
 const wellplateWorkspace = useBioTemplatePresetWorkspace('wellplate-screen', {
   initialValues: {
     sampleNames: ['Vehicle', 'Treatment'],
@@ -28,6 +30,7 @@ const componentPresetValues = ref<BioTemplateControlValues>({
 function initState() {
   return {
     preset: 'wellplate-screen',
+    sidebarVariant: 'analysis' as SidebarVariant,
     showTemplateSummary: true,
     showComponentSummary: false,
     dense: true,
@@ -50,6 +53,7 @@ function workspaceForPreset(preset: string) {
         <div style="padding: 2rem; min-height: 720px; background: var(--bg-primary, #f8fafc);">
           <BioTemplatePresetWorkspaceView
             :workspace="workspaceForPreset(state.preset)"
+            :sidebar-variant="state.sidebarVariant"
             :show-template-summary="state.showTemplateSummary"
             :show-component-summary="state.showComponentSummary"
             :dense="state.dense"
@@ -69,6 +73,14 @@ function workspaceForPreset(preset: string) {
             { label: 'Western blot assay', value: 'western-blot-assay' },
           ]"
         />
+        <HstSelect
+          v-model="state.sidebarVariant"
+          title="Sidebar variant"
+          :options="[
+            { label: 'Analysis', value: 'analysis' },
+            { label: 'Default', value: 'default' },
+          ]"
+        />
         <HstCheckbox v-model="state.showTemplateSummary" title="Template summary" />
         <HstCheckbox v-model="state.showComponentSummary" title="Component summary" />
         <HstCheckbox v-model="state.dense" title="Dense" />
@@ -97,14 +109,14 @@ function workspaceForPreset(preset: string) {
           <div class="preset-component-layout">
             <div class="preset-component-panel preset-component-panel--plate">
               <WellPlate
-                v-bind="bindings.componentPropsById.value['plate-map:WellPlate']"
+                v-bind="bindings.componentBindingsById.value['plate-map:WellPlate'].props"
                 size="sm"
                 readonly
               />
             </div>
             <div class="preset-component-panel preset-component-panel--dose">
               <DoseCalculator
-                v-bind="bindings.componentPropsById.value['dose-response:DoseCalculator']"
+                v-bind="bindings.componentBindingsById.value['dose-response:DoseCalculator'].props"
               />
             </div>
           </div>

package/src/components/BioTemplatePresetWorkspaceView.vue

@@ -8,16 +8,19 @@ import type {
 } from '../composables/useBioTemplatePresetWorkspace'
 import { useBioTemplatePresetWorkspace } from '../composables/useBioTemplatePresetWorkspace'
 import AlertBox from './AlertBox.vue'
-import AppPillNav from './AppPillNav.vue'
 import AppSidebar from './AppSidebar.vue'
 import BaseButton from './BaseButton.vue'
 import BioTemplateRenderer from './BioTemplateRenderer.vue'
+import AppPillNavInternal from './internal/AppPillNavInternal.vue'
+
+type BioTemplatePresetSidebarVariant = 'default' | 'analysis'
 
 interface BioTemplatePresetWorkspaceSlotProps {
   workspace: UseBioTemplatePresetWorkspaceReturn
   bindings: UseBioTemplatePresetWorkspaceReturn['bindings']
   collection: UseBioTemplatePresetWorkspaceReturn['collection']['value']
   renderer: UseBioTemplatePresetWorkspaceReturn['renderer']['value']
+  componentBindingsById: UseBioTemplatePresetWorkspaceReturn['componentBindingsById']['value']
   componentProps: UseBioTemplatePresetWorkspaceReturn['componentProps']['value']
   componentPropsById: UseBioTemplatePresetWorkspaceReturn['componentPropsById']['value']
   componentPropsByComponent: UseBioTemplatePresetWorkspaceReturn['componentPropsByComponent']['value']
@@ -41,6 +44,8 @@ interface Props {
   label?: string
   /** Sidebar CSS width. */
   sidebarWidth?: string
+  /** AppSidebar visual preset. `analysis` matches the LEAF-style MINT analysis sidebar design language. */
+  sidebarVariant?: BioTemplatePresetSidebarVariant
   /** Compact sidebar and preview layout. */
   dense?: boolean
   /** Render preview components in read-only mode. */
@@ -74,6 +79,7 @@ const props = withDefaults(defineProps<Props>(), {
   modelValue: undefined,
   values: undefined,
   sidebarWidth: '320px',
+  sidebarVariant: 'analysis',
   dense: true,
   readonly: true,
   showStatus: true,
@@ -150,6 +156,7 @@ const isSaving = computed(() => unref(resolvedWorkspace.value.saving))
 const error = computed(() => unref(resolvedWorkspace.value.error))
 const lastSavedAt = computed(() => unref(resolvedWorkspace.value.lastSavedAt))
 const renderer = computed(() => unref(resolvedWorkspace.value.renderer))
+const componentBindingsById = computed(() => unref(resolvedWorkspace.value.componentBindingsById))
 const componentProps = computed(() => unref(resolvedWorkspace.value.componentProps))
 const componentPropsById = computed(() => unref(resolvedWorkspace.value.componentPropsById))
 const componentPropsByComponent = computed(() => unref(resolvedWorkspace.value.componentPropsByComponent))
@@ -240,6 +247,7 @@ function isPlainRecord(value: unknown): value is Record<string, unknown> {
     <div class="mint-bio-template-preset-workspace__main">
       <AppSidebar
         v-bind="resolvedWorkspace.sidebar"
+        :variant="sidebarVariant"
         :floating="false"
         :width="sidebarWidth"
         :dense="dense"
@@ -248,7 +256,7 @@ function isPlainRecord(value: unknown): value is Record<string, unknown> {
           <p class="mint-bio-template-preset-workspace__sidebar-title">
             Controls
           </p>
-          <AppPillNav
+          <AppPillNavInternal
             v-if="resolvedWorkspace.pillNav.items.length > 1"
             class="mint-bio-template-preset-workspace__view-nav"
             :items="resolvedWorkspace.pillNav.items"
@@ -266,6 +274,7 @@ function isPlainRecord(value: unknown): value is Record<string, unknown> {
         :bindings="bindings"
         :collection="collection"
         :renderer="renderer"
+        :component-bindings-by-id="componentBindingsById"
         :component-props="componentProps"
         :component-props-by-id="componentPropsById"
         :component-props-by-component="componentPropsByComponent"

package/src/components/BioTemplateRenderer.vue

@@ -1,21 +1,14 @@
 <script setup lang="ts">
 /** Render biology template envelopes with matching SDK components such as WellPlate, DoseCalculator, and DataFrame. */
-import { computed, type Component } from 'vue'
+import { computed } from 'vue'
 import {
-  toBioTemplateComponentProps,
-  type BioTemplateComponentPropsBinding,
+  toBioTemplateComponentBindings,
 } from '../templates/componentBindings'
 import type {
   BioTemplateEnvelope,
   TemplateCollectionEnvelope,
 } from '../templates/types'
-import DataFrame from './DataFrame.vue'
-import DoseCalculator from './DoseCalculator.vue'
-import ExperimentTimeline from './ExperimentTimeline.vue'
-import PlateMapEditor from './PlateMapEditor.vue'
-import ReagentList from './ReagentList.vue'
-import SampleSelector from './SampleSelector.vue'
-import WellPlate from './WellPlate.vue'
+import ComponentBindingRenderer from './ComponentBindingRenderer.vue'
 
 interface Props {
   /** Template envelope or template collection to render. */
@@ -36,11 +29,6 @@ interface Props {
   emptyText?: string
 }
 
-type RenderableBinding = BioTemplateComponentPropsBinding & {
-  componentImpl: Component
-  normalizedProps: Record<string, unknown>
-}
-
 const props = withDefaults(defineProps<Props>(), {
   include: () => [],
   exclude: () => [],
@@ -51,219 +39,19 @@ const props = withDefaults(defineProps<Props>(), {
   emptyText: 'No renderable biology template components.',
 })
 
-const componentRegistry: Record<string, Component> = {
-  DataFrame,
-  DoseCalculator,
-  ExperimentTimeline,
-  PlateMapEditor,
-  ReagentList,
-  SampleSelector,
-  WellPlate,
-}
-
-const renderableBindings = computed<RenderableBinding[]>(() =>
-  toBioTemplateComponentProps(props.target)
-    .filter(binding => isIncluded(binding.component))
-    .map((binding) => {
-      const componentImpl = componentRegistry[binding.component]
-      if (!componentImpl) return null
-      return {
-        ...binding,
-        componentImpl,
-        normalizedProps: normalizeProps(binding),
-      }
-    })
-    .filter((binding): binding is RenderableBinding => binding !== null)
-)
-
-const rendererClasses = computed(() => [
-  'mint-bio-template-renderer',
-  props.dense ? 'mint-bio-template-renderer--dense' : '',
-])
-
-function isIncluded(componentName: string): boolean {
-  if (props.include.length > 0 && !props.include.includes(componentName)) return false
-  return !props.exclude.includes(componentName)
-}
-
-function normalizeProps(binding: BioTemplateComponentPropsBinding): Record<string, unknown> {
-  const base = { ...binding.propsObject }
-
-  switch (binding.component) {
-    case 'WellPlate':
-      return {
-        ...base,
-        readonly: props.readonly || Boolean(base.readonly),
-        size: props.dense ? 'md' : (base.size ?? 'fill'),
-      }
-    case 'PlateMapEditor':
-      return {
-        ...base,
-        size: props.dense ? 'md' : (base.size ?? 'fill'),
-        showToolbar: props.readonly ? false : (base.showToolbar ?? true),
-        showSidebar: props.readonly ? false : (base.showSidebar ?? true),
-        allowAddPlates: props.readonly ? false : (base.allowAddPlates ?? true),
-        allowAddSamples: props.readonly ? false : (base.allowAddSamples ?? true),
-      }
-    case 'DataFrame':
-      return {
-        ...base,
-        size: props.dense ? 'sm' : (base.size ?? 'md'),
-        maxHeight: base.maxHeight ?? (props.dense ? '280px' : undefined),
-      }
-    case 'ExperimentTimeline':
-      return {
-        ...base,
-        editable: props.readonly ? false : base.editable,
-        size: props.dense ? 'sm' : (base.size ?? 'md'),
-      }
-    case 'ReagentList':
-      return {
-        ...base,
-        readonly: props.readonly || Boolean(base.readonly),
-      }
-    case 'SampleSelector':
-      return {
-        ...base,
-        enableGrouping: props.readonly ? false : (base.enableGrouping ?? true),
-        enableSmartGroup: props.readonly ? false : (base.enableSmartGroup ?? true),
-      }
-    default:
-      return base
-  }
-}
+const componentBindings = computed(() => toBioTemplateComponentBindings(props.target))
 </script>
 
 <template>
-  <div :class="rendererClasses">
-    <section
-      v-for="binding in renderableBindings"
-      :key="binding.id"
-      class="mint-bio-template-renderer__item"
-      :data-template-id="binding.template_id"
-      :data-template-component="binding.component"
-    >
-      <header
-        v-if="showHeaders"
-        class="mint-bio-template-renderer__header"
-      >
-        <div class="mint-bio-template-renderer__title-group">
-          <p class="mint-bio-template-renderer__component">
-            {{ binding.component }}
-          </p>
-          <p class="mint-bio-template-renderer__template">
-            {{ binding.template_id }}
-          </p>
-        </div>
-        <p
-          v-if="showDescriptions"
-          class="mint-bio-template-renderer__description"
-        >
-          {{ binding.description }}
-        </p>
-      </header>
-
-      <div class="mint-bio-template-renderer__body">
-        <component
-          :is="binding.componentImpl"
-          v-bind="binding.normalizedProps"
-        />
-      </div>
-    </section>
-
-    <p
-      v-if="renderableBindings.length === 0"
-      class="mint-bio-template-renderer__empty"
-    >
-      {{ emptyText }}
-    </p>
-  </div>
+  <ComponentBindingRenderer
+    class="mint-bio-template-renderer"
+    :bindings="componentBindings"
+    :include="include"
+    :exclude="exclude"
+    :dense="dense"
+    :readonly="readonly"
+    :show-headers="showHeaders"
+    :show-descriptions="showDescriptions"
+    :empty-text="emptyText"
+  />
 </template>
-
-<style scoped>
-.mint-bio-template-renderer {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
-  gap: 1rem;
-  min-width: 0;
-}
-
-.mint-bio-template-renderer--dense {
-  gap: 0.75rem;
-}
-
-.mint-bio-template-renderer__item {
-  min-width: 0;
-  overflow: hidden;
-  border: 1px solid var(--border-color, #e5e7eb);
-  border-radius: 0.5rem;
-  background: var(--bg-card, #ffffff);
-  box-shadow: var(--shadow-sm, 0 1px 2px rgb(15 23 42 / 0.06));
-}
-
-.mint-bio-template-renderer__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--border-color, #e5e7eb);
-  background: var(--bg-secondary, #f8fafc);
-}
-
-.mint-bio-template-renderer__title-group {
-  min-width: 0;
-}
-
-.mint-bio-template-renderer__component {
-  margin: 0;
-  color: var(--text-primary, #0f172a);
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
-  font-size: 0.8125rem;
-  font-weight: 600;
-}
-
-.mint-bio-template-renderer__template,
-.mint-bio-template-renderer__description,
-.mint-bio-template-renderer__empty {
-  margin: 0;
-  color: var(--text-secondary, #475569);
-  font-size: 0.75rem;
-  line-height: 1.4;
-}
-
-.mint-bio-template-renderer__description {
-  max-width: 24rem;
-  text-align: right;
-}
-
-.mint-bio-template-renderer__body {
-  min-width: 0;
-  padding: 1rem;
-}
-
-.mint-bio-template-renderer--dense .mint-bio-template-renderer__header,
-.mint-bio-template-renderer--dense .mint-bio-template-renderer__body {
-  padding: 0.75rem;
-}
-
-.mint-bio-template-renderer__empty {
-  padding: 1rem;
-  border: 1px dashed var(--border-color, #e5e7eb);
-  border-radius: 0.5rem;
-  background: var(--bg-secondary, #f8fafc);
-  text-align: center;
-}
-
-@media (max-width: 720px) {
-  .mint-bio-template-renderer__header {
-    display: block;
-  }
-
-  .mint-bio-template-renderer__description {
-    max-width: none;
-    margin-top: 0.25rem;
-    text-align: left;
-  }
-}
-</style>

package/src/components/ComponentBindingRenderer.story.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import ComponentBindingRenderer from './ComponentBindingRenderer.vue'
+import {
+  defineDoseDesignControlModel,
+  useControlWorkspace,
+} from '../composables/useControlSchema'
+
+const model = defineDoseDesignControlModel({
+  selectedWells: ['A1', 'A2', 'B1'],
+  plateFormat: 96,
+  includeMolecularWeight: true,
+})
+const workspace = useControlWorkspace(model)
+
+const state = ref({
+  dense: false,
+  readonly: true,
+  showHeaders: true,
+  showDescriptions: true,
+  layout: 'grid' as 'grid' | 'stack',
+})
+
+const bindings = computed(() => workspace.componentBindings.value)
+</script>
+
+<template>
+  <Story title="Layout/ComponentBindingRenderer">
+    <Variant title="Dose Design Bindings">
+      <div style="padding: 2rem; min-height: 640px; background: var(--bg-secondary, #f8fafc);">
+        <ComponentBindingRenderer
+          :bindings="bindings"
+          :dense="state.dense"
+          :readonly="state.readonly"
+          :show-headers="state.showHeaders"
+          :show-descriptions="state.showDescriptions"
+          :layout="state.layout"
+        />
+      </div>
+    </Variant>
+
+    <template #controls>
+      <HstCheckbox v-model="state.dense" title="Dense" />
+      <HstCheckbox v-model="state.readonly" title="Readonly" />
+      <HstCheckbox v-model="state.showHeaders" title="Headers" />
+      <HstCheckbox v-model="state.showDescriptions" title="Descriptions" />
+      <HstSelect
+        v-model="state.layout"
+        title="Layout"
+        :options="[
+          { label: 'Grid', value: 'grid' },
+          { label: 'Stack', value: 'stack' },
+        ]"
+      />
+    </template>
+  </Story>
+</template>