@morscherlab/mint-sdk 1.2.0-beta.8 → 1.2.0

package/src/components/ActionMenu.vue

@@ -2,7 +2,9 @@
 /** 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 { nextTick, onMounted, ref, watch } from 'vue'
+import { useDropdownState } from '../composables/useDropdownState'
+import { useMenuKeyboard } from '../composables/useMenuKeyboard'
 import type { ActionMenuItem } from '../types/components'
 import IconButton from './IconButton.vue'
 
@@ -22,14 +24,26 @@ const emit = defineEmits<{
   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
-}
+// Disclosure state (outside-click, Escape, scroll/resize closing, focus return)
+// comes from the shared composable; only floating-ui placement stays local.
+const { isOpen, rootRef, triggerRef, open, close } = useDropdownState({
+  closeOnScroll: true,
+  insideRefs: [panelRef],
+  onOpen: () => {
+    panelStyle.value = { visibility: 'hidden' }
+    emit('open')
+  },
+  onClose: () => emit('close'),
+})
+
+// IconButton owns the actual <button>, so the trigger element is resolved from
+// the wrapper once mounted rather than bound with a template ref.
+onMounted(() => {
+  triggerRef.value = rootRef.value?.querySelector('button') ?? null
+})
 
 function menuItems(): HTMLElement[] {
   if (!panelRef.value) return []
@@ -39,7 +53,7 @@ function menuItems(): HTMLElement[] {
 }
 
 async function positionPanel() {
-  const trigger = triggerElement()
+  const trigger = triggerRef.value
   const panel = panelRef.value
   if (!trigger || !panel) return
 
@@ -59,97 +73,43 @@ async function positionPanel() {
   }
 }
 
-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() {
+/** `focusFirst` is false when the keyboard composable owns the initial focus. */
+function openMenu(focusFirst = true) {
   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())
+  open()
+  if (focusFirst) {
+    void nextTick(() => menuItems()[0]?.focus())
   }
 }
 
 function toggleMenu() {
-  if (isOpen.value) closeMenu()
-  else void openMenu()
+  if (props.disabled) return
+  if (isOpen.value) close()
+  else openMenu()
 }
 
+const { handleTriggerKeydown, handlePanelKeydown } = useMenuKeyboard({
+  items: menuItems,
+  isOpen: () => isOpen.value,
+  open: () => openMenu(false),
+  close,
+})
+
 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()
+  close()
 }
 
-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)
+watch(isOpen, async (opened) => {
+  if (!opened) return
+  await nextTick()
+  await positionPanel()
+})
 </script>
 
 <template>
-  <span ref="triggerRootRef" class="mint-action-menu">
+  <span ref="rootRef" class="mint-action-menu">
     <IconButton
       variant="secondary"
       size="sm"
@@ -158,6 +118,7 @@ onBeforeUnmount(removeGlobalListeners)
       aria-haspopup="menu"
       :aria-expanded="isOpen"
       @click="toggleMenu"
+      @keydown="handleTriggerKeydown"
     >
       <Ellipsis
         class="mint-action-menu__trigger-icon"
@@ -175,7 +136,7 @@ onBeforeUnmount(removeGlobalListeners)
       class="mint-action-menu__panel"
       :style="panelStyle"
       role="menu"
-      @keydown="handleMenuKeydown"
+      @keydown="handlePanelKeydown"
     >
       <template v-for="item in items" :key="item.id">
         <a
@@ -203,7 +164,3 @@ onBeforeUnmount(removeGlobalListeners)
     </div>
   </Teleport>
 </template>
-
-<style>
-@import '../styles/components/action-menu.css';
-</style>

package/src/components/AlertBox.vue

@@ -82,7 +82,3 @@ const hasActions = () => !!props.actionLabel || !!slots.actions
     </button>
   </div>
 </template>
-
-<style>
-@import '../styles/components/alert-box.css';
-</style>

package/src/components/AppAvatarMenu.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Avatar-triggered dropdown with user name/email header, configurable menu items, dividers, and a sign-out action. */
-import { computed, nextTick, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useDropdownState } from '../composables/useDropdownState'
 import { useMenuKeyboard } from '../composables/useMenuKeyboard'
 import type { AccountMenuItem } from '../types/components'
@@ -28,12 +28,11 @@ const emit = defineEmits<{
   'menu-close': []
 }>()
 
-const { isOpen, rootRef, open, close: closeDropdown, toggle } = useDropdownState({
+const { isOpen, rootRef, triggerRef, open, close, toggle } = useDropdownState({
   onOpen: () => emit('menu-open'),
   onClose: () => emit('menu-close'),
 })
 
-const triggerRef = ref<HTMLElement | null>(null)
 const panelRef = ref<HTMLElement | null>(null)
 
 function menuItems(): HTMLElement[] {
@@ -41,13 +40,6 @@ function menuItems(): HTMLElement[] {
   return Array.from(panelRef.value.querySelectorAll<HTMLElement>('[role="menuitem"]'))
 }
 
-function close(returnFocus = false) {
-  closeDropdown()
-  if (returnFocus) {
-    void nextTick(() => triggerRef.value?.focus())
-  }
-}
-
 const { handleTriggerKeydown, handlePanelKeydown } = useMenuKeyboard({
   items: menuItems,
   isOpen: () => isOpen.value,
@@ -158,7 +150,3 @@ function handleSignOut() {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/app-avatar-menu.css';
-</style>

package/src/components/AppLayout.vue

@@ -150,7 +150,3 @@ function closeSidebar() {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/app-layout.css';
-</style>

package/src/components/AppPluginSwitcher.story.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import AppPluginSwitcher from './AppPluginSwitcher.vue'
+import type { PluginSwitcherPlugin } from '../types/components'
+
+const current: PluginSwitcherPlugin = {
+  id: 'ms-designer',
+  label: 'MS Designer',
+  version: '1.4.2',
+  color: 'var(--mint-sample-1)',
+}
+
+const plugins: PluginSwitcherPlugin[] = [
+  { id: 'ms-designer', label: 'MS Designer', version: '1.4.2', color: 'var(--mint-sample-1)' },
+  { id: 'ms-uploader', label: 'MS Uploader', version: '0.9.0', color: 'var(--mint-sample-2)' },
+  { id: 'ms-planner', label: 'MS Planner', version: '2.0.1', color: 'var(--mint-sample-5)' },
+  { id: 'drp', label: 'Dose Response', version: '3.1.0', color: 'var(--mint-sample-6)' },
+]
+
+function handleSelect(plugin: PluginSwitcherPlugin) {
+  console.log('Switch to', plugin.id)
+}
+
+function handleInstall() {
+  console.log('Install plugin clicked')
+}
+
+function initState() {
+  return {
+    label: 'MS Designer',
+    version: '1.4.2',
+    installLabel: 'Install plugin…',
+  }
+}
+</script>
+
+<template>
+  <Story title="Layout/AppPluginSwitcher">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px; min-height: 22rem; background: var(--bg-primary);">
+          <AppPluginSwitcher
+            :current="{ id: 'active', label: state.label, version: state.version }"
+            :plugins="plugins"
+            :install-label="state.installLabel"
+            install-href="#install"
+            @select="handleSelect"
+            @install-click="handleInstall"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.label" title="Current label" />
+        <HstText v-model="state.version" title="Current version" />
+        <HstText v-model="state.installLabel" title="Install label" />
+      </template>
+    </Variant>
+
+    <Variant title="Closed (top-bar placement)">
+      <div style="padding: 2rem; max-width: 600px; background: var(--bg-primary);">
+        <AppPluginSwitcher :current="current" :plugins="plugins" @select="handleSelect" />
+      </div>
+    </Variant>
+
+    <Variant title="Single plugin (no siblings)">
+      <!-- The menu still opens so the install affordance stays reachable. -->
+      <div style="padding: 2rem; max-width: 600px; min-height: 16rem; background: var(--bg-primary);">
+        <AppPluginSwitcher
+          :current="current"
+          :plugins="[current]"
+          install-href="#install"
+          @install-click="handleInstall"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Without version badge">
+      <div style="padding: 2rem; max-width: 600px; background: var(--bg-primary);">
+        <AppPluginSwitcher
+          :current="{ id: 'hmdb', label: 'HMDB Lookup' }"
+          :plugins="plugins"
+          @select="handleSelect"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/AppPluginSwitcher.vue

@@ -22,7 +22,7 @@ const emit = defineEmits<{
   'install-click': []
 }>()
 
-const { isOpen, rootRef, close, toggle } = useDropdownState()
+const { isOpen, rootRef, triggerRef, close, toggle } = useDropdownState()
 
 function initialsOf(plugin: PluginSwitcherPlugin) {
   const label = plugin.label || plugin.id
@@ -47,6 +47,7 @@ function handleInstall() {
 <template>
   <div ref="rootRef" class="mint-plugin-switcher">
     <button
+      ref="triggerRef"
       type="button"
       class="mint-plugin-switcher__trigger"
       :class="{ 'mint-plugin-switcher__trigger--open': isOpen }"
@@ -131,7 +132,3 @@ function handleInstall() {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/app-plugin-switcher.css';
-</style>

package/src/components/AppSidebar.vue

@@ -465,7 +465,3 @@ function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): strin
     </div>
   </aside>
 </template>
-
-<style>
-@import '../styles/components/app-sidebar.css';
-</style>

package/src/components/AppToastContainer.vue

@@ -5,11 +5,13 @@ import type { Toast } from '../types'
 
 const { toasts, dismiss } = useToast()
 
+// Semantic accents come from the shared tokens rather than a fourth copy of
+// the same four hexes.
 const accentColors: Record<Toast['type'], string> = {
-  success: '#10B981',
-  error: '#EF4444',
-  warning: '#F59E0B',
-  info: '#3B82F6',
+  success: 'var(--mint-success)',
+  error: 'var(--mint-error)',
+  warning: 'var(--mint-warning)',
+  info: 'var(--mint-info)',
 }
 </script>
 
@@ -56,7 +58,3 @@ const accentColors: Record<Toast['type'], string> = {
     </div>
   </Teleport>
 </template>
-
-<style>
-@import '../styles/components/toast.css';
-</style>

package/src/components/AppTopBar.vue

@@ -468,7 +468,3 @@ const effectiveCurrentPageSelectorId = computed(() =>
     @update:model-value="$event ? appExperiment.openModal() : appExperiment.closeModal()"
   />
 </template>
-
-<style>
-@import '../styles/components/app-top-bar.css';
-</style>

package/src/components/ArtifactSaveDialog.vue

@@ -428,7 +428,3 @@ function handleCancel(): void {
     </template>
   </BaseModal>
 </template>
-
-<style>
-@import '../styles/components/artifact-save-dialog.css';
-</style>

package/src/components/ArtifactSelectorModal.vue

@@ -327,7 +327,3 @@ watch(
     </div>
   </BaseModal>
 </template>
-
-<style>
-@import '../styles/components/artifact-selector-modal.css';
-</style>

package/src/components/AuditTrail.story.vue

@@ -78,6 +78,8 @@ const mockEntries = [
 
 function initState() {
   return {
+    loading: false,
+    error: '',
     entries: mockEntries,
     showFilters: false,
     emptyMessage: 'No activity yet',
@@ -93,6 +95,8 @@ function initState() {
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 600px;">
           <AuditTrail
+            :loading="state.loading"
+            :error="state.error || null"
             :entries="state.entries"
             :show-filters="state.showFilters"
             :empty-message="state.emptyMessage"
@@ -102,6 +106,8 @@ function initState() {
         </div>
       </template>
       <template #controls="{ state }">
+        <HstCheckbox v-model="state.loading" title="Loading" />
+        <HstText v-model="state.error" title="Error Message" />
         <HstCheckbox v-model="state.showFilters" title="Show Filters" />
         <HstText v-model="state.emptyMessage" title="Empty Message" />
         <HstSelect
@@ -159,5 +165,17 @@ function initState() {
         />
       </div>
     </Variant>
+
+    <Variant title="Loading">
+      <div style="padding: 2rem; max-width: 600px;">
+        <AuditTrail :entries="[]" loading />
+      </div>
+    </Variant>
+
+    <Variant title="Error">
+      <div style="padding: 2rem; max-width: 600px;">
+        <AuditTrail :entries="[]" error="Could not load the audit trail." />
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/AuditTrail.vue

@@ -2,6 +2,7 @@
 /** Filterable, sortable timeline of audit entries for tracking experiment or resource history. */
 import { computed, ref } from 'vue'
 import type { AuditEntryType, AuditEntry } from '../types'
+import DataStateInternal from './internal/DataStateInternal.vue'
 
 interface Props {
   entries: AuditEntry[]
@@ -10,6 +11,13 @@ interface Props {
   emptyMessage?: string
   order?: 'newest' | 'oldest'
   size?: 'sm' | 'md' | 'lg'
+  /** Replace the timeline with a loading placeholder. */
+  loading?: boolean
+  /**
+   * Error message. When set, the timeline is replaced by an error state.
+   * `null`/`undefined` renders normally.
+   */
+  error?: string | null
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -17,6 +25,8 @@ const props = withDefaults(defineProps<Props>(), {
   emptyMessage: 'No activity yet',
   order: 'newest',
   size: 'md',
+  loading: false,
+  error: null,
 })
 
 const emit = defineEmits<{
@@ -104,7 +114,7 @@ function handleEntryClick(entry: AuditEntry) {
     </div>
 
     <div
-      v-if="sortedEntries.length"
+      v-if="!loading && !error && sortedEntries.length"
       class="mint-audit-trail__list"
       :style="maxHeight ? { maxHeight, overflowY: 'auto' } : {}"
     >
@@ -140,12 +150,22 @@ function handleEntryClick(entry: AuditEntry) {
       </div>
     </div>
 
-    <div v-if="!sortedEntries.length" class="mint-audit-trail__empty">
-      <slot name="empty">{{ emptyMessage }}</slot>
+    <div v-if="error" class="mint-audit-trail__state">
+      <slot name="error" :error="error">
+        <DataStateInternal state="error" size="sm" :title="error" />
+      </slot>
+    </div>
+
+    <div v-else-if="loading" class="mint-audit-trail__state">
+      <slot name="loading">
+        <DataStateInternal state="loading" size="sm" loading-label="Loading activity" />
+      </slot>
+    </div>
+
+    <div v-else-if="!sortedEntries.length" class="mint-audit-trail__state">
+      <slot name="empty">
+        <DataStateInternal state="empty" size="sm" :title="emptyMessage" />
+      </slot>
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/audit-trail.css';
-</style>

package/src/components/AutoGroupModal.vue

@@ -288,7 +288,3 @@ watch(
     />
   </BaseModal>
 </template>
-
-<style>
-@import '../styles/components/smart-group.css';
-</style>

package/src/components/Avatar.vue

@@ -73,7 +73,3 @@ const backgroundColor = computed(() => {
     />
   </span>
 </template>
-
-<style>
-@import '../styles/components/avatar.css';
-</style>

package/src/components/BaseButton.vue

@@ -69,7 +69,3 @@ function handleClick(event: MouseEvent) {
     <slot name="icon-right" />
   </button>
 </template>
-
-<style>
-@import '../styles/components/button.css';
-</style>

package/src/components/BaseCheckbox.vue

@@ -125,7 +125,3 @@ function iconStyle(): Record<string, string> {
     </span>
   </label>
 </template>
-
-<style>
-@import '../styles/components/checkbox.css';
-</style>

package/src/components/BaseInput.vue

@@ -70,7 +70,3 @@ function handleInput(event: Event) {
     @keydown="emit('keydown', $event)"
   />
 </template>
-
-<style>
-@import '../styles/components/input.css';
-</style>

package/src/components/BaseModal.vue

@@ -274,7 +274,3 @@ onUnmounted(() => {
     </Transition>
   </Teleport>
 </template>
-
-<style>
-@import '../styles/components/modal.css';
-</style>

package/src/components/BasePill.vue

@@ -83,7 +83,3 @@ function handleRemove(event: MouseEvent) {
     </button>
   </span>
 </template>
-
-<style>
-@import '../styles/components/pill.css';
-</style>

package/src/components/BaseRadioGroup.vue

@@ -122,7 +122,3 @@ function handleChange(value: string | number) {
     </label>
   </div>
 </template>
-
-<style>
-@import '../styles/components/radio-group.css';
-</style>

package/src/components/BaseSelect.vue

@@ -83,7 +83,3 @@ function handleChange(event: Event) {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/select.css';
-</style>

package/src/components/BaseSlider.vue

@@ -120,7 +120,3 @@ function handleInput(event: Event) {
     </span>
   </div>
 </template>
-
-<style>
-@import '../styles/components/slider.css';
-</style>

package/src/components/BaseTabs.vue

@@ -101,7 +101,3 @@ const { handleKeydown } = useRovingFocus({
     </button>
   </div>
 </template>
-
-<style>
-@import '../styles/components/tabs.css';
-</style>

package/src/components/BaseTextarea.vue

@@ -56,7 +56,3 @@ function handleInput(event: Event) {
     @blur="emit('blur', $event)"
   />
 </template>
-
-<style>
-@import '../styles/components/textarea.css';
-</style>

package/src/components/BaseToggle.vue

@@ -137,7 +137,3 @@ function iconStyle(): Record<string, string> {
     </span>
   </div>
 </template>
-
-<style>
-@import '../styles/components/toggle.css';
-</style>