@morscherlab/mint-sdk 1.3.8 → 1.4.0-beta.1

package/src/components/IconButton.story.vue

@@ -1,140 +0,0 @@
-<script setup lang="ts">
-import IconButton from './IconButton.vue'
-import type { ButtonVariant, ButtonSize } from '../types'
-
-const variants: ButtonVariant[] = ['primary', 'secondary', 'cta', 'danger', 'success', 'ghost']
-const sizes: ButtonSize[] = ['sm', 'md', 'lg']
-
-function handleClick() {
-  console.log('IconButton clicked')
-}
-</script>
-
-<template>
-  <Story title="Action/IconButton">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-          <IconButton
-            :variant="state.variant"
-            :size="state.size"
-            :disabled="state.disabled"
-            :loading="state.loading"
-            :label="state.label"
-            @click="handleClick"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M12 5v14M5 12h14" />
-            </svg>
-          </IconButton>
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstText v-model="state.label" title="Label (aria)" />
-        <HstSelect
-          v-model="state.variant"
-          title="Variant"
-          :options="variants.map(v => ({ label: v, value: v }))"
-        />
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="sizes.map(s => ({ label: s, value: s }))"
-        />
-        <HstCheckbox v-model="state.disabled" title="Disabled" />
-        <HstCheckbox v-model="state.loading" title="Loading" />
-      </template>
-    </Variant>
-
-    <Variant title="All Variants">
-      <div style="padding: 2rem; 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>
-          <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
-            <IconButton
-              v-for="variant in variants"
-              :key="variant"
-              :variant="variant"
-              :size="size"
-              :label="variant"
-              @click="handleClick"
-            >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M12 5v14M5 12h14" />
-              </svg>
-            </IconButton>
-          </div>
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Loading States">
-      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
-        <IconButton
-          v-for="variant in variants"
-          :key="variant"
-          :variant="variant"
-          :label="`${variant} loading`"
-          loading
-        >
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M12 5v14M5 12h14" />
-          </svg>
-        </IconButton>
-      </div>
-    </Variant>
-
-    <Variant title="Common Icons">
-      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;">
-        <IconButton label="Add" variant="ghost" @click="handleClick">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M12 5v14M5 12h14" />
-          </svg>
-        </IconButton>
-        <IconButton label="Edit" variant="ghost" @click="handleClick">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-          </svg>
-        </IconButton>
-        <IconButton label="Delete" variant="danger" @click="handleClick">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="3 6 5 6 21 6" />
-            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-          </svg>
-        </IconButton>
-        <IconButton label="Download" variant="primary" @click="handleClick">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-            <polyline points="7 10 12 15 17 10" />
-            <line x1="12" y1="15" x2="12" y2="3" />
-          </svg>
-        </IconButton>
-        <IconButton label="AI" variant="ghost" @click="handleClick">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M12 3 14 10 21 12 14 14 12 21 10 14 3 12 10 10Z" />
-          </svg>
-        </IconButton>
-      </div>
-    </Variant>
-
-    <Variant title="Disabled States">
-      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
-        <IconButton
-          v-for="variant in variants"
-          :key="variant"
-          :variant="variant"
-          :label="`${variant} disabled`"
-          disabled
-        >
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M12 5v14M5 12h14" />
-          </svg>
-        </IconButton>
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/IconButton.vue

@@ -1,69 +0,0 @@
-<script setup lang="ts">
-/** Square icon-only button with required aria-label, loading spinner state, and ghost/primary/danger variants. */
-import type { ButtonVariant, ButtonSize } from '../types'
-
-interface Props {
-  variant?: ButtonVariant
-  size?: ButtonSize
-  disabled?: boolean
-  loading?: boolean
-  label: string // Required for accessibility
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'ghost',
-  size: 'md',
-  disabled: false,
-  loading: false,
-})
-
-const emit = defineEmits<{
-  click: [event: MouseEvent]
-}>()
-
-function handleClick(event: MouseEvent) {
-  if (!props.disabled && !props.loading) {
-    emit('click', event)
-  }
-}
-</script>
-
-<template>
-  <button
-    type="button"
-    :disabled="disabled || loading"
-    :aria-label="label"
-    :title="label"
-    :class="[
-      'mint-icon-button',
-      `mint-icon-button--${variant}`,
-      `mint-icon-button--${size}`,
-      (disabled || loading) ? 'mint-icon-button--disabled' : '',
-    ]"
-    @click="handleClick"
-  >
-    <svg
-      v-if="loading"
-      :class="['mint-icon-button__spinner', `mint-icon-button__icon--${size}`]"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <circle
-        style="opacity: 0.25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        stroke-width="4"
-      />
-      <path
-        style="opacity: 0.75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      />
-    </svg>
-    <span v-else :class="`mint-icon-button__icon--${size}`">
-      <slot />
-    </span>
-  </button>
-</template>

package/src/components/MobileSupportGate.story.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import MobileSupportGate from './MobileSupportGate.vue'
-</script>
-
-<template>
-  <Story title="Layout/MobileSupportGate">
-    <Variant title="Unsupported State">
-      <div style="min-height: 560px;">
-        <MobileSupportGate
-          :supported="false"
-          media-query="(min-width: 0px)"
-          app-name="MINT platform"
-          title="Desktop workspace recommended"
-          message="This page is not supported on mobile. Experiments, Projects, and Admin remain available on smaller screens."
-          desktop-label="Switch to a desktop browser for the full platform workspace."
-        >
-          <div>Workspace content</div>
-        </MobileSupportGate>
-      </div>
-    </Variant>
-
-    <Variant title="Supported Content">
-      <div style="padding: 2rem; min-height: 360px;">
-        <MobileSupportGate :supported="true" media-query="(min-width: 0px)">
-          <div style="max-width: 640px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem; padding: 1.5rem; background: var(--bg-secondary, #fff);">
-            <h3 style="margin: 0 0 0.5rem; font-size: 1rem; line-height: 1.2;">Route content</h3>
-            <p style="margin: 0; color: var(--text-secondary, #475569);">
-              The gate renders its default slot whenever the route is supported or the viewport is wider than the mobile query.
-            </p>
-          </div>
-        </MobileSupportGate>
-      </div>
-    </Variant>
-
-    <Variant title="Custom Unsupported Slot">
-      <div style="min-height: 420px;">
-        <MobileSupportGate :supported="false" media-query="(min-width: 0px)">
-          <template #unsupported>
-            <div style="min-height: 420px; display: grid; place-items: center; padding: 2rem; background: var(--bg-primary, #f8fafc);">
-              <div style="max-width: 420px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem; padding: 1.5rem; background: var(--bg-secondary, #fff);">
-                <h3 style="margin: 0 0 0.5rem; font-size: 1.125rem;">Custom fallback</h3>
-                <p style="margin: 0; color: var(--text-secondary, #475569); line-height: 1.5;">
-                  Consumers can replace the default message while keeping the SDK viewport detection behavior.
-                </p>
-              </div>
-            </div>
-          </template>
-        </MobileSupportGate>
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/MobileSupportGate.vue

@@ -1,111 +0,0 @@
-<script lang="ts">
-let nextMobileSupportGateTitleId = 0
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import {
-  DEFAULT_MOBILE_VIEWPORT_QUERY,
-  useMobileSupportGate,
-} from '../composables/useMobileSupportGate'
-
-export interface MobileSupportGateProps {
-  supported?: boolean
-  mediaQuery?: string
-  appName?: string
-  title?: string
-  message?: string
-  desktopLabel?: string
-}
-
-const props = withDefaults(defineProps<MobileSupportGateProps>(), {
-  supported: true,
-  mediaQuery: DEFAULT_MOBILE_VIEWPORT_QUERY,
-  appName: 'MINT',
-  title: 'Desktop workspace recommended',
-  message: 'This workspace is optimized for a wider desktop screen and is not supported on mobile.',
-  desktopLabel: 'Open this page from a desktop browser to use the full workflow.',
-})
-
-defineSlots<{
-  default(props: { isMobileViewport: boolean; isSupported: boolean }): unknown
-  unsupported?(props: { isMobileViewport: boolean; isSupported: boolean }): unknown
-}>()
-
-const titleId = `mint-mobile-support-title-${++nextMobileSupportGateTitleId}`
-
-const supported = computed(() => props.supported)
-const mediaQuery = computed(() => props.mediaQuery)
-
-const {
-  isMobileViewport,
-  isSupported,
-  shouldShowUnsupported,
-} = useMobileSupportGate({
-  supported,
-  mediaQuery,
-})
-</script>
-
-<template>
-  <div
-    v-if="shouldShowUnsupported"
-    class="mint-mobile-support-gate"
-    role="main"
-    :aria-labelledby="titleId"
-    data-testid="mobile-unsupported"
-  >
-    <slot
-      name="unsupported"
-      :is-mobile-viewport="isMobileViewport"
-      :is-supported="isSupported"
-    >
-      <section class="mint-mobile-support-gate__panel">
-        <div class="mint-mobile-support-gate__mark" aria-hidden="true">
-          <svg
-            class="mint-mobile-support-gate__icon"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <rect x="3" y="4" width="18" height="12" rx="2" />
-            <path d="M8 20h8" />
-            <path d="M12 16v4" />
-          </svg>
-        </div>
-
-        <div class="mint-mobile-support-gate__copy">
-          <p class="mint-mobile-support-gate__eyebrow">{{ appName }}</p>
-          <h1 :id="titleId" class="mint-mobile-support-gate__title">{{ title }}</h1>
-          <p class="mint-mobile-support-gate__message">{{ message }}</p>
-        </div>
-
-        <div class="mint-mobile-support-gate__hint">
-          <svg
-            class="mint-mobile-support-gate__hint-icon"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-          >
-            <path d="M12 20h9" />
-            <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
-          </svg>
-          <span>{{ desktopLabel }}</span>
-        </div>
-      </section>
-    </slot>
-  </div>
-
-  <slot
-    v-else
-    :is-mobile-viewport="isMobileViewport"
-    :is-supported="isSupported"
-  />
-</template>

package/src/components/ReagentEditor.story.vue

@@ -1,153 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import ReagentEditor from './ReagentEditor.vue'
-import type { ReagentDefinition } from './ReagentEditor.vue'
-
-function makeReagent(overrides: Partial<ReagentDefinition> = {}): ReagentDefinition {
-  return {
-    id: crypto.randomUUID(),
-    name: '',
-    color: '#3B82F6',
-    axis: 'row',
-    startPosition: '',
-    levels: [],
-    unit: 'µM',
-    ...overrides,
-  }
-}
-
-const emptyReagent = ref(makeReagent())
-
-const cisplatin = ref<ReagentDefinition>(makeReagent({
-  name: 'Cisplatin',
-  color: '#10B981',
-  axis: 'row',
-  startPosition: 'B',
-  unit: 'µM',
-  levels: [
-    { value: 100, replicates: 3 },
-    { value: 50, replicates: 3 },
-    { value: 25, replicates: 3 },
-    { value: 12.5, replicates: 3 },
-    { value: 6.25, replicates: 3 },
-    { value: 3.125, replicates: 3 },
-    { value: 1.563, replicates: 3 },
-    { value: 0, replicates: 3 },
-  ],
-}))
-
-const antibody = ref<ReagentDefinition>(makeReagent({
-  name: 'Anti-CD20',
-  color: '#8B5CF6',
-  axis: 'column',
-  startPosition: '2',
-  unit: 'nM',
-  levels: [
-    { value: 1000, replicates: 2 },
-    { value: 100, replicates: 2 },
-    { value: 10, replicates: 2 },
-    { value: 1, replicates: 2 },
-    { value: 0.1, replicates: 2 },
-    { value: 0, replicates: 2 },
-  ],
-}))
-
-const plate384 = ref<ReagentDefinition>(makeReagent({
-  name: 'Doxorubicin',
-  color: '#EF4444',
-  axis: 'row',
-  startPosition: 'C',
-  unit: 'nM',
-  levels: [
-    { value: 500, replicates: 4 },
-    { value: 250, replicates: 4 },
-    { value: 125, replicates: 4 },
-    { value: 62.5, replicates: 4 },
-    { value: 31.25, replicates: 4 },
-    { value: 15.63, replicates: 4 },
-    { value: 7.813, replicates: 4 },
-    { value: 3.906, replicates: 4 },
-    { value: 1.953, replicates: 4 },
-    { value: 0, replicates: 4 },
-  ],
-}))
-
-function handleRemove(name: string) {
-  console.log(`Remove: ${name}`)
-}
-</script>
-
-<template>
-  <Story title="Lab/ReagentEditor">
-    <Variant title="Playground">
-      <template #default>
-        <div style="padding: 2rem; max-width: 360px; margin: 0 auto;">
-          <ReagentEditor
-            v-model="emptyReagent"
-            @remove="handleRemove('playground')"
-          />
-        </div>
-      </template>
-    </Variant>
-
-    <Variant title="Pre-filled — Cisplatin 2x Dilution">
-      <div style="padding: 2rem; max-width: 360px; margin: 0 auto;">
-        <ReagentEditor
-          v-model="cisplatin"
-          @remove="handleRemove('cisplatin')"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Column Axis — Antibody">
-      <div style="padding: 2rem; max-width: 360px; margin: 0 auto;">
-        <ReagentEditor
-          v-model="antibody"
-          @remove="handleRemove('antibody')"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="384-well Plate">
-      <div style="padding: 2rem; max-width: 360px; margin: 0 auto;">
-        <ReagentEditor
-          v-model="plate384"
-          :plate-format="384"
-          @remove="handleRemove('doxorubicin')"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Custom Units & Presets">
-      <div style="padding: 2rem; max-width: 360px; margin: 0 auto;">
-        <ReagentEditor
-          v-model="emptyReagent"
-          :units="['mg/mL', 'µg/mL', 'ng/mL', 'pg/mL']"
-          :presets="[
-            { label: '2x', factor: 2 },
-            { label: '5x', factor: 5 },
-            { label: '10x', factor: 10 },
-          ]"
-          @remove="handleRemove('custom')"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Side by Side">
-      <div style="padding: 2rem; max-width: 780px; margin: 0 auto; display: flex; gap: 1.5rem;">
-        <div style="flex: 1;">
-          <ReagentEditor
-            v-model="cisplatin"
-            @remove="handleRemove('cisplatin')"
-          />
-        </div>
-        <div style="flex: 1;">
-          <ReagentEditor
-            v-model="antibody"
-            @remove="handleRemove('antibody')"
-          />
-        </div>
-      </div>
-    </Variant>
-  </Story>
-</template>