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

package/src/components/BioTemplateRenderer.vue

@@ -0,0 +1,269 @@
+<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 {
+  toBioTemplateComponentProps,
+  type BioTemplateComponentPropsBinding,
+} 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'
+
+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
+}
+
+type RenderableBinding = BioTemplateComponentPropsBinding & {
+  componentImpl: Component
+  normalizedProps: Record<string, unknown>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  include: () => [],
+  exclude: () => [],
+  dense: false,
+  readonly: true,
+  showHeaders: true,
+  showDescriptions: true,
+  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
+  }
+}
+</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>
+</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/Breadcrumb.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 /** Renders a breadcrumb trail where ancestors are links or emit-based buttons and the last item is the current page. */
-import type { BreadcrumbItem } from '../types'
+import { computed } from 'vue'
+import type { BreadcrumbItem, BreadcrumbItemInput } from '../types'
+import { normalizeLabelItemInput } from '../utils/items'
 
 interface Props {
-  items: BreadcrumbItem[]
+  items: BreadcrumbItemInput[]
   separator?: string
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   separator: '/',
 })
 
@@ -15,6 +17,10 @@ const emit = defineEmits<{
   navigate: [item: BreadcrumbItem]
 }>()
 
+const normalizedItems = computed<BreadcrumbItem[]>(() =>
+  props.items.map(normalizeLabelItemInput)
+)
+
 function handleClick(item: BreadcrumbItem) {
   if (!item.href) {
     emit('navigate', item)
@@ -26,20 +32,20 @@ function handleClick(item: BreadcrumbItem) {
   <nav class="mint-breadcrumb" aria-label="Breadcrumb">
     <ol class="mint-breadcrumb__list">
       <li
-        v-for="(item, index) in items"
+        v-for="(item, index) in normalizedItems"
         :key="index"
         class="mint-breadcrumb__item"
       >
-        <slot name="item" :item="item" :index="index" :is-last="index === items.length - 1">
+        <slot name="item" :item="item" :index="index" :is-last="index === normalizedItems.length - 1">
           <a
-            v-if="item.href && index !== items.length - 1"
+            v-if="item.href && index !== normalizedItems.length - 1"
             :href="item.href"
             class="mint-breadcrumb__link"
           >
             {{ item.label }}
           </a>
           <button
-            v-else-if="index !== items.length - 1"
+            v-else-if="index !== normalizedItems.length - 1"
             class="mint-breadcrumb__link"
             @click="handleClick(item)"
           >
@@ -54,7 +60,7 @@ function handleClick(item: BreadcrumbItem) {
           </span>
         </slot>
         <span
-          v-if="index !== items.length - 1"
+          v-if="index !== normalizedItems.length - 1"
           class="mint-breadcrumb__separator"
           aria-hidden="true"
         >

package/src/components/CalendarGridPanel.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+/** Shared calendar grid panel used by date-oriented picker components. */
+import type { CalendarGridDay } from '../composables/useCalendarGrid'
+
+interface Props {
+  weekDays: readonly string[]
+  monthYear: string
+  days: CalendarGridDay[]
+  selectedDate?: Date | null
+  locale?: string
+  previousLabel?: string
+  nextLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  selectedDate: null,
+  locale: 'en-US',
+  previousLabel: 'Previous month',
+  nextLabel: 'Next month',
+})
+
+const emit = defineEmits<{
+  'previous-month': []
+  'next-month': []
+  select: [day: CalendarGridDay]
+}>()
+
+function isSameDay(date: Date, other: Date | null | undefined): boolean {
+  if (!other) return false
+  return date.toDateString() === other.toDateString()
+}
+
+function isToday(date: Date): boolean {
+  return isSameDay(date, new Date())
+}
+
+function dayAriaLabel(date: Date): string {
+  return date.toLocaleDateString(props.locale, {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+}
+</script>
+
+<template>
+  <div class="mint-calendar-grid-panel">
+    <div class="mint-date-picker__header">
+      <button
+        type="button"
+        class="mint-date-picker__nav-btn"
+        :aria-label="previousLabel"
+        @click="emit('previous-month')"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="m15 18-6-6 6-6" />
+        </svg>
+      </button>
+      <span class="mint-date-picker__month-year">{{ monthYear }}</span>
+      <button
+        type="button"
+        class="mint-date-picker__nav-btn"
+        :aria-label="nextLabel"
+        @click="emit('next-month')"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="m9 18 6-6-6-6" />
+        </svg>
+      </button>
+    </div>
+
+    <div class="mint-date-picker__weekdays">
+      <div
+        v-for="day in weekDays"
+        :key="day"
+        class="mint-date-picker__weekday"
+      >
+        {{ day }}
+      </div>
+    </div>
+
+    <div class="mint-date-picker__grid">
+      <button
+        v-for="(day, index) in days"
+        :key="index"
+        type="button"
+        :disabled="day.isDisabled"
+        :aria-label="dayAriaLabel(day.date)"
+        :aria-selected="isSameDay(day.date, selectedDate)"
+        :class="[
+          'mint-date-picker__day',
+          !day.isCurrentMonth ? 'mint-date-picker__day--other-month' : '',
+          day.isDisabled ? 'mint-date-picker__day--disabled' : '',
+          isSameDay(day.date, selectedDate) ? 'mint-date-picker__day--selected' : '',
+          isToday(day.date) && !isSameDay(day.date, selectedDate) ? 'mint-date-picker__day--today' : '',
+        ]"
+        @click="emit('select', day)"
+      >
+        {{ day.date.getDate() }}
+      </button>
+    </div>
+  </div>
+</template>

package/src/components/ConcentrationInput.vue

@@ -6,6 +6,7 @@ import {
   type ConcentrationValue,
   type ConcentrationUnit,
 } from '../composables/useConcentrationUnits'
+import UnitInput from './UnitInput.vue'
 
 interface Props {
   modelValue?: ConcentrationValue
@@ -52,6 +53,16 @@ const availableUnits = computed(() => {
   return filteredCategories.value.flatMap(cat => cat.units)
 })
 
+const unitOptions = computed(() =>
+  filteredCategories.value.flatMap(category =>
+    category.units.map(unit => ({
+      value: unit,
+      label: unit,
+      group: filteredCategories.value.length > 1 ? category.label : undefined,
+    }))
+  )
+)
+
 // Current value and unit
 const currentValue = computed(() => props.modelValue?.value)
 const currentUnit = computed(() => props.modelValue?.unit || availableUnits.value[0] || 'µM')
@@ -62,10 +73,7 @@ const conversionHint = computed(() => {
   return getConversionHint(props.modelValue)
 })
 
-function handleValueInput(event: Event) {
-  const target = event.target as HTMLInputElement
-  const value = target.value === '' ? undefined : Number(target.value)
-
+function handleValueUpdate(value: number | undefined) {
   if (value === undefined || isNaN(value)) {
     emit('update:modelValue', undefined)
     return
@@ -86,13 +94,10 @@ function handleValueInput(event: Event) {
   })
 }
 
-function handleUnitChange(event: Event) {
-  const target = event.target as HTMLSelectElement
-  const unit = target.value as ConcentrationUnit
-
+function handleUnitUpdate(unit: string) {
   emit('update:modelValue', {
     value: currentValue.value ?? 0,
-    unit,
+    unit: unit as ConcentrationUnit,
   })
 }
 
@@ -115,61 +120,19 @@ watch(availableUnits, (units) => {
       disabled ? 'mint-concentration-input--disabled' : '',
     ]"
   >
-    <div :class="['mint-concentration-input__controls', `mint-concentration-input__controls--${size}`]">
-      <input
-        type="number"
-        :value="currentValue"
-        :min="min"
-        :max="max"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :class="[
-          'mint-concentration-input__value',
-          `mint-concentration-input__value--${size}`,
-          disabled ? 'mint-concentration-input__value--disabled' : '',
-        ]"
-        aria-label="Concentration value"
-        @input="handleValueInput"
-      />
-
-      <div class="mint-concentration-input__unit">
-        <select
-          :value="currentUnit"
-          :disabled="disabled"
-          :class="[
-            'mint-concentration-input__unit-select',
-            `mint-concentration-input__unit-select--${size}`,
-          ]"
-          aria-label="Concentration unit"
-          @change="handleUnitChange"
-        >
-          <template v-for="category in filteredCategories" :key="category.label">
-            <optgroup
-              v-if="filteredCategories.length > 1"
-              :label="category.label"
-              class="mint-concentration-input__unit-group"
-            >
-              <option
-                v-for="unit in category.units"
-                :key="unit"
-                :value="unit"
-              >
-                {{ unit }}
-              </option>
-            </optgroup>
-            <template v-else>
-              <option
-                v-for="unit in category.units"
-                :key="unit"
-                :value="unit"
-              >
-                {{ unit }}
-              </option>
-            </template>
-          </template>
-        </select>
-      </div>
-    </div>
+    <UnitInput
+      :model-value="currentValue"
+      :unit="currentUnit"
+      :units="unitOptions"
+      :min="min"
+      :max="max"
+      :disabled="disabled"
+      :error="error"
+      :size="size"
+      :placeholder="placeholder"
+      @update:model-value="handleValueUpdate"
+      @update:unit="handleUnitUpdate"
+    />
 
     <div
       v-if="showConversion && conversionHint"