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

package/src/components/ActionMenu.vue

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

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

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

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