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

package/src/components/ColorSlider.story.vue

@@ -1,120 +0,0 @@
-<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

@@ -1,164 +0,0 @@
-<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

@@ -1,87 +0,0 @@
-<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

@@ -1,324 +0,0 @@
-<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>