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

package/src/components/AppAvatarMenu.vue

@@ -0,0 +1,164 @@
+<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 { useDropdownState } from '../composables/useDropdownState'
+import { useMenuKeyboard } from '../composables/useMenuKeyboard'
+import type { AccountMenuItem } from '../types/components'
+import ActionItemInternal from './internal/ActionItemInternal.vue'
+
+interface Props {
+  userName?: string
+  userInitial?: string
+  userEmail?: string
+  items?: AccountMenuItem[]
+  showSignOut?: boolean
+  signOutLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [] as AccountMenuItem[],
+  showSignOut: true,
+  signOutLabel: 'Sign out',
+})
+
+const emit = defineEmits<{
+  select: [item: AccountMenuItem]
+  'sign-out': []
+  'menu-open': []
+  'menu-close': []
+}>()
+
+const { isOpen, rootRef, open, close: closeDropdown, 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[] {
+  if (!panelRef.value) return []
+  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,
+  open,
+  close,
+})
+
+const initials = computed(() => {
+  if (props.userInitial) return props.userInitial.slice(0, 2).toUpperCase()
+  if (props.userName) {
+    const parts = props.userName.trim().split(/\s+/).filter(Boolean)
+    const first = parts[0]
+    if (!first) return 'U'
+    const second = parts[1]
+    if (second) return (first.charAt(0) + second.charAt(0)).toUpperCase()
+    return first.slice(0, 2).toUpperCase()
+  }
+  return 'U'
+})
+
+function closeSilently() {
+  isOpen.value = false
+}
+
+function handleSelect(item: AccountMenuItem) {
+  if (item.divider) return
+  emit('select', item)
+  close()
+}
+
+function handleSignOut() {
+  emit('sign-out')
+  close()
+}
+</script>
+
+<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 }"
+      :aria-expanded="isOpen"
+      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">
+          {{ initials }}
+        </slot>
+      </span>
+      <span v-if="userName" class="mint-avatar-menu__name">{{ userName }}</span>
+    </button>
+
+    <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>
+      </div>
+
+      <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" />
+          <ActionItemInternal
+            v-else
+            :href="item.href"
+            :to="item.to"
+            :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>
+          </ActionItemInternal>
+        </template>
+      </slot>
+
+      <template v-if="showSignOut">
+        <div class="mint-avatar-menu__divider" role="separator" />
+        <button
+          type="button"
+          class="mint-avatar-menu__item mint-avatar-menu__item--danger"
+          role="menuitem"
+          @click="handleSignOut"
+        >
+          <span class="mint-avatar-menu__item-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+              <polyline points="16 17 21 12 16 7" />
+              <line x1="21" y1="12" x2="9" y2="12" />
+            </svg>
+          </span>
+          <span class="mint-avatar-menu__item-label">{{ signOutLabel }}</span>
+        </button>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/app-avatar-menu.css';
+</style>

package/src/components/AppContainer.story.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import AppContainer from './AppContainer.vue'
+</script>
+
+<template>
+  <Story title="Layout/AppContainer">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <AppContainer
+            :scrollable="state.scrollable"
+            :direction="state.direction || undefined"
+            :gap="state.gap"
+          >
+            <div style="padding: 1.5rem;">
+              <h3 style="margin: 0 0 0.5rem; color: var(--text-primary, #1e293b);">Container Content</h3>
+              <p style="margin: 0; color: var(--text-muted, #94a3b8);">
+                This content is wrapped in an AppContainer component.
+              </p>
+            </div>
+          </AppContainer>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.scrollable" title="Scrollable" />
+        <HstSelect
+          v-model="state.direction"
+          title="Direction"
+          :options="[
+            { label: 'none (card)', value: '' },
+            { label: 'row', value: 'row' },
+            { label: 'column', value: 'column' },
+          ]"
+        />
+        <HstText v-model="state.gap" title="Gap" />
+      </template>
+    </Variant>
+
+    <Variant title="Card Mode (Default)">
+      <div style="padding: 2rem;">
+        <AppContainer>
+          <div style="padding: 1.5rem;">
+            <h3 style="margin: 0 0 0.5rem; color: var(--text-primary, #1e293b);">Card Container</h3>
+            <p style="margin: 0; color: var(--text-muted, #94a3b8);">
+              Default card mode with background and border styling.
+            </p>
+          </div>
+        </AppContainer>
+      </div>
+    </Variant>
+
+    <Variant title="Row Layout">
+      <div style="padding: 2rem;">
+        <AppContainer direction="row" gap="1rem">
+          <div style="padding: 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem; flex: 1;">
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Panel 1</p>
+          </div>
+          <div style="padding: 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem; flex: 1;">
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Panel 2</p>
+          </div>
+          <div style="padding: 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem; flex: 1;">
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Panel 3</p>
+          </div>
+        </AppContainer>
+      </div>
+    </Variant>
+
+    <Variant title="Column Layout">
+      <div style="padding: 2rem;">
+        <AppContainer direction="column" gap="0.75rem">
+          <div style="padding: 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem;">
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Section A</p>
+          </div>
+          <div style="padding: 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem;">
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Section B</p>
+          </div>
+          <div style="padding: 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem;">
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Section C</p>
+          </div>
+        </AppContainer>
+      </div>
+    </Variant>
+
+    <Variant title="Scrollable">
+      <div style="padding: 2rem;">
+        <AppContainer :scrollable="true">
+          <div style="padding: 1.5rem; height: 200px; overflow: hidden;">
+            <h3 style="margin: 0 0 1rem; color: var(--text-primary, #1e293b);">Scrollable Container</h3>
+            <div style="height: 400px;">
+              <p style="color: var(--text-muted, #94a3b8);">This container has more content than its visible area. Scroll to see more.</p>
+              <p style="color: var(--text-muted, #94a3b8);">Line 1 of many...</p>
+              <p style="color: var(--text-muted, #94a3b8);">Line 2 of many...</p>
+              <p style="color: var(--text-muted, #94a3b8);">Line 3 of many...</p>
+              <p style="color: var(--text-muted, #94a3b8);">Line 4 of many...</p>
+              <p style="color: var(--text-muted, #94a3b8);">Line 5 of many...</p>
+              <p style="color: var(--text-muted, #94a3b8);">Line 6 of many...</p>
+            </div>
+          </div>
+        </AppContainer>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/AppContainer.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+/** Content card with optional scroll lock, or a transparent flex layout shell with configurable direction and gap. */
+import { computed } from 'vue'
+
+interface Props {
+  /** Makes the container scrollable (overflow-y: auto). Ignored when direction is set. */
+  scrollable?: boolean
+  /** Renders as a transparent flex container instead of a card. */
+  direction?: 'row' | 'column'
+  /** Flex gap between children. Only applies when direction is set. */
+  gap?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  scrollable: false,
+  gap: '1rem',
+})
+
+const isLayout = computed(() => !!props.direction)
+</script>
+
+<template>
+  <div
+    class="mint-container"
+    :class="
+      isLayout
+        ? ['mint-container--layout', direction === 'row' ? 'mint-container--row' : 'mint-container--column']
+        : ['mint-container--card', scrollable ? 'mint-container--scrollable' : '']
+    "
+    :style="isLayout ? { gap } : undefined"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/AppLayout.story.vue

@@ -0,0 +1,331 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import AppLayout from './AppLayout.vue'
+import AppTopBar from './AppTopBar.vue'
+import AppSidebar from './AppSidebar.vue'
+import BaseSlider from './BaseSlider.vue'
+import BaseSelect from './BaseSelect.vue'
+import BaseToggle from './BaseToggle.vue'
+import BaseButton from './BaseButton.vue'
+import { ExperimentProvider } from '../__stories__/experiment-helpers'
+import type { PillNavItem, SidebarToolSection } from '../types'
+
+const activeView = ref('analysis')
+
+const pillNav: PillNavItem[] = [
+  { id: 'analysis', label: 'Analysis' },
+  { id: 'results', label: 'Results' },
+  { id: 'settings', label: 'Settings' },
+]
+
+const toolPanels: Record<string, SidebarToolSection[]> = {
+  analysis: [
+    { id: 'parameters', label: 'Parameters', icon: '⚙' },
+    { id: 'filters', label: 'Filters', icon: '🔍', defaultOpen: false },
+  ],
+  results: [
+    { id: 'display', label: 'Display Options', icon: '👁' },
+    { id: 'export', label: 'Export', icon: '📥' },
+  ],
+}
+
+const threshold = ref(50)
+const method = ref('linear')
+const methods = [
+  { value: 'linear', label: 'Linear' },
+  { value: 'quadratic', label: 'Quadratic' },
+]
+const showOutliers = ref(true)
+const logScale = ref(false)
+</script>
+
+<template>
+  <Story title="Layout/AppLayout">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="height: 600px;">
+          <AppLayout
+            :sidebar-position="state.sidebarPosition"
+            :floating="state.floating ?? true"
+            :sidebar-width="state.sidebarWidth"
+            responsive-sidebar
+          >
+            <template #topbar>
+              <AppTopBar
+                title="My Plugin"
+                subtitle="Laboratory Analysis"
+                :pill-nav="pillNav"
+                :current-pill-id="activeView"
+                :show-theme-toggle="true"
+                home-path=""
+                @pill-select="item => activeView = item.id"
+              />
+            </template>
+            <template #sidebar>
+              <AppSidebar
+                :panels="toolPanels"
+                :active-view="activeView"
+                :floating="false"
+                :side="state.sidebarPosition"
+              >
+                <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>
+                <template #section-display>
+                  <BaseToggle v-model="showOutliers" label="Show outliers" />
+                  <BaseToggle v-model="logScale" label="Log scale" />
+                </template>
+                <template #section-export>
+                  <BaseButton size="sm" variant="secondary">Export CSV</BaseButton>
+                  <BaseButton size="sm" variant="secondary">Export PNG</BaseButton>
+                </template>
+              </AppSidebar>
+            </template>
+            <div style="padding: 2rem;">
+              <h2 style="margin: 0 0 1rem; color: var(--text-primary, #1e293b);">
+                {{ activeView.charAt(0).toUpperCase() + activeView.slice(1) }}
+              </h2>
+              <p style="color: var(--text-muted, #94a3b8);">
+                Main content area. The sidebar shows tools for the "{{ activeView }}" view.
+                Switch modes to see different tool panels (settings has none).
+              </p>
+            </div>
+          </AppLayout>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.sidebarPosition"
+          title="Sidebar Position"
+          :options="[{ label: 'left', value: 'left' }, { label: 'right', value: 'right' }]"
+        />
+        <HstCheckbox v-model="state.floating" title="Floating" />
+        <HstText v-model="state.sidebarWidth" title="Sidebar Width" />
+      </template>
+    </Variant>
+
+    <Variant title="Full Layout (Floating)">
+      <div style="height: 600px;">
+        <AppLayout
+          :floating="true"
+          sidebar-width="280px"
+        >
+          <template #topbar>
+            <AppTopBar
+              title="Plate Analyzer"
+              subtitle="Dashboard"
+              :pill-nav="pillNav"
+              :current-pill-id="activeView"
+              :show-theme-toggle="true"
+              home-path=""
+              @pill-select="item => activeView = item.id"
+            />
+          </template>
+          <template #sidebar>
+            <AppSidebar
+              :panels="toolPanels"
+              :active-view="activeView"
+              :floating="false"
+            >
+              <template #header>
+                <span style="font-weight: 600; font-size: 0.875rem; color: var(--text-primary, #111827);">
+                  Tools
+                </span>
+              </template>
+              <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>
+              <template #section-display>
+                <BaseToggle v-model="showOutliers" label="Show outliers" />
+                <BaseToggle v-model="logScale" label="Log scale" />
+              </template>
+              <template #section-export>
+                <BaseButton size="sm" variant="secondary">Export CSV</BaseButton>
+              </template>
+            </AppSidebar>
+          </template>
+          <div style="padding: 2rem;">
+            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
+              <div style="padding: 1.5rem; background: var(--bg-card, #fff); border-radius: 0.5rem; border: 1px solid var(--border-color, #e2e8f0);">
+                <p style="margin: 0 0 0.25rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">Experiments</p>
+                <p style="margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--text-primary, #1e293b);">24</p>
+              </div>
+              <div style="padding: 1.5rem; background: var(--bg-card, #fff); border-radius: 0.5rem; border: 1px solid var(--border-color, #e2e8f0);">
+                <p style="margin: 0 0 0.25rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">Plates</p>
+                <p style="margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--text-primary, #1e293b);">156</p>
+              </div>
+              <div style="padding: 1.5rem; background: var(--bg-card, #fff); border-radius: 0.5rem; border: 1px solid var(--border-color, #e2e8f0);">
+                <p style="margin: 0 0 0.25rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">Analyses</p>
+                <p style="margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--text-primary, #1e293b);">89</p>
+              </div>
+            </div>
+          </div>
+        </AppLayout>
+      </div>
+    </Variant>
+
+    <Variant title="Without Sidebar">
+      <div style="height: 400px;">
+        <AppLayout>
+          <template #topbar>
+            <AppTopBar title="Simple Page" :show-theme-toggle="true" home-path="" />
+          </template>
+          <div style="padding: 2rem;">
+            <p style="color: var(--text-muted, #94a3b8);">Layout without a sidebar, just topbar and content.</p>
+          </div>
+        </AppLayout>
+      </div>
+    </Variant>
+
+    <Variant title="Right Sidebar">
+      <div style="height: 500px;">
+        <AppLayout
+          sidebar-position="right"
+          sidebar-width="260px"
+        >
+          <template #topbar>
+            <AppTopBar title="Right Sidebar Layout" home-path="" />
+          </template>
+          <template #sidebar>
+            <AppSidebar
+              :panels="toolPanels"
+              active-view="analysis"
+              :floating="false"
+              side="right"
+            >
+              <template #section-parameters>
+                <BaseSlider v-model="threshold" label="Threshold" :min="0" :max="100" />
+              </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);">Main content with sidebar on the right side.</p>
+          </div>
+        </AppLayout>
+      </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
+                title="IC50 Calculator"
+                subtitle="Analysis"
+                :pill-nav="pillNav"
+                :current-pill-id="activeView"
+                :show-theme-toggle="true"
+                home-path=""
+                @pill-select="item => activeView = item.id"
+              />
+            </template>
+            <template #sidebar>
+              <AppSidebar
+                :panels="toolPanels"
+                :active-view="activeView"
+                :floating="false"
+              >
+                <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>
+                <template #section-display>
+                  <BaseToggle v-model="showOutliers" label="Show outliers" />
+                  <BaseToggle v-model="logScale" label="Log scale" />
+                </template>
+                <template #section-export>
+                  <BaseButton size="sm" variant="secondary">Export CSV</BaseButton>
+                </template>
+              </AppSidebar>
+            </template>
+            <div style="padding: 2rem;">
+              <h2 style="margin: 0 0 1rem; color: var(--text-primary, #1e293b);">
+                {{ activeView.charAt(0).toUpperCase() + activeView.slice(1) }}
+              </h2>
+              <p style="color: var(--text-muted, #94a3b8);">
+                Full layout with experiment selector in the top bar.
+                Click the flask icon to open the experiment popover and selector modal.
+              </p>
+            </div>
+          </AppLayout>
+        </div>
+      </ExperimentProvider>
+    </Variant>
+
+    <Variant title="With Experiment Selector (No Selection)">
+      <ExperimentProvider :preselect="false">
+        <div style="height: 600px;">
+          <AppLayout :floating="true">
+            <template #topbar>
+              <AppTopBar
+                title="Plate Analyzer"
+                subtitle="Dashboard"
+                :show-theme-toggle="true"
+                home-path=""
+              />
+            </template>
+            <div style="padding: 2rem;">
+              <p style="color: var(--text-muted, #94a3b8);">
+                No experiment selected yet. Click the flask icon in the top bar to select one.
+              </p>
+            </div>
+          </AppLayout>
+        </div>
+      </ExperimentProvider>
+    </Variant>
+  </Story>
+</template>