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

package/src/components/BioTemplatePresetWorkspaceView.vue

@@ -1,408 +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 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
-  /** 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. */
-  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',
-})
-
-const externalValues = computed(() => props.modelValue ?? props.values)
-const resolvedWorkspaceOptions = computed<UseBioTemplatePresetWorkspaceOptions>(() => {
-  if (props.initialValues === undefined && externalValues.value === undefined) return props.workspaceOptions
-
-  return {
-    ...props.workspaceOptions,
-    initialValues: {
-      ...(props.workspaceOptions.initialValues ?? {}),
-      ...(props.initialValues ?? {}),
-      ...(externalValues.value ?? {}),
-    },
-  }
-})
-
-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>

package/src/components/Breadcrumb.story.vue

@@ -1,106 +0,0 @@
-<script setup lang="ts">
-import Breadcrumb from './Breadcrumb.vue'
-import type { BreadcrumbItem } from '../types'
-
-const simpleItems: BreadcrumbItem[] = [
-  { label: 'Home', href: '#' },
-  { label: 'Experiments', href: '#' },
-  { label: 'EXP-2024-001' },
-]
-
-const deepItems: BreadcrumbItem[] = [
-  { label: 'Home', href: '#' },
-  { label: 'Projects', href: '#' },
-  { label: 'Oncology Screen', href: '#' },
-  { label: 'Experiment Batch 3', href: '#' },
-  { label: 'Plate PLT-096-A1' },
-]
-
-const routerItems: BreadcrumbItem[] = [
-  { label: 'Dashboard', to: '/dashboard' },
-  { label: 'Analysis', to: '/analysis' },
-  { label: 'Results' },
-]
-</script>
-
-<template>
-  <Story title="Layout/Breadcrumb">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem;">
-          <Breadcrumb
-            :items="simpleItems"
-            :separator="state.separator"
-          />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstText v-model="state.separator" title="Separator" />
-      </template>
-    </Variant>
-
-    <Variant title="Simple Path">
-      <div style="padding: 2rem;">
-        <Breadcrumb :items="simpleItems" />
-      </div>
-    </Variant>
-
-    <Variant title="Deep Path">
-      <div style="padding: 2rem;">
-        <Breadcrumb :items="deepItems" />
-      </div>
-    </Variant>
-
-    <Variant title="Custom Separator">
-      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem;">
-        <div>
-          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
-            Chevron (default /)
-          </p>
-          <Breadcrumb :items="simpleItems" separator="/" />
-        </div>
-        <div>
-          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
-            Arrow
-          </p>
-          <Breadcrumb :items="simpleItems" separator=">" />
-        </div>
-        <div>
-          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
-            Dot
-          </p>
-          <Breadcrumb :items="simpleItems" separator="." />
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Router Links">
-      <div style="padding: 2rem;">
-        <Breadcrumb
-          :items="routerItems"
-          @navigate="(item) => console.log('Navigate to:', item)"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Single Item">
-      <div style="padding: 2rem;">
-        <Breadcrumb :items="[{ label: 'Home' }]" />
-      </div>
-    </Variant>
-
-    <Variant title="Chevron Trail (default)">
-      <div style="padding: 2rem; max-width: 640px;">
-        <Breadcrumb
-          :items="[
-            { label: 'Projects', href: '#' },
-            { label: 'Oncology screens', href: '#' },
-            { label: 'Plate PLT-001', href: '#' },
-            { label: 'Dose-response analysis' },
-          ]"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>