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

package/src/components/SmartGroupManual.vue

@@ -1,398 +0,0 @@
-<script lang="ts">
-/**
- * SmartGroupManual — the "manual" mode of the Smart Group modal.
- *
- * Selection-first grouping for when sample names can't be parsed automatically:
- * a wide searchable/filterable sample list on the left, a persistent Cohorts
- * rail with a progress meter and group → subgroup → sub-subgroup tree on the
- * right, and a contextual assignment bar that slides up only once samples are
- * selected. Cohort derivation lives in the tested `./SmartGroupManual.cohorts`
- * module.
- *
- * The reference-fixture defaults live in this module-scope `<script>` block
- * because `defineProps` default factories are hoisted and cannot reference
- * bindings declared inside `<script setup>`.
- */
-import type { ManualPaletteEntry, SmartGroupSeed } from './SmartGroup.types'
-
-const DEFAULT_NAMES = [
-  'Pt001_TumorA_d7_rep1',
-  'Pt001_TumorA_d7_rep1_reseq2024',
-  'Pt001_TumorA_d14_rep1',
-  'Pt002_TumorB_d7_rep1',
-  'Pt002_tumorb_d7_rep2',
-  'Pt002_TumorB_d14_rep1',
-  'Pt003_NoID_d7_rep1',
-  'Pt003_TumorC_d14_rep1_redo',
-  'Ctrl_pooled_old_naming',
-  'control_2_(redo)',
-  'Pt004_TumorA_d7_2024batch2',
-  'Pt004_TumorA_d14',
-  'QC_pool_01',
-  'blank_run3',
-]
-const DEFAULT_SEED: Record<string, SmartGroupSeed> = {
-  Pt001_TumorA_d7_rep1: { group: 'Responder', sub: 'Day 7', sub2: 'Batch 1', color: 'var(--grp-2)' },
-  Pt001_TumorA_d14_rep1: { group: 'Responder', sub: 'Day 14', color: 'var(--grp-2)' },
-  Pt002_TumorB_d7_rep1: { group: 'Non-responder', sub: 'Day 7', sub2: 'Batch 2', color: 'var(--grp-4)' },
-}
-const DEFAULT_PALETTE: ManualPaletteEntry[] = [
-  { c: 'var(--grp-1)', k: 'indigo' },
-  { c: 'var(--grp-2)', k: 'teal' },
-  { c: 'var(--grp-3)', k: 'amber' },
-  { c: 'var(--grp-4)', k: 'rose' },
-  { c: 'var(--grp-5)', k: 'violet' },
-]
-</script>
-
-<script setup lang="ts">
-import { computed, h, ref, type FunctionalComponent } from 'vue'
-import {
-  assignSamples,
-  buildCohortTree,
-  filterSamples,
-  type ManualFilter,
-  type ManualSample,
-} from './SmartGroupManual.cohorts'
-import BaseButton from './BaseButton.vue'
-import type { ManualDonePayload, SmartGroupManualProps } from './SmartGroup.types'
-
-const props = withDefaults(defineProps<SmartGroupManualProps>(), {
-  sampleNames: () => DEFAULT_NAMES,
-  seed: () => DEFAULT_SEED,
-  palette: () => DEFAULT_PALETTE,
-})
-
-const emit = defineEmits<{
-  done: [payload: ManualDonePayload]
-  cancel: []
-  auto: []
-  close: []
-}>()
-
-const Icon: FunctionalComponent<{ d: string; size?: number }> = iconProps =>
-  h(
-    'svg',
-    {
-      width: iconProps.size ?? 16,
-      height: iconProps.size ?? 16,
-      viewBox: '0 0 24 24',
-      fill: 'none',
-      stroke: 'currentColor',
-      'stroke-width': 2,
-      'stroke-linecap': 'round',
-      'stroke-linejoin': 'round',
-    },
-    [h('path', { d: iconProps.d })],
-  )
-const ICON = {
-  search: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z',
-  close: 'M6 18L18 6M6 6l12 12',
-  chev: 'M6 9l6 6 6-6',
-  layers: 'M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5',
-  arrow: 'M5 12h14M13 6l6 6-6 6',
-  check: 'M20 6L9 17l-5-5',
-}
-
-// Unique datalist ids so multiple instances on a page don't collide.
-let mg2Uid = 0
-const uid = ++mg2Uid
-const groupListId = `sg-mg2-groups-${uid}`
-const subListId = `sg-mg2-subs-${uid}`
-const sub2ListId = `sg-mg2-subs2-${uid}`
-
-function buildInitial(): ManualSample[] {
-  return props.sampleNames.map(name => {
-    const seeded = props.seed[name]
-    return {
-      name,
-      group: seeded?.group ?? null,
-      sub: seeded?.sub ?? null,
-      sub2: seeded?.sub2 ?? null,
-      color: seeded?.color ?? null,
-    }
-  })
-}
-
-const samples = ref<ManualSample[]>(buildInitial())
-const query = ref('')
-const filter = ref<ManualFilter>('all')
-const sel = ref<Set<number>>(new Set())
-const grp = ref('')
-const sub = ref('')
-const sub2 = ref('')
-const color = ref(props.palette[0]?.c ?? 'var(--grp-1)')
-
-const assignedCount = computed(() => samples.value.filter(sample => sample.group).length)
-const unassignedCount = computed(() => samples.value.length - assignedCount.value)
-const matches = computed(() => filterSamples(samples.value, query.value, filter.value))
-const matchIdx = computed(() => matches.value.map(match => match.index))
-const allMatchSelected = computed(
-  () => matchIdx.value.length > 0 && matchIdx.value.every(index => sel.value.has(index)),
-)
-const tree = computed(() => buildCohortTree(samples.value))
-
-const existingGroups = computed(() => {
-  const map = new Map<string, string | null>()
-  samples.value.forEach(sample => {
-    if (sample.group && !map.has(sample.group)) map.set(sample.group, sample.color)
-  })
-  return map
-})
-const groupKeys = computed(() => [...existingGroups.value.keys()])
-const existingSubs = computed(() => [...new Set(samples.value.map(sample => sample.sub).filter(Boolean))] as string[])
-const existingSub2 = computed(() => [...new Set(samples.value.map(sample => sample.sub2).filter(Boolean))] as string[])
-
-const canAssign = computed(() => sel.value.size > 0 && grp.value.trim().length > 0)
-const pct = computed(() =>
-  samples.value.length ? Math.round((assignedCount.value / samples.value.length) * 100) : 0,
-)
-const chips = computed<{ k: ManualFilter; label: string; n: number }[]>(() => [
-  { k: 'all', label: 'All', n: samples.value.length },
-  { k: 'unassigned', label: 'Unassigned', n: unassignedCount.value },
-  { k: 'assigned', label: 'Assigned', n: assignedCount.value },
-])
-
-function subsWithout(node: { subs2: Map<string, number> }) {
-  return [...node.subs2.entries()].filter(([key]) => key !== '—')
-}
-
-function toggle(index: number) {
-  const next = new Set(sel.value)
-  next.has(index) ? next.delete(index) : next.add(index)
-  sel.value = next
-}
-function toggleAll() {
-  const next = new Set(sel.value)
-  if (allMatchSelected.value) matchIdx.value.forEach(index => next.delete(index))
-  else matchIdx.value.forEach(index => next.add(index))
-  sel.value = next
-}
-function onGroupInput(value: string) {
-  grp.value = value
-  const seeded = existingGroups.value.get(value)
-  if (seeded) {
-    // Existing cohort → adopt its colour.
-    color.value = seeded
-    return
-  }
-  // New cohort name → pick the first palette swatch not already in use, so
-  // editing a matched name into a new one doesn't bleed the previous colour.
-  const used = new Set(existingGroups.value.values())
-  color.value = props.palette.find(p => !used.has(p.c))?.c ?? props.palette[0]?.c ?? 'var(--grp-1)'
-}
-function assign() {
-  if (sel.value.size === 0 || !grp.value.trim()) return
-  samples.value = assignSamples(samples.value, sel.value, {
-    grp: grp.value,
-    sub: sub.value,
-    sub2: sub2.value,
-    color: color.value,
-  })
-  sel.value = new Set()
-  grp.value = ''
-  sub.value = ''
-  sub2.value = ''
-}
-function clearSel() {
-  sel.value = new Set()
-}
-function onDone() {
-  emit('done', { samples: samples.value })
-}
-</script>
-
-<template>
-  <div class="sg-modal mg2">
-    <!-- header -->
-    <div class="sg-head">
-      <Icon :d="ICON.layers" :size="18" />
-      <span class="sg-head__title">Group samples</span>
-      <span class="sg-head__sub">· when names can’t be parsed automatically</span>
-      <div class="sg-head__spacer" />
-      <div class="sg-mode" role="tablist" aria-label="Grouping mode">
-        <button type="button" class="sg-mode__btn" role="tab" :aria-selected="false" @click="emit('auto')">Auto</button>
-        <button type="button" class="sg-mode__btn sg-mode__btn--on" role="tab" :aria-selected="true">Manual</button>
-      </div>
-      <button class="sg-head__close" aria-label="Close" @click="emit('close')">
-        <Icon :d="ICON.close" :size="16" />
-      </button>
-    </div>
-
-    <div class="mg2-body">
-      <!-- LEFT — find & select -->
-      <div class="mg2-find">
-        <div class="mg2-search">
-          <Icon :d="ICON.search" :size="15" />
-          <input v-model="query" placeholder="Search names — e.g. TumorA, d7, Pt002…" />
-          <button v-if="query" class="mg2-search__clr" aria-label="Clear" @click="query = ''">
-            <Icon :d="ICON.close" :size="13" />
-          </button>
-        </div>
-
-        <div class="mg2-chips">
-          <button
-            v-for="chip in chips"
-            :key="chip.k"
-            class="mg2-chip"
-            :class="{ 'mg2-chip--on': filter === chip.k }"
-            @click="filter = chip.k"
-          >
-            {{ chip.label }}<span class="mg2-chip__n">{{ chip.n }}</span>
-          </button>
-        </div>
-
-        <div class="mg2-selbar">
-          <label class="mg2-check">
-            <input type="checkbox" :checked="allMatchSelected" @change="toggleAll" />
-            <span>Select all<template v-if="filter !== 'all'"> {{ filter }}</template></span>
-          </label>
-          <span class="mg2-selbar__n">{{ matchIdx.length }} shown</span>
-        </div>
-
-        <div class="mg2-list">
-          <div v-if="matches.length === 0" class="mg2-list__empty">No samples match “{{ query }}”.</div>
-          <div
-            v-for="match in matches"
-            :key="match.index"
-            class="mg2-row"
-            :class="{ 'mg2-row--on': sel.has(match.index) }"
-            @click="toggle(match.index)"
-          >
-            <input type="checkbox" class="mg2-cb" :checked="sel.has(match.index)" readonly />
-            <span class="mg2-row__name">{{ match.sample.name }}</span>
-            <span v-if="match.sample.group" class="mg2-row__tag">
-              <span class="sg-dot" :style="{ background: match.sample.color ?? undefined }" />{{ match.sample.group
-              }}<template v-if="match.sample.sub"> · {{ match.sample.sub }}</template>
-            </span>
-            <span v-else class="mg2-row__tag mg2-row__tag--none">unassigned</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- RIGHT — cohorts (persistent output) -->
-      <div class="mg2-cohorts">
-        <div class="mg2-cohorts__head">
-          <span class="mg2-cohorts__t">Cohorts</span>
-          <span class="mg2-cohorts__n">{{ tree.size }} groups</span>
-        </div>
-
-        <div class="mg2-progress">
-          <div class="mg2-progress__top">
-            <span><b>{{ assignedCount }}</b> of {{ samples.length }} grouped</span>
-            <span class="mg2-progress__pct">{{ pct }}%</span>
-          </div>
-          <div class="mg2-progress__track"><div class="mg2-progress__fill" :style="{ width: pct + '%' }" /></div>
-        </div>
-
-        <div class="mg2-tree">
-          <div v-if="tree.size === 0" class="mg2-tree__empty">
-            No cohorts yet. Select samples and assign them to start building.
-          </div>
-          <div v-for="[name, group] in [...tree.entries()]" :key="name" class="mg2-grp">
-            <div class="mg2-grp__row">
-              <span class="sg-dot" :style="{ background: group.color ?? undefined }" />
-              <span class="mg2-grp__name">{{ name }}</span>
-              <span class="mg2-grp__n">{{ group.total }}</span>
-            </div>
-            <template v-for="[subName, subNode] in [...group.subs.entries()]" :key="subName">
-              <div class="mg2-sub">
-                <span class="mg2-sub__name">{{ subName }}</span>
-                <span class="mg2-sub__n">{{ subNode.total }}</span>
-              </div>
-              <div v-for="[s2, count] in subsWithout(subNode)" :key="s2" class="mg2-sub2">
-                <span class="mg2-sub2__name">{{ s2 }}</span>
-                <span class="mg2-sub2__n">{{ count }}</span>
-              </div>
-            </template>
-          </div>
-        </div>
-
-        <button
-          v-if="unassignedCount > 0"
-          class="mg2-unassigned"
-          :class="{ 'mg2-unassigned--on': filter === 'unassigned' }"
-          @click="filter = filter === 'unassigned' ? 'all' : 'unassigned'"
-        >
-          <span class="sg-dot" :style="{ background: 'var(--grp-qc)', opacity: 0.5 }" />
-          <b>{{ unassignedCount }}</b> still unassigned
-          <span class="mg2-unassigned__act">{{ filter === 'unassigned' ? 'showing' : 'show' }}</span>
-        </button>
-      </div>
-    </div>
-
-    <!-- contextual assignment bar -->
-    <div class="mg2-bar" :class="{ 'mg2-bar--open': sel.size > 0 }">
-      <div class="mg2-bar__inner">
-        <span class="mg2-bar__count"><b>{{ sel.size }}</b>&nbsp;selected</span>
-        <Icon :d="ICON.arrow" :size="16" />
-        <div class="mg2-field mg2-field--grow">
-          <span class="mg2-field__l">Group</span>
-          <div class="mg2-combo">
-            <span class="sg-dot" :style="{ background: color }" />
-            <input
-              :list="groupListId"
-              :value="grp"
-              placeholder="Type or pick — e.g. Responder"
-              @input="onGroupInput(($event.target as HTMLInputElement).value)"
-            />
-            <span class="mg2-combo__chev"><Icon :d="ICON.chev" :size="14" /></span>
-            <datalist :id="groupListId">
-              <option v-for="key in groupKeys" :key="key" :value="key" />
-            </datalist>
-          </div>
-        </div>
-        <div class="mg2-field mg2-field--grow">
-          <span class="mg2-field__l">Subgroup</span>
-          <div class="mg2-combo">
-            <input :list="subListId" v-model="sub" placeholder="optional — e.g. Day 7" />
-            <datalist :id="subListId">
-              <option v-for="value in existingSubs" :key="value" :value="value" />
-            </datalist>
-          </div>
-        </div>
-        <div class="mg2-field mg2-field--grow">
-          <span class="mg2-field__l">Sub-subgroup</span>
-          <div class="mg2-combo">
-            <input :list="sub2ListId" v-model="sub2" placeholder="optional — e.g. Batch 2" />
-            <datalist :id="sub2ListId">
-              <option v-for="value in existingSub2" :key="value" :value="value" />
-            </datalist>
-          </div>
-        </div>
-        <div class="mg2-field">
-          <span class="mg2-field__l">Color</span>
-          <div class="mg2-swatches">
-            <button
-              v-for="swatch in palette"
-              :key="swatch.k"
-              class="mg2-swatch"
-              :class="{ 'mg2-swatch--on': color === swatch.c }"
-              :style="{ background: swatch.c }"
-              :aria-label="swatch.k"
-              @click="color = swatch.c"
-            />
-          </div>
-        </div>
-        <div class="mg2-bar__spacer" />
-        <button class="mg2-bar__clear" @click="clearSel">Clear</button>
-        <button class="sg-btn sg-btn--primary" :disabled="!canAssign" @click="assign">
-          <Icon :d="ICON.check" :size="15" />
-          {{ canAssign ? `Assign ${sel.size} to “${grp.trim()}”` : 'Assign' }}
-        </button>
-      </div>
-    </div>
-
-    <!-- footer -->
-    <div class="sg-foot">
-      <span class="sg-foot__hint">{{ assignedCount }} of {{ samples.length }} samples grouped</span>
-      <div class="sg-foot__spacer" />
-      <BaseButton variant="ghost" size="sm" @click="emit('cancel')">Cancel</BaseButton>
-      <BaseButton variant="primary" size="sm" @click="onDone">Done</BaseButton>
-    </div>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/smart-group.css';
-</style>

package/src/components/SmartGroupModal.story.vue

@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import SmartGroupModal from './SmartGroupModal.vue'
-import type { FieldRecipeApplyPayload, ManualDonePayload, SmartGroupMode } from './SmartGroup.types'
-
-function initState() {
-  return { mode: 'auto' as SmartGroupMode, log: '' }
-}
-</script>
-
-<template>
-  <Story title="Lab/SmartGroupModal">
-    <Variant title="Full View" :init-state="initState">
-      <template #default="{ state }">
-        <div class="sg-story">
-          <div class="sg-story__stage">
-            <SmartGroupModal
-              v-model:mode="state.mode"
-              @apply="(r: FieldRecipeApplyPayload) => (state.log = `apply · ${r.groups.length} groups · ${r.route} · ${r.sampleTotal} samples`)"
-              @done="(r: ManualDonePayload) => (state.log = `done · ${r.samples.filter(s => s.group).length} grouped`)"
-              @cancel="state.log = 'cancelled'"
-              @close="state.log = 'closed'"
-            />
-          </div>
-          <p v-if="state.log" class="sg-story__log">{{ state.log }}</p>
-        </div>
-      </template>
-      <template #controls="{ state }">
-        <HstSelect
-          :model-value="state.mode"
-          title="Mode"
-          :options="[
-            { value: 'auto', label: 'Auto — Field Recipe' },
-            { value: 'manual', label: 'Manual — Cohorts' },
-          ]"
-          @update:model-value="(v: string) => (state.mode = v as SmartGroupMode)"
-        />
-      </template>
-    </Variant>
-  </Story>
-</template>
-
-<style scoped>
-.sg-story {
-  padding: 2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  align-items: flex-start;
-}
-.sg-story__stage {
-  width: 980px;
-  height: 640px;
-  max-width: 100%;
-}
-.sg-story__log {
-  margin: 0;
-  font-family: 'Fira Code', monospace;
-  font-size: 0.8125rem;
-  color: var(--text-secondary, #64748b);
-}
-</style>

package/src/components/SmartGroupModal.vue

@@ -1,61 +0,0 @@
-<script setup lang="ts">
-/**
- * SmartGroupModal — the Smart Group "Full View": a shell that toggles between
- * the auto Field Recipe (`SmartGroupFieldRecipe`) and manual cohort builder
- * (`SmartGroupManual`). The active mode is a writable `v-model:mode`; the
- * children request a switch by emitting `manual` / `auto`. Apply/done/cancel/
- * close events bubble up unchanged.
- *
- * Each mode is fully configurable through the optional `auto` / `manual` prop
- * bags; with no props the modal renders the design's reference fixtures.
- */
-import SmartGroupFieldRecipe from './SmartGroupFieldRecipe.vue'
-import SmartGroupManual from './SmartGroupManual.vue'
-import type {
-  FieldRecipeApplyPayload,
-  ManualDonePayload,
-  SmartGroupFieldRecipeProps,
-  SmartGroupManualProps,
-} from './SmartGroup.types'
-
-withDefaults(
-  defineProps<{
-    /** Props forwarded to the auto-mode Field Recipe. */
-    auto?: Partial<SmartGroupFieldRecipeProps>
-    /** Props forwarded to the manual cohort builder. */
-    manual?: Partial<SmartGroupManualProps>
-  }>(),
-  {
-    auto: () => ({}),
-    manual: () => ({}),
-  },
-)
-
-const mode = defineModel<'auto' | 'manual'>('mode', { default: 'auto' })
-
-const emit = defineEmits<{
-  apply: [payload: FieldRecipeApplyPayload]
-  done: [payload: ManualDonePayload]
-  cancel: []
-  close: []
-}>()
-</script>
-
-<template>
-  <SmartGroupFieldRecipe
-    v-if="mode === 'auto'"
-    v-bind="auto"
-    @manual="mode = 'manual'"
-    @apply="emit('apply', $event)"
-    @cancel="emit('cancel')"
-    @close="emit('close')"
-  />
-  <SmartGroupManual
-    v-else
-    v-bind="manual"
-    @auto="mode = 'auto'"
-    @done="emit('done', $event)"
-    @cancel="emit('cancel')"
-    @close="emit('close')"
-  />
-</template>

package/src/components/StatusIndicator.story.vue

@@ -1,99 +0,0 @@
-<script setup lang="ts">
-import StatusIndicator from './StatusIndicator.vue'
-import type { StatusType } from '../types'
-
-const statuses: StatusType[] = ['success', 'warning', 'error', 'info', 'muted']
-</script>
-
-<template>
-  <Story title="Feedback/StatusIndicator">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-          <StatusIndicator
-            :status="state.status"
-            :label="state.label || undefined"
-            :pulse="state.pulse"
-            :color="state.customColor || undefined"
-          />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstSelect
-          v-model="state.status"
-          title="Status"
-          :options="statuses.map(s => ({ label: s, value: s }))"
-        />
-        <HstText v-model="state.label" title="Label" />
-        <HstCheckbox v-model="state.pulse" title="Pulse" />
-        <HstText v-model="state.customColor" title="Custom Color" />
-      </template>
-    </Variant>
-
-    <Variant title="All Statuses">
-      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;">
-        <StatusIndicator
-          v-for="status in statuses"
-          :key="status"
-          :status="status"
-          :label="status.charAt(0).toUpperCase() + status.slice(1)"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="With Pulse">
-      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;">
-        <StatusIndicator status="success" label="Connected" :pulse="true" />
-        <StatusIndicator status="warning" label="Syncing" :pulse="true" />
-        <StatusIndicator status="error" label="Disconnected" :pulse="true" />
-        <StatusIndicator status="info" label="Processing" :pulse="true" />
-      </div>
-    </Variant>
-
-    <Variant title="Dot Only (No Label)">
-      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center; justify-content: center;">
-        <StatusIndicator
-          v-for="status in statuses"
-          :key="status"
-          :status="status"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Custom Colors">
-      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;">
-        <StatusIndicator color="#8b5cf6" label="Purple (custom)" />
-        <StatusIndicator color="#ec4899" label="Pink (custom)" />
-        <StatusIndicator color="#14b8a6" label="Teal (custom)" />
-        <StatusIndicator color="#f97316" label="Orange (custom)" />
-      </div>
-    </Variant>
-
-    <Variant title="Practical Example">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <h3 style="margin: 0 0 1rem; color: var(--text-primary, #1e293b); font-size: 0.875rem; font-weight: 600;">
-          System Status
-        </h3>
-        <div style="display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem;">
-          <div style="display: flex; justify-content: space-between; align-items: center;">
-            <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Database</span>
-            <StatusIndicator status="success" label="Online" />
-          </div>
-          <div style="display: flex; justify-content: space-between; align-items: center;">
-            <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Analysis Engine</span>
-            <StatusIndicator status="warning" label="Degraded" :pulse="true" />
-          </div>
-          <div style="display: flex; justify-content: space-between; align-items: center;">
-            <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">File Storage</span>
-            <StatusIndicator status="success" label="Online" />
-          </div>
-          <div style="display: flex; justify-content: space-between; align-items: center;">
-            <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Scheduler</span>
-            <StatusIndicator status="error" label="Offline" :pulse="true" />
-          </div>
-        </div>
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/StatusIndicator.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-/** Colored dot with optional label and pulse animation for live-status indication. */
-import { computed } from 'vue'
-
-interface Props {
-  status?: 'success' | 'warning' | 'error' | 'info' | 'muted'
-  label?: string
-  pulse?: boolean
-  color?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  status: 'muted',
-  label: undefined,
-  pulse: false,
-  color: undefined,
-})
-
-const dotStyle = computed(() =>
-  props.color ? { backgroundColor: props.color, color: props.color } : {}
-)
-</script>
-
-<template>
-  <span class="mint-status">
-    <span
-      :class="[
-        'mint-status__dot',
-        { [`mint-status__dot--${status}`]: !color },
-        { 'mint-status__dot--pulse': pulse },
-      ]"
-      :style="dotStyle"
-    />
-    <span v-if="label" class="mint-status__label">{{ label }}</span>
-  </span>
-</template>
-
-<style>
-@import '../styles/components/status-indicator.css';
-</style>