@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/AutoGroupModal.vue

@@ -0,0 +1,566 @@
+<script setup lang="ts">
+/** Wizard modal that auto-groups samples by parsing naming patterns or an uploaded CSV file. */
+import { ref, computed, watch, nextTick } from 'vue'
+import BaseModal from './BaseModal.vue'
+import BaseButton from './BaseButton.vue'
+import BaseInput from './BaseInput.vue'
+import StepWizard from './StepWizard.vue'
+import LoadingSpinner from './LoadingSpinner.vue'
+import AlertBox from './AlertBox.vue'
+import { useAutoGroup, parseCSV } from '../composables/useAutoGroup'
+import { useApi } from '../composables/useApi'
+import type { WizardStep } from '../types/components'
+import type { AutoGroupResult } from '../types/auto-group'
+
+export interface Props {
+  modelValue: boolean
+  samples?: string[]
+  experimentId?: number
+  /** Pre-fetched design data — bypasses API fetch when provided */
+  designData?: Record<string, unknown>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  samples: () => [],
+  experimentId: undefined,
+  designData: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'apply': [result: AutoGroupResult]
+}>()
+
+const autoGroup = useAutoGroup()
+const api = useApi()
+const wizardRef = ref<InstanceType<typeof StepWizard> | null>(null)
+const currentStep = ref(0)
+const isDragOver = ref(false)
+const csvFileName = ref('')
+const experimentLoading = ref(false)
+const experimentError = ref<string | null>(null)
+const csvError = ref<string | null>(null)
+
+// Pre-fill from props
+watch(() => props.modelValue, (open) => {
+  if (open) {
+    autoGroup.reset()
+    currentStep.value = 0
+    csvFileName.value = ''
+    experimentError.value = null
+    csvError.value = null
+    if (props.experimentId || props.designData) {
+      fetchExperimentData()
+    } else if (props.samples.length > 0) {
+      autoGroup.rawText.value = props.samples.join('\n')
+    }
+  }
+}, { immediate: true })
+
+// Dynamic steps: skip outlier step when no outliers
+const allSteps: WizardStep[] = [
+  { id: 'input', label: 'Input' },
+  { id: 'outliers', label: 'Outliers' },
+  { id: 'fields', label: 'Fields' },
+  { id: 'preview', label: 'Preview' },
+]
+
+const dynamicSteps = computed<WizardStep[]>(() => {
+  if (autoGroup.hasOutliers.value) {
+    return allSteps
+  }
+  return allSteps.filter(s => s.id !== 'outliers')
+})
+
+// Map current step index to step ID
+const currentStepId = computed(() => {
+  const step = dynamicSteps.value[currentStep.value]
+  return step?.id ?? 'input'
+})
+
+// Clamp step when dynamic steps change
+watch(() => dynamicSteps.value.length, (newLen) => {
+  if (currentStep.value >= newLen) {
+    currentStep.value = newLen - 1
+  }
+})
+
+// Step validity
+const inputValid = computed(() => autoGroup.samples.value.length > 0)
+const fieldsValid = computed(() => autoGroup.enabledFields.value.size > 0)
+
+watch([inputValid, fieldsValid, dynamicSteps], () => {
+  if (!wizardRef.value) return
+  const steps = dynamicSteps.value
+  for (let i = 0; i < steps.length; i++) {
+    const id = steps[i].id
+    if (id === 'input') wizardRef.value.setStepValid(i, inputValid.value)
+    else if (id === 'outliers') wizardRef.value.setStepValid(i, true)
+    else if (id === 'fields') wizardRef.value.setStepValid(i, fieldsValid.value)
+    else if (id === 'preview') wizardRef.value.setStepValid(i, true)
+  }
+}, { immediate: true })
+
+// Navigation
+function handleNext() {
+  if (currentStepId.value === 'input') {
+    autoGroup.parseInput()
+  }
+  // StepWizard handles the actual navigation via v-model
+}
+
+function handleApply() {
+  emit('apply', autoGroup.result.value)
+  emit('update:modelValue', false)
+}
+
+function handleCancel() {
+  emit('update:modelValue', false)
+}
+
+// Experiment data fetching
+async function fetchExperimentData() {
+  if (!props.experimentId && !props.designData) return
+
+  autoGroup.inputMode.value = 'experiment'
+  experimentLoading.value = true
+  experimentError.value = null
+
+  try {
+    let pluginData: Record<string, unknown> | undefined
+
+    if (props.designData) {
+      pluginData = props.designData
+    } else {
+      const result = await api.get<Record<string, unknown>>(
+        `/experiments/${props.experimentId}/data`,
+      )
+      pluginData = result.data as Record<string, unknown> | undefined
+    }
+
+    if (!pluginData || typeof pluginData !== 'object') {
+      experimentError.value = 'No design data found for this experiment'
+      return
+    }
+
+    const success = autoGroup.loadExperimentData(pluginData)
+    if (!success) {
+      experimentError.value = 'No sample metadata found in this experiment'
+      return
+    }
+
+    // Auto-advance to Fields step
+    await nextTick()
+    const fieldsIdx = dynamicSteps.value.findIndex(s => s.id === 'fields')
+    if (fieldsIdx >= 0) {
+      currentStep.value = fieldsIdx
+    }
+  } catch (e) {
+    experimentError.value = e instanceof Error ? e.message : 'Failed to fetch experiment data'
+  } finally {
+    experimentLoading.value = false
+  }
+}
+
+// CSV file handling
+function handleFileDrop(event: DragEvent) {
+  event.preventDefault()
+  isDragOver.value = false
+  const files = event.dataTransfer?.files
+  if (files && files.length > 0) {
+    processFile(files[0])
+  }
+}
+
+function handleFileInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  if (target.files && target.files.length > 0) {
+    processFile(target.files[0])
+  }
+}
+
+async function processFile(file: File) {
+  if (!file.name.endsWith('.csv') && !file.name.endsWith('.tsv')) return
+
+  csvError.value = null
+  try {
+    const text = await file.text()
+    const parsed = parseCSV(text)
+    autoGroup.inputMode.value = 'csv'
+    autoGroup.csvData.value = parsed
+    csvFileName.value = file.name
+  } catch (e) {
+    csvError.value = e instanceof Error ? e.message : 'Failed to parse file'
+  }
+}
+
+function clearCsvFile() {
+  autoGroup.csvData.value = null
+  autoGroup.inputMode.value = 'paste'
+  csvFileName.value = ''
+}
+
+// Experiment metadata field names (for display in experiment mode)
+const experimentFieldNames = computed(() =>
+  autoGroup.csvData.value?.columns.filter(c => c !== 'sample_name') ?? [],
+)
+
+// Last step check
+const isLastStep = computed(() => currentStep.value === dynamicSteps.value.length - 1)
+const isFirstStep = computed(() => currentStep.value === 0)
+</script>
+
+<template>
+  <BaseModal
+    :model-value="modelValue"
+    title="Smart Group"
+    size="lg"
+    @update:model-value="emit('update:modelValue', $event)"
+    @close="handleCancel"
+  >
+    <div class="mld-auto-group">
+      <StepWizard
+        ref="wizardRef"
+        v-model="currentStep"
+        :steps="dynamicSteps"
+        :linear="true"
+        size="sm"
+      >
+        <!-- Step: Input -->
+        <template #step-input>
+          <div class="mld-auto-group__input-step">
+            <!-- Mode toggle -->
+            <div class="mld-auto-group__mode-toggle">
+              <BaseButton
+                v-if="experimentId || designData"
+                :variant="autoGroup.inputMode.value === 'experiment' ? 'primary' : 'secondary'"
+                size="sm"
+                :disabled="experimentLoading"
+                @click="fetchExperimentData"
+              >
+                Experiment
+              </BaseButton>
+              <BaseButton
+                :variant="autoGroup.inputMode.value === 'paste' ? 'primary' : 'secondary'"
+                size="sm"
+                @click="autoGroup.inputMode.value = 'paste'"
+              >
+                Paste
+              </BaseButton>
+              <BaseButton
+                :variant="autoGroup.inputMode.value === 'csv' ? 'primary' : 'secondary'"
+                size="sm"
+                @click="autoGroup.inputMode.value = 'csv'"
+              >
+                CSV
+              </BaseButton>
+            </div>
+
+            <!-- Experiment mode -->
+            <div v-if="autoGroup.inputMode.value === 'experiment'" class="mld-auto-group__experiment">
+              <div v-if="experimentLoading" class="mld-auto-group__experiment-loading">
+                <LoadingSpinner size="sm" />
+                <span>Loading experiment metadata…</span>
+              </div>
+              <div v-else-if="experimentError" class="mld-auto-group__experiment-error">
+                <p>{{ experimentError }}</p>
+                <p>
+                  Switch to <button type="button" class="mld-auto-group__link-btn" @click="autoGroup.inputMode.value = 'paste'">Paste</button>
+                  or <button type="button" class="mld-auto-group__link-btn" @click="autoGroup.inputMode.value = 'csv'">CSV</button> mode instead.
+                </p>
+              </div>
+              <div v-else-if="autoGroup.csvData.value" class="mld-auto-group__experiment-loaded">
+                <div class="mld-auto-group__experiment-summary">
+                  <span class="mld-auto-group__experiment-stat">
+                    <strong>{{ autoGroup.csvData.value.rows.length }}</strong> samples
+                  </span>
+                  <span class="mld-auto-group__experiment-stat">
+                    <strong>{{ experimentFieldNames.length }}</strong> metadata fields
+                  </span>
+                </div>
+                <div class="mld-auto-group__experiment-fields">
+                  <span
+                    v-for="col in experimentFieldNames"
+                    :key="col"
+                    class="mld-auto-group__field-value"
+                  >{{ col }}</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Paste mode -->
+            <div v-if="autoGroup.inputMode.value === 'paste'" class="mld-auto-group__paste">
+              <textarea
+                v-model="autoGroup.rawText.value"
+                class="mld-auto-group__textarea"
+                rows="12"
+                placeholder="Paste sample names, one per line..."
+              />
+              <div v-if="autoGroup.samples.value.length > 0" class="mld-auto-group__sample-count">
+                {{ autoGroup.samples.value.length }} samples
+              </div>
+            </div>
+
+            <!-- CSV mode -->
+            <div v-if="autoGroup.inputMode.value === 'csv'" class="mld-auto-group__csv">
+              <div v-if="!autoGroup.csvData.value"
+                :class="[
+                  'mld-auto-group__dropzone',
+                  isDragOver ? 'mld-auto-group__dropzone--dragover' : '',
+                ]"
+                @drop="handleFileDrop"
+                @dragover.prevent="isDragOver = true"
+                @dragleave="isDragOver = false"
+              >
+                <input
+                  type="file"
+                  accept=".csv,.tsv"
+                  class="mld-auto-group__file-input"
+                  @change="handleFileInput"
+                />
+                <svg class="mld-auto-group__upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+                <p class="mld-auto-group__upload-text">
+                  <span class="mld-auto-group__upload-highlight">Click to upload</span>
+                  or drag and drop a CSV file
+                </p>
+                <p class="mld-auto-group__upload-hint">
+                  CSV or TSV with a header row. First column or column named
+                  "Sample" / "File Name" is used as sample identifier.
+                  Other columns become grouping fields.
+                </p>
+              </div>
+
+              <div v-if="csvError && !autoGroup.csvData.value" class="mld-auto-group__csv-error">
+                {{ csvError }}
+              </div>
+
+              <div v-if="autoGroup.csvData.value" class="mld-auto-group__file-info">
+                <svg class="mld-auto-group__file-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+                <span class="mld-auto-group__file-name">{{ csvFileName }}</span>
+                <span class="mld-auto-group__file-rows">{{ autoGroup.csvData.value.rows.length }} rows</span>
+                <button type="button" class="mld-auto-group__file-clear" @click="clearCsvFile">
+                  Change file
+                </button>
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <!-- Step: Outliers -->
+        <template #step-outliers>
+          <div class="mld-auto-group__outlier-step">
+            <div class="mld-auto-group__outlier-banner">
+              {{ autoGroup.outliers.value.length }} of {{ autoGroup.samples.value.length }}
+              samples have irregular structure
+              (fewer than {{ autoGroup.dominantFieldCount.value }} fields, delimiter
+              <code>{{ autoGroup.delimiter.value }}</code>)
+            </div>
+
+            <div class="mld-auto-group__outlier-batch">
+              <BaseButton size="sm" variant="secondary" @click="autoGroup.setAllOutlierActions('include')">
+                Include All
+              </BaseButton>
+              <BaseButton size="sm" variant="secondary" @click="autoGroup.setAllOutlierActions('exclude')">
+                Exclude All
+              </BaseButton>
+            </div>
+
+            <div class="mld-auto-group__outlier-list">
+              <div
+                v-for="outlier in autoGroup.outliers.value"
+                :key="outlier.index"
+                class="mld-auto-group__outlier-item"
+              >
+                <div class="mld-auto-group__outlier-info">
+                  <code class="mld-auto-group__outlier-name">{{ outlier.sample }}</code>
+                  <span class="mld-auto-group__outlier-badge">{{ outlier.fieldCount }} fields</span>
+                </div>
+                <div class="mld-auto-group__outlier-actions">
+                  <button
+                    type="button"
+                    :class="['mld-auto-group__action-btn', outlier.action === 'include' ? 'mld-auto-group__action-btn--active' : '']"
+                    @click="autoGroup.setOutlierAction(outlier.index, 'include')"
+                  >Include</button>
+                  <button
+                    type="button"
+                    :class="['mld-auto-group__action-btn', outlier.action === 'exclude' ? 'mld-auto-group__action-btn--active mld-auto-group__action-btn--exclude' : '']"
+                    @click="autoGroup.setOutlierAction(outlier.index, 'exclude')"
+                  >Exclude</button>
+                  <button
+                    type="button"
+                    :class="['mld-auto-group__action-btn', outlier.action === 'qc' ? 'mld-auto-group__action-btn--active mld-auto-group__action-btn--qc' : '']"
+                    @click="autoGroup.setOutlierAction(outlier.index, 'qc')"
+                  >QC</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <!-- Step: Fields -->
+        <template #step-fields>
+          <div class="mld-auto-group__field-step">
+            <div class="mld-auto-group__field-grid">
+              <div
+                v-for="col in autoGroup.effectiveColumns.value"
+                :key="col.index"
+                :class="[
+                  'mld-auto-group__field-card',
+                  autoGroup.enabledFields.value.has(col.index) ? 'mld-auto-group__field-card--enabled' : '',
+                ]"
+              >
+                <div class="mld-auto-group__field-header">
+                  <label class="mld-auto-group__field-toggle">
+                    <input
+                      type="checkbox"
+                      :checked="autoGroup.enabledFields.value.has(col.index)"
+                      @change="autoGroup.toggleField(col.index)"
+                    />
+                    <span class="mld-auto-group__field-toggle-label">Group by</span>
+                  </label>
+                  <span class="mld-auto-group__field-cardinality">{{ col.cardinality }} unique</span>
+                </div>
+
+                <BaseInput
+                  :model-value="col.name"
+                  placeholder="Field name..."
+                  class="mld-auto-group__field-name-input"
+                  @update:model-value="autoGroup.renameField(col.index, String($event ?? ''))"
+                />
+
+                <div class="mld-auto-group__field-values">
+                  <span
+                    v-for="val in col.uniqueValues.slice(0, 5)"
+                    :key="val"
+                    class="mld-auto-group__field-value"
+                  >{{ val }}</span>
+                  <span
+                    v-if="col.uniqueValues.length > 5"
+                    class="mld-auto-group__field-more"
+                  >+{{ col.uniqueValues.length - 5 }} more</span>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="autoGroup.enabledFields.value.size > 0" class="mld-auto-group__field-summary">
+              Grouping by:
+              <strong>{{
+                autoGroup.effectiveColumns.value
+                  .filter(c => autoGroup.enabledFields.value.has(c.index))
+                  .map(c => c.name)
+                  .join(' / ')
+              }}</strong>
+            </div>
+
+            <div v-if="autoGroup.enabledFields.value.size === 0" class="mld-auto-group__field-warning">
+              Select at least one field for grouping
+            </div>
+          </div>
+        </template>
+
+        <!-- Step: Preview -->
+        <template #step-preview>
+          <div class="mld-auto-group__preview-step">
+            <div class="mld-auto-group__preview-summary">
+              <span class="mld-auto-group__preview-stat">
+                <strong>{{ autoGroup.groups.value.length }}</strong> groups
+              </span>
+              <span class="mld-auto-group__preview-stat">
+                <strong>{{ autoGroup.groups.value.reduce((sum, g) => sum + g.samples.length, 0) }}</strong> samples
+              </span>
+              <span v-if="autoGroup.excludedSamples.value.length > 0" class="mld-auto-group__preview-stat mld-auto-group__preview-stat--excluded">
+                <strong>{{ autoGroup.excludedSamples.value.length }}</strong> excluded
+              </span>
+            </div>
+
+            <AlertBox
+              v-if="autoGroup.allSingletons.value"
+              type="warning"
+              title="Each group has only one sample"
+            >
+              Your enabled fields produce a unique key for every row, so no aggregation is happening. Go back to <em>Fields</em> and disable any column whose values are unique per sample.
+            </AlertBox>
+
+            <div class="mld-auto-group__preview-groups">
+              <details
+                v-for="group in autoGroup.groups.value"
+                :key="group.name"
+                class="mld-auto-group__preview-group"
+              >
+                <summary class="mld-auto-group__preview-group-header">
+                  <span
+                    class="mld-auto-group__preview-dot"
+                    :style="{ backgroundColor: group.color }"
+                  />
+                  <span class="mld-auto-group__preview-group-name">{{ group.name }}</span>
+                  <span
+                    class="mld-auto-group__preview-group-count"
+                    :style="{ backgroundColor: group.color + '20', color: group.color }"
+                  >{{ group.samples.length }}</span>
+                </summary>
+                <div class="mld-auto-group__preview-samples">
+                  <span
+                    v-for="sample in group.samples"
+                    :key="sample"
+                    class="mld-auto-group__preview-sample"
+                  >{{ sample }}</span>
+                </div>
+              </details>
+            </div>
+
+            <div v-if="autoGroup.excludedSamples.value.length > 0" class="mld-auto-group__preview-excluded">
+              <div class="mld-auto-group__preview-excluded-title">Excluded Samples</div>
+              <div class="mld-auto-group__preview-excluded-list">
+                <span
+                  v-for="sample in autoGroup.excludedSamples.value"
+                  :key="sample"
+                  class="mld-auto-group__preview-sample mld-auto-group__preview-sample--excluded"
+                >{{ sample }}</span>
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <!-- Custom navigation -->
+        <template #navigation="{ goBack, goNext, canProceed }">
+          <div class="mld-auto-group__nav">
+            <BaseButton variant="secondary" @click="handleCancel">
+              Cancel
+            </BaseButton>
+            <div class="mld-auto-group__nav-spacer" />
+            <BaseButton
+              v-if="!isFirstStep"
+              variant="secondary"
+              @click="goBack"
+            >
+              Back
+            </BaseButton>
+            <BaseButton
+              v-if="!isLastStep"
+              variant="primary"
+              :disabled="!canProceed"
+              @click="() => { handleNext(); goNext() }"
+            >
+              Next
+            </BaseButton>
+            <BaseButton
+              v-if="isLastStep"
+              variant="primary"
+              @click="handleApply"
+            >
+              Apply
+            </BaseButton>
+          </div>
+        </template>
+      </StepWizard>
+    </div>
+  </BaseModal>
+</template>
+
+<style>
+@import '../styles/components/auto-group-modal.css';
+</style>

package/src/components/Avatar.story.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import Avatar from './Avatar.vue'
+
+const sizes: ('xs' | 'sm' | 'md' | 'lg' | 'xl')[] = ['xs', 'sm', 'md', 'lg', 'xl']
+
+const users = [
+  { name: 'Alice Morscher', color: undefined },
+  { name: 'Bob Chen', color: undefined },
+  { name: 'Clara Diaz', color: undefined },
+  { name: 'David Kim', color: undefined },
+  { name: 'Elena Rossi', color: undefined },
+]
+</script>
+
+<template>
+  <Story title="Data Display/Avatar">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <Avatar
+            :name="state.name"
+            :initials="state.initials || undefined"
+            :src="state.src || undefined"
+            :size="state.size"
+            :color="state.color || undefined"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.name" title="Name" />
+        <HstText v-model="state.initials" title="Initials (override)" />
+        <HstText v-model="state.src" title="Image URL" />
+        <HstText v-model="state.color" title="Color (hex)" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="All Sizes">
+      <div style="padding: 2rem; display: flex; gap: 1.5rem; align-items: center; justify-content: center;">
+        <div v-for="size in sizes" :key="size" style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <Avatar name="Alice Morscher" :size="size" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ size }}
+          </span>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Name-based Colors">
+      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center; justify-content: center;">
+        <div v-for="user in users" :key="user.name" style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <Avatar :name="user.name" size="lg" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">{{ user.name.split(' ')[0] }}</span>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Default vs explicit initials">
+      <!-- Default: single letter from `name` (matches the platform's
+           getAvatarInitial helper). Pass `:initials="'XX'"` to override
+           with two letters or any other label. -->
+      <div style="padding: 2rem; display: flex; gap: 2rem; align-items: center; justify-content: center;">
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <Avatar name="Estrella Pan" size="lg" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">name="Estrella Pan" → "E"</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <Avatar name="Estrella Pan" initials="EP" size="lg" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">initials="EP" → "EP"</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <Avatar initials="QC" name="Quality Control" size="lg" color="#10B981" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">role badge "QC"</span>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="With Image">
+      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center; justify-content: center;">
+        <Avatar
+          src="https://api.dicebear.com/7.x/initials/svg?seed=AM&backgroundColor=3B82F6"
+          name="Alice Morscher"
+          size="lg"
+        />
+        <Avatar
+          src="https://api.dicebear.com/7.x/initials/svg?seed=BC&backgroundColor=8B5CF6"
+          name="Bob Chen"
+          size="lg"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Fallback (No Name)">
+      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center; justify-content: center;">
+        <Avatar v-for="size in sizes" :key="size" :size="size" />
+      </div>
+    </Variant>
+
+    <Variant title="With status dot">
+      <div style="padding: 2rem; display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;">
+        <Avatar name="Sarah Chen" size="md" status="online" />
+        <Avatar name="Alex Morgan" size="md" status="away" />
+        <Avatar name="Jordan Park" size="md" status="busy" />
+        <Avatar name="Riley Wu" size="md" status="offline" />
+        <Avatar name="Sam Lee" size="lg" src="https://i.pravatar.cc/80?img=11" status="online" />
+        <Avatar name="Taylor Kim" size="xl" status="online" />
+      </div>
+    </Variant>
+  </Story>
+</template>