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

package/src/components/FormField.story.vue

@@ -1,132 +0,0 @@
-<script setup lang="ts">
-import FormField from './FormField.vue'
-import BaseInput from './BaseInput.vue'
-import BaseTextarea from './BaseTextarea.vue'
-</script>
-
-<template>
-  <Story title="Layout/FormField">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-          <FormField
-            :label="state.label"
-            :error="state.showError ? state.error : undefined"
-            :hint="state.showHint ? state.hint : undefined"
-            :required="state.required"
-            :html-for="state.htmlFor"
-          >
-            <input
-              :id="state.htmlFor"
-              type="text"
-              placeholder="Enter value..."
-              style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-            />
-          </FormField>
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstText v-model="state.label" title="Label" />
-        <HstCheckbox v-model="state.required" title="Required" />
-        <HstCheckbox v-model="state.showError" title="Show Error" />
-        <HstText v-model="state.error" title="Error Message" />
-        <HstCheckbox v-model="state.showHint" title="Show Hint" />
-        <HstText v-model="state.hint" title="Hint Text" />
-        <HstText v-model="state.htmlFor" title="HTML For" />
-      </template>
-    </Variant>
-
-    <Variant title="With Label">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <FormField label="Sample Name" html-for="sample-name">
-          <input
-            id="sample-name"
-            type="text"
-            placeholder="e.g., SAMPLE-001"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
-        </FormField>
-      </div>
-    </Variant>
-
-    <Variant title="Required Field">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <FormField label="Experiment ID" :required="true" html-for="exp-id">
-          <input
-            id="exp-id"
-            type="text"
-            placeholder="Required field"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
-        </FormField>
-      </div>
-    </Variant>
-
-    <Variant title="With Hint">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <FormField label="Concentration" hint="Enter value in micromolar (uM)" html-for="conc">
-          <input
-            id="conc"
-            type="number"
-            placeholder="0.00"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
-        </FormField>
-      </div>
-    </Variant>
-
-    <Variant title="With Error">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <FormField label="Plate Barcode" error="Barcode format is invalid. Expected: PLT-XXXX-XXXX" html-for="barcode">
-          <input
-            id="barcode"
-            type="text"
-            value="invalid"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #ef4444; border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
-        </FormField>
-      </div>
-    </Variant>
-
-    <Variant title="Form Example">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
-        <FormField label="Experiment Name" :required="true" html-for="form-name">
-          <input
-            id="form-name"
-            type="text"
-            placeholder="Enter experiment name"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
-        </FormField>
-        <FormField label="Description" hint="Optional description for this experiment" html-for="form-desc">
-          <textarea
-            id="form-desc"
-            placeholder="Describe the experiment..."
-            rows="3"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); resize: vertical; box-sizing: border-box;"
-          />
-        </FormField>
-        <FormField label="Plate Count" :required="true" error="Must be between 1 and 50" html-for="form-count">
-          <input
-            id="form-count"
-            type="number"
-            value="100"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #ef4444; border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
-        </FormField>
-      </div>
-    </Variant>
-
-    <Variant title="With required / optional badges">
-      <div style="padding: 2rem; max-width: 420px; display: flex; flex-direction: column; gap: 1rem;">
-        <FormField label="Experiment name" required>
-          <BaseInput model-value="Dose-response screen · Oncology" />
-        </FormField>
-        <FormField label="Notes" :show-optional="true" hint="Add any context future you will thank present you for.">
-          <BaseTextarea model-value="" placeholder="Anything worth remembering…" />
-        </FormField>
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/FormField.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-/** Wraps a form control with a label, optional hint text, and validation error display. */
-import { computed } from 'vue'
-
-interface Props {
-  label?: string
-  error?: string
-  hint?: string
-  required?: boolean
-  showOptional?: boolean
-  htmlFor?: string
-  fieldId?: string
-}
-
-const props = defineProps<Props>()
-
-const errorId = computed(() =>
-  props.error && props.fieldId ? `${props.fieldId}-error` : undefined
-)
-
-const hintId = computed(() =>
-  !props.error && props.hint && props.fieldId ? `${props.fieldId}-hint` : undefined
-)
-
-const describedBy = computed(() => errorId.value ?? hintId.value)
-</script>
-
-<template>
-  <div class="mint-form-field">
-    <div v-if="label" class="mint-form-field__label-row">
-      <label
-        :for="htmlFor"
-        class="mint-form-field__label"
-      >
-        {{ label }}
-        <span v-if="required" class="mint-form-field__required" aria-hidden="true">*</span>
-      </label>
-      <span
-        v-if="!required && showOptional"
-        class="mint-form-field__optional"
-      >
-        optional
-      </span>
-    </div>
-
-    <slot :described-by="describedBy" />
-
-    <p v-if="error" :id="errorId" class="mint-form-field__error" role="alert">
-      {{ error }}
-    </p>
-    <p v-else-if="hint" :id="hintId" class="mint-form-field__hint">
-      {{ hint }}
-    </p>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/form-field.css';
-</style>

package/src/components/FormulaInput.story.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import FormulaInput from './FormulaInput.vue'
-
-const formula = ref('')
-const sizes: ('sm' | 'md' | 'lg')[] = ['sm', 'md', 'lg']
-</script>
-
-<template>
-  <Story title="Scientific/FormulaInput">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-          <FormulaInput
-            v-model="formula"
-            :show-preview="state.showPreview"
-            :show-m-w="state.showMW"
-            :placeholder="state.placeholder"
-            :error="state.error"
-            :disabled="state.disabled"
-            :size="state.size"
-          />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstCheckbox v-model="state.showPreview" title="Show Preview" />
-        <HstCheckbox v-model="state.showMW" title="Show Molecular Weight" />
-        <HstText v-model="state.placeholder" title="Placeholder" />
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="sizes.map(s => ({ label: s, value: s }))"
-        />
-        <HstCheckbox v-model="state.error" title="Error" />
-        <HstCheckbox v-model="state.disabled" title="Disabled" />
-      </template>
-    </Variant>
-
-    <Variant title="Pre-filled Formulas">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; 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;">Water</p>
-          <FormulaInput model-value="H2O" />
-        </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;">Glucose</p>
-          <FormulaInput model-value="C6H12O6" />
-        </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;">Calcium Hydroxide</p>
-          <FormulaInput model-value="Ca(OH)2" />
-        </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;">Copper Sulfate Pentahydrate</p>
-          <FormulaInput model-value="CuSO4.5H2O" />
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="All Sizes">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
-        <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>
-          <FormulaInput model-value="NaCl" :size="size" />
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Without Preview">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <FormulaInput model-value="H2SO4" :show-preview="false" />
-      </div>
-    </Variant>
-
-    <Variant title="Without Molecular Weight">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <FormulaInput model-value="CH3COOH" :show-m-w="false" />
-      </div>
-    </Variant>
-
-    <Variant title="Error State">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <FormulaInput model-value="H2O" error />
-      </div>
-    </Variant>
-
-    <Variant title="Disabled State">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <FormulaInput model-value="NaCl" disabled />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/FormulaInput.vue

@@ -1,125 +0,0 @@
-<script setup lang="ts">
-/** Text input for chemical formulas (e.g. Ca(OH)₂) with live rendered preview and calculated molecular weight display. */
-import { useChemicalFormula, type FormulaPart } from '../composables/useChemicalFormula'
-
-interface Props {
-  modelValue?: string
-  showPreview?: boolean
-  showMW?: boolean
-  placeholder?: string
-  error?: boolean
-  disabled?: boolean
-  size?: 'sm' | 'md' | 'lg'
-}
-
-withDefaults(defineProps<Props>(), {
-  modelValue: '',
-  showPreview: true,
-  showMW: true,
-  placeholder: 'e.g. Ca(OH)2',
-  error: false,
-  disabled: false,
-  size: 'md',
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-  'mw': [mw: number | null]
-}>()
-
-const { parseFormula, calculateMW, renderFormulaParts } = useChemicalFormula()
-
-function getParseResult(value: string) {
-  if (!value) return null
-  return parseFormula(value)
-}
-
-function getMW(value: string): number | null {
-  const result = getParseResult(value)
-  if (!result || !result.valid) return null
-  return calculateMW(result.elements)
-}
-
-function getParts(value: string): FormulaPart[] {
-  if (!value) return []
-  return renderFormulaParts(value)
-}
-
-function getError(value: string): string | null {
-  if (!value) return null
-  const result = getParseResult(value)
-  if (!result) return null
-  if (!result.valid) return result.error || 'Invalid formula'
-  return null
-}
-
-function formatMW(value: string): string {
-  const mw = getMW(value)
-  if (mw === null) return ''
-  return `${mw.toFixed(2)} g/mol`
-}
-
-function handleInput(event: Event) {
-  const target = event.target as HTMLInputElement
-  emit('update:modelValue', target.value)
-  emit('mw', getMW(target.value))
-}
-</script>
-
-<template>
-  <div
-    :class="[
-      'mint-formula-input',
-      error ? 'mint-formula-input--error' : '',
-      disabled ? 'mint-formula-input--disabled' : '',
-    ]"
-  >
-    <div class="mint-formula-input__field">
-      <input
-        type="text"
-        :value="modelValue"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :class="[
-          'mint-formula-input__input',
-          `mint-formula-input__input--${size}`,
-        ]"
-        aria-label="Chemical formula"
-        @input="handleInput"
-      />
-
-      <div
-        v-if="(showPreview && modelValue) || (showMW && modelValue && !getError(modelValue) && getMW(modelValue) !== null)"
-        class="mint-formula-input__preview"
-      >
-        <span v-if="showPreview && modelValue" class="mint-formula-input__preview-formula">
-          <template v-for="(part, i) in getParts(modelValue)" :key="i">
-            <span v-if="part.type === 'element'">{{ part.text }}</span>
-            <span v-else-if="part.type === 'subscript'" style="vertical-align: sub; font-size: 0.75em; line-height: 0;">{{ part.text }}</span>
-            <span v-else-if="part.type === 'superscript'" style="vertical-align: super; font-size: 0.75em; line-height: 0;">{{ part.text }}</span>
-            <span v-else-if="part.type === 'paren'" style="color: var(--text-secondary);">{{ part.text }}</span>
-            <span v-else-if="part.type === 'dot'" style="margin: 0 0.125em; color: var(--text-muted);">{{ part.text }}</span>
-            <span v-else-if="part.type === 'charge'" style="vertical-align: super; font-size: 0.75em; line-height: 0;">{{ part.text }}</span>
-          </template>
-        </span>
-        <span
-          v-if="showMW && modelValue && !getError(modelValue) && getMW(modelValue) !== null"
-          class="mint-formula-input__mw"
-        >
-          {{ formatMW(modelValue) }}
-        </span>
-      </div>
-    </div>
-
-    <div
-      v-if="modelValue && getError(modelValue)"
-      class="mint-formula-input__error-text"
-    >
-      {{ getError(modelValue) }}
-    </div>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/formula-input.css';
-</style>

package/src/components/GeneratedPathInput.vue

@@ -1,218 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-
-import { createGeneratedAnalysisTransport } from '../composables/useGeneratedAnalysis'
-import {
-  getInjectedPlatformContext,
-  resolveCurrentExperimentId,
-} from '../composables/platformContextHelpers'
-import type { AnalysisArtifactDetail } from '../types/analysisArtifactTypes'
-import type { PluginJobPathInput } from '../types/generated-ui'
-import AlertBox from './AlertBox.vue'
-import ArtifactSelectorModal from './ArtifactSelectorModal.vue'
-import BaseButton from './BaseButton.vue'
-import FileUploader from './FileUploader.vue'
-
-interface ArtifactFileReference {
-  key: string
-  plugin_id?: string
-  experiment_id?: number
-  filename?: string
-  content_type?: string
-}
-
-const props = defineProps<{
-  modelValue?: PluginJobPathInput | PluginJobPathInput[] | null
-  disabled?: boolean
-  multiple?: boolean
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: PluginJobPathInput | PluginJobPathInput[] | null]
-}>()
-
-const mode = ref<'file' | 'folder'>('file')
-const artifactOpen = ref(false)
-const artifactLoading = ref(false)
-const artifactError = ref('')
-const platform = getInjectedPlatformContext()
-const experimentId = resolveCurrentExperimentId(platform)
-const canSelectArtifact = computed(() => Boolean(platform?.isIntegrated && experimentId))
-const transport = createGeneratedAnalysisTransport()
-
-function selectMode(nextMode: 'file' | 'folder'): void {
-  mode.value = nextMode
-  emit('update:modelValue', null)
-}
-
-function selectFiles(
-  files: File[],
-  rootName?: string,
-  relativePaths?: string[],
-): void {
-  const paths = relativePaths ?? files.map(file => file.name)
-  const selections: PluginJobPathInput[] = props.multiple && !rootName
-    ? files.map((file, index) => ({
-        kind: 'path',
-        files: [file],
-        relativePaths: [paths[index] ?? file.name],
-      }))
-    : [{
-        kind: 'path',
-        files,
-        relativePaths: paths,
-        ...(rootName ? { rootName } : {}),
-      }]
-  if (props.multiple) {
-    const existing = Array.isArray(props.modelValue) ? props.modelValue : []
-    emit('update:modelValue', [...existing, ...selections])
-  } else {
-    emit('update:modelValue', selections[0] ?? null)
-  }
-}
-
-function removeFiles(files: File[]): void {
-  const removed = new Set(files)
-  const current = Array.isArray(props.modelValue)
-    ? props.modelValue
-    : props.modelValue
-      ? [props.modelValue]
-      : []
-  const remaining = current.flatMap((selection) => {
-    const indexes = selection.files
-      .map((file, index) => removed.has(file) ? -1 : index)
-      .filter(index => index >= 0)
-    if (!indexes.length) return []
-    return [{
-      ...selection,
-      files: indexes.map(index => selection.files[index]!),
-      relativePaths: indexes.map(index => selection.relativePaths[index]!),
-    }]
-  })
-  emit(
-    'update:modelValue',
-    props.multiple ? remaining : remaining[0] ?? null,
-  )
-}
-
-async function selectArtifact(detail: AnalysisArtifactDetail): Promise<void> {
-  artifactLoading.value = true
-  artifactError.value = ''
-  try {
-    const reference = artifactFileReference(detail)
-    const resolvedExperimentId = reference.experiment_id ?? detail.experiment_id
-    const pluginId = reference.plugin_id ?? detail.plugin_id
-    const baseUrl = (platform?.platformApiUrl ?? '/api').replace(/\/$/, '')
-    const objectPath = reference.key.split('/').map(encodeURIComponent).join('/')
-    const url = `${baseUrl}/experiments/${resolvedExperimentId}/objects/${objectPath}`
-      + `?plugin_id=${encodeURIComponent(pluginId)}&format=raw`
-    const response = await transport(url, { method: 'GET' })
-    if (!response.ok) throw new Error(`Artifact download failed (${response.status})`)
-    const resultFilename = String(detail.result.filename ?? '')
-    const keySegments = reference.key.split('/')
-    const filename = reference.filename
-      || resultFilename
-      || keySegments[keySegments.length - 1]
-      || 'artifact.bin'
-    const contentType = reference.content_type
-      ?? response.headers.get('Content-Type')
-      ?? 'application/octet-stream'
-    const file = new File([await response.blob()], filename, { type: contentType })
-    selectFiles([file], undefined, [filename])
-  } catch (cause) {
-    artifactError.value = cause instanceof Error ? cause.message : 'Failed to load artifact'
-  } finally {
-    artifactLoading.value = false
-  }
-}
-
-function artifactFileReference(detail: AnalysisArtifactDetail): ArtifactFileReference {
-  if (detail.result.schema_version !== 'mint.analysis_file.v1') {
-    throw new Error('Only file-backed analysis artifacts can be used as a path')
-  }
-  const reference = detail.result.file
-  if (!reference || typeof reference !== 'object' || !('key' in reference)) {
-    throw new Error('The selected artifact has no file reference')
-  }
-  const candidate = reference as Record<string, unknown>
-  if (typeof candidate.key !== 'string' || !candidate.key) {
-    throw new Error('The selected artifact has no object key')
-  }
-  return {
-    key: candidate.key,
-    ...(typeof candidate.plugin_id === 'string' ? { plugin_id: candidate.plugin_id } : {}),
-    ...(typeof candidate.experiment_id === 'number'
-      ? { experiment_id: candidate.experiment_id }
-      : {}),
-    ...(typeof candidate.filename === 'string' ? { filename: candidate.filename } : {}),
-    ...(typeof candidate.content_type === 'string'
-      ? { content_type: candidate.content_type }
-      : {}),
-  }
-}
-</script>
-
-<template>
-  <div class="mint-generated-path-input">
-    <div class="mint-generated-path-input__modes" role="group" aria-label="Path type">
-      <BaseButton
-        size="sm"
-        :variant="mode === 'file' ? 'primary' : 'secondary'"
-        :disabled="disabled"
-        @click="selectMode('file')"
-      >
-        File
-      </BaseButton>
-      <BaseButton
-        size="sm"
-        :variant="mode === 'folder' ? 'primary' : 'secondary'"
-        :disabled="disabled"
-        @click="selectMode('folder')"
-      >
-        Folder
-      </BaseButton>
-      <BaseButton
-        v-if="canSelectArtifact"
-        size="sm"
-        variant="secondary"
-        :disabled="disabled"
-        :loading="artifactLoading"
-        @click="artifactOpen = true"
-      >
-        Existing artifact
-      </BaseButton>
-    </div>
-
-    <FileUploader
-      :key="mode"
-      :mode="mode"
-      :multiple="multiple && mode === 'file'"
-      :disabled="disabled"
-      @upload="selectFiles"
-      @remove="removeFiles"
-    />
-
-    <AlertBox v-if="artifactError" type="error" :message="artifactError" />
-    <ArtifactSelectorModal
-      v-if="canSelectArtifact"
-      v-model="artifactOpen"
-      :experiment-id="experimentId"
-      :fetch-detail-on-select="true"
-      title="Select a file artifact"
-      @select-detail="selectArtifact"
-    />
-  </div>
-</template>
-
-<style scoped>
-.mint-generated-path-input {
-  display: grid;
-  gap: 0.75rem;
-}
-
-.mint-generated-path-input__modes {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-</style>