@morscherlab/mint-sdk 1.0.0-beta.2 → 1.0.0-beta.4

package/src/components/{ToastNotification.story.vue → AppToastContainer.story.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ToastNotification from './ToastNotification.vue'
+import AppToastContainer from './AppToastContainer.vue'
 import { useToast } from '../composables/useToast'
 
 const toast = useToast()
@@ -34,7 +34,7 @@ function triggerLongToast(type: 'success' | 'error') {
 </script>
 
 <template>
-  <Story title="Feedback/ToastNotification">
+  <Story title="Feedback/AppToastContainer">
     <Variant title="Playground">
       <template #default="{ state }">
         <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
@@ -71,7 +71,7 @@ function triggerLongToast(type: 'success' | 'error') {
               Info
             </button>
           </div>
-          <ToastNotification />
+          <AppToastContainer />
         </div>
       </template>
 
@@ -112,7 +112,7 @@ function triggerLongToast(type: 'success' | 'error') {
             Info Toast
           </button>
         </div>
-        <ToastNotification />
+        <AppToastContainer />
       </div>
     </Variant>
 
@@ -128,7 +128,7 @@ function triggerLongToast(type: 'success' | 'error') {
         <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>
-        <ToastNotification />
+        <AppToastContainer />
       </div>
     </Variant>
     <Variant title="Progress bar — 4s / 6s TTL">
@@ -150,7 +150,7 @@ function triggerLongToast(type: 'success' | 'error') {
         <p style="margin: 0; font-size: 0.8125rem; color: var(--text-muted);">
           Watch the bottom progress bar shrink over the toast's TTL.
         </p>
-        <ToastNotification />
+        <AppToastContainer />
       </div>
     </Variant>
   </Story>

package/src/components/{ToastNotification.vue → AppToastContainer.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-/** Teleported toast stack driven by useToast, with auto-dismiss progress bar and click-to-close on each notification. */
+/** 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'
 

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,12 @@ const sampleTabs: TopBarTab[] = [
       </div>
     </Variant>
 
-    <Variant title="Classic · Breadcrumb with pages">
+    <Variant title="Navigation · 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 +244,12 @@ const sampleTabs: TopBarTab[] = [
       </div>
     </Variant>
 
-    <Variant title="Classic · Tabs">
+    <Variant title="Navigation · 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=""
         />
@@ -291,7 +266,6 @@ const sampleTabs: TopBarTab[] = [
       <div style="padding: 2rem;">
         <ExperimentProvider>
           <AppTopBar
-            plugin-name="IC50 Calculator"
             title="Analysis"
             variant="card"
             :show-theme-toggle="true"