@morscherlab/mint-sdk 1.2.0-beta.2 → 1.2.0-beta.20

package/src/components/AppAvatarMenu.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /** Avatar-triggered dropdown with user name/email header, configurable menu items, dividers, and a sign-out action. */
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useDropdownState } from '../composables/useDropdownState'
+import { useMenuKeyboard } from '../composables/useMenuKeyboard'
 import type { AccountMenuItem } from '../types/components'
 import ActionItemInternal from './internal/ActionItemInternal.vue'
 
@@ -27,11 +28,25 @@ const emit = defineEmits<{
   'menu-close': []
 }>()
 
-const { isOpen, rootRef, close, toggle } = useDropdownState({
+const { isOpen, rootRef, triggerRef, open, close, toggle } = useDropdownState({
   onOpen: () => emit('menu-open'),
   onClose: () => emit('menu-close'),
 })
 
+const panelRef = ref<HTMLElement | null>(null)
+
+function menuItems(): HTMLElement[] {
+  if (!panelRef.value) return []
+  return Array.from(panelRef.value.querySelectorAll<HTMLElement>('[role="menuitem"]'))
+}
+
+const { handleTriggerKeydown, handlePanelKeydown } = useMenuKeyboard({
+  items: menuItems,
+  isOpen: () => isOpen.value,
+  open,
+  close,
+})
+
 const initials = computed(() => {
   if (props.userInitial) return props.userInitial.slice(0, 2).toUpperCase()
   if (props.userName) {
@@ -64,6 +79,7 @@ function handleSignOut() {
 <template>
   <div ref="rootRef" class="mint-avatar-menu">
     <button
+      ref="triggerRef"
       type="button"
       class="mint-avatar-menu__trigger"
       :class="{ 'mint-avatar-menu__trigger--open': isOpen }"
@@ -71,6 +87,7 @@ function handleSignOut() {
       aria-haspopup="menu"
       :title="userName ? `${userName} · Account menu` : 'Account menu'"
       @click.stop="toggle"
+      @keydown="handleTriggerKeydown"
     >
       <span class="mint-avatar-menu__avatar">
         <slot name="avatar" :initials="initials">
@@ -80,7 +97,13 @@ function handleSignOut() {
       <span v-if="userName" class="mint-avatar-menu__name">{{ userName }}</span>
     </button>
 
-    <div v-if="isOpen" class="mint-avatar-menu__panel" role="menu">
+    <div
+      v-if="isOpen"
+      ref="panelRef"
+      class="mint-avatar-menu__panel"
+      role="menu"
+      @keydown="handlePanelKeydown"
+    >
       <div v-if="userName || userEmail" class="mint-avatar-menu__header">
         <div v-if="userName" class="mint-avatar-menu__user-name">{{ userName }}</div>
         <div v-if="userEmail" class="mint-avatar-menu__user-email">{{ userEmail }}</div>
@@ -127,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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 /** Modal dialog with backdrop, focus trap, Escape-to-close, and configurable size/variant/layout. */
-import { computed, ref, watch, nextTick, onUnmounted, type ComponentPublicInstance } from 'vue'
+import { computed, ref, toRef, watch, onUnmounted, type ComponentPublicInstance } from 'vue'
 import type { ModalLayout, ModalSize, ModalTab, ModalVariant } from '../types'
 import { useEventListener } from '../composables/useEventListener'
+import { useFocusTrap } from '../composables/useFocusTrap'
 
 interface Props {
   modelValue: boolean
@@ -75,47 +76,16 @@ function isPathIcon(icon: ModalTab['icon']): icon is string | string[] {
 }
 
 const containerRef = ref<HTMLElement | null>(null)
-let previouslyFocused: HTMLElement | null = null
 
-const FOCUSABLE_SELECTOR = [
-  'a[href]',
-  'button:not([disabled])',
-  'input:not([disabled])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
-  '[tabindex]:not([tabindex="-1"])',
-].join(', ')
+useFocusTrap({ containerRef, active: toRef(props, 'modelValue') })
 
-function getFocusableElements(): HTMLElement[] {
-  if (!containerRef.value) return []
-  return Array.from(containerRef.value.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
-    // Roving tabindex (inactive tabs/rail items) stays out of the Tab cycle.
-    .filter((el) => el.tabIndex !== -1)
-}
+watch(() => props.modelValue, (isOpen) => {
+  document.body.style.overflow = isOpen ? 'hidden' : ''
+})
 
-function handleKeydown(event: KeyboardEvent) {
+function handleEscapeKeydown(event: KeyboardEvent) {
   if (event.key === 'Escape' && props.closeOnEscape && props.modelValue) {
     close()
-    return
-  }
-
-  if (event.key !== 'Tab' || !containerRef.value) return
-
-  const focusable = getFocusableElements()
-  if (focusable.length === 0) {
-    event.preventDefault()
-    return
-  }
-
-  const first = focusable[0]
-  const last = focusable[focusable.length - 1]
-
-  if (event.shiftKey && document.activeElement === first) {
-    event.preventDefault()
-    last.focus()
-  } else if (!event.shiftKey && document.activeElement === last) {
-    event.preventDefault()
-    first.focus()
   }
 }
 
@@ -132,25 +102,7 @@ function handleOverlayClick(event: MouseEvent) {
   }
 }
 
-watch(() => props.modelValue, async (isOpen) => {
-  if (isOpen) {
-    previouslyFocused = document.activeElement as HTMLElement | null
-    document.body.style.overflow = 'hidden'
-    await nextTick()
-    const focusable = getFocusableElements()
-    if (focusable.length > 0) {
-      focusable[0].focus()
-    } else {
-      containerRef.value?.focus()
-    }
-  } else {
-    document.body.style.overflow = ''
-    previouslyFocused?.focus()
-    previouslyFocused = null
-  }
-})
-
-useEventListener(() => document, 'keydown', handleKeydown)
+useEventListener(() => document, 'keydown', handleEscapeKeydown)
 
 onUnmounted(() => {
   document.body.style.overflow = ''
@@ -322,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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 /** Renders a tab bar with underline or pills variant, badges, icons, and disabled tab support. */
-import { computed } from 'vue'
+import { computed, type ComponentPublicInstance } from 'vue'
 import type { TabItem, TabItemInput } from '../types'
 import { normalizeItemInput } from '../utils/items'
+import { useRovingFocus } from '../composables/useRovingFocus'
 
 interface Props {
   modelValue: string
@@ -32,23 +33,47 @@ function selectTab(tabId: string) {
     emit('update:modelValue', tabId)
   }
 }
+
+const tabButtonRefs = new Map<string, HTMLElement>()
+
+function setTabButtonRef(id: string, el: Element | ComponentPublicInstance | null) {
+  if (el instanceof HTMLElement) {
+    tabButtonRefs.set(id, el)
+  } else {
+    tabButtonRefs.delete(id)
+  }
+}
+
+// Left/Right only — BaseTabs renders a single horizontal strip with no vertical
+// variant, so there is no Up/Down axis to support.
+const { handleKeydown } = useRovingFocus({
+  ids: () => normalizedTabs.value.filter(tab => !tab.disabled).map(tab => tab.id),
+  activeId: () => activeTab.value,
+  activate: selectTab,
+  getElement: (id) => tabButtonRefs.get(id),
+})
 </script>
 
 <template>
   <div :class="['mint-tabs', `mint-tabs--${variant}`]" role="tablist">
     <button
       v-for="tab in normalizedTabs"
+      :id="`mint-tab-${tab.id}`"
       :key="tab.id"
+      :ref="(el) => setTabButtonRef(tab.id, el)"
       type="button"
       role="tab"
       :aria-selected="activeTab === tab.id"
       :aria-disabled="tab.disabled"
+      :aria-controls="`mint-tabpanel-${tab.id}`"
+      :tabindex="activeTab === tab.id ? 0 : -1"
       :class="[
         'mint-tab',
         activeTab === tab.id ? 'mint-tab--active' : '',
         tab.disabled ? 'mint-tab--disabled' : '',
       ]"
       @click="selectTab(tab.id)"
+      @keydown="handleKeydown"
     >
       <span class="mint-tab__content">
         <svg
@@ -76,7 +101,3 @@ function selectTab(tabId: string) {
     </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>