@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/AppLayout.story.vue

@@ -0,0 +1,292 @@
+<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 { SidebarToolSection, TopBarTab } from '../types'
+
+const activeTab = ref('analysis')
+
+const tabs: TopBarTab[] = [
+  { 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"
+          >
+            <template #topbar>
+              <AppTopBar
+                title="My Plugin"
+                subtitle="Laboratory Analysis"
+                :tabs="tabs"
+                :current-tab-id="activeTab"
+                :show-theme-toggle="true"
+                home-path=""
+                @tab-select="t => activeTab = t.id"
+              />
+            </template>
+            <template #sidebar>
+              <AppSidebar
+                :panels="toolPanels"
+                :active-view="activeTab"
+                :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);">
+                {{ activeTab.charAt(0).toUpperCase() + activeTab.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).
+              </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
+              plugin-name="Plate Analyzer"
+              title="Dashboard"
+              :tabs="tabs"
+              :current-tab-id="activeTab"
+              :show-theme-toggle="true"
+              home-path=""
+              @tab-select="t => activeTab = t.id"
+            />
+          </template>
+          <template #sidebar>
+            <AppSidebar
+              :panels="toolPanels"
+              :active-view="activeTab"
+              :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="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"
+                :show-theme-toggle="true"
+                home-path=""
+                @tab-select="t => activeTab = t.id"
+              />
+            </template>
+            <template #sidebar>
+              <AppSidebar
+                :panels="toolPanels"
+                :active-view="activeTab"
+                :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);">
+                {{ activeTab.charAt(0).toUpperCase() + activeTab.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
+                plugin-name="Plate Analyzer"
+                title="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>

package/src/components/AppLayout.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+/**
+ * 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.
+ *
+ * @example
+ * ```vue
+ * <AppLayout sidebar-position="right" floating>
+ *   <template #topbar>
+ *     <AppTopBar title="My App" />
+ *   </template>
+ *   <template #sidebar>
+ *     <AppSidebar :panels="toolPanels" :active-view="activeTab">
+ *       <template #section-params>...</template>
+ *     </AppSidebar>
+ *   </template>
+ *   <main-content />
+ * </AppLayout>
+ * ```
+ */
+import { computed } from 'vue'
+
+interface Props {
+  /** Position of sidebar (left or right side of screen) */
+  sidebarPosition?: 'left' | 'right'
+  /** Width of sidebar (use 'auto' to fit content) */
+  sidebarWidth?: string
+  /** When true, topbar/sidebar/main render as floating cards with gaps */
+  floating?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  sidebarPosition: 'left',
+  sidebarWidth: 'auto',
+  floating: false,
+})
+
+const layoutClasses = computed(() => [
+  'mld-layout',
+  props.sidebarPosition === 'right' ? 'mld-layout--sidebar-right' : '',
+  props.floating ? 'mld-layout--floating' : '',
+])
+
+const sidebarStyle = computed(() => {
+  return props.sidebarWidth !== 'auto' ? { width: props.sidebarWidth } : undefined
+})
+</script>
+
+<template>
+  <div :class="layoutClasses">
+    <div v-if="$slots.topbar" class="mld-layout__topbar">
+      <slot name="topbar" />
+    </div>
+
+    <div class="mld-layout__body">
+      <div
+        v-if="$slots.sidebar"
+        class="mld-layout__sidebar"
+        :style="sidebarStyle"
+      >
+        <slot name="sidebar" />
+      </div>
+
+      <main class="mld-layout__main">
+        <slot />
+      </main>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/app-layout.css';
+</style>

package/src/components/AppPageSelector.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+/** Dropdown trigger that switches between named pages, closing on outside click or Escape. */
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import type { PageSelectorItem } from '../types/components'
+
+interface Props {
+  pages: PageSelectorItem[]
+  currentPageId?: string
+  placeholder?: string
+  minWidth?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Go to…',
+  minWidth: '11.25rem',
+})
+
+const emit = defineEmits<{
+  select: [page: PageSelectorItem]
+}>()
+
+const isOpen = ref(false)
+const rootRef = ref<HTMLElement | null>(null)
+
+const current = computed<PageSelectorItem | undefined>(() =>
+  props.pages.find((p) => p.id === props.currentPageId) ?? props.pages[0],
+)
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+
+function handleSelect(page: PageSelectorItem) {
+  if (page.disabled) return
+  emit('select', page)
+  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
+  }
+}
+
+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>
+  <div ref="rootRef" class="mld-page-selector" :style="{ minWidth }">
+    <button
+      type="button"
+      class="mld-page-selector__trigger"
+      :class="{ 'mld-page-selector__trigger--open': isOpen }"
+      :aria-expanded="isOpen"
+      aria-haspopup="menu"
+      @click.stop="toggle"
+    >
+      <span class="mld-page-selector__label">{{ current?.label ?? placeholder }}</span>
+      <span class="mld-page-selector__chevron-wrap" aria-hidden="true">
+        <svg
+          class="mld-page-selector__chevron"
+          :class="{ 'mld-page-selector__chevron--open': isOpen }"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </span>
+    </button>
+
+    <div v-if="isOpen" class="mld-page-selector__menu" role="menu">
+      <div class="mld-page-selector__menu-title">Go to</div>
+      <template v-for="page in pages" :key="page.id">
+        <a
+          v-if="page.href"
+          :href="page.href"
+          :class="[
+            'mld-page-selector__item',
+            { 'mld-page-selector__item--active': page.id === current?.id },
+            { 'mld-page-selector__item--disabled': page.disabled },
+          ]"
+          role="menuitem"
+          @click="isOpen = false"
+        >
+          <span class="mld-page-selector__item-icon">
+            <slot name="item-icon" :page="page">
+              <span class="mld-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
+            </slot>
+          </span>
+          <span class="mld-page-selector__item-label">{{ page.label }}</span>
+          <span v-if="page.hint" class="mld-page-selector__item-hint">{{ page.hint }}</span>
+        </a>
+        <router-link
+          v-else-if="page.to"
+          :to="page.to"
+          :class="[
+            'mld-page-selector__item',
+            { 'mld-page-selector__item--active': page.id === current?.id },
+            { 'mld-page-selector__item--disabled': page.disabled },
+          ]"
+          role="menuitem"
+          @click="isOpen = false"
+        >
+          <span class="mld-page-selector__item-icon">
+            <slot name="item-icon" :page="page">
+              <span class="mld-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
+            </slot>
+          </span>
+          <span class="mld-page-selector__item-label">{{ page.label }}</span>
+          <span v-if="page.hint" class="mld-page-selector__item-hint">{{ page.hint }}</span>
+        </router-link>
+        <button
+          v-else
+          type="button"
+          :class="[
+            'mld-page-selector__item',
+            { 'mld-page-selector__item--active': page.id === current?.id },
+            { 'mld-page-selector__item--disabled': page.disabled },
+          ]"
+          role="menuitem"
+          :disabled="page.disabled"
+          @click="handleSelect(page)"
+        >
+          <span class="mld-page-selector__item-icon">
+            <slot name="item-icon" :page="page">
+              <span class="mld-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
+            </slot>
+          </span>
+          <span class="mld-page-selector__item-label">{{ page.label }}</span>
+          <span v-if="page.hint" class="mld-page-selector__item-hint">{{ page.hint }}</span>
+        </button>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/app-page-selector.css';
+</style>

package/src/components/AppPillNav.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+/** Horizontal pill-style navigation bar that emits select events and supports href, router-link, or button items. */
+import type { PillNavItem } from '../types/components'
+
+interface Props {
+  items: PillNavItem[]
+  currentItemId?: string
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  select: [item: PillNavItem]
+}>()
+
+function handleClick(item: PillNavItem) {
+  if (item.disabled) return
+  emit('select', item)
+}
+</script>
+
+<template>
+  <nav class="mld-pill-nav" aria-label="Primary">
+    <template v-for="item in items" :key="item.id">
+      <a
+        v-if="item.href"
+        :href="item.href"
+        :class="[
+          'mld-pill-nav__item',
+          { 'mld-pill-nav__item--active': item.id === currentItemId },
+          { 'mld-pill-nav__item--disabled': item.disabled },
+        ]"
+      >
+        {{ item.label }}
+      </a>
+      <router-link
+        v-else-if="item.to"
+        :to="item.to"
+        :class="[
+          'mld-pill-nav__item',
+          { 'mld-pill-nav__item--active': item.id === currentItemId },
+          { 'mld-pill-nav__item--disabled': item.disabled },
+        ]"
+      >
+        {{ item.label }}
+      </router-link>
+      <button
+        v-else
+        type="button"
+        :class="[
+          'mld-pill-nav__item',
+          { 'mld-pill-nav__item--active': item.id === currentItemId },
+          { 'mld-pill-nav__item--disabled': item.disabled },
+        ]"
+        :disabled="item.disabled"
+        @click="handleClick(item)"
+      >
+        {{ item.label }}
+      </button>
+    </template>
+  </nav>
+</template>
+
+<style>
+@import '../styles/components/app-pill-nav.css';
+</style>