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

package/src/components/Breadcrumb.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+/** Renders a breadcrumb trail where ancestors are links or emit-based buttons and the last item is the current page. */
+import { computed } from 'vue'
+import type { BreadcrumbItem, BreadcrumbItemInput } from '../types'
+import { normalizeLabelItemInput } from '../utils/items'
+
+interface Props {
+  items: BreadcrumbItemInput[]
+  separator?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  separator: '/',
+})
+
+const emit = defineEmits<{
+  navigate: [item: BreadcrumbItem]
+}>()
+
+const normalizedItems = computed<BreadcrumbItem[]>(() =>
+  props.items.map(normalizeLabelItemInput)
+)
+
+function handleClick(item: BreadcrumbItem) {
+  if (!item.href) {
+    emit('navigate', item)
+  }
+}
+</script>
+
+<template>
+  <nav class="mint-breadcrumb" aria-label="Breadcrumb">
+    <ol class="mint-breadcrumb__list">
+      <li
+        v-for="(item, index) in normalizedItems"
+        :key="index"
+        class="mint-breadcrumb__item"
+      >
+        <slot name="item" :item="item" :index="index" :is-last="index === normalizedItems.length - 1">
+          <a
+            v-if="item.href && index !== normalizedItems.length - 1"
+            :href="item.href"
+            class="mint-breadcrumb__link"
+          >
+            {{ item.label }}
+          </a>
+          <button
+            v-else-if="index !== normalizedItems.length - 1"
+            class="mint-breadcrumb__link"
+            @click="handleClick(item)"
+          >
+            {{ item.label }}
+          </button>
+          <span
+            v-else
+            class="mint-breadcrumb__current"
+            aria-current="page"
+          >
+            {{ item.label }}
+          </span>
+        </slot>
+        <span
+          v-if="index !== normalizedItems.length - 1"
+          class="mint-breadcrumb__separator"
+          aria-hidden="true"
+        >
+          <slot name="separator">
+            <svg v-if="separator === '/'" class="mint-breadcrumb__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="m9 18 6-6-6-6" />
+            </svg>
+            <template v-else>{{ separator }}</template>
+          </slot>
+        </span>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<style>
+@import '../styles/components/breadcrumb.css';
+</style>

package/src/components/Calendar.story.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import Calendar from './Calendar.vue'
+import type { CalendarSelectionMode } from '../types'
+
+const selectionModes: CalendarSelectionMode[] = ['none', 'single', 'range', 'multiple']
+
+const selectedDate = ref<Date | null>(null)
+const selectedDates = ref<Date[]>([])
+const dateRange = ref<{ start: Date; end: Date } | null>(null)
+
+const markers = [
+  { date: new Date(new Date().getFullYear(), new Date().getMonth(), 5), color: '#3B82F6', label: 'Experiment start', type: 'dot' as const },
+  { date: new Date(new Date().getFullYear(), new Date().getMonth(), 10), color: '#10B981', label: 'QC review', type: 'dot' as const },
+  { date: new Date(new Date().getFullYear(), new Date().getMonth(), 15), color: '#F97316', label: 'Plate reading', type: 'dot' as const },
+  { date: new Date(new Date().getFullYear(), new Date().getMonth(), 20), color: '#EC4899', label: 'Analysis due', type: 'dot' as const },
+  { date: new Date(new Date().getFullYear(), new Date().getMonth(), 25), color: '#8B5CF6', label: 'Report submission', type: 'bar' as const },
+]
+</script>
+
+<template>
+  <Story title="Data Display/Calendar">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; justify-content: center;">
+          <Calendar
+            v-model="selectedDate"
+            :selection-mode="state.selectionMode"
+            :show-navigation="state.showNavigation"
+            :show-outside-days="state.showOutsideDays"
+            :fixed-weeks="state.fixedWeeks"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.selectionMode"
+          title="Selection Mode"
+          :options="selectionModes.map(m => ({ label: m, value: m }))"
+        />
+        <HstCheckbox v-model="state.showNavigation" title="Show Navigation" />
+        <HstCheckbox v-model="state.showOutsideDays" title="Show Outside Days" />
+        <HstCheckbox v-model="state.fixedWeeks" title="Fixed Weeks (6 rows)" />
+      </template>
+    </Variant>
+
+    <Variant title="Single Selection">
+      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
+        <Calendar v-model="selectedDate" selection-mode="single" />
+        <p style="font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          Selected: {{ selectedDate ? selectedDate.toLocaleDateString() : 'none' }}
+        </p>
+      </div>
+    </Variant>
+
+    <Variant title="Multiple Selection">
+      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
+        <Calendar v-model="selectedDates" selection-mode="multiple" />
+        <p style="font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          Selected {{ selectedDates.length }} date(s)
+        </p>
+      </div>
+    </Variant>
+
+    <Variant title="Range Selection">
+      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
+        <Calendar v-model="dateRange" selection-mode="range" />
+        <p style="font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          {{ dateRange ? `${dateRange.start.toLocaleDateString()} - ${dateRange.end.toLocaleDateString()}` : 'Click two dates to select a range' }}
+        </p>
+      </div>
+    </Variant>
+
+    <Variant title="With Markers">
+      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
+        <Calendar :markers="markers" selection-mode="single" />
+        <div style="display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.8125rem; color: var(--text-primary, #1e293b);">
+          <span v-for="marker in markers" :key="marker.label" style="display: flex; align-items: center; gap: 0.375rem;">
+            <span :style="{ width: '8px', height: '8px', borderRadius: '50%', background: marker.color }" />
+            {{ marker.label }}
+          </span>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="With Min/Max Date">
+      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
+        <Calendar
+          selection-mode="single"
+          :min-date="new Date(new Date().getFullYear(), new Date().getMonth(), 5)"
+          :max-date="new Date(new Date().getFullYear(), new Date().getMonth(), 25)"
+        />
+        <p style="font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          Only dates between the 5th and 25th of this month are selectable
+        </p>
+      </div>
+    </Variant>
+
+    <Variant title="Week Starts on Sunday">
+      <div style="padding: 2rem; display: flex; justify-content: center;">
+        <Calendar selection-mode="single" :week-starts-on="0" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/Calendar.vue

@@ -0,0 +1,367 @@
+<script setup lang="ts">
+/** Month calendar for single date, multi-date, or range selection with markers and navigation. */
+import { ref, computed, watch } from 'vue'
+import type { CalendarSelectionMode, CalendarMarker, CalendarDayContext } from '../types'
+
+/**
+ * Calendar - Month calendar with date selection, range selection, and custom markers.
+ *
+ * @example
+ * ```vue
+ * <!-- Single date selection -->
+ * <Calendar v-model="selectedDate" />
+ *
+ * <!-- Range selection -->
+ * <Calendar v-model="dateRange" selection-mode="range" />
+ *
+ * <!-- With markers -->
+ * <Calendar :markers="[{ date: '2024-01-15', color: '#ff0000', label: 'Event' }]" />
+ * ```
+ */
+interface Props {
+  /** Selected date(s) - type depends on selectionMode */
+  modelValue?: Date | Date[] | { start: Date; end: Date } | null
+  /** Selection behavior mode */
+  selectionMode?: CalendarSelectionMode
+  /** Display month (0-11) */
+  month?: number
+  /** Display year */
+  year?: number
+  /** Always show 6 weeks (42 days) */
+  fixedWeeks?: boolean
+  /** First day of week (0=Sunday, 1=Monday, etc.) */
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+  /** Show days from adjacent months */
+  showOutsideDays?: boolean
+  /** Show month navigation buttons */
+  showNavigation?: boolean
+  /** Visual markers on specific dates */
+  markers?: CalendarMarker[]
+  /** Earliest selectable date */
+  minDate?: Date | string
+  /** Latest selectable date */
+  maxDate?: Date | string
+  /** Explicitly disabled dates */
+  disabledDates?: Array<Date | string>
+  /** Custom disabled date logic */
+  isDateDisabled?: (date: Date) => boolean
+  /** Locale for date formatting */
+  locale?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  selectionMode: 'single',
+  fixedWeeks: true,
+  weekStartsOn: 1,
+  showOutsideDays: true,
+  showNavigation: true,
+  markers: () => [],
+  disabledDates: () => [],
+  locale: 'en-US',
+})
+
+/**
+ * @event update:modelValue - Emitted when date selection changes (v-model support)
+ * @event update:month - Emitted when displayed month changes
+ * @event update:year - Emitted when displayed year changes
+ * @event day-click - Emitted when a day is clicked, includes day context
+ * @event navigate - Emitted when month navigation occurs
+ */
+const emit = defineEmits<{
+  'update:modelValue': [value: Date | Date[] | { start: Date; end: Date } | null]
+  'update:month': [month: number]
+  'update:year': [year: number]
+  'day-click': [context: CalendarDayContext]
+  navigate: [direction: 'prev' | 'next', month: number, year: number]
+}>()
+
+const today = new Date()
+today.setHours(0, 0, 0, 0)
+
+const currentMonth = ref(props.month ?? today.getMonth())
+const currentYear = ref(props.year ?? today.getFullYear())
+
+// Range hover tracking
+const hoveredDate = ref<Date | null>(null)
+
+watch(() => props.month, (val) => { if (val !== undefined) currentMonth.value = val })
+watch(() => props.year, (val) => { if (val !== undefined) currentYear.value = val })
+
+const monthLabel = computed(() => {
+  const date = new Date(currentYear.value, currentMonth.value, 1)
+  return date.toLocaleDateString(props.locale, { month: 'long', year: 'numeric' })
+})
+
+const weekDayLabels = computed(() => {
+  const labels: string[] = []
+  // Use Jan 7, 2024 (Sunday) as reference, then offset by weekStartsOn
+  const base = new Date(2024, 0, 7 + props.weekStartsOn)
+  for (let i = 0; i < 7; i++) {
+    const d = new Date(base)
+    d.setDate(d.getDate() + i)
+    labels.push(d.toLocaleDateString(props.locale, { weekday: 'short' }))
+  }
+  return labels
+})
+
+function toDateKey(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+function parseDate(val: Date | string): Date {
+  if (val instanceof Date) return val
+  const d = new Date(val + 'T00:00:00')
+  return d
+}
+
+function isSameDay(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+}
+
+const disabledDateSet = computed(() => {
+  const set = new Set<string>()
+  for (const d of props.disabledDates) {
+    const parsed = parseDate(d)
+    set.add(toDateKey(parsed))
+  }
+  return set
+})
+
+const markerMap = computed(() => {
+  const map = new Map<string, CalendarMarker[]>()
+  for (const marker of props.markers) {
+    const date = parseDate(marker.date)
+    const key = toDateKey(date)
+    const markers = map.get(key)
+    if (markers) {
+      markers.push(marker)
+    } else {
+      map.set(key, [marker])
+    }
+  }
+  return map
+})
+
+function isDateSelected(date: Date): boolean {
+  const val = props.modelValue
+  if (!val) return false
+  if (val instanceof Date) return isSameDay(date, val)
+  if (Array.isArray(val)) return val.some(d => isSameDay(date, d))
+  if ('start' in val && 'end' in val) {
+    return isSameDay(date, val.start) || isSameDay(date, val.end)
+  }
+  return false
+}
+
+function isInRange(date: Date): boolean {
+  if (props.selectionMode !== 'range') return false
+  const val = props.modelValue
+  if (!val || !('start' in (val as object))) return false
+  const range = val as { start: Date; end: Date }
+
+  const t = date.getTime()
+  const start = range.start?.getTime()
+  if (!start) return false
+
+  // If hovering during selection (before end is set)
+  if (!range.end && hoveredDate.value) {
+    const hov = hoveredDate.value.getTime()
+    const [lo, hi] = start <= hov ? [start, hov] : [hov, start]
+    return t > lo && t < hi
+  }
+
+  // Complete range
+  if (range.end) {
+    const end = range.end.getTime()
+    return t > start && t < end
+  }
+
+  return false
+}
+
+function isDisabled(date: Date): boolean {
+  if (disabledDateSet.value.has(toDateKey(date))) return true
+  if (props.isDateDisabled?.(date)) return true
+  if (props.minDate) {
+    const min = parseDate(props.minDate)
+    if (date < min) return true
+  }
+  if (props.maxDate) {
+    const max = parseDate(props.maxDate)
+    if (date > max) return true
+  }
+  return false
+}
+
+const calendarDays = computed<CalendarDayContext[]>(() => {
+  const first = new Date(currentYear.value, currentMonth.value, 1)
+  const startDow = first.getDay()
+  const offset = (startDow - props.weekStartsOn + 7) % 7
+
+  const totalCells = props.fixedWeeks ? 42 : (() => {
+    const daysInMonth = new Date(currentYear.value, currentMonth.value + 1, 0).getDate()
+    const needed = offset + daysInMonth
+    return Math.ceil(needed / 7) * 7
+  })()
+
+  const days: CalendarDayContext[] = []
+  for (let i = 0; i < totalCells; i++) {
+    const date = new Date(currentYear.value, currentMonth.value, 1 - offset + i)
+    date.setHours(0, 0, 0, 0)
+    const key = toDateKey(date)
+    days.push({
+      date,
+      dayOfMonth: date.getDate(),
+      isToday: isSameDay(date, today),
+      isSelected: isDateSelected(date),
+      isInRange: isInRange(date),
+      isDisabled: isDisabled(date),
+      isOutsideMonth: date.getMonth() !== currentMonth.value,
+      markers: markerMap.value.get(key) ?? [],
+    })
+  }
+  return days
+})
+
+// Range selection state
+const rangeStart = ref<Date | null>(null)
+
+function handleDayClick(day: CalendarDayContext) {
+  if (day.isDisabled) return
+  if (!props.showOutsideDays && day.isOutsideMonth) return
+
+  emit('day-click', day)
+
+  if (props.selectionMode === 'none') return
+
+  if (props.selectionMode === 'single') {
+    emit('update:modelValue', day.date)
+  } else if (props.selectionMode === 'multiple') {
+    const current = (props.modelValue as Date[] | undefined) ?? []
+    const idx = current.findIndex(d => isSameDay(d, day.date))
+    if (idx >= 0) {
+      const next = [...current]
+      next.splice(idx, 1)
+      emit('update:modelValue', next)
+    } else {
+      emit('update:modelValue', [...current, day.date])
+    }
+  } else if (props.selectionMode === 'range') {
+    if (!rangeStart.value) {
+      rangeStart.value = day.date
+    } else {
+      const start = rangeStart.value
+      const end = day.date
+      rangeStart.value = null
+      const ordered = start.getTime() <= end.getTime()
+        ? { start, end }
+        : { start: end, end: start }
+      emit('update:modelValue', ordered)
+    }
+  }
+}
+
+function handleDayHover(day: CalendarDayContext) {
+  if (props.selectionMode === 'range' && rangeStart.value) {
+    hoveredDate.value = day.date
+  }
+}
+
+function prevMonth() {
+  if (currentMonth.value === 0) {
+    currentMonth.value = 11
+    currentYear.value--
+    emit('update:year', currentYear.value)
+  } else {
+    currentMonth.value--
+  }
+  emit('update:month', currentMonth.value)
+  emit('navigate', 'prev', currentMonth.value, currentYear.value)
+}
+
+function nextMonth() {
+  if (currentMonth.value === 11) {
+    currentMonth.value = 0
+    currentYear.value++
+    emit('update:year', currentYear.value)
+  } else {
+    currentMonth.value++
+  }
+  emit('update:month', currentMonth.value)
+  emit('navigate', 'next', currentMonth.value, currentYear.value)
+}
+</script>
+
+<template>
+  <div class="mint-calendar">
+    <div v-if="showNavigation" class="mint-calendar__header">
+      <button type="button" class="mint-calendar__nav-btn" aria-label="Previous month" @click="prevMonth">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="m15 18-6-6 6-6" />
+        </svg>
+      </button>
+      <slot name="header" :month="currentMonth" :year="currentYear" :prev-month="prevMonth" :next-month="nextMonth">
+        <span class="mint-calendar__title">{{ monthLabel }}</span>
+      </slot>
+      <button type="button" class="mint-calendar__nav-btn" aria-label="Next month" @click="nextMonth">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="m9 18 6-6-6-6" />
+        </svg>
+      </button>
+    </div>
+
+    <div class="mint-calendar__weekdays">
+      <span
+        v-for="(label, i) in weekDayLabels"
+        :key="i"
+        class="mint-calendar__weekday"
+      >
+        <slot name="week-day" :day-name="label" :index="i">{{ label }}</slot>
+      </span>
+    </div>
+
+    <div class="mint-calendar__grid">
+      <button
+        v-for="(day, i) in calendarDays"
+        :key="i"
+        type="button"
+        :disabled="day.isDisabled"
+        :class="[
+          'mint-calendar__day',
+          {
+            'mint-calendar__day--today': day.isToday,
+            'mint-calendar__day--selected': day.isSelected,
+            'mint-calendar__day--in-range': day.isInRange,
+            'mint-calendar__day--disabled': day.isDisabled,
+            'mint-calendar__day--outside': day.isOutsideMonth,
+            'mint-calendar__day--interactive': selectionMode !== 'none' && !day.isDisabled,
+          },
+        ]"
+        @click="handleDayClick(day)"
+        @mouseenter="handleDayHover(day)"
+      >
+        <slot name="day-content" :day="day">
+          <span class="mint-calendar__day-number">{{ day.dayOfMonth }}</span>
+          <div v-if="day.markers.length > 0" class="mint-calendar__markers">
+            <span
+              v-for="(marker, mi) in day.markers.slice(0, 3)"
+              :key="mi"
+              :class="[
+                'mint-calendar__marker',
+                `mint-calendar__marker--${marker.type ?? 'dot'}`,
+              ]"
+              :style="marker.color ? { '--marker-color': marker.color } : {}"
+              :title="marker.label"
+            />
+          </div>
+        </slot>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/calendar.css';
+</style>

package/src/components/ChartContainer.story.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import ChartContainer from './ChartContainer.vue'
+</script>
+
+<template>
+  <Story title="Data Display/ChartContainer">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 700px; margin: 0 auto;">
+          <ChartContainer
+            :title="state.showTitle ? state.title : undefined"
+            :description="state.showDescription ? state.description : undefined"
+            :loading="state.loading"
+            :empty="state.empty"
+            :empty-message="state.emptyMessage"
+          >
+            <div style="height: 300px; display: flex; align-items: center; justify-content: center; color: var(--text-muted, #94a3b8); font-style: italic; border: 2px dashed var(--border-color, #e2e8f0); border-radius: 0.5rem;">
+              Chart content goes here (e.g. Chart.js, D3, etc.)
+            </div>
+          </ChartContainer>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.showTitle" title="Show Title" />
+        <HstText v-model="state.title" title="Title" />
+        <HstCheckbox v-model="state.showDescription" title="Show Description" />
+        <HstText v-model="state.description" title="Description" />
+        <HstCheckbox v-model="state.loading" title="Loading" />
+        <HstCheckbox v-model="state.empty" title="Empty" />
+        <HstText v-model="state.emptyMessage" title="Empty Message" />
+      </template>
+    </Variant>
+
+    <Variant title="With Title and Description">
+      <div style="padding: 2rem; max-width: 700px; margin: 0 auto;">
+        <ChartContainer
+          title="Dose-Response Curve"
+          description="IC50 analysis for compound MINT-2847 across 8-point dilution series"
+        >
+          <div style="height: 300px; display: flex; align-items: center; justify-content: center; color: var(--text-muted, #94a3b8); font-style: italic; border: 2px dashed var(--border-color, #e2e8f0); border-radius: 0.5rem;">
+            Sigmoidal dose-response chart placeholder
+          </div>
+        </ChartContainer>
+      </div>
+    </Variant>
+
+    <Variant title="Loading State">
+      <div style="padding: 2rem; max-width: 700px; margin: 0 auto;">
+        <ChartContainer
+          title="Cell Viability Heatmap"
+          description="Processing 96-well plate data..."
+          loading
+        >
+          <div style="height: 300px;" />
+        </ChartContainer>
+      </div>
+    </Variant>
+
+    <Variant title="Empty State">
+      <div style="padding: 2rem; max-width: 700px; margin: 0 auto;">
+        <ChartContainer
+          title="Experiment Results"
+          empty
+          empty-message="No results found. Run an analysis to see data here."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Toolbar Slot">
+      <div style="padding: 2rem; max-width: 700px; margin: 0 auto;">
+        <ChartContainer title="Proliferation Assay">
+          <template #toolbar>
+            <div style="display: flex; gap: 0.5rem;">
+              <button type="button" style="padding: 0.25rem 0.75rem; font-size: 0.8125rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer;">
+                Linear
+              </button>
+              <button type="button" style="padding: 0.25rem 0.75rem; font-size: 0.8125rem; border: 1px solid var(--mint-primary, #3B82F6); border-radius: 0.375rem; background: var(--mint-primary, #3B82F6); color: #fff; cursor: pointer;">
+                Log
+              </button>
+            </div>
+          </template>
+          <div style="height: 300px; display: flex; align-items: center; justify-content: center; color: var(--text-muted, #94a3b8); font-style: italic; border: 2px dashed var(--border-color, #e2e8f0); border-radius: 0.5rem;">
+            Chart with toolbar controls
+          </div>
+        </ChartContainer>
+      </div>
+    </Variant>
+
+    <Variant title="With Legend Slot">
+      <div style="padding: 2rem; max-width: 700px; margin: 0 auto;">
+        <ChartContainer title="Multi-Compound Comparison">
+          <div style="height: 250px; display: flex; align-items: center; justify-content: center; color: var(--text-muted, #94a3b8); font-style: italic; border: 2px dashed var(--border-color, #e2e8f0); border-radius: 0.5rem;">
+            Overlay chart placeholder
+          </div>
+          <template #legend>
+            <div style="display: flex; gap: 1.5rem; justify-content: center; font-size: 0.8125rem; color: var(--text-primary, #1e293b);">
+              <span style="display: flex; align-items: center; gap: 0.375rem;">
+                <span style="width: 12px; height: 12px; border-radius: 50%; background: #3B82F6;" /> MINT-2847
+              </span>
+              <span style="display: flex; align-items: center; gap: 0.375rem;">
+                <span style="width: 12px; height: 12px; border-radius: 50%; background: #EC4899;" /> MINT-3192
+              </span>
+              <span style="display: flex; align-items: center; gap: 0.375rem;">
+                <span style="width: 12px; height: 12px; border-radius: 50%; background: #10B981;" /> Vehicle
+              </span>
+            </div>
+          </template>
+        </ChartContainer>
+      </div>
+    </Variant>
+  </Story>
+</template>