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

package/src/components/ScientificNumber.vue

@@ -0,0 +1,197 @@
+<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/SecretInput.story.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import SecretInput from './SecretInput.vue'
+import type { PluginSecretRef } from '../utils/pluginSecrets'
+
+const sizes = ['sm', 'md', 'lg'] as const
+
+const storedRef: PluginSecretRef = { $secret: 'sec_0f2a4c6e8a0c2e4a6c8e0a2c4e6a8c0e', set: true }
+const lockedRef: PluginSecretRef = { $secret: null, locked: true }
+
+const stored = ref<PluginSecretRef | string | null>({ ...storedRef })
+const unset = ref<PluginSecretRef | string | null>(null)
+const locked = ref<PluginSecretRef | string | null>({ ...lockedRef })
+</script>
+
+<template>
+  <Story title="Base Inputs/SecretInput">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <SecretInput
+            v-model="state.value"
+            :placeholder="state.placeholder"
+            :disabled="state.disabled"
+            :error="state.error"
+            :size="state.size"
+          />
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+            Submits: <code>{{ JSON.stringify(state.value) }}</code>
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.placeholder" title="Placeholder" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(size => ({ label: size, value: size }))"
+        />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.error" title="Error" />
+      </template>
+
+      <template #initState>
+        {{ {
+          value: { $secret: 'sec_0f2a4c6e8a0c2e4a6c8e0a2c4e6a8c0e', set: true },
+          placeholder: 'Enter a new value',
+          disabled: false,
+          error: false,
+          size: 'md',
+        } }}
+      </template>
+    </Variant>
+
+    <Variant title="States">
+      <div style="padding: 2rem; max-width: 600px; display: flex; flex-direction: column; gap: 1.5rem;">
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;">
+            Stored
+          </p>
+          <SecretInput v-model="stored" />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;">
+            Not set
+          </p>
+          <SecretInput v-model="unset" />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;">
+            Provided by environment
+          </p>
+          <SecretInput v-model="locked" />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/SecretInput.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+/** Edits one plugin secret setting: shows set / not set / provided by environment, and submits a `$secret` reference, a new value, or `null`. */
+import { computed, ref, watch } from 'vue'
+import BaseInput from './BaseInput.vue'
+import BaseButton from './BaseButton.vue'
+import {
+  clearPluginSecret,
+  isPluginSecretLocked,
+  isPluginSecretRef,
+  keepPluginSecret,
+  pluginSecretLabel,
+  pluginSecretState,
+  setPluginSecret,
+  type PluginSecretRef,
+  type PluginSecretState,
+} from '../utils/pluginSecrets'
+
+type SecretValue = PluginSecretRef | string | null
+
+interface Props {
+  /** The `$secret` marker from the settings response, a typed string, or `null`. */
+  modelValue?: SecretValue
+  placeholder?: string
+  disabled?: boolean
+  error?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  /** Label on the control that starts entering a replacement value. */
+  changeLabel?: string
+  /** Label on the control that clears a stored secret. */
+  clearLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  placeholder: 'Enter a new value',
+  disabled: false,
+  error: false,
+  size: 'md',
+  changeLabel: 'Change',
+  clearLabel: 'Clear',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: SecretValue]
+}>()
+
+/** The reference this field started from, so an abandoned edit can restore it. */
+const storedReference = ref<PluginSecretRef | null>(keepPluginSecret(props.modelValue))
+const isEditing = ref(typeof props.modelValue === 'string')
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (isPluginSecretRef(value)) {
+      storedReference.value = keepPluginSecret(value)
+      isEditing.value = false
+    }
+  },
+)
+
+const state = computed<PluginSecretState>(() => pluginSecretState(props.modelValue))
+const locked = computed(() => isPluginSecretLocked(props.modelValue)
+  || isPluginSecretLocked(storedReference.value))
+const statusLabel = computed(() => isEditing.value
+  ? 'New value'
+  : pluginSecretLabel(props.modelValue))
+const typedValue = computed(() => typeof props.modelValue === 'string' ? props.modelValue : '')
+const canClear = computed(() => !locked.value && (state.value === 'set' || isEditing.value))
+
+function startEditing(): void {
+  if (props.disabled || locked.value) return
+  isEditing.value = true
+  emit('update:modelValue', setPluginSecret(''))
+}
+
+function updateTyped(value: string | number | null): void {
+  emit('update:modelValue', setPluginSecret(value == null ? '' : String(value)))
+}
+
+function cancelEditing(): void {
+  isEditing.value = false
+  emit('update:modelValue', storedReference.value ? { ...storedReference.value } : null)
+}
+
+function clear(): void {
+  if (props.disabled || locked.value) return
+  isEditing.value = false
+  storedReference.value = null
+  emit('update:modelValue', clearPluginSecret())
+}
+</script>
+
+<template>
+  <div class="mint-secret-input" :class="{ 'mint-secret-input--error': error }">
+    <div class="mint-secret-input__status">
+      <span
+        class="mint-secret-input__badge"
+        :class="`mint-secret-input__badge--${isEditing ? 'pending' : state}`"
+      >{{ statusLabel }}</span>
+      <span v-if="locked" class="mint-secret-input__hint">
+        This value comes from the environment and cannot be edited here.
+      </span>
+    </div>
+
+    <BaseInput
+      v-if="isEditing"
+      type="password"
+      autocomplete="new-password"
+      :model-value="typedValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :error="error"
+      :size="size"
+      @update:model-value="updateTyped"
+    />
+
+    <div class="mint-secret-input__actions">
+      <BaseButton
+        v-if="!isEditing"
+        type="button"
+        variant="secondary"
+        :size="size === 'lg' ? 'md' : 'sm'"
+        :disabled="disabled || locked"
+        @click="startEditing"
+      >
+        {{ changeLabel }}
+      </BaseButton>
+      <BaseButton
+        v-else
+        type="button"
+        variant="ghost"
+        :size="size === 'lg' ? 'md' : 'sm'"
+        :disabled="disabled"
+        @click="cancelEditing"
+      >
+        Cancel
+      </BaseButton>
+      <BaseButton
+        v-if="canClear"
+        type="button"
+        variant="ghost"
+        :size="size === 'lg' ? 'md' : 'sm'"
+        :disabled="disabled"
+        @click="clear"
+      >
+        {{ clearLabel }}
+      </BaseButton>
+    </div>
+  </div>
+</template>

package/src/components/SectionCard.story.vue

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

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