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

package/src/components/AppSidebar.vue

@@ -1,471 +0,0 @@
-<script setup lang="ts">
-/**
- * AppSidebar - Context-sensitive toolkit panel
- *
- * Shows tool sections relevant to the active view. Sections are defined via
- * the `panels` config and rendered as CollapsibleCards. Controls can be
- * provided through named slots or auto-rendered from FormBuilder schemas.
- *
- * When activeView is omitted, the first non-empty panel view is selected.
- * When no view has matching panels, the sidebar hides entirely.
- *
- * @example Recommended
- * ```vue
- * <AppSidebar v-model="values" :model="sidebarModel" />
- * ```
- */
-import { computed, ref, useSlots, type Slots } from 'vue'
-import type { PillNavItem, SidebarToolSection } from '../types'
-import type { FormEnhancements, FormSchema } from '../types/form-builder'
-import {
-  controlsToSectionFormSchemas,
-  controlsToSidebarPanels,
-  getControlDefaults,
-  mergeControlWorkspaceOptions,
-  resolveControlModel,
-  type ControlModel,
-  type ControlModelBinding,
-  type ControlSchema,
-  type ControlWorkspaceOptions,
-} from '../composables/useControlSchema'
-import CollapsibleCard from './CollapsibleCard.vue'
-import FormBuilder from './FormBuilder.vue'
-
-interface Props {
-  /** Optional chrome title rendered above generated sections. */
-  title?: string
-  /** Optional secondary chrome copy rendered below title. */
-  subtitle?: string
-  /** Optional compact badge/count rendered in the chrome header. */
-  badge?: string | number
-  /** Visual preset for common plugin sidebars. `analysis` preserves the LEAF-style MINT analysis sidebar design language. */
-  variant?: 'default' | 'analysis'
-  /** Map of view IDs to their tool sections */
-  panels?: Record<string, SidebarToolSection[]>
-  /** Which view's panels to display. Defaults to the first non-empty panel view. */
-  activeView?: string
-  /** Floating variant with absolute positioning. Defaults to false for analysis variant. */
-  floating?: boolean
-  /** Compact layout: smaller headers, tighter spacing, no icon backgrounds */
-  dense?: boolean
-  /** Width when visible. Defaults to 20rem for analysis variant, otherwise 280px. */
-  width?: string
-  /** Position sidebar on left or right side */
-  side?: 'left' | 'right'
-  /** Toggle state map: sectionId → boolean */
-  toggleState?: Record<string, boolean>
-  /** Optional FormBuilder schemas keyed by section ID. Used when no section slot is provided. */
-  forms?: Record<string, FormSchema>
-  /** Generated view IDs from useControlSchema(). Consumed for clean v-bind ergonomics. */
-  viewIds?: string[]
-  /** Generated AppTopBar pillNav-compatible view items from useControlSchema(). Consumed for clean v-bind ergonomics. */
-  viewItems?: PillNavItem[]
-  /** Default view ID used when activeView is omitted. */
-  defaultView?: string
-  /** Model returned by defineControlModel(), or a raw nested ControlModel for one-step sidebar/form generation. */
-  model?: ControlModel | ControlModelBinding
-  /** Compact control schema. When provided, AppSidebar generates panels, section forms, and default values. */
-  controls?: ControlSchema
-  /** Options passed to compact control schema generation, including shared initialValues. */
-  controlOptions?: ControlWorkspaceOptions
-  /** DOM id for the scrollable content area. Use with Teleport when route/tab children own sidebar controls. */
-  contentId?: string
-  /** Render the sidebar shell even when no panel matches the active view. Useful for default-slot or Teleport-driven sidebars. */
-  showWhenEmpty?: boolean
-  /** Shared values for auto-rendered section forms. Supports default v-model. */
-  modelValue?: Record<string, unknown>
-  /** Shared values for auto-rendered section forms */
-  values?: Record<string, unknown>
-  /** Runtime FormBuilder enhancements for auto-rendered section forms */
-  formEnhancements?: FormEnhancements<Record<string, unknown>>
-  /** Show submit/cancel actions inside auto-rendered section forms */
-  showFormActions?: boolean
-  /** Loading/saving state for auto-rendered section forms */
-  formLoading?: boolean
-  /** Disabled state for auto-rendered section forms */
-  formDisabled?: boolean
-  /** Readonly state for auto-rendered section forms */
-  formReadonly?: boolean
-  /** Size passed to auto-rendered section forms */
-  formSize?: 'sm' | 'md' | 'lg'
-  /** Show a built-in collapse/expand button in the sidebar chrome. Defaults to true for analysis variant. */
-  collapsible?: boolean
-  /** Controlled collapsed state. */
-  collapsed?: boolean
-  /** Initial collapsed state when collapsed is uncontrolled. */
-  defaultCollapsed?: boolean
-  /** Width when collapsed. */
-  collapsedWidth?: string
-  /** Accessible label for the collapse action. */
-  collapseButtonLabel?: string
-  /** Accessible label for the expand action. */
-  expandButtonLabel?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: undefined,
-  subtitle: undefined,
-  badge: undefined,
-  variant: 'default',
-  panels: () => ({}),
-  activeView: '',
-  floating: undefined,
-  dense: false,
-  width: undefined,
-  side: 'left',
-  toggleState: () => ({}),
-  forms: () => ({}),
-  viewIds: () => [],
-  viewItems: () => [],
-  defaultView: '',
-  model: undefined,
-  controlOptions: () => ({}),
-  contentId: undefined,
-  showWhenEmpty: false,
-  modelValue: undefined,
-  values: () => ({}),
-  showFormActions: false,
-  formLoading: false,
-  formDisabled: false,
-  formReadonly: false,
-  formSize: 'sm',
-  collapsible: undefined,
-  collapsed: undefined,
-  defaultCollapsed: false,
-  collapsedWidth: '3rem',
-  collapseButtonLabel: 'Collapse sidebar',
-  expandButtonLabel: 'Expand sidebar',
-})
-
-const emit = defineEmits<{
-  'update:toggle': [sectionId: string, value: boolean]
-  'update:modelValue': [values: Record<string, unknown>]
-  'update:values': [values: Record<string, unknown>]
-  'update:collapsed': [value: boolean]
-  'section-action': [sectionId: string, actionId: string]
-  'form-submit': [sectionId: string, values: Record<string, unknown>]
-  'form-cancel': [sectionId: string]
-}>()
-
-const slots: Slots = useSlots()
-const internalCollapsed = ref(props.defaultCollapsed)
-const collapsedModel = computed({
-  get: () => props.collapsed ?? internalCollapsed.value,
-  set: (value: boolean) => {
-    internalCollapsed.value = value
-    emit('update:collapsed', value)
-  },
-})
-
-const isAnalysisVariant = computed(() => props.variant === 'analysis')
-const resolvedFloating = computed(() => props.floating ?? !isAnalysisVariant.value)
-const resolvedWidth = computed(() => props.width ?? (isAnalysisVariant.value ? '20rem' : '280px'))
-const resolvedCollapsible = computed(() => props.collapsible ?? isAnalysisVariant.value)
-
-const resolvedModel = computed<ControlModelBinding | undefined>(() => {
-  return resolveControlModel(props.model)
-})
-
-const resolvedControls = computed<ControlSchema | undefined>(() =>
-  props.controls ?? resolvedModel.value?.controls,
-)
-
-const resolvedControlOptions = computed<ControlWorkspaceOptions>(() =>
-  mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, props.controlOptions)
-)
-
-const generatedPanels = computed<Record<string, SidebarToolSection[]>>(() => {
-  if (!resolvedControls.value) return {}
-  return controlsToSidebarPanels(resolvedControls.value, resolvedControlOptions.value)
-})
-
-const generatedForms = computed<Record<string, FormSchema>>(() => {
-  if (!resolvedControls.value) return {}
-  return controlsToSectionFormSchemas(resolvedControls.value, resolvedControlOptions.value)
-})
-
-const generatedDefaults = computed<Record<string, unknown>>(() => {
-  if (!resolvedControls.value) return {}
-  return {
-    ...getControlDefaults(resolvedControls.value),
-    ...(resolvedControlOptions.value.initialValues ?? {}),
-  }
-})
-
-const resolvedPanels = computed<Record<string, SidebarToolSection[]>>(() =>
-  mergeSidebarPanels(generatedPanels.value, props.panels),
-)
-
-const resolvedForms = computed<Record<string, FormSchema>>(() => ({
-  ...generatedForms.value,
-  ...props.forms,
-}))
-
-const resolvedValues = computed<Record<string, unknown>>(() => ({
-  ...generatedDefaults.value,
-  ...(props.modelValue ?? props.values),
-}))
-
-const resolvedActiveView = computed(() => {
-  if (props.activeView) return props.activeView
-  if (props.defaultView) return props.defaultView
-  return firstVisibleViewId(resolvedPanels.value)
-})
-
-const activeSections = computed<SidebarToolSection[]>(() => {
-  if (!resolvedActiveView.value || !resolvedPanels.value[resolvedActiveView.value]) return []
-  return resolvedPanels.value[resolvedActiveView.value]
-})
-
-const isVisible = computed<boolean>(() =>
-  activeSections.value.length > 0 || props.showWhenEmpty || Boolean(slots.default),
-)
-
-const sidebarClasses = computed<string[]>(() => [
-  'mint-sidebar',
-  `mint-sidebar--${props.side}`,
-  `mint-sidebar--${props.variant}`,
-  resolvedFloating.value ? 'mint-sidebar--floating' : 'mint-sidebar--static',
-  props.dense ? 'mint-sidebar--dense' : '',
-  resolvedCollapsible.value ? 'mint-sidebar--collapsible' : '',
-  collapsedModel.value ? 'mint-sidebar--collapsed' : '',
-  !isVisible.value ? 'mint-sidebar--hidden' : '',
-])
-
-const sidebarStyle = computed<Record<string, string>>(() => ({
-  width: collapsedModel.value ? props.collapsedWidth : resolvedWidth.value,
-}))
-
-function handleFormUpdate(values: Record<string, unknown>) {
-  const nextValues = { ...resolvedValues.value, ...values }
-  emit('update:modelValue', nextValues)
-  emit('update:values', nextValues)
-}
-
-function handleFormSubmit(sectionId: string, values: Record<string, unknown>) {
-  emit('form-submit', sectionId, values)
-}
-
-function handleFormCancel(sectionId: string) {
-  emit('form-cancel', sectionId)
-}
-
-function toggleCollapsed() {
-  collapsedModel.value = !collapsedModel.value
-}
-
-function expandCollapsed() {
-  collapsedModel.value = false
-}
-
-function handleSectionAction(sectionId: string, actionId: string) {
-  emit('section-action', sectionId, actionId)
-}
-
-function isSvgIcon(icon?: string | string[]): boolean {
-  if (!icon) return false
-  return Array.isArray(icon) || icon.startsWith('M') || icon.startsWith('m')
-}
-
-function sectionInitial(section: SidebarToolSection): string {
-  return section.label.trim().charAt(0).toUpperCase() || '?'
-}
-
-function railIconStyle(section: SidebarToolSection): Record<string, string> {
-  return {
-    backgroundColor: section.iconBg ?? 'var(--color-primary-soft)',
-    color: section.iconColor ?? 'var(--color-primary)',
-  }
-}
-
-function badgeToneClass(section: SidebarToolSection): string {
-  return `mint-sidebar__rail-badge--${section.badgeTone ?? 'cta'}`
-}
-
-function mergeSidebarPanels(
-  generated: Record<string, SidebarToolSection[]>,
-  explicit: Record<string, SidebarToolSection[]>,
-): Record<string, SidebarToolSection[]> {
-  const merged: Record<string, SidebarToolSection[]> = {}
-  const viewIds = new Set([...Object.keys(generated), ...Object.keys(explicit)])
-
-  for (const viewId of viewIds) {
-    const sectionsById = new Map<string, SidebarToolSection>()
-    for (const section of generated[viewId] ?? []) {
-      sectionsById.set(section.id, section)
-    }
-    for (const section of explicit[viewId] ?? []) {
-      sectionsById.set(section.id, section)
-    }
-    merged[viewId] = [...sectionsById.values()]
-  }
-
-  return merged
-}
-
-function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): string {
-  for (const [viewId, sections] of Object.entries(panels)) {
-    if (sections.length > 0) return viewId
-  }
-  return ''
-}
-
-</script>
-
-<template>
-  <aside
-    :class="sidebarClasses"
-    :style="sidebarStyle"
-  >
-    <!-- Header slot / built-in chrome -->
-    <div
-      v-if="$slots.header || title || subtitle || badge !== undefined || resolvedCollapsible"
-      class="mint-sidebar__header"
-    >
-      <slot
-        name="header"
-        :collapsed="collapsedModel"
-        :toggle-collapsed="toggleCollapsed"
-      >
-        <div v-if="!collapsedModel" class="mint-sidebar__heading">
-          <div class="mint-sidebar__heading-copy">
-            <h2 v-if="title" class="mint-sidebar__title">{{ title }}</h2>
-            <p v-if="subtitle" class="mint-sidebar__subtitle">{{ subtitle }}</p>
-          </div>
-          <span v-if="badge !== undefined" class="mint-sidebar__badge">{{ badge }}</span>
-        </div>
-        <button
-          v-if="resolvedCollapsible"
-          type="button"
-          class="mint-sidebar__collapse-button"
-          :aria-label="collapsedModel ? expandButtonLabel : collapseButtonLabel"
-          :aria-expanded="!collapsedModel"
-          @click="toggleCollapsed"
-        >
-          <svg
-            class="mint-sidebar__collapse-icon"
-            :class="{ 'mint-sidebar__collapse-icon--collapsed': collapsedModel }"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-          >
-            <path d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
-          </svg>
-        </button>
-      </slot>
-    </div>
-
-    <!-- Tool sections -->
-    <div
-      v-if="!collapsedModel"
-      :id="contentId"
-      class="mint-sidebar__sections"
-    >
-      <CollapsibleCard
-        v-for="section in activeSections"
-        :key="section.id"
-        :title="section.label"
-        :subtitle="section.subtitle"
-        :icon="section.icon"
-        :icon-color="section.iconColor"
-        :icon-bg="section.iconBg"
-        :badge="section.badge"
-        :badge-tone="section.badgeTone"
-        :actions="section.actions"
-        :dense="dense"
-        :default-open="section.defaultOpen !== false"
-        :show-toggle="section.showToggle"
-        :toggle-value="toggleState[section.id] ?? false"
-        @action="handleSectionAction(section.id, $event)"
-        @update:toggle-value="emit('update:toggle', section.id, $event)"
-      >
-        <slot :name="`section-${section.id}`">
-          <FormBuilder
-            v-if="resolvedForms[section.id]"
-            :model-value="resolvedValues"
-            :schema="resolvedForms[section.id]"
-            :enhancements="formEnhancements"
-            :loading="formLoading"
-            :disabled="formDisabled"
-            :readonly="formReadonly"
-            :size="formSize"
-            :show-actions="showFormActions"
-            @update:model-value="handleFormUpdate"
-            @submit="handleFormSubmit(section.id, $event)"
-            @cancel="handleFormCancel(section.id)"
-          />
-        </slot>
-      </CollapsibleCard>
-
-      <slot
-        :sections="activeSections"
-        :active-view="resolvedActiveView"
-        :values="resolvedValues"
-      />
-    </div>
-
-    <div v-else-if="$slots.collapsed" class="mint-sidebar__collapsed">
-      <slot
-        name="collapsed"
-        :sections="activeSections"
-        :expand="expandCollapsed"
-      />
-    </div>
-
-    <div v-else class="mint-sidebar__collapsed mint-sidebar__collapsed--default">
-      <button
-        v-for="section in activeSections"
-        :key="section.id"
-        type="button"
-        class="mint-sidebar__rail-item"
-        :aria-label="`Expand ${section.label}`"
-        :title="section.label"
-        @click="expandCollapsed"
-      >
-        <span class="mint-sidebar__rail-icon" :style="railIconStyle(section)">
-          <svg
-            v-if="section.icon && isSvgIcon(section.icon)"
-            class="mint-sidebar__rail-svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-          >
-            <template v-if="Array.isArray(section.icon)">
-              <path v-for="(d, i) in section.icon" :key="i" :d="d" />
-            </template>
-            <path v-else :d="section.icon" />
-          </svg>
-          <span v-else class="mint-sidebar__rail-text-icon">
-            {{ section.icon || sectionInitial(section) }}
-          </span>
-        </span>
-        <span
-          v-if="section.badge !== undefined"
-          :class="['mint-sidebar__rail-badge', badgeToneClass(section)]"
-        >
-          {{ section.badge }}
-        </span>
-      </button>
-    </div>
-
-    <!-- Footer slot -->
-    <div v-if="!collapsedModel && $slots.footer" class="mint-sidebar__footer">
-      <slot name="footer" />
-    </div>
-    <div v-else-if="collapsedModel && $slots['collapsed-footer']" class="mint-sidebar__footer mint-sidebar__footer--collapsed">
-      <slot name="collapsed-footer" />
-    </div>
-  </aside>
-</template>
-
-<style>
-@import '../styles/components/app-sidebar.css';
-</style>

package/src/components/AppToastContainer.story.vue

@@ -1,157 +0,0 @@
-<script setup lang="ts">
-import AppToastContainer from './AppToastContainer.vue'
-import { useToast } from '../composables/useToast'
-
-const toast = useToast()
-
-function showSuccess() {
-  toast.success('Analysis completed successfully.')
-}
-
-function showError() {
-  toast.error('Failed to process plate data. Please try again.')
-}
-
-function showWarning() {
-  toast.warning('3 wells have missing sample assignments.')
-}
-
-function showInfo() {
-  toast.info('Export file is being generated...')
-}
-
-function showAll() {
-  toast.success('Experiment saved.')
-  setTimeout(() => toast.info('Syncing with platform...'), 300)
-  setTimeout(() => toast.warning('Low disk space detected.'), 600)
-  setTimeout(() => toast.error('Connection timeout on retry.'), 900)
-}
-
-function triggerLongToast(type: 'success' | 'error') {
-  const duration = type === 'success' ? 4000 : 6000
-  toast.show(`Progress bar TTL demo — ${duration}ms`, type, duration)
-}
-</script>
-
-<template>
-  <Story title="Feedback/AppToastContainer">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
-          <p style="margin: 0; color: var(--text-muted, #94a3b8); font-size: 0.875rem;">
-            Click a button to trigger a toast notification.
-          </p>
-          <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;">
-            <button
-              type="button"
-              style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #10b981; color: #fff; cursor: pointer; font-size: 0.875rem;"
-              @click="toast.success(state.message || 'Success!')"
-            >
-              Success
-            </button>
-            <button
-              type="button"
-              style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #ef4444; color: #fff; cursor: pointer; font-size: 0.875rem;"
-              @click="toast.error(state.message || 'Error!')"
-            >
-              Error
-            </button>
-            <button
-              type="button"
-              style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #f59e0b; color: #fff; cursor: pointer; font-size: 0.875rem;"
-              @click="toast.warning(state.message || 'Warning!')"
-            >
-              Warning
-            </button>
-            <button
-              type="button"
-              style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #3b82f6; color: #fff; cursor: pointer; font-size: 0.875rem;"
-              @click="toast.info(state.message || 'Info!')"
-            >
-              Info
-            </button>
-          </div>
-          <AppToastContainer />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstText v-model="state.message" title="Message" />
-      </template>
-    </Variant>
-
-    <Variant title="All Types">
-      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
-        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;">
-          <button
-            type="button"
-            style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #10b981; color: #fff; cursor: pointer; font-size: 0.875rem;"
-            @click="showSuccess"
-          >
-            Success Toast
-          </button>
-          <button
-            type="button"
-            style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #ef4444; color: #fff; cursor: pointer; font-size: 0.875rem;"
-            @click="showError"
-          >
-            Error Toast
-          </button>
-          <button
-            type="button"
-            style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #f59e0b; color: #fff; cursor: pointer; font-size: 0.875rem;"
-            @click="showWarning"
-          >
-            Warning Toast
-          </button>
-          <button
-            type="button"
-            style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #3b82f6; color: #fff; cursor: pointer; font-size: 0.875rem;"
-            @click="showInfo"
-          >
-            Info Toast
-          </button>
-        </div>
-        <AppToastContainer />
-      </div>
-    </Variant>
-
-    <Variant title="Multiple Toasts">
-      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
-        <button
-          type="button"
-          style="padding: 0.5rem 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer; font-size: 0.875rem;"
-          @click="showAll"
-        >
-          Show All Types (stacked)
-        </button>
-        <p style="margin: 0; color: var(--text-muted, #94a3b8); font-size: 0.75rem;">
-          Click to see multiple toasts stacked. Click any toast to dismiss it.
-        </p>
-        <AppToastContainer />
-      </div>
-    </Variant>
-    <Variant title="Progress bar — 4s / 6s TTL">
-      <div style="padding: 2rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
-        <button
-          type="button"
-          style="padding: 0.5rem 1rem; border-radius: 0.375rem; background: var(--mint-success); color: white; border: none; cursor: pointer;"
-          @click="triggerLongToast('success')"
-        >
-          Show success (4s)
-        </button>
-        <button
-          type="button"
-          style="padding: 0.5rem 1rem; border-radius: 0.375rem; background: var(--mint-error); color: white; border: none; cursor: pointer;"
-          @click="triggerLongToast('error')"
-        >
-          Show error (6s)
-        </button>
-        <p style="margin: 0; font-size: 0.8125rem; color: var(--text-muted);">
-          Watch the bottom progress bar shrink over the toast's TTL.
-        </p>
-        <AppToastContainer />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/AppToastContainer.vue

@@ -1,62 +0,0 @@
-<script setup lang="ts">
-/** Preferred toast container driven by useToast, with auto-dismiss progress bar and click-to-close on each notification. */
-import { useToast } from '../composables/useToast'
-import type { Toast } from '../types'
-
-const { toasts, dismiss } = useToast()
-
-const accentColors: Record<Toast['type'], string> = {
-  success: '#10B981',
-  error: '#EF4444',
-  warning: '#F59E0B',
-  info: '#3B82F6',
-}
-</script>
-
-<template>
-  <Teleport to="body">
-    <div class="mint-toast__container">
-      <TransitionGroup name="toast">
-        <div
-          v-for="toast in toasts"
-          :key="toast.id"
-          :class="['mint-toast__item', `mint-toast__item--${toast.type}`]"
-          :style="{
-            borderLeftColor: accentColors[toast.type],
-          }"
-          role="alert"
-          @click="dismiss(toast.id)"
-        >
-          <!-- Lucide circle-check -->
-          <svg v-if="toast.type === 'success'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
-            <circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" />
-          </svg>
-          <!-- Lucide circle-x -->
-          <svg v-else-if="toast.type === 'error'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
-            <circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" />
-          </svg>
-          <!-- Lucide triangle-alert -->
-          <svg v-else-if="toast.type === 'warning'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
-            <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" />
-          </svg>
-          <!-- Lucide info -->
-          <svg v-else class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
-            <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
-          </svg>
-          <span class="mint-toast__message">{{ toast.message }}</span>
-          <span
-            class="mint-toast__progress"
-            :style="{
-              backgroundColor: accentColors[toast.type],
-              animationDuration: `${toast.duration ?? 3500}ms`,
-            }"
-          />
-        </div>
-      </TransitionGroup>
-    </div>
-  </Teleport>
-</template>
-
-<style>
-@import '../styles/components/toast.css';
-</style>