@morscherlab/mint-sdk 1.3.9 → 1.4.0-beta.1

package/src/components/BioTemplatePresetWorkspaceView.story.vue

@@ -1,163 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import BioTemplatePresetWorkspaceView from './BioTemplatePresetWorkspaceView.vue'
-import DoseCalculator from './DoseCalculator.vue'
-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'],
-    unit: 'uM',
-  },
-})
-const qpcrWorkspace = useBioTemplatePresetWorkspace('qpcr-expression')
-const lcmsWorkspace = useBioTemplatePresetWorkspace('lcms-batch')
-const flowWorkspace = useBioTemplatePresetWorkspace('flow-cytometry-assay')
-const westernWorkspace = useBioTemplatePresetWorkspace('western-blot-assay')
-const directPresetValues = ref<BioTemplateControlValues>({
-  sampleNames: ['Vehicle', 'Drug'],
-  unit: 'nM',
-})
-const componentPresetValues = ref<BioTemplateControlValues>({
-  sampleNames: ['Vehicle', 'Drug'],
-  unit: 'nM',
-})
-
-function initState() {
-  return {
-    preset: 'wellplate-screen',
-    sidebarVariant: 'analysis' as SidebarVariant,
-    showTemplateSummary: true,
-    showComponentSummary: false,
-    dense: true,
-  }
-}
-
-function workspaceForPreset(preset: string) {
-  if (preset === 'western-blot-assay') return westernWorkspace
-  if (preset === 'flow-cytometry-assay') return flowWorkspace
-  if (preset === 'lcms-batch') return lcmsWorkspace
-  if (preset === 'qpcr-expression') return qpcrWorkspace
-  return wellplateWorkspace
-}
-</script>
-
-<template>
-  <Story title="Templates/BioTemplatePresetWorkspaceView" :init-state="initState">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <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"
-          />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstSelect
-          v-model="state.preset"
-          title="Preset"
-          :options="[
-            { label: 'Well-plate screen', value: 'wellplate-screen' },
-            { label: 'qPCR expression', value: 'qpcr-expression' },
-            { label: 'LC-MS batch', value: 'lcms-batch' },
-            { label: 'Flow cytometry assay', value: 'flow-cytometry-assay' },
-            { 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" />
-      </template>
-    </Variant>
-
-    <Variant title="Direct Preset">
-      <div style="padding: 2rem; min-height: 720px; background: var(--bg-primary, #f8fafc);">
-        <BioTemplatePresetWorkspaceView
-          v-model="directPresetValues"
-          preset="wellplate-screen"
-          show-template-summary
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Component Props">
-      <div style="padding: 2rem; min-height: 720px; background: var(--bg-primary, #f8fafc);">
-        <BioTemplatePresetWorkspaceView
-          v-model="componentPresetValues"
-          preset="wellplate-screen"
-          :show-template-summary="false"
-          show-component-summary
-          v-slot="{ bindings }"
-        >
-          <div class="preset-component-layout">
-            <div class="preset-component-panel preset-component-panel--plate">
-              <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.componentBindingsById.value['dose-response:DoseCalculator'].props"
-              />
-            </div>
-          </div>
-        </BioTemplatePresetWorkspaceView>
-      </div>
-    </Variant>
-  </Story>
-</template>
-
-<style scoped>
-.preset-component-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
-  gap: 1rem;
-  align-items: start;
-  min-width: 0;
-}
-
-.preset-component-panel {
-  min-width: 0;
-  padding: 1rem;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-lg, 0.75rem);
-  background: var(--bg-primary);
-}
-
-.preset-component-panel--plate {
-  overflow-x: auto;
-}
-
-.preset-component-panel--dose {
-  max-width: 24rem;
-}
-
-@media (max-width: 960px) {
-  .preset-component-layout {
-    grid-template-columns: 1fr;
-  }
-
-  .preset-component-panel--dose {
-    max-width: none;
-  }
-}
-</style>

package/src/components/BioTemplatePresetWorkspaceView.vue

@@ -1,403 +0,0 @@
-<script setup lang="ts">
-/**
- * Complete editable biology template preset workspace for WellPlate/DoseCalculator, LC-MS, qPCR, generated controls, preview components, and current-experiment save wiring.
- *
- * @example Recommended
- * ```vue
- * <BioTemplatePresetWorkspaceView v-model="values" preset="wellplate-screen" />
- * ```
- */
-import { computed, effectScope, onScopeDispose, shallowRef, toRaw, unref, watch, type EffectScope } from 'vue'
-import type { BioTemplateControlValues, TemplatePresetId } from '../templates'
-import type {
-  UseBioTemplatePresetWorkspaceOptions,
-  UseBioTemplatePresetWorkspaceReturn,
-} from '../composables/useBioTemplatePresetWorkspace'
-import { useBioTemplatePresetWorkspace } from '../composables/useBioTemplatePresetWorkspace'
-import { bioTemplatePresetWorkspaceProps } from '../composables/workspaceRecipes'
-import AlertBox from './AlertBox.vue'
-import AppSidebar from './AppSidebar.vue'
-import BaseButton from './BaseButton.vue'
-import BioTemplateRenderer from './BioTemplateRenderer.vue'
-import AppTopBarPillNavInternal from './internal/AppTopBarPillNavInternal.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']
-  getComponentProps: UseBioTemplatePresetWorkspaceReturn['getComponentProps']
-}
-
-interface Props {
-  /** Workspace returned by useBioTemplatePresetWorkspace(). Use for full manual control. */
-  workspace?: UseBioTemplatePresetWorkspaceReturn
-  /** Built-in preset id used to create the workspace when workspace is not provided. */
-  preset?: TemplatePresetId
-  /** Options passed to the internally generated useBioTemplatePresetWorkspace() call. */
-  workspaceOptions?: UseBioTemplatePresetWorkspaceOptions
-  /** Initial control values for the internally generated preset workspace. */
-  initialValues?: BioTemplateControlValues
-  /** External control values for the internally generated preset workspace. Supports default v-model. */
-  modelValue?: BioTemplateControlValues
-  /** External control values for the internally generated preset workspace. Supports v-model:values. */
-  values?: BioTemplateControlValues
-  /** Label shown in the status banner. Defaults to the humanized preset id. */
-  label?: string
-  /** Sidebar CSS width. */
-  sidebarWidth?: string
-  /** @deprecated No-op, removed in MINT 1.4. AppSidebar has one look now; the former `analysis` preset is the default. */
-  sidebarVariant?: BioTemplatePresetSidebarVariant
-  /** Compact sidebar and preview layout. */
-  dense?: boolean
-  /** Render preview components in read-only mode. */
-  readonly?: boolean
-  /** Show save timestamp. */
-  showStatus?: boolean
-  /** Show cards for templates included in the preset collection. */
-  showTemplateSummary?: boolean
-  /** Show component binding count. */
-  showComponentSummary?: boolean
-  saveLabel?: string
-  resetLabel?: string
-}
-
-const emit = defineEmits<{
-  /** Emitted when generated preset controls change through the embedded sidebar or reset action. */
-  'update:modelValue': [values: BioTemplateControlValues]
-  /** Emitted when generated preset controls change through the embedded sidebar or reset action. */
-  'update:values': [values: BioTemplateControlValues]
-}>()
-
-defineSlots<{
-  default?: (props: BioTemplatePresetWorkspaceSlotProps) => unknown
-}>()
-
-const props = withDefaults(defineProps<Props>(), {
-  workspace: undefined,
-  preset: 'wellplate-screen',
-  workspaceOptions: () => ({}),
-  initialValues: undefined,
-  modelValue: undefined,
-  values: undefined,
-  sidebarWidth: '320px',
-  sidebarVariant: 'analysis',
-  dense: true,
-  readonly: true,
-  showStatus: true,
-  showTemplateSummary: true,
-  showComponentSummary: false,
-  saveLabel: 'Save',
-  resetLabel: 'Reset defaults',
-})
-
-// Thin recipe over bioTemplatePresetWorkspaceProps(): merges workspaceOptions/initialValues/
-// v-model into the options useBioTemplatePresetWorkspace() consumes (see workspaceRecipes.ts).
-const resolvedPresetProps = computed(() => bioTemplatePresetWorkspaceProps(props))
-const externalValues = computed(() => resolvedPresetProps.value.externalValues)
-const resolvedWorkspaceOptions = computed<UseBioTemplatePresetWorkspaceOptions>(() =>
-  resolvedPresetProps.value.resolvedWorkspaceOptions
-)
-
-let generatedWorkspaceScope: EffectScope | undefined
-
-function createGeneratedWorkspace(): UseBioTemplatePresetWorkspaceReturn {
-  generatedWorkspaceScope?.stop()
-  generatedWorkspaceScope = effectScope()
-  return generatedWorkspaceScope.run(() => useBioTemplatePresetWorkspace(props.preset, resolvedWorkspaceOptions.value))!
-}
-
-const generatedWorkspace = shallowRef<UseBioTemplatePresetWorkspaceReturn>(createGeneratedWorkspace())
-const resolvedWorkspace = computed(() => props.workspace ?? generatedWorkspace.value)
-
-watch(
-  [() => props.preset, () => props.workspaceOptions, () => props.initialValues],
-  () => {
-    generatedWorkspace.value = createGeneratedWorkspace()
-  },
-  { deep: true },
-)
-
-onScopeDispose(() => generatedWorkspaceScope?.stop())
-
-watch(
-  externalValues,
-  (values) => {
-    if (values === undefined || props.workspace !== undefined) return
-    if (recordsEqual(toPlainRecord(generatedWorkspace.value.controlValues.value), values)) return
-    generatedWorkspace.value.setControlValues(values)
-  },
-  { deep: true },
-)
-
-watch(
-  () => generatedWorkspace.value.controlValues.value,
-  (values) => {
-    if (props.workspace !== undefined) return
-    const nextValues = toPlainRecord(values)
-    if (externalValues.value !== undefined && recordsEqual(nextValues, externalValues.value)) return
-    emit('update:modelValue', nextValues)
-    emit('update:values', nextValues)
-  },
-  { deep: true },
-)
-
-const presetId = computed(() => resolvedWorkspace.value.presetId)
-const label = computed(() => props.label ?? unref(resolvedWorkspace.value.presetLabel))
-const collection = computed(() => unref(resolvedWorkspace.value.collection))
-const templateIds = computed(() => unref(resolvedWorkspace.value.templateIds))
-const currentExperimentId = computed(() => unref(resolvedWorkspace.value.currentExperimentId))
-const hasCurrentExperiment = computed(() => unref(resolvedWorkspace.value.hasCurrentExperiment))
-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))
-const componentPropsCount = computed(() => unref(resolvedWorkspace.value.componentProps).length)
-const bindings = computed(() => resolvedWorkspace.value.bindings)
-
-function toPlainRecord(value: Record<string, unknown>): Record<string, unknown> {
-  return toPlain(value) as Record<string, unknown>
-}
-
-function toPlain(value: unknown): unknown {
-  const raw = toRaw(value)
-  if (Array.isArray(raw)) return raw.map(item => toPlain(item))
-  if (raw && typeof raw === 'object') {
-    return Object.fromEntries(
-      Object.entries(raw as Record<string, unknown>).map(([key, item]) => [key, toPlain(item)])
-    )
-  }
-  return raw
-}
-
-function recordsEqual(left: Record<string, unknown>, right: Record<string, unknown>): boolean {
-  const leftKeys = Object.keys(left)
-  const rightKeys = Object.keys(right)
-  if (leftKeys.length !== rightKeys.length) return false
-  return leftKeys.every(key => valuesEqual(left[key], right[key]))
-}
-
-function valuesEqual(left: unknown, right: unknown): boolean {
-  const leftRaw = toRaw(left)
-  const rightRaw = toRaw(right)
-
-  if (Object.is(leftRaw, rightRaw)) return true
-
-  if (Array.isArray(leftRaw) || Array.isArray(rightRaw)) {
-    if (!Array.isArray(leftRaw) || !Array.isArray(rightRaw)) return false
-    if (leftRaw.length !== rightRaw.length) return false
-    return leftRaw.every((item, index) => valuesEqual(item, rightRaw[index]))
-  }
-
-  if (isPlainRecord(leftRaw) || isPlainRecord(rightRaw)) {
-    if (!isPlainRecord(leftRaw) || !isPlainRecord(rightRaw)) return false
-    return recordsEqual(leftRaw, rightRaw)
-  }
-
-  return false
-}
-
-function isPlainRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null && !Array.isArray(value)
-}
-</script>
-
-<template>
-  <div class="mint-bio-template-preset-workspace">
-    <div class="mint-bio-template-preset-workspace__toolbar">
-      <AlertBox type="info" class="mint-bio-template-preset-workspace__status">
-        {{ label }} preset saves to the current experiment design_data.
-      </AlertBox>
-
-      <div class="mint-bio-template-preset-workspace__actions">
-        <BaseButton
-          variant="secondary"
-          :disabled="isSaving"
-          @click="resolvedWorkspace.resetToDefaultCollection()"
-        >
-          {{ resetLabel }}
-        </BaseButton>
-        <BaseButton
-          variant="primary"
-          :loading="isSaving"
-          :disabled="!hasCurrentExperiment"
-          @click="resolvedWorkspace.saveCurrent()"
-        >
-          {{ saveLabel }}
-        </BaseButton>
-      </div>
-    </div>
-
-    <AlertBox v-if="error" type="error">
-      {{ error }}
-    </AlertBox>
-
-    <p v-if="showStatus" class="mint-bio-template-preset-workspace__meta">
-      saved: {{ lastSavedAt?.toLocaleString() ?? 'not saved' }}
-    </p>
-
-    <div class="mint-bio-template-preset-workspace__main">
-      <AppSidebar
-        v-bind="resolvedWorkspace.sidebar"
-        :variant="sidebarVariant"
-        :floating="false"
-        :width="sidebarWidth"
-        :dense="dense"
-      >
-        <template #header>
-          <p class="mint-bio-template-preset-workspace__sidebar-title">
-            Controls
-          </p>
-          <AppTopBarPillNavInternal
-            v-if="resolvedWorkspace.pillNav.items.length > 1"
-            class="mint-bio-template-preset-workspace__view-nav"
-            :items="resolvedWorkspace.pillNav.items"
-            :current-item-id="resolvedWorkspace.pillNav.currentItemId"
-            @select="resolvedWorkspace.pillNav.onSelect"
-          />
-          <p class="mint-bio-template-preset-workspace__sidebar-subtitle">
-            {{ presetId }}
-          </p>
-        </template>
-      </AppSidebar>
-
-      <slot
-        :workspace="resolvedWorkspace"
-        :bindings="bindings"
-        :collection="collection"
-        :renderer="renderer"
-        :component-bindings-by-id="componentBindingsById"
-        :component-props="componentProps"
-        :component-props-by-id="componentPropsById"
-        :component-props-by-component="componentPropsByComponent"
-        :get-component-props="resolvedWorkspace.getComponentProps"
-      >
-        <BioTemplateRenderer
-          v-bind="renderer"
-          :dense="dense"
-          :readonly="readonly"
-        />
-      </slot>
-    </div>
-
-    <div
-      v-if="showTemplateSummary"
-      class="mint-bio-template-preset-workspace__templates"
-    >
-      <div
-        v-for="templateId in templateIds"
-        :key="templateId"
-        class="mint-bio-template-preset-workspace__template"
-      >
-        <p class="mint-bio-template-preset-workspace__template-id">
-          {{ templateId }}
-        </p>
-        <p class="mint-bio-template-preset-workspace__template-meta">
-          {{ presetId }} - Experiment {{ currentExperimentId ?? 'not selected' }}
-        </p>
-      </div>
-    </div>
-
-    <p v-if="showComponentSummary" class="mint-bio-template-preset-workspace__meta">
-      component prop bindings: {{ componentPropsCount }}
-    </p>
-  </div>
-</template>
-
-<style scoped>
-.mint-bio-template-preset-workspace {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  min-width: 0;
-}
-
-.mint-bio-template-preset-workspace__toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-.mint-bio-template-preset-workspace__status {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.mint-bio-template-preset-workspace__actions {
-  display: flex;
-  flex: 0 0 auto;
-  gap: 0.5rem;
-}
-
-.mint-bio-template-preset-workspace__meta,
-.mint-bio-template-preset-workspace__sidebar-subtitle,
-.mint-bio-template-preset-workspace__template-meta {
-  margin: 0;
-  color: var(--text-secondary, #64748b);
-  font-family: var(--font-mono, 'Fira Code', monospace);
-  font-size: 0.75rem;
-}
-
-.mint-bio-template-preset-workspace__main {
-  display: grid;
-  grid-template-columns: minmax(16rem, max-content) minmax(0, 1fr);
-  gap: 1rem;
-  align-items: start;
-  min-width: 0;
-}
-
-.mint-bio-template-preset-workspace__sidebar-title {
-  margin: 0;
-  color: var(--text-primary, #0f172a);
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.mint-bio-template-preset-workspace__view-nav {
-  margin-top: 0.5rem;
-}
-
-.mint-bio-template-preset-workspace__templates {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
-  gap: 0.75rem;
-}
-
-.mint-bio-template-preset-workspace__template {
-  min-width: 0;
-  padding: 1rem;
-  border: 1px solid var(--border-color, #e5e7eb);
-  border-radius: 0.5rem;
-  background: var(--bg-primary, #ffffff);
-}
-
-.mint-bio-template-preset-workspace__template-id {
-  margin: 0;
-  color: var(--text-primary, #0f172a);
-  font-family: var(--font-mono, 'Fira Code', monospace);
-  font-size: 0.875rem;
-}
-
-@media (max-width: 48rem) {
-  .mint-bio-template-preset-workspace__toolbar,
-  .mint-bio-template-preset-workspace__actions {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .mint-bio-template-preset-workspace__main {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-</style>

package/src/components/BioTemplateRenderer.story.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import BioTemplateRenderer from './BioTemplateRenderer.vue'
-import {
-  createLcmsBatchCollection,
-  createQpcrExpressionCollection,
-  createWellPlateScreenCollection,
-} from '../templates'
-
-const wellplateScreen = createWellPlateScreenCollection({
-  samples: ['Control', 'Treatment'],
-  compounds: {
-    'Drug A': [10, 1, 0.1],
-  },
-  unit: 'uM',
-})
-
-const qpcrExpression = createQpcrExpressionCollection({
-  samples: ['Control', 'Treatment'],
-  targets: ['ACTB', 'GAPDH'],
-  replicates: 2,
-})
-
-const lcmsBatch = createLcmsBatchCollection({
-  samples: ['S001', 'S002', 'S003'],
-  features: ['Glucose', 'Lactate', 'Citrate'],
-})
-</script>
-
-<template>
-  <Story title="Templates/BioTemplateRenderer">
-    <Variant title="Wellplate Screen">
-      <div style="padding: 2rem; background: var(--bg-primary, #f8fafc);">
-        <BioTemplateRenderer :target="wellplateScreen" />
-      </div>
-    </Variant>
-
-    <Variant title="qPCR Expression">
-      <div style="padding: 2rem; background: var(--bg-primary, #f8fafc);">
-        <BioTemplateRenderer
-          :target="qpcrExpression"
-          :include="['WellPlate', 'DataFrame']"
-          dense
-        />
-      </div>
-    </Variant>
-
-    <Variant title="LC-MS Batch Preview">
-      <div style="padding: 2rem; background: var(--bg-primary, #f8fafc);">
-        <BioTemplateRenderer
-          :target="lcmsBatch"
-          :include="['DataFrame', 'ExperimentTimeline', 'ScheduleCalendar']"
-          dense
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/BioTemplateRenderer.vue

@@ -1,64 +0,0 @@
-<script setup lang="ts">
-/**
- * Render biology template envelopes with matching SDK components such as WellPlate, DoseCalculator, and DataFrame.
- *
- * @example Recommended
- * ```vue
- * <BioTemplateRenderer :target="collection" />
- * ```
- */
-import { computed } from 'vue'
-import {
-  toBioTemplateComponentBindings,
-} from '../templates/componentBindings'
-import type {
-  BioTemplateEnvelope,
-  TemplateCollectionEnvelope,
-} from '../templates/types'
-import ComponentBindingRenderer from './ComponentBindingRenderer.vue'
-
-interface Props {
-  /** Template envelope or template collection to render. */
-  target: BioTemplateEnvelope<unknown> | TemplateCollectionEnvelope
-  /** Optional allow-list of component names, for example ['WellPlate', 'DataFrame']. */
-  include?: string[]
-  /** Optional deny-list of component names. */
-  exclude?: string[]
-  /** Compact child component sizing. */
-  dense?: boolean
-  /** Prefer preview-safe props for editable components. */
-  readonly?: boolean
-  /** Show component/template labels above each rendered component. */
-  showHeaders?: boolean
-  /** Show binding descriptions in each header. */
-  showDescriptions?: boolean
-  /** Message shown when the target has no renderable bindings. */
-  emptyText?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  include: () => [],
-  exclude: () => [],
-  dense: false,
-  readonly: true,
-  showHeaders: true,
-  showDescriptions: true,
-  emptyText: 'No renderable biology template components.',
-})
-
-const componentBindings = computed(() => toBioTemplateComponentBindings(props.target))
-</script>
-
-<template>
-  <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>