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

package/src/components/ActionMenu.vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+/** Compact overflow actions with an IconButton trigger and a viewport-safe teleported menu. */
+import { computePosition, flip, offset, shift } from '@floating-ui/dom'
+import { Ellipsis } from 'lucide-vue-next'
+import { nextTick, onBeforeUnmount, ref } from 'vue'
+import type { ActionMenuItem } from '../types/components'
+import IconButton from './IconButton.vue'
+
+interface Props {
+  label: string
+  items: ActionMenuItem[]
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  select: [item: ActionMenuItem]
+  open: []
+  close: []
+}>()
+
+const isOpen = ref(false)
+const triggerRootRef = ref<HTMLElement | null>(null)
+const panelRef = ref<HTMLElement | null>(null)
+const panelStyle = ref<Record<string, string>>({ visibility: 'hidden' })
+
+function triggerElement(): HTMLButtonElement | null {
+  return triggerRootRef.value?.querySelector('button') ?? null
+}
+
+function menuItems(): HTMLElement[] {
+  if (!panelRef.value) return []
+  return Array.from(
+    panelRef.value.querySelectorAll<HTMLElement>('.mint-action-menu__item:not(:disabled)'),
+  )
+}
+
+async function positionPanel() {
+  const trigger = triggerElement()
+  const panel = panelRef.value
+  if (!trigger || !panel) return
+
+  const position = await computePosition(trigger, panel, {
+    placement: 'bottom-end',
+    strategy: 'fixed',
+    middleware: [
+      offset(4),
+      flip(),
+      shift({ padding: 8 }),
+    ],
+  })
+  panelStyle.value = {
+    left: `${position.x}px`,
+    top: `${position.y}px`,
+    visibility: 'visible',
+  }
+}
+
+function addGlobalListeners() {
+  document.addEventListener('pointerdown', handleDocumentPointerDown, true)
+  window.addEventListener('resize', handleViewportChange)
+  window.addEventListener('scroll', handleViewportChange, true)
+}
+
+function removeGlobalListeners() {
+  document.removeEventListener('pointerdown', handleDocumentPointerDown, true)
+  window.removeEventListener('resize', handleViewportChange)
+  window.removeEventListener('scroll', handleViewportChange, true)
+}
+
+async function openMenu() {
+  if (props.disabled || isOpen.value) return
+  panelStyle.value = { visibility: 'hidden' }
+  isOpen.value = true
+  emit('open')
+  addGlobalListeners()
+  await nextTick()
+  await positionPanel()
+  menuItems()[0]?.focus()
+}
+
+function closeMenu(returnFocus = false) {
+  if (!isOpen.value) return
+  isOpen.value = false
+  removeGlobalListeners()
+  emit('close')
+  if (returnFocus) {
+    nextTick(() => triggerElement()?.focus())
+  }
+}
+
+function toggleMenu() {
+  if (isOpen.value) closeMenu()
+  else void openMenu()
+}
+
+function handleSelect(item: ActionMenuItem) {
+  if (item.disabled) return
+  emit('select', item)
+  closeMenu()
+}
+
+function handleDocumentPointerDown(event: PointerEvent) {
+  const target = event.target
+  if (!(target instanceof Node)) return
+  if (triggerRootRef.value?.contains(target) || panelRef.value?.contains(target)) return
+  closeMenu()
+}
+
+function handleViewportChange() {
+  closeMenu()
+}
+
+function handleMenuKeydown(event: KeyboardEvent) {
+  const items = menuItems()
+  const currentIndex = items.indexOf(document.activeElement as HTMLElement)
+
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    closeMenu(true)
+    return
+  }
+  if (event.key === 'Tab') {
+    closeMenu()
+    return
+  }
+  if (event.key === 'Home') {
+    event.preventDefault()
+    items[0]?.focus()
+    return
+  }
+  if (event.key === 'End') {
+    event.preventDefault()
+    items[items.length - 1]?.focus()
+    return
+  }
+  if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
+
+  event.preventDefault()
+  const direction = event.key === 'ArrowDown' ? 1 : -1
+  const nextIndex = (Math.max(currentIndex, 0) + direction + items.length) % items.length
+  items[nextIndex]?.focus()
+}
+
+onBeforeUnmount(removeGlobalListeners)
+</script>
+
+<template>
+  <span ref="triggerRootRef" class="mint-action-menu">
+    <IconButton
+      variant="secondary"
+      size="sm"
+      :label="label"
+      :disabled="disabled"
+      aria-haspopup="menu"
+      :aria-expanded="isOpen"
+      @click="toggleMenu"
+    >
+      <Ellipsis
+        class="mint-action-menu__trigger-icon"
+        :size="16"
+        :stroke-width="2"
+        aria-hidden="true"
+      />
+    </IconButton>
+  </span>
+
+  <Teleport to="body">
+    <div
+      v-if="isOpen"
+      ref="panelRef"
+      class="mint-action-menu__panel"
+      :style="panelStyle"
+      role="menu"
+      @keydown="handleMenuKeydown"
+    >
+      <template v-for="item in items" :key="item.id">
+        <a
+          v-if="item.href !== undefined && !item.disabled"
+          :href="item.href"
+          :target="item.target"
+          :rel="item.target === '_blank' ? 'noopener noreferrer' : undefined"
+          :class="['mint-action-menu__item', { 'mint-action-menu__item--danger': item.danger }]"
+          role="menuitem"
+          @click="handleSelect(item)"
+        >
+          {{ item.label }}
+        </a>
+        <button
+          v-else
+          type="button"
+          :class="['mint-action-menu__item', { 'mint-action-menu__item--danger': item.danger }]"
+          role="menuitem"
+          :disabled="item.disabled"
+          @click="handleSelect(item)"
+        >
+          {{ item.label }}
+        </button>
+      </template>
+    </div>
+  </Teleport>
+</template>
+
+<style>
+@import '../styles/components/action-menu.css';
+</style>

package/src/components/AlertBox.story.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import AlertBox from './AlertBox.vue'
+import type { AlertType } from '../types'
+
+const alertTypes: AlertType[] = ['info', 'success', 'warning', 'error']
+const dismissed = ref(false)
+const actionFired = ref('')
+
+function handleDismiss() {
+  dismissed.value = true
+  setTimeout(() => { dismissed.value = false }, 2000)
+}
+
+function handleAction(label: string) {
+  actionFired.value = label
+  setTimeout(() => { actionFired.value = '' }, 2000)
+}
+</script>
+
+<template>
+  <Story title="Feedback/AlertBox">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+          <AlertBox
+            :type="state.type"
+            :title="state.showTitle ? state.title : undefined"
+            :dismissible="state.dismissible"
+            :action-label="state.showAction ? state.actionLabel : undefined"
+            @dismiss="() => console.log('dismissed')"
+            @action="() => handleAction(state.actionLabel)"
+          >
+            {{ state.message }}
+          </AlertBox>
+          <p
+            v-if="actionFired"
+            style="margin-top: 0.75rem; font-size: 0.8rem; color: var(--mint-success, #10B981); font-family: 'Fira Code', monospace;"
+          >
+            Action fired: "{{ actionFired }}"
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.type"
+          title="Type"
+          :options="alertTypes.map(t => ({ label: t, value: t }))"
+        />
+        <HstCheckbox v-model="state.showTitle" title="Show Title" />
+        <HstText v-model="state.title" title="Title" />
+        <HstText v-model="state.message" title="Message" />
+        <HstCheckbox v-model="state.dismissible" title="Dismissible" />
+        <HstCheckbox v-model="state.showAction" title="Show Action" />
+        <HstText v-model="state.actionLabel" title="Action Label" />
+      </template>
+    </Variant>
+
+    <Variant title="All Types">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
+        <AlertBox
+          v-for="type in alertTypes"
+          :key="type"
+          :type="type"
+          :title="`${type.charAt(0).toUpperCase() + type.slice(1)} Alert`"
+        >
+          This is a {{ type }} alert message with supporting details.
+        </AlertBox>
+      </div>
+    </Variant>
+
+    <Variant title="With Action Button">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
+        <AlertBox
+          type="error"
+          title="Server connection lost"
+          action-label="Restart Server"
+          @action="handleAction('Restart Server')"
+        >
+          The backend server is not responding. Check your network connection or restart the server.
+        </AlertBox>
+
+        <AlertBox
+          type="warning"
+          title="Experiment incomplete"
+          action-label="Resume"
+          dismissible
+          @action="handleAction('Resume')"
+        >
+          3 wells have missing sample assignments. Resume to continue setup.
+        </AlertBox>
+
+        <AlertBox
+          type="info"
+          title="Update available"
+          action-label="Update Now"
+          @action="handleAction('Update Now')"
+        >
+          MINT Platform v1.0.0 is available with new analysis features.
+        </AlertBox>
+
+        <AlertBox
+          type="success"
+          title="Analysis complete"
+          action-label="View Results"
+          @action="handleAction('View Results')"
+        >
+          Successfully processed 96 wells across 3 plates.
+        </AlertBox>
+
+        <p
+          v-if="actionFired"
+          style="font-size: 0.8rem; color: var(--mint-success, #10B981); font-family: 'Fira Code', monospace;"
+        >
+          Action fired: "{{ actionFired }}"
+        </p>
+      </div>
+    </Variant>
+
+    <Variant title="Custom Actions Slot">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+        <AlertBox type="error" title="Plugin conflict detected">
+          <template #default>
+            mint-plugin-drp requires numpy &gt;=2.0 but the current environment has numpy 1.26.4.
+          </template>
+          <template #actions>
+            <button
+              style="padding: 0.3125rem 0.75rem; font-size: 0.8125rem; font-weight: 500; border-radius: 0.375rem; border: 1px solid var(--mint-error-border); color: var(--mint-error); background: transparent; cursor: pointer; white-space: nowrap;"
+              @click="handleAction('Force Install')"
+            >
+              Force Install
+            </button>
+            <button
+              style="padding: 0.3125rem 0.75rem; font-size: 0.8125rem; font-weight: 500; border-radius: 0.375rem; border: 1px solid var(--border-color); color: var(--text-secondary); background: transparent; cursor: pointer; white-space: nowrap;"
+              @click="handleAction('View Details')"
+            >
+              Details
+            </button>
+          </template>
+        </AlertBox>
+      </div>
+    </Variant>
+
+    <Variant title="Dismissible">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+        <AlertBox
+          v-if="!dismissed"
+          type="warning"
+          title="Experiment incomplete"
+          dismissible
+          @dismiss="handleDismiss"
+        >
+          3 wells have missing sample assignments. Click dismiss to hide this alert (it will reappear after 2 seconds).
+        </AlertBox>
+        <p v-else style="color: var(--text-muted, #94a3b8); font-style: italic;">
+          Alert dismissed. Reappearing shortly...
+        </p>
+      </div>
+    </Variant>
+
+    <Variant title="Without Title">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
+        <AlertBox type="info">
+          A simple informational message without a title.
+        </AlertBox>
+        <AlertBox type="error">
+          Something went wrong while processing the sample batch.
+        </AlertBox>
+      </div>
+    </Variant>
+
+    <Variant title="Rich Content">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+        <AlertBox type="success" title="Analysis Complete" action-label="Download Report">
+          <p style="margin: 0 0 0.5rem;">
+            Successfully processed <strong>96 wells</strong> across 3 plates.
+          </p>
+          <ul style="margin: 0; padding-left: 1.25rem;">
+            <li>Peak detection: 1,247 peaks found</li>
+            <li>QC passed: 94/96 wells</li>
+            <li>Outliers flagged: 2 wells (B3, G11)</li>
+          </ul>
+        </AlertBox>
+      </div>
+    </Variant>
+    <Variant title="Centered alignment (default)">
+      <div style="padding: 2rem; max-width: 520px; display: flex; flex-direction: column; gap: 1rem;">
+        <AlertBox type="success" title="Analysis complete" action-label="View results">
+          Dose-response fit converged for all 96 wells.
+        </AlertBox>
+        <AlertBox type="error" title="Upload failed" dismissible>
+          The file exceeded the 50 MB limit.
+        </AlertBox>
+        <AlertBox type="warning" title="Low replicate count">
+          Wells C2, C3, C4 only have 2 replicates — consider additional runs.
+        </AlertBox>
+        <AlertBox type="info" title="New beta release">
+          Version 0.16.0-beta.3 ships a visual refresh for status components.
+        </AlertBox>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/AlertBox.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+/** Inline alert banner with semantic icon, title, message slot, optional action button, and optional dismiss button. */
+import { useSlots } from 'vue'
+import type { AlertType } from '../types'
+
+interface Props {
+  type?: AlertType
+  title?: string
+  dismissible?: boolean
+  actionLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'info',
+  dismissible: false,
+})
+
+const emit = defineEmits<{
+  dismiss: []
+  action: []
+}>()
+
+const slots = useSlots()
+const hasActions = () => !!props.actionLabel || !!slots.actions
+</script>
+
+<template>
+  <div
+    class="mint-alert"
+    :class="`mint-alert--${props.type}`"
+    role="alert"
+  >
+    <!-- Lucide circle-check -->
+    <svg v-if="props.type === 'success'" class="mint-alert__icon mint-alert__icon--success" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" />
+    </svg>
+    <!-- Lucide circle-x -->
+    <svg v-else-if="props.type === 'error'" class="mint-alert__icon mint-alert__icon--error" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <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="props.type === 'warning'" class="mint-alert__icon mint-alert__icon--warning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <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-alert__icon mint-alert__icon--info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
+    </svg>
+
+    <div class="mint-alert__content">
+      <h4 v-if="props.title" class="mint-alert__title">
+        {{ props.title }}
+      </h4>
+      <div class="mint-alert__message">
+        <slot />
+      </div>
+    </div>
+
+    <div v-if="hasActions()" class="mint-alert__actions">
+      <slot name="actions">
+        <button
+          type="button"
+          class="mint-alert__action-btn"
+          :class="`mint-alert__action-btn--${props.type}`"
+          @click="emit('action')"
+        >
+          {{ props.actionLabel }}
+        </button>
+      </slot>
+    </div>
+
+    <button
+      v-if="props.dismissible"
+      type="button"
+      class="mint-alert__dismiss"
+      aria-label="Dismiss"
+      @click="emit('dismiss')"
+    >
+      <svg class="mint-alert__dismiss-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/alert-box.css';
+</style>

package/src/components/AppAvatarMenu.story.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import AppAvatarMenu from './AppAvatarMenu.vue'
+import type { AccountMenuItem } from '../types'
+
+function handleSelect(item: AccountMenuItem) {
+  console.log('Selected:', item.id)
+}
+
+function handleSignOut() {
+  console.log('Sign out')
+}
+
+const basicItems: AccountMenuItem[] = [
+  { id: 'profile', label: 'Profile' },
+  { id: 'settings', label: 'Settings' },
+]
+
+const richItems: AccountMenuItem[] = [
+  { id: 'profile', label: 'Profile' },
+  { id: 'settings', label: 'Settings' },
+  { id: 'divider-1', divider: true, label: '' },
+  { id: 'admin', label: 'Admin panel' },
+  { id: 'billing', label: 'Billing', rightLabel: 'Pro' },
+]
+
+const devToolsItems: AccountMenuItem[] = [
+  { id: 'profile', label: 'Profile' },
+  { id: 'divider-1', divider: true, label: '' },
+  { id: 'api-keys', label: 'API keys' },
+  { id: 'webhooks', label: 'Webhooks' },
+  { id: 'docs', label: 'Documentation', href: 'https://docs.morscher.lab' },
+]
+
+function initState() {
+  return {
+    userName: 'Estrella',
+    userInitial: '',
+    userEmail: 'estrella@morscher.lab',
+    showSignOut: true,
+    signOutLabel: 'Sign out',
+  }
+}
+</script>
+
+<template>
+  <Story title="Layout/AppAvatarMenu">
+    <Variant title="Pill with name (primary)">
+      <!-- Default pattern used in the platform topbar: avatar circle +
+           username text, matching GitHub / Linear / Notion conventions. -->
+      <div style="padding: 2rem; display: flex; justify-content: flex-start; background: var(--bg-primary); min-height: 8rem;">
+        <AppAvatarMenu
+          user-name="Estrella"
+          user-email="estrella@morscher.lab"
+          :items="basicItems"
+          @select="handleSelect"
+          @sign-out="handleSignOut"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Avatar only (no username)">
+      <!-- What renders in dev/signed-out mode — the name span v-if hides
+           when `user-name` is absent, leaving just the gradient chip. -->
+      <div style="padding: 2rem; display: flex; justify-content: flex-start; background: var(--bg-primary); min-height: 8rem;">
+        <AppAvatarMenu
+          :items="basicItems"
+          :show-sign-out="false"
+          @select="handleSelect"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With email in panel header">
+      <div style="padding: 2rem; display: flex; justify-content: flex-start; background: var(--bg-primary); min-height: 12rem;">
+        <AppAvatarMenu
+          user-name="Estrella"
+          user-email="estrella@morscher.lab"
+          :items="richItems"
+          @select="handleSelect"
+          @sign-out="handleSignOut"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With divider + right-labels">
+      <div style="padding: 2rem; display: flex; justify-content: flex-start; background: var(--bg-primary); min-height: 12rem;">
+        <AppAvatarMenu
+          user-name="Ada Lovelace"
+          user-initial="AL"
+          user-email="ada@morscher.lab"
+          :items="richItems"
+          @select="handleSelect"
+          @sign-out="handleSignOut"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Developer tools menu">
+      <!-- Menu items with `href` render as anchor tags that open external
+           documentation links in a new tab. -->
+      <div style="padding: 2rem; display: flex; justify-content: flex-start; background: var(--bg-primary); min-height: 12rem;">
+        <AppAvatarMenu
+          user-name="Marie Curie"
+          user-email="marie@morscher.lab"
+          :items="devToolsItems"
+          sign-out-label="End session"
+          @select="handleSelect"
+          @sign-out="handleSignOut"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Custom avatar slot">
+      <!-- Consumers can override the avatar chip content (e.g., an image,
+           an emoji, an icon) while keeping the pill trigger + dropdown. -->
+      <div style="padding: 2rem; display: flex; justify-content: flex-start; background: var(--bg-primary); min-height: 8rem;">
+        <AppAvatarMenu
+          user-name="Rosalind Franklin"
+          :items="basicItems"
+          @select="handleSelect"
+          @sign-out="handleSignOut"
+        >
+          <template #avatar>
+            <span style="font-size: 0.875rem;">🧬</span>
+          </template>
+        </AppAvatarMenu>
+      </div>
+    </Variant>
+
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; justify-content: flex-start; background: var(--bg-primary); min-height: 10rem;">
+          <AppAvatarMenu
+            :user-name="state.userName"
+            :user-initial="state.userInitial"
+            :user-email="state.userEmail"
+            :items="basicItems"
+            :show-sign-out="state.showSignOut"
+            :sign-out-label="state.signOutLabel"
+            @select="handleSelect"
+            @sign-out="handleSignOut"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.userName" title="User name" />
+        <HstText v-model="state.userInitial" title="User initial (override)" />
+        <HstText v-model="state.userEmail" title="User email" />
+        <HstCheckbox v-model="state.showSignOut" title="Show sign out" />
+        <HstText v-model="state.signOutLabel" title="Sign out label" />
+      </template>
+    </Variant>
+  </Story>
+</template>