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

package/src/components/ColorSlider.story.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import ColorSlider from './ColorSlider.vue'
+
+const sizes = ['sm', 'md', 'lg'] as const
+</script>
+
+<template>
+  <Story title="Base Inputs/ColorSlider">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+          <ColorSlider
+            v-model="state.value"
+            :min="state.min"
+            :max="state.max"
+            :step="state.step"
+            :disabled="state.disabled"
+            :show-value="state.showValue"
+            :show-labels="state.showLabels"
+            :min-label="state.minLabel || undefined"
+            :max-label="state.maxLabel || undefined"
+            :size="state.size"
+          />
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+            Value: <code>{{ state.value }}</code>
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSlider v-model="state.value" title="Value" :min="0" :max="100" />
+        <HstSlider v-model="state.min" title="Min" :min="0" :max="50" />
+        <HstSlider v-model="state.max" title="Max" :min="50" :max="200" />
+        <HstSlider v-model="state.step" title="Step" :min="1" :max="25" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.showValue" title="Show Value" />
+        <HstCheckbox v-model="state.showLabels" title="Show Labels" />
+        <HstText v-model="state.minLabel" title="Min Label" />
+        <HstText v-model="state.maxLabel" title="Max Label" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
+
+    <Variant title="Sizes">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem;">
+        <div v-for="size in sizes" :key="size">
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ size }}
+          </p>
+          <ColorSlider :model-value="50" :size="size" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="With Labels">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem;">
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Default labels (min/max values)</p>
+          <ColorSlider :model-value="30" show-labels />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Custom labels</p>
+          <ColorSlider :model-value="60" show-labels min-label="Low" max-label="High" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Custom Color Stops">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem;">
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Blue to Red (cold to hot)</p>
+          <ColorSlider
+            :model-value="50"
+            :color-stops="[
+              { value: 0, color: '#3b82f6' },
+              { value: 50, color: '#a855f7' },
+              { value: 100, color: '#ef4444' },
+            ]"
+            show-labels
+            min-label="Cold"
+            max-label="Hot"
+          />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Single color intensity</p>
+          <ColorSlider
+            :model-value="70"
+            :color-stops="[
+              { value: 0, color: '#dbeafe' },
+              { value: 100, color: '#1d4ed8' },
+            ]"
+          />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Custom Thresholds">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">
+          Green below 25%, yellow below 75%, red above
+        </p>
+        <ColorSlider
+          :model-value="50"
+          :thresholds="[25, 75]"
+          show-labels
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <ColorSlider :model-value="65" disabled />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/ColorSlider.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+/** Range slider with a gradient color track and color-coded value badge for threshold visualization. */
+import { computed } from 'vue'
+
+interface ColorStop {
+  value: number
+  color: string
+}
+
+interface Props {
+  modelValue?: number
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  showValue?: boolean
+  showLabels?: boolean
+  minLabel?: string
+  maxLabel?: string
+  size?: 'sm' | 'md' | 'lg'
+  /** Color stops for the gradient. Default: green (low) → yellow (mid) → red (high) */
+  colorStops?: ColorStop[]
+  /** Thresholds for value badge color. Default: green ≤ threshold1, yellow ≤ threshold2, red above */
+  thresholds?: [number, number]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  min: 0,
+  max: 100,
+  step: 1,
+  disabled: false,
+  showValue: true,
+  showLabels: false,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+}>()
+
+// Default color stops: green at start, yellow at 30%, red at end
+const defaultColorStops: ColorStop[] = [
+  { value: 0, color: '#22c55e' },
+  { value: 30, color: '#eab308' },
+  { value: 100, color: '#ef4444' },
+]
+
+// Default thresholds: green ≤ 10%, yellow ≤ 30%, red above
+const defaultThresholds: [number, number] = [10, 30]
+
+const colorStops = computed(() => props.colorStops ?? defaultColorStops)
+const thresholds = computed(() => props.thresholds ?? defaultThresholds)
+
+const sizeConfig = computed(() => {
+  switch (props.size) {
+    case 'sm': return { thumb: 16, badgeSize: '24px', fontSize: '11px', labelFontSize: '0.625rem' }
+    case 'lg': return { thumb: 22, badgeSize: '32px', fontSize: '14px', labelFontSize: '0.75rem' }
+    default: return { thumb: 18, badgeSize: '28px', fontSize: '12px', labelFontSize: '0.625rem' }
+  }
+})
+
+const currentValue = computed(() => props.modelValue ?? props.min)
+
+const percentage = computed(() => {
+  const range = props.max - props.min
+  if (range === 0) return 0
+  return ((currentValue.value - props.min) / range) * 100
+})
+
+// Generate CSS gradient from color stops
+const gradientStyle = computed(() => {
+  const stops = colorStops.value
+    .map(stop => `${stop.color} ${stop.value}%`)
+    .join(', ')
+  return `linear-gradient(to right, ${stops})`
+})
+
+// Value badge style based on thresholds
+const valueBadgeStyle = computed(() => {
+  const pct = percentage.value
+  const [t1, t2] = thresholds.value
+
+  if (pct <= t1) {
+    return {
+      backgroundColor: 'rgba(34, 197, 94, 0.15)',
+      color: '#22c55e',
+      border: '1px solid rgba(34, 197, 94, 0.3)'
+    }
+  }
+  if (pct <= t2) {
+    return {
+      backgroundColor: 'rgba(234, 179, 8, 0.15)',
+      color: '#eab308',
+      border: '1px solid rgba(234, 179, 8, 0.3)'
+    }
+  }
+  return {
+    backgroundColor: 'rgba(239, 68, 68, 0.15)',
+    color: '#ef4444',
+    border: '1px solid rgba(239, 68, 68, 0.3)'
+  }
+})
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', Number(target.value))
+}
+</script>
+
+<template>
+  <div :class="['mint-color-slider', { 'mint-color-slider--disabled': disabled }]">
+    <div class="mint-color-slider__row">
+      <!-- Slider track with gradient -->
+      <div class="mint-color-slider__track">
+        <input
+          type="range"
+          :value="currentValue"
+          :min="min"
+          :max="max"
+          :step="step"
+          :disabled="disabled"
+          :aria-label="`Value: ${currentValue}`"
+          :aria-valuemin="min"
+          :aria-valuemax="max"
+          :aria-valuenow="currentValue"
+          class="color-slider mint-color-slider__input"
+          :style="{
+            '--slider-gradient': gradientStyle,
+            '--thumb-size': `${sizeConfig.thumb}px`,
+          }"
+          @input="handleInput"
+        />
+      </div>
+
+      <!-- Value badge -->
+      <div
+        v-if="showValue"
+        class="mint-color-slider__badge"
+        :style="{
+          ...valueBadgeStyle,
+          minWidth: sizeConfig.badgeSize,
+          height: sizeConfig.badgeSize,
+          fontSize: sizeConfig.fontSize,
+        }"
+      >
+        {{ currentValue }}
+      </div>
+    </div>
+
+    <!-- Min/Max labels -->
+    <div
+      v-if="showLabels"
+      class="mint-color-slider__labels"
+      :style="{ fontSize: sizeConfig.labelFontSize }"
+    >
+      <span>{{ minLabel ?? min }}</span>
+      <span>{{ maxLabel ?? max }}</span>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/color-slider.css';
+</style>

package/src/components/ComponentBindingRenderer.story.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import ComponentBindingRenderer from './ComponentBindingRenderer.vue'
+import {
+  defineDoseDesignControlModel,
+  useControlWorkspace,
+} from '../composables/useControlSchema'
+import {
+  createLcmsBatchCollection,
+  toBioTemplateComponentBindings,
+} from '../templates'
+
+const model = defineDoseDesignControlModel({
+  selectedWells: ['A1', 'A2', 'B1'],
+  plateFormat: 96,
+  includeMolecularWeight: true,
+})
+const workspace = useControlWorkspace(model)
+const lcmsCollection = createLcmsBatchCollection({
+  samples: [
+    { sampleId: 'blank-1', name: 'Blank', group: 'Blank' },
+    { sampleId: 'qc-pool', name: 'Pooled QC', group: 'QC' },
+    { sampleId: 's001', name: 'Patient 001', group: 'Case' },
+    { sampleId: 's002', name: 'Patient 002', group: 'Control' },
+  ],
+  features: ['Glucose', 'Lactate', 'Citrate'],
+  instrument: 'Orbitrap LC-MS',
+  method: 'HILIC negative',
+  includeQc: true,
+})
+
+const state = ref({
+  dense: false,
+  readonly: true,
+  showHeaders: true,
+  showDescriptions: true,
+  layout: 'grid' as 'grid' | 'stack',
+})
+
+const bindings = computed(() => workspace.componentBindings.value)
+const lcmsBindings = computed(() => toBioTemplateComponentBindings(lcmsCollection))
+</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>
+
+    <Variant title="LC-MS Batch Bindings">
+      <div style="padding: 2rem; min-height: 640px; background: var(--bg-secondary, #f8fafc);">
+        <ComponentBindingRenderer
+          :bindings="lcmsBindings"
+          :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>

package/src/components/ComponentBindingRenderer.vue

@@ -0,0 +1,324 @@
+<script setup lang="ts">
+/**
+ * Render generated SDK component bindings such as WellPlate, DoseCalculator, DataFrame, and PlateMapEditor.
+ *
+ * @example Recommended
+ * ```vue
+ * <ComponentBindingRenderer :bindings="workspace.componentBindings.value" />
+ * ```
+ */
+import { computed, type Component } from 'vue'
+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 ScheduleCalendar from './ScheduleCalendar.vue'
+import WellPlate from './WellPlate.vue'
+
+export interface ComponentBindingRendererBinding {
+  id?: string
+  component: string
+  props?: Record<string, unknown> | readonly string[]
+  propsObject?: Record<string, unknown>
+  description?: string
+  template_id?: string
+}
+
+type ComponentBindingRendererLayout = 'grid' | 'stack'
+
+interface Props {
+  /** Single generated SDK component binding to render. */
+  binding?: ComponentBindingRendererBinding
+  /** Generated SDK component bindings to render. */
+  bindings?: ComponentBindingRendererBinding[]
+  /** 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
+  /** Grid or vertical stack layout. */
+  layout?: ComponentBindingRendererLayout
+  /** Message shown when no binding can be rendered. */
+  emptyText?: string
+}
+
+type RenderableBinding = ComponentBindingRendererBinding & {
+  id: string
+  componentImpl: Component
+  normalizedProps: Record<string, unknown>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  binding: undefined,
+  bindings: () => [],
+  include: () => [],
+  exclude: () => [],
+  dense: false,
+  readonly: true,
+  showHeaders: true,
+  showDescriptions: true,
+  layout: 'grid',
+  emptyText: 'No renderable SDK component bindings.',
+})
+
+const componentRegistry: Record<string, Component> = {
+  DataFrame,
+  DoseCalculator,
+  ExperimentTimeline,
+  PlateMapEditor,
+  ReagentList,
+  SampleSelector,
+  ScheduleCalendar,
+  WellPlate,
+}
+
+const inputBindings = computed<ComponentBindingRendererBinding[]>(() => [
+  ...(props.binding ? [props.binding] : []),
+  ...props.bindings,
+])
+
+const renderableBindings = computed<RenderableBinding[]>(() =>
+  inputBindings.value
+    .filter(binding => isIncluded(binding.component))
+    .map((binding, index) => {
+      const componentImpl = componentRegistry[binding.component]
+      if (!componentImpl) return null
+      return {
+        ...binding,
+        id: binding.id ?? `${binding.component}-${index + 1}`,
+        componentImpl,
+        normalizedProps: normalizeProps(binding),
+      }
+    })
+    .filter((binding): binding is RenderableBinding => binding !== null)
+)
+
+const rendererClasses = computed(() => [
+  'mint-component-binding-renderer',
+  `mint-component-binding-renderer--${props.layout}`,
+  props.dense ? 'mint-component-binding-renderer--dense' : '',
+])
+
+function isIncluded(componentName: string): boolean {
+  if (props.include.length > 0 && !props.include.includes(componentName)) return false
+  return !props.exclude.includes(componentName)
+}
+
+function baseProps(binding: ComponentBindingRendererBinding): Record<string, unknown> {
+  if (binding.propsObject) return { ...binding.propsObject }
+  if (isRecord(binding.props)) return { ...binding.props }
+  return {}
+}
+
+function normalizeProps(binding: ComponentBindingRendererBinding): Record<string, unknown> {
+  const base = baseProps(binding)
+
+  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),
+      }
+    case 'ScheduleCalendar':
+      return {
+        ...base,
+        readonly: props.readonly || Boolean(base.readonly),
+        showNavigation: props.dense ? false : (base.showNavigation ?? true),
+        showViewToggle: props.dense ? false : (base.showViewToggle ?? true),
+      }
+    default:
+      return base
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+</script>
+
+<template>
+  <div :class="rendererClasses">
+    <section
+      v-for="renderableBinding in renderableBindings"
+      :key="renderableBinding.id"
+      class="mint-component-binding-renderer__item"
+      :data-component-binding-id="renderableBinding.id"
+      :data-template-id="renderableBinding.template_id"
+      :data-template-component="renderableBinding.component"
+    >
+      <header
+        v-if="showHeaders"
+        class="mint-component-binding-renderer__header"
+      >
+        <div class="mint-component-binding-renderer__title-group">
+          <p class="mint-component-binding-renderer__component">
+            {{ renderableBinding.component }}
+          </p>
+          <p
+            v-if="renderableBinding.template_id || renderableBinding.id"
+            class="mint-component-binding-renderer__source"
+          >
+            {{ renderableBinding.template_id ?? renderableBinding.id }}
+          </p>
+        </div>
+        <p
+          v-if="showDescriptions && renderableBinding.description"
+          class="mint-component-binding-renderer__description"
+        >
+          {{ renderableBinding.description }}
+        </p>
+      </header>
+
+      <div class="mint-component-binding-renderer__body">
+        <component
+          :is="renderableBinding.componentImpl"
+          v-bind="renderableBinding.normalizedProps"
+        />
+      </div>
+    </section>
+
+    <p
+      v-if="renderableBindings.length === 0"
+      class="mint-component-binding-renderer__empty"
+    >
+      {{ emptyText }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.mint-component-binding-renderer {
+  display: grid;
+  gap: 1rem;
+  min-width: 0;
+}
+
+.mint-component-binding-renderer--grid {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
+}
+
+.mint-component-binding-renderer--stack {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.mint-component-binding-renderer--dense {
+  gap: 0.75rem;
+}
+
+.mint-component-binding-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-component-binding-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-component-binding-renderer__title-group {
+  min-width: 0;
+}
+
+.mint-component-binding-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-component-binding-renderer__source,
+.mint-component-binding-renderer__description,
+.mint-component-binding-renderer__empty {
+  margin: 0;
+  color: var(--text-secondary, #475569);
+  font-size: 0.75rem;
+  line-height: 1.4;
+}
+
+.mint-component-binding-renderer__description {
+  max-width: 24rem;
+  text-align: right;
+}
+
+.mint-component-binding-renderer__body {
+  min-width: 0;
+  padding: 1rem;
+}
+
+.mint-component-binding-renderer--dense .mint-component-binding-renderer__header,
+.mint-component-binding-renderer--dense .mint-component-binding-renderer__body {
+  padding: 0.75rem;
+}
+
+.mint-component-binding-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-component-binding-renderer__header {
+    display: block;
+  }
+
+  .mint-component-binding-renderer__description {
+    max-width: none;
+    margin-top: 0.25rem;
+    text-align: left;
+  }
+}
+</style>