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

package/src/components/ScientificNumber.vue

@@ -1,197 +0,0 @@
-<script setup lang="ts">
-/** Read-only display of a numeric measurement in plain, scientific (×10ⁿ), or SI-prefix compact notation with optional unit and copy-to-clipboard. */
-import { computed, ref } from 'vue'
-import type { NumberNotation } from '../types'
-
-interface Props {
-  value: number
-  precision?: number
-  notation?: NumberNotation
-  unit?: string
-  copyable?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  precision: 3,
-  notation: 'auto',
-  copyable: false,
-})
-
-const copied = ref(false)
-
-const SUPERSCRIPT_DIGITS: Record<string, string> = {
-  '0': '\u2070',
-  '1': '\u00B9',
-  '2': '\u00B2',
-  '3': '\u00B3',
-  '4': '\u2074',
-  '5': '\u2075',
-  '6': '\u2076',
-  '7': '\u2077',
-  '8': '\u2078',
-  '9': '\u2079',
-  '-': '\u207B',
-}
-
-const SI_SUFFIXES: [number, string][] = [
-  [1e12, 'T'],
-  [1e9, 'G'],
-  [1e6, 'M'],
-  [1e3, 'k'],
-  [1e-3, 'm'],
-  [1e-6, '\u00B5'],
-  [1e-9, 'n'],
-  [1e-12, 'p'],
-]
-
-function toSuperscript(exp: number): string {
-  return String(exp)
-    .split('')
-    .map(ch => SUPERSCRIPT_DIGITS[ch] ?? ch)
-    .join('')
-}
-
-function roundToPrecision(n: number, digits: number): string {
-  return n.toFixed(digits).replace(/\.?0+$/, '') || '0'
-}
-
-interface FormattedNumber {
-  type: 'plain' | 'scientific' | 'compact'
-  mantissa?: string
-  exponent?: number
-  exponentStr?: string
-  plain?: string
-  suffix?: string
-}
-
-const formatted = computed<FormattedNumber>(() => {
-  const v = props.value
-
-  if (!Number.isFinite(v)) return { type: 'plain', plain: '' }
-  if (v === 0) return { type: 'plain', plain: '0' }
-
-  const absV = Math.abs(v)
-
-  if (props.notation === 'compact') {
-    for (const [threshold, suffix] of SI_SUFFIXES) {
-      if (absV >= threshold * 0.999) {
-        return {
-          type: 'compact',
-          plain: roundToPrecision(v / threshold, props.precision),
-          suffix,
-        }
-      }
-    }
-    return { type: 'plain', plain: roundToPrecision(v, props.precision) }
-  }
-
-  const useScientific =
-    props.notation === 'scientific' ||
-    props.notation === 'engineering' ||
-    (props.notation === 'auto' && (absV < 0.01 || absV >= 10000))
-
-  if (!useScientific) {
-    return { type: 'plain', plain: roundToPrecision(v, props.precision) }
-  }
-
-  let exp = Math.floor(Math.log10(absV))
-
-  if (props.notation === 'engineering') {
-    exp = Math.floor(exp / 3) * 3
-  }
-
-  const mantissa = v / Math.pow(10, exp)
-  const mantissaStr = roundToPrecision(mantissa, props.precision)
-
-  return {
-    type: 'scientific',
-    mantissa: mantissaStr,
-    exponent: exp,
-    exponentStr: toSuperscript(exp),
-  }
-})
-
-const specialDisplay = computed(() => {
-  if (Number.isNaN(props.value)) return 'NaN'
-  if (props.value === Infinity) return '\u221E'
-  if (props.value === -Infinity) return '-\u221E'
-  return null
-})
-
-const plainTextValue = computed(() => {
-  if (specialDisplay.value) return specialDisplay.value
-  const f = formatted.value
-  let text: string
-  if (f.type === 'scientific') {
-    text = `${f.mantissa}e${f.exponent}`
-  } else if (f.type === 'compact') {
-    text = `${f.plain}${f.suffix ?? ''}`
-  } else {
-    text = f.plain ?? '0'
-  }
-  if (props.unit) text += ` ${props.unit}`
-  return text
-})
-
-async function copyToClipboard() {
-  try {
-    await navigator.clipboard.writeText(plainTextValue.value)
-    copied.value = true
-    setTimeout(() => { copied.value = false }, 1500)
-  } catch {
-    // clipboard not available
-  }
-}
-</script>
-
-<template>
-  <span class="mint-sci-number">
-    <!-- Special values: NaN, Infinity -->
-    <template v-if="specialDisplay">
-      <span class="mint-sci-number__plain">{{ specialDisplay }}</span>
-    </template>
-
-    <!-- Scientific / Engineering notation -->
-    <template v-else-if="formatted.type === 'scientific'">
-      <span class="mint-sci-number__mantissa">{{ formatted.mantissa }}</span>
-      <span class="mint-sci-number__times">&times;</span>
-      <span class="mint-sci-number__base">10</span>
-      <span class="mint-sci-number__exponent">{{ formatted.exponentStr }}</span>
-    </template>
-
-    <!-- Compact notation with SI suffix -->
-    <template v-else-if="formatted.type === 'compact'">
-      <span class="mint-sci-number__plain">{{ formatted.plain }}</span>
-      <span v-if="formatted.suffix" class="mint-sci-number__suffix">{{ formatted.suffix }}</span>
-    </template>
-
-    <!-- Plain number -->
-    <template v-else>
-      <span class="mint-sci-number__plain">{{ formatted.plain }}</span>
-    </template>
-
-    <!-- Unit -->
-    <span v-if="unit" class="mint-sci-number__unit">{{ unit }}</span>
-
-    <!-- Copy button -->
-    <button
-      v-if="copyable"
-      :class="['mint-sci-number__copy-btn', { 'mint-sci-number__copy-btn--copied': copied }]"
-      type="button"
-      :title="copied ? 'Copied!' : 'Copy value'"
-      @click.stop="copyToClipboard"
-    >
-      <svg v-if="!copied" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-      </svg>
-      <svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <polyline points="20 6 9 17 4 12" />
-      </svg>
-    </button>
-  </span>
-</template>
-
-<style>
-@import '../styles/components/scientific-number.css';
-</style>

package/src/components/SectionCard.story.vue

@@ -1,163 +0,0 @@
-<script setup lang="ts">
-import SectionCard from './SectionCard.vue'
-import type { SectionCardAccent, SectionCardDivider } from '../types'
-
-const flaskIcon =
-  'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4'
-const folderIcon = 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z'
-
-const experiments = [
-  { code: 'MM-2026-014', name: '13C glucose tracing — HeLa, 24h', updated: '2h ago' },
-  { code: 'MM-2026-013', name: 'Hypoxia timecourse — passage 6', updated: '5h ago' },
-  { code: 'MM-2026-011', name: 'Glutamine dropout, triplicate', updated: 'yesterday' },
-]
-
-function initPlayground() {
-  return {
-    title: 'Experiments',
-    count: '14 ongoing · 42 total',
-    accent: 'experiment' as SectionCardAccent,
-    uppercase: true,
-    divider: 'strong' as SectionCardDivider,
-    showIcon: true,
-  }
-}
-</script>
-
-<template>
-  <Story title="Layout/SectionCard">
-    <Variant title="Playground" :init-state="initPlayground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 600px;">
-          <SectionCard
-            :title="state.title"
-            :count="state.count || undefined"
-            :icon="state.showIcon ? flaskIcon : undefined"
-            :accent="state.accent"
-            :uppercase="state.uppercase"
-            :divider="state.divider"
-          >
-            <div class="mint-section-card__rows">
-              <a
-                v-for="e in experiments"
-                :key="e.code"
-                href="#"
-                class="mint-section-card__row"
-              >
-                <span style="flex: 1; min-width: 0">
-                  <span style="display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">{{ e.name }}</span>
-                  <span style="display: block; font-family: 'Fira Code', monospace; font-size: 0.65625rem; color: var(--text-muted)">{{ e.code }}</span>
-                </span>
-                <span style="flex-shrink: 0; font-size: 0.71875rem; color: var(--text-muted)">{{ e.updated }}</span>
-              </a>
-            </div>
-          </SectionCard>
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstText v-model="state.title" title="Title" />
-        <HstText v-model="state.count" title="Count" />
-        <HstCheckbox v-model="state.showIcon" title="Show icon chip" />
-        <HstCheckbox v-model="state.uppercase" title="Uppercase title" />
-        <HstSelect
-          v-model="state.accent"
-          title="Accent"
-          :options="{
-            primary: 'primary',
-            experiment: 'experiment',
-            project: 'project',
-            success: 'success',
-            error: 'error',
-            warning: 'warning',
-            info: 'info',
-          }"
-        />
-        <HstSelect
-          v-model="state.divider"
-          title="Divider"
-          :options="{ strong: 'strong', light: 'light' }"
-        />
-      </template>
-    </Variant>
-
-    <Variant title="Home category card">
-      <div style="padding: 2rem; max-width: 600px;">
-        <SectionCard
-          title="Projects"
-          count="6 active · 9 total"
-          :icon="folderIcon"
-          accent="project"
-          uppercase
-        >
-          <template #actions>
-            <a href="#" style="font-size: 0.75rem; font-weight: 500; color: var(--color-primary-hover)">All →</a>
-          </template>
-          <div class="mint-section-card__rows">
-            <a href="#" class="mint-section-card__row">
-              <span style="flex: 1; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">Hypoxia metabolic rewiring</span>
-              <span style="font-size: 0.71875rem; color: var(--text-muted)">12 experiments</span>
-            </a>
-            <a href="#" class="mint-section-card__row">
-              <span style="flex: 1; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">Serine one-carbon flux</span>
-              <span style="font-size: 0.71875rem; color: var(--text-muted)">7 experiments</span>
-            </a>
-          </div>
-        </SectionCard>
-      </div>
-    </Variant>
-
-    <Variant title="Detail card with footer">
-      <div style="padding: 2rem; max-width: 600px;">
-        <SectionCard title="Analysis artifacts" :count="4" divider="light">
-          <div class="mint-section-card__rows">
-            <div class="mint-section-card__row">
-              <span style="flex: 1; font-size: 0.8125rem; color: var(--text-primary)">isotopologue_matrix.csv</span>
-              <span style="font-size: 0.71875rem; color: var(--text-secondary)">DRP</span>
-            </div>
-            <div class="mint-section-card__row">
-              <span style="flex: 1; font-size: 0.8125rem; color: var(--text-primary)">natural_abundance_corrected.parquet</span>
-              <span style="font-size: 0.71875rem; color: var(--text-secondary)">DRP</span>
-            </div>
-          </div>
-          <template #footer>
-            <span style="font-size: 0.71875rem; color: var(--text-muted)">Showing 1–2 of 4</span>
-            <span style="font-size: 0.71875rem; color: var(--text-secondary)">1 / 2</span>
-          </template>
-        </SectionCard>
-      </div>
-    </Variant>
-
-    <Variant title="Fill with pinned toolbar">
-      <div style="padding: 2rem; height: 420px; display: flex;">
-        <SectionCard title="All experiments" :count="42" divider="light" fill>
-          <template #toolbar>
-            <div style="display: flex; gap: 0.5rem; padding: 0.6875rem 1rem; border-bottom: 1px solid var(--border-color)">
-              <span style="font-size: 0.78125rem; color: var(--text-secondary)">Toolbar stays put while the rows scroll</span>
-            </div>
-          </template>
-          <div class="mint-section-card__rows">
-            <div v-for="n in 20" :key="n" class="mint-section-card__row">
-              <span style="flex: 1; font-size: 0.8125rem; color: var(--text-primary)">Row {{ n }}</span>
-              <span style="font-family: 'Fira Code', monospace; font-size: 0.71875rem; color: var(--text-muted)">MM-2026-{{ String(n).padStart(3, '0') }}</span>
-            </div>
-          </div>
-          <template #footer>
-            <span style="font-size: 0.71875rem; color: var(--text-muted)">Showing 1–20 of 42</span>
-            <span style="font-size: 0.71875rem; color: var(--text-secondary)">1 / 3</span>
-          </template>
-        </SectionCard>
-      </div>
-    </Variant>
-
-    <Variant title="No icon, plain title">
-      <div style="padding: 2rem; max-width: 600px;">
-        <SectionCard title="Design data" count="96 samples · 4 timepoints" divider="light">
-          <div style="padding: 1rem; font-size: 0.8125rem; color: var(--text-secondary)">
-            Card body content sits directly on the card surface — no nested card.
-          </div>
-        </SectionCard>
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/SectionCard.vue

@@ -1,98 +0,0 @@
-<script setup lang="ts">
-/** One-card page region from the MINT 1.1 card system: 12px radius, the
- * single --card-shadow token, a header strip (icon chip, title, mono count,
- * actions), and hairline-separated content — no card-in-card. */
-import { computed } from 'vue'
-import type { SectionCardAccent, SectionCardDivider } from '../types'
-
-interface Props {
-  title: string
-  /** Monospace meta shown next to the title, e.g. "14 ongoing · 42 total". */
-  count?: string | number
-  /** SVG path(s) for the 22px icon chip; omit to render no chip. */
-  icon?: string | string[]
-  /** Tint of the icon chip. */
-  accent?: SectionCardAccent
-  /** Uppercase category heading (home cards) vs plain heading (detail cards). */
-  uppercase?: boolean
-  /** Header hairline: 'strong' = --border-color, 'light' = --border-light. */
-  divider?: SectionCardDivider
-  /**
-   * Stretch to fill the height its parent offers, scrolling the body and
-   * pinning the header and footer. Requires a parent that gives the card a
-   * definite height (a flex or grid track).
-   */
-  fill?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  count: undefined,
-  icon: undefined,
-  accent: 'primary',
-  uppercase: false,
-  divider: 'strong',
-  fill: false,
-})
-
-const iconPaths = computed(() =>
-  props.icon === undefined ? [] : Array.isArray(props.icon) ? props.icon : [props.icon],
-)
-
-const headerClasses = computed(() => [
-  'mint-section-card__header',
-  props.divider === 'light' ? 'mint-section-card__header--divider-light' : '',
-])
-
-const titleClasses = computed(() => [
-  'mint-section-card__title',
-  props.uppercase ? 'mint-section-card__title--uppercase' : '',
-])
-
-const cardClasses = computed(() => [
-  'mint-section-card',
-  props.fill ? 'mint-section-card--fill' : '',
-])
-</script>
-
-<template>
-  <section :class="cardClasses">
-    <div :class="headerClasses">
-      <span
-        v-if="iconPaths.length"
-        :class="['mint-section-card__icon-chip', `mint-section-card__icon-chip--${accent}`]"
-      >
-        <svg
-          class="mint-section-card__icon"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          aria-hidden="true"
-        >
-          <path v-for="(d, i) in iconPaths" :key="i" :d="d" />
-        </svg>
-      </span>
-      <h2 :class="titleClasses">{{ title }}</h2>
-      <span v-if="count !== undefined" class="mint-section-card__count">{{ count }}</span>
-      <div class="mint-section-card__spacer"></div>
-      <slot name="actions" />
-    </div>
-    <!-- Controls belong to the card's chrome, so they sit outside the body and
-         stay put while the body scrolls. -->
-    <div v-if="$slots.toolbar" class="mint-section-card__toolbar">
-      <slot name="toolbar" />
-    </div>
-    <div class="mint-section-card__body">
-      <slot />
-    </div>
-    <div v-if="$slots.footer" class="mint-section-card__footer">
-      <slot name="footer" />
-    </div>
-  </section>
-</template>
-
-<style>
-@import '../styles/components/section-card.css';
-</style>

package/src/components/SegmentedControl.story.vue

@@ -1,149 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import SegmentedControl from './SegmentedControl.vue'
-import type { SegmentedOption } from '../types'
-
-const sizes = ['sm', 'md', 'lg'] as const
-const variants = ['simple', 'card'] as const
-
-const basicOptions: SegmentedOption[] = [
-  { value: 'day', label: 'Day' },
-  { value: 'week', label: 'Week' },
-  { value: 'month', label: 'Month' },
-]
-
-const plateOptions: SegmentedOption[] = [
-  { value: 6, label: '6-well' },
-  { value: 12, label: '12-well' },
-  { value: 24, label: '24-well' },
-  { value: 48, label: '48-well' },
-  { value: 96, label: '96-well' },
-  { value: 384, label: '384-well' },
-]
-
-const cardOptions: SegmentedOption[] = [
-  { value: 'basic', label: 'Basic', description: 'Simple endpoint analysis' },
-  { value: 'standard', label: 'Standard', description: 'Dose-response curves' },
-  { value: 'advanced', label: 'Advanced', description: 'Full kinetic modeling' },
-]
-
-const withDisabledOptions: SegmentedOption[] = [
-  { value: 'active', label: 'Active' },
-  { value: 'archived', label: 'Archived' },
-  { value: 'deleted', label: 'Deleted', disabled: true },
-]
-
-const twoTabOptions: SegmentedOption[] = [
-  { value: 'table', label: 'Table' },
-  { value: 'chart', label: 'Chart' },
-]
-
-const cardSelectionP3 = ref('list')
-const twoTabSelection = ref('table')
-</script>
-
-<template>
-  <Story title="Base Inputs/SegmentedControl">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-          <SegmentedControl
-            v-model="state.value"
-            :options="basicOptions"
-            :variant="state.variant"
-            :size="state.size"
-            :full-width="state.fullWidth"
-            :disabled="state.disabled"
-          />
-          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
-            Value: <code>{{ JSON.stringify(state.value) }}</code>
-          </p>
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <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.fullWidth" title="Full Width" />
-        <HstCheckbox v-model="state.disabled" title="Disabled" />
-      </template>
-    </Variant>
-
-    <Variant title="All Sizes (Simple)">
-      <div style="padding: 2rem; max-width: 500px; 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>
-          <SegmentedControl :model-value="'week'" :options="basicOptions" :size="size" variant="simple" />
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Card Variant">
-      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
-        <SegmentedControl :model-value="'standard'" :options="cardOptions" variant="card" />
-      </div>
-    </Variant>
-
-    <Variant title="Many Options">
-      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
-        <SegmentedControl :model-value="96" :options="plateOptions" variant="simple" />
-      </div>
-    </Variant>
-
-    <Variant title="With Disabled Option">
-      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <SegmentedControl :model-value="'active'" :options="withDisabledOptions" variant="simple" />
-      </div>
-    </Variant>
-
-    <Variant title="Disabled By Value">
-      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <SegmentedControl
-          v-model="twoTabSelection"
-          :options="twoTabOptions"
-          :disabled-values="['chart']"
-          variant="simple"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Not Full Width">
-      <div style="padding: 2rem;">
-        <SegmentedControl :model-value="'day'" :options="basicOptions" :full-width="false" />
-      </div>
-    </Variant>
-
-    <Variant title="Disabled">
-      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <SegmentedControl :model-value="'week'" :options="basicOptions" disabled />
-      </div>
-    </Variant>
-
-    <Variant title="Card (hugs content — 0.16+ default)">
-      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start;">
-        <SegmentedControl
-          v-model="cardSelectionP3"
-          variant="card"
-          :options="[
-            { value: 'list', label: 'List' },
-            { value: 'grid', label: 'Grid' },
-            { value: 'board', label: 'Board' },
-          ]"
-        />
-        <p style="margin: 0; font-size: 0.8125rem; color: var(--text-muted);">
-          Container now hugs content by default. Pass <code>:full-width="true"</code> to restore edge-to-edge.
-        </p>
-      </div>
-    </Variant>
-  </Story>
-</template>