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

package/src/components/AppToastContainer.vue

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

package/src/components/AppTopBar.story.vue

@@ -3,8 +3,6 @@ import AppTopBar from './AppTopBar.vue'
 import { ExperimentProvider } from '../__stories__/experiment-helpers'
 import type {
   TopBarVariant,
-  TopBarPage,
-  TopBarTab,
   PillNavItem,
   PageSelectorItem,
   AccountMenuItem,
@@ -35,27 +33,6 @@ const sampleAccountMenu: AccountMenuItem[] = [
   { id: 'admin', label: 'Admin', to: '/admin' },
 ]
 
-const samplePages: TopBarPage[] = [
-  { id: 'dashboard', label: 'Dashboard', description: 'Overview and statistics' },
-  { id: 'experiments', label: 'Experiments', description: 'Manage experiments' },
-  { id: 'analysis', label: 'Analysis', description: 'Run analysis pipelines' },
-  { id: 'settings', label: 'Settings', disabled: true },
-]
-
-const sampleTabs: TopBarTab[] = [
-  { id: 'overview', label: 'Overview' },
-  { id: 'results', label: 'Results' },
-  {
-    id: 'export',
-    label: 'Export',
-    children: [
-      { id: 'export-csv', label: 'CSV', description: 'Comma-separated values' },
-      { id: 'export-xlsx', label: 'Excel', description: 'Microsoft Excel format' },
-      { id: 'export-pdf', label: 'PDF', description: 'Portable Document Format' },
-    ],
-  },
-]
-
 </script>
 
 <template>
@@ -214,7 +191,7 @@ const sampleTabs: TopBarTab[] = [
       </div>
     </Variant>
 
-    <!-- ─────────────── CLASSIC VARIANTS (classic prop surface) ─────────────── -->
+    <!-- ─────────────── CLASSIC VARIANTS ─────────────── -->
 
     <Variant title="Classic · Playground">
       <template #default="{ state }">
@@ -254,13 +231,13 @@ const sampleTabs: TopBarTab[] = [
       </div>
     </Variant>
 
-    <Variant title="Classic · Breadcrumb with pages">
+    <Variant title="Classic · Page selector">
       <div style="padding: 2rem;">
         <AppTopBar
           plugin-name="IC50 Calculator"
           title="Results"
-          :pages="samplePages"
-          current-page-id="analysis"
+          :page-selector="samplePageSelector"
+          current-page-selector-id="plugins"
           variant="card"
           :show-theme-toggle="true"
           home-path=""
@@ -268,13 +245,13 @@ const sampleTabs: TopBarTab[] = [
       </div>
     </Variant>
 
-    <Variant title="Classic · Tabs">
+    <Variant title="Classic · Pill nav">
       <div style="padding: 2rem;">
         <AppTopBar
           plugin-name="Plate Analyzer"
           title="Experiment View"
-          :tabs="sampleTabs"
-          current-tab-id="overview"
+          :pill-nav="samplePillNav.slice(0, 3)"
+          current-pill-id="workspace"
           variant="card"
           home-path=""
         />