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

package/src/components/AppAvatarMenu.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 /** Avatar-triggered dropdown with user name/email header, configurable menu items, dividers, and a sign-out action. */
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { computed } from 'vue'
+import { useDropdownState } from '../composables/useDropdownState'
 import type { AccountMenuItem } from '../types/components'
+import ActionItemInternal from './internal/ActionItemInternal.vue'
 
 interface Props {
   userName?: string
@@ -25,8 +27,10 @@ const emit = defineEmits<{
   'menu-close': []
 }>()
 
-const isOpen = ref(false)
-const rootRef = ref<HTMLElement | null>(null)
+const { isOpen, rootRef, close, toggle } = useDropdownState({
+  onOpen: () => emit('menu-open'),
+  onClose: () => emit('menu-close'),
+})
 
 const initials = computed(() => {
   if (props.userInitial) return props.userInitial.slice(0, 2).toUpperCase()
@@ -38,53 +42,20 @@ const initials = computed(() => {
   return 'U'
 })
 
-function toggle() {
-  isOpen.value = !isOpen.value
-  if (isOpen.value) {
-    emit('menu-open')
-  } else {
-    emit('menu-close')
-  }
+function closeSilently() {
+  isOpen.value = false
 }
 
 function handleSelect(item: AccountMenuItem) {
   if (item.divider) return
   emit('select', item)
-  isOpen.value = false
-  emit('menu-close')
+  close()
 }
 
 function handleSignOut() {
   emit('sign-out')
-  isOpen.value = false
-  emit('menu-close')
-}
-
-function handleClickOutside(event: MouseEvent) {
-  if (!isOpen.value) return
-  const target = event.target as Node
-  if (rootRef.value && !rootRef.value.contains(target)) {
-    isOpen.value = false
-    emit('menu-close')
-  }
-}
-
-function handleKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape' && isOpen.value) {
-    isOpen.value = false
-    emit('menu-close')
-  }
+  close()
 }
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-  document.addEventListener('keydown', handleKeydown)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-  document.removeEventListener('keydown', handleKeydown)
-})
 </script>
 
 <template>
@@ -112,24 +83,12 @@ onUnmounted(() => {
         <div v-if="userEmail" class="mint-avatar-menu__user-email">{{ userEmail }}</div>
       </div>
 
-      <slot name="items" :close="() => (isOpen = false)">
+      <slot name="items" :close="closeSilently">
         <template v-for="item in items" :key="item.id">
           <div v-if="item.divider" class="mint-avatar-menu__divider" role="separator" />
-          <a
-            v-else-if="item.href"
+          <ActionItemInternal
+            v-else
             :href="item.href"
-            :class="['mint-avatar-menu__item', { 'mint-avatar-menu__item--danger': item.danger }]"
-            role="menuitem"
-            @click="handleSelect(item)"
-          >
-            <span v-if="item.icon" class="mint-avatar-menu__item-icon">
-              <slot name="item-icon" :item="item" />
-            </span>
-            <span class="mint-avatar-menu__item-label">{{ item.label }}</span>
-            <span v-if="item.rightLabel" class="mint-avatar-menu__item-right">{{ item.rightLabel }}</span>
-          </a>
-          <router-link
-            v-else-if="item.to"
             :to="item.to"
             :class="['mint-avatar-menu__item', { 'mint-avatar-menu__item--danger': item.danger }]"
             role="menuitem"
@@ -140,20 +99,7 @@ onUnmounted(() => {
             </span>
             <span class="mint-avatar-menu__item-label">{{ item.label }}</span>
             <span v-if="item.rightLabel" class="mint-avatar-menu__item-right">{{ item.rightLabel }}</span>
-          </router-link>
-          <button
-            v-else
-            type="button"
-            :class="['mint-avatar-menu__item', { 'mint-avatar-menu__item--danger': item.danger }]"
-            role="menuitem"
-            @click="handleSelect(item)"
-          >
-            <span v-if="item.icon" class="mint-avatar-menu__item-icon">
-              <slot name="item-icon" :item="item" />
-            </span>
-            <span class="mint-avatar-menu__item-label">{{ item.label }}</span>
-            <span v-if="item.rightLabel" class="mint-avatar-menu__item-right">{{ item.rightLabel }}</span>
-          </button>
+          </ActionItemInternal>
         </template>
       </slot>
 

package/src/components/AppLayout.story.vue

@@ -8,11 +8,11 @@ import BaseSelect from './BaseSelect.vue'
 import BaseToggle from './BaseToggle.vue'
 import BaseButton from './BaseButton.vue'
 import { ExperimentProvider } from '../__stories__/experiment-helpers'
-import type { SidebarToolSection, TopBarTab } from '../types'
+import type { PillNavItem, SidebarToolSection } from '../types'
 
-const activeTab = ref('analysis')
+const activeView = ref('analysis')
 
-const tabs: TopBarTab[] = [
+const pillNav: PillNavItem[] = [
   { id: 'analysis', label: 'Analysis' },
   { id: 'results', label: 'Results' },
   { id: 'settings', label: 'Settings' },
@@ -48,22 +48,23 @@ const logScale = ref(false)
             :sidebar-position="state.sidebarPosition"
             :floating="state.floating ?? true"
             :sidebar-width="state.sidebarWidth"
+            responsive-sidebar
           >
             <template #topbar>
               <AppTopBar
                 title="My Plugin"
                 subtitle="Laboratory Analysis"
-                :tabs="tabs"
-                :current-tab-id="activeTab"
+                :pill-nav="pillNav"
+                :current-pill-id="activeView"
                 :show-theme-toggle="true"
                 home-path=""
-                @tab-select="t => activeTab = t.id"
+                @pill-select="item => activeView = item.id"
               />
             </template>
             <template #sidebar>
               <AppSidebar
                 :panels="toolPanels"
-                :active-view="activeTab"
+                :active-view="activeView"
                 :floating="false"
                 :side="state.sidebarPosition"
               >
@@ -86,11 +87,11 @@ const logScale = ref(false)
             </template>
             <div style="padding: 2rem;">
               <h2 style="margin: 0 0 1rem; color: var(--text-primary, #1e293b);">
-                {{ activeTab.charAt(0).toUpperCase() + activeTab.slice(1) }}
+                {{ activeView.charAt(0).toUpperCase() + activeView.slice(1) }}
               </h2>
               <p style="color: var(--text-muted, #94a3b8);">
-                Main content area. The sidebar shows tools for the "{{ activeTab }}" view.
-                Switch tabs to see different tool panels (settings tab has none).
+                Main content area. The sidebar shows tools for the "{{ activeView }}" view.
+                Switch modes to see different tool panels (settings has none).
               </p>
             </div>
           </AppLayout>
@@ -116,19 +117,19 @@ const logScale = ref(false)
         >
           <template #topbar>
             <AppTopBar
-              plugin-name="Plate Analyzer"
-              title="Dashboard"
-              :tabs="tabs"
-              :current-tab-id="activeTab"
+              title="Plate Analyzer"
+              subtitle="Dashboard"
+              :pill-nav="pillNav"
+              :current-pill-id="activeView"
               :show-theme-toggle="true"
               home-path=""
-              @tab-select="t => activeTab = t.id"
+              @pill-select="item => activeView = item.id"
             />
           </template>
           <template #sidebar>
             <AppSidebar
               :panels="toolPanels"
-              :active-view="activeTab"
+              :active-view="activeView"
               :floating="false"
             >
               <template #header>
@@ -216,25 +217,63 @@ const logScale = ref(false)
       </div>
     </Variant>
 
+    <Variant title="Responsive Sidebar">
+      <div style="height: 500px; max-width: 760px; border: 1px solid var(--border-color, #e2e8f0);">
+        <AppLayout
+          floating
+          responsive-sidebar
+          sidebar-width="320px"
+        >
+          <template #topbar>
+            <AppTopBar title="Responsive Analysis" home-path="" />
+          </template>
+          <template #sidebar>
+            <AppSidebar
+              variant="analysis"
+              title="Feature Filters"
+              subtitle="12 active samples"
+              :badge="2"
+              :panels="toolPanels"
+              active-view="analysis"
+            >
+              <template #section-parameters>
+                <BaseSlider v-model="threshold" label="Threshold" :min="0" :max="100" />
+                <BaseSelect v-model="method" label="Method" :options="methods" />
+              </template>
+              <template #section-filters>
+                <BaseToggle v-model="showOutliers" label="Exclude outliers" />
+              </template>
+            </AppSidebar>
+          </template>
+          <div style="padding: 2rem;">
+            <p style="color: var(--text-muted, #94a3b8);">
+              At narrow widths, AppLayout owns the sidebar toggle and backdrop,
+              while AppSidebar owns the panel chrome and collapse state.
+            </p>
+          </div>
+        </AppLayout>
+      </div>
+    </Variant>
+
     <Variant title="With Experiment Selector">
       <ExperimentProvider>
         <div style="height: 600px;">
           <AppLayout :floating="true" sidebar-width="280px">
             <template #topbar>
               <AppTopBar
-                plugin-name="IC50 Calculator"
-                title="Analysis"
-                :tabs="tabs"
-                :current-tab-id="activeTab"
+                title="IC50 Calculator"
+                subtitle="Analysis"
+                :pill-nav="pillNav"
+                :current-pill-id="activeView"
                 :show-theme-toggle="true"
                 home-path=""
-                @tab-select="t => activeTab = t.id"
+                @pill-select="item => activeView = item.id"
               />
             </template>
             <template #sidebar>
               <AppSidebar
                 :panels="toolPanels"
-                :active-view="activeTab"
+                :active-view="activeView"
                 :floating="false"
               >
                 <template #section-parameters>
@@ -255,7 +294,7 @@ const logScale = ref(false)
             </template>
             <div style="padding: 2rem;">
               <h2 style="margin: 0 0 1rem; color: var(--text-primary, #1e293b);">
-                {{ activeTab.charAt(0).toUpperCase() + activeTab.slice(1) }}
+                {{ activeView.charAt(0).toUpperCase() + activeView.slice(1) }}
               </h2>
               <p style="color: var(--text-muted, #94a3b8);">
                 Full layout with experiment selector in the top bar.
@@ -273,8 +312,8 @@ const logScale = ref(false)
           <AppLayout :floating="true">
             <template #topbar>
               <AppTopBar
-                plugin-name="Plate Analyzer"
-                title="Dashboard"
+                title="Plate Analyzer"
+                subtitle="Dashboard"
                 :show-theme-toggle="true"
                 home-path=""
               />

package/src/components/AppLayout.vue

@@ -3,7 +3,8 @@
  * AppLayout - Page layout shell with topbar, sidebar, and main content slots
  *
  * Provides a responsive application layout structure with optional topbar and sidebar.
- * The sidebar slot is a simple pass-through; visibility is controlled by AppSidebar itself.
+ * The sidebar slot is a simple pass-through on desktop. When responsiveSidebar is
+ * enabled, AppLayout owns the mobile toggle/backdrop shell around the sidebar.
  *
  * @example
  * ```vue
@@ -20,7 +21,7 @@
  * </AppLayout>
  * ```
  */
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 interface Props {
   /** Position of sidebar (left or right side of screen) */
@@ -29,23 +30,61 @@ interface Props {
   sidebarWidth?: string
   /** When true, topbar/sidebar/main render as floating cards with gaps */
   floating?: boolean
+  /** Convert the sidebar into a mobile overlay with built-in toggle and backdrop below 1024px. */
+  responsiveSidebar?: boolean
+  /** Controlled mobile sidebar open state. Desktop sidebar remains visible. */
+  sidebarOpen?: boolean
+  /** Initial mobile sidebar open state when sidebarOpen is uncontrolled. */
+  defaultSidebarOpen?: boolean
+  /** Accessible label for the mobile sidebar toggle. */
+  sidebarToggleLabel?: string
+  /** Accessible label used when the mobile sidebar is open. */
+  sidebarCloseLabel?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   sidebarPosition: 'left',
   sidebarWidth: 'auto',
   floating: false,
+  responsiveSidebar: false,
+  sidebarOpen: undefined,
+  defaultSidebarOpen: false,
+  sidebarToggleLabel: 'Open sidebar',
+  sidebarCloseLabel: 'Close sidebar',
+})
+
+const emit = defineEmits<{
+  'update:sidebarOpen': [value: boolean]
+}>()
+
+const internalSidebarOpen = ref(props.defaultSidebarOpen)
+const sidebarOpenModel = computed({
+  get: () => props.sidebarOpen ?? internalSidebarOpen.value,
+  set: (value: boolean) => {
+    internalSidebarOpen.value = value
+    emit('update:sidebarOpen', value)
+  },
 })
 
 const layoutClasses = computed(() => [
   'mint-layout',
   props.sidebarPosition === 'right' ? 'mint-layout--sidebar-right' : '',
   props.floating ? 'mint-layout--floating' : '',
+  props.responsiveSidebar ? 'mint-layout--responsive-sidebar' : '',
+  sidebarOpenModel.value ? 'mint-layout--sidebar-open' : '',
 ])
 
 const sidebarStyle = computed(() => {
   return props.sidebarWidth !== 'auto' ? { width: props.sidebarWidth } : undefined
 })
+
+function toggleSidebar() {
+  sidebarOpenModel.value = !sidebarOpenModel.value
+}
+
+function closeSidebar() {
+  sidebarOpenModel.value = false
+}
 </script>
 
 <template>
@@ -55,6 +94,48 @@ const sidebarStyle = computed(() => {
     </div>
 
     <div class="mint-layout__body">
+      <button
+        v-if="responsiveSidebar && $slots.sidebar"
+        type="button"
+        class="mint-layout__sidebar-toggle"
+        :aria-label="sidebarOpenModel ? sidebarCloseLabel : sidebarToggleLabel"
+        :aria-expanded="sidebarOpenModel"
+        @click="toggleSidebar"
+      >
+        <svg
+          v-if="!sidebarOpenModel"
+          class="mint-layout__sidebar-toggle-icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+        <svg
+          v-else
+          class="mint-layout__sidebar-toggle-icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M6 18 18 6M6 6l12 12" />
+        </svg>
+      </button>
+
+      <div
+        v-if="responsiveSidebar && $slots.sidebar && sidebarOpenModel"
+        class="mint-layout__sidebar-backdrop"
+        @click="closeSidebar"
+      />
+
       <div
         v-if="$slots.sidebar"
         class="mint-layout__sidebar"

package/src/components/AppPluginSwitcher.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /** Dropdown menu for switching between installed plugins with color swatches, version badges, and an install link. */
-import { ref, onMounted, onUnmounted } from 'vue'
+import { useDropdownState } from '../composables/useDropdownState'
 import type { PluginSwitcherPlugin } from '../types/components'
+import ActionItemInternal from './internal/ActionItemInternal.vue'
 
 interface Props {
   current: PluginSwitcherPlugin
@@ -21,55 +22,26 @@ const emit = defineEmits<{
   'install-click': []
 }>()
 
-const isOpen = ref(false)
-const rootRef = ref<HTMLElement | null>(null)
+const { isOpen, rootRef, close, toggle } = useDropdownState()
 
 function initialsOf(plugin: PluginSwitcherPlugin) {
   const label = plugin.label || plugin.id
   return label.slice(0, 2).toUpperCase()
 }
 
-function toggle() {
-  isOpen.value = !isOpen.value
-}
-
 function handleSelect(plugin: PluginSwitcherPlugin) {
   if (plugin.id === props.current.id) {
-    isOpen.value = false
+    close()
     return
   }
   emit('select', plugin)
-  isOpen.value = false
+  close()
 }
 
 function handleInstall() {
   emit('install-click')
-  isOpen.value = false
-}
-
-function handleClickOutside(event: MouseEvent) {
-  if (!isOpen.value) return
-  const target = event.target as Node
-  if (rootRef.value && !rootRef.value.contains(target)) {
-    isOpen.value = false
-  }
+  close()
 }
-
-function handleKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape' && isOpen.value) {
-    isOpen.value = false
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-  document.addEventListener('keydown', handleKeydown)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-  document.removeEventListener('keydown', handleKeydown)
-})
 </script>
 
 <template>
@@ -102,124 +74,48 @@ onUnmounted(() => {
 
     <div v-if="isOpen" class="mint-plugin-switcher__menu" role="menu">
       <div class="mint-plugin-switcher__menu-title">Switch plugin</div>
-      <template v-for="plugin in plugins" :key="plugin.id">
-        <a
-          v-if="plugin.href"
-          :href="plugin.href"
-          :class="[
-            'mint-plugin-switcher__item',
-            { 'mint-plugin-switcher__item--active': plugin.id === current.id },
-          ]"
-          role="menuitem"
-          @click="handleSelect(plugin)"
+      <ActionItemInternal
+        v-for="plugin in plugins"
+        :key="plugin.id"
+        :href="plugin.href"
+        :to="plugin.to"
+        :class="[
+          'mint-plugin-switcher__item',
+          { 'mint-plugin-switcher__item--active': plugin.id === current.id },
+        ]"
+        role="menuitem"
+        @click="handleSelect(plugin)"
+      >
+        <span
+          class="mint-plugin-switcher__item-swatch"
+          :style="{ background: plugin.color ?? 'var(--color-primary)' }"
         >
-          <span
-            class="mint-plugin-switcher__item-swatch"
-            :style="{ background: plugin.color ?? 'var(--color-primary)' }"
-          >
-            {{ initialsOf(plugin) }}
-          </span>
-          <span class="mint-plugin-switcher__item-label">{{ plugin.label }}</span>
-          <span v-if="plugin.version" class="mint-plugin-switcher__item-version">v{{ plugin.version }}</span>
-          <svg
-            v-if="plugin.id === current.id"
-            class="mint-plugin-switcher__item-check"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-          >
-            <path d="M5 13l4 4L19 7" />
-          </svg>
-        </a>
-        <router-link
-          v-else-if="plugin.to"
-          :to="plugin.to"
-          :class="[
-            'mint-plugin-switcher__item',
-            { 'mint-plugin-switcher__item--active': plugin.id === current.id },
-          ]"
-          role="menuitem"
-          @click="handleSelect(plugin)"
-        >
-          <span
-            class="mint-plugin-switcher__item-swatch"
-            :style="{ background: plugin.color ?? 'var(--color-primary)' }"
-          >
-            {{ initialsOf(plugin) }}
-          </span>
-          <span class="mint-plugin-switcher__item-label">{{ plugin.label }}</span>
-          <span v-if="plugin.version" class="mint-plugin-switcher__item-version">v{{ plugin.version }}</span>
-          <svg
-            v-if="plugin.id === current.id"
-            class="mint-plugin-switcher__item-check"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-          >
-            <path d="M5 13l4 4L19 7" />
-          </svg>
-        </router-link>
-        <button
-          v-else
-          type="button"
-          :class="[
-            'mint-plugin-switcher__item',
-            { 'mint-plugin-switcher__item--active': plugin.id === current.id },
-          ]"
-          role="menuitem"
-          @click="handleSelect(plugin)"
+          {{ initialsOf(plugin) }}
+        </span>
+        <span class="mint-plugin-switcher__item-label">{{ plugin.label }}</span>
+        <span v-if="plugin.version" class="mint-plugin-switcher__item-version">v{{ plugin.version }}</span>
+        <svg
+          v-if="plugin.id === current.id"
+          class="mint-plugin-switcher__item-check"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
         >
-          <span
-            class="mint-plugin-switcher__item-swatch"
-            :style="{ background: plugin.color ?? 'var(--color-primary)' }"
-          >
-            {{ initialsOf(plugin) }}
-          </span>
-          <span class="mint-plugin-switcher__item-label">{{ plugin.label }}</span>
-          <span v-if="plugin.version" class="mint-plugin-switcher__item-version">v{{ plugin.version }}</span>
-          <svg
-            v-if="plugin.id === current.id"
-            class="mint-plugin-switcher__item-check"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-          >
-            <path d="M5 13l4 4L19 7" />
-          </svg>
-        </button>
-      </template>
+          <path d="M5 13l4 4L19 7" />
+        </svg>
+      </ActionItemInternal>
 
       <template v-if="plugins.length && (installHref || installTo || $slots.install)">
         <div class="mint-plugin-switcher__divider" role="separator" />
       </template>
       <slot name="install">
-        <a
-          v-if="installHref"
+        <ActionItemInternal
+          v-if="installHref || installTo"
           :href="installHref"
-          class="mint-plugin-switcher__install"
-          role="menuitem"
-          @click="handleInstall"
-        >
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <line x1="12" y1="5" x2="12" y2="19" />
-            <line x1="5" y1="12" x2="19" y2="12" />
-          </svg>
-          <span>{{ installLabel }}</span>
-        </a>
-        <router-link
-          v-else-if="installTo"
           :to="installTo"
           class="mint-plugin-switcher__install"
           role="menuitem"
@@ -230,7 +126,7 @@ onUnmounted(() => {
             <line x1="5" y1="12" x2="19" y2="12" />
           </svg>
           <span>{{ installLabel }}</span>
-        </router-link>
+        </ActionItemInternal>
       </slot>
     </div>
   </div>