@morscherlab/mint-sdk 1.0.0-alpha.2

package/dist/utils/color.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Color utilities for deriving same-hue-family shades.
+ *
+ * Used by SampleSelector and other group/legend UIs where a parent color
+ * needs to seed a gradient of related shades for its children.
+ */
+export interface Hsl {
+    h: number;
+    s: number;
+    l: number;
+}
+export declare function hexToHsl(hex: string): Hsl;
+export declare function hslToHex(h: number, s: number, l: number): string;
+/**
+ * Derive a same-hue-family shade of `parentHex` for child at `index` of `total`.
+ *
+ * Lightness is distributed evenly within [35, 75] so all children remain
+ * readable on light/dark backgrounds. Hue and saturation are inherited from
+ * the parent. With `total <= 1`, returns the parent unchanged.
+ *
+ * Children are ordered light → dark by index, so index 0 is the brightest
+ * sibling and index `total - 1` is the darkest.
+ */
+export declare function deriveShade(parentHex: string, index: number, total: number): string;

package/package.json

@@ -0,0 +1,114 @@
+{
+  "name": "@morscherlab/mint-sdk",
+  "version": "1.0.0-alpha.2",
+  "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "*.css",
+    "./dist/styles.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./install": {
+      "types": "./dist/install.d.ts",
+      "import": "./dist/install.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
+    },
+    "./composables": {
+      "types": "./dist/composables/index.d.ts",
+      "import": "./dist/composables/index.js"
+    },
+    "./stores": {
+      "types": "./dist/stores/index.d.ts",
+      "import": "./dist/stores/index.js"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/types/index.js"
+    },
+    "./styles": "./dist/styles.css",
+    "./tailwind.preset": {
+      "types": "./dist/tailwind.preset.d.ts",
+      "import": "./dist/tailwind.preset.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "vite build && vue-tsc --emitDeclarationOnly",
+    "dev": "vite build --watch",
+    "typecheck": "vue-tsc --noEmit",
+    "clean": "rm -rf dist",
+    "test": "vitest run",
+    "story:dev": "histoire dev",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview"
+  },
+  "peerDependencies": {
+    "@simplewebauthn/browser": "^10.0.0",
+    "pinia": "^2.1.0 || ^3.0.0",
+    "tailwindcss": "^4.1.0",
+    "vue": "^3.4.0",
+    "vue-router": "^4.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@simplewebauthn/browser": {
+      "optional": true
+    },
+    "vue-router": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.6",
+    "axios": "1.13.6"
+  },
+  "devDependencies": {
+    "@histoire/plugin-vue": "1.0.0-beta.1",
+    "@simplewebauthn/browser": "10.0.0",
+    "@simplewebauthn/types": "10.0.0",
+    "@types/node": "22.19.13",
+    "@vitejs/plugin-vue": "6.0.5",
+    "@vue/test-utils": "2.4.6",
+    "happy-dom": "15.11.7",
+    "histoire": "1.0.0-beta.1",
+    "typescript": "5.9.3",
+    "vite": "8.0.0",
+    "vite-plugin-dts": "4.5.4",
+    "vitest": "4.1.0",
+    "vue-router": "4.6.4",
+    "vue-tsc": "2.2.12"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MorscherLab/mld",
+    "directory": "packages/sdk-frontend"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "sdk",
+    "mint",
+    "mass-spec",
+    "metabolomics",
+    "plugin",
+    "components"
+  ],
+  "author": "MorscherLab",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  }
+}

package/src/__stories__/experiment-helpers.ts

@@ -0,0 +1,83 @@
+/**
+ * Shared helpers for story files that need experiment selector integration.
+ * Provides mock data, API interceptors, and a provider wrapper component.
+ */
+import { defineComponent, onUnmounted } from 'vue'
+import { useAppExperiment } from '../composables/useAppExperiment'
+import { useApi } from '../composables/useApi'
+import type { ExperimentSummary } from '../types'
+
+export const mockExperiments: ExperimentSummary[] = [
+  { id: 1, experiment_code: 'DR-HeLa-DOX-001', name: 'Doxorubicin dose-response in HeLa cells', status: 'completed', experiment_type: 'dose_response', project: 'Oncology Screen Q1', project_name: 'Oncology Screen Q1', created_at: '2026-02-28T14:30:00Z', updated_at: '2026-03-01T09:15:00Z', has_design_data: true },
+  { id: 2, experiment_code: 'CV-MCF7-24H-002', name: 'MCF-7 cell viability 24h time course', status: 'completed', experiment_type: 'cell_viability', project: 'Oncology Screen Q1', project_name: 'Oncology Screen Q1', created_at: '2026-02-25T10:00:00Z', updated_at: '2026-02-26T16:45:00Z', has_design_data: true },
+  { id: 3, experiment_code: 'DR-PANC1-GEM-003', name: 'Gemcitabine IC50 in PANC-1', status: 'ongoing', experiment_type: 'dose_response', project: 'Pancreatic Cancer', project_name: 'Pancreatic Cancer', created_at: '2026-03-01T08:00:00Z', updated_at: '2026-03-02T11:30:00Z', has_design_data: true },
+  { id: 4, experiment_code: 'CV-A549-CIS-004', name: 'Cisplatin cytotoxicity A549 lung', status: 'ongoing', experiment_type: 'cell_viability', project: 'Lung Cancer Panel', project_name: 'Lung Cancer Panel', created_at: '2026-03-01T13:00:00Z', updated_at: '2026-03-02T08:00:00Z', has_design_data: false },
+  { id: 5, experiment_code: 'DR-HEK293-CTRL-005', name: 'HEK-293T control viability baseline', status: 'completed', experiment_type: 'dose_response', project: 'Toxicity Controls', project_name: 'Toxicity Controls', created_at: '2026-02-20T09:00:00Z', updated_at: '2026-02-22T17:00:00Z', has_design_data: true },
+]
+
+const mockExperimentTypes = [
+  { name: 'dose_response', color: '#3b82f6' },
+  { name: 'cell_viability', color: '#10b981' },
+]
+
+const mockProjects = [
+  { id: 1, name: 'Oncology Screen Q1' },
+  { id: 2, name: 'Pancreatic Cancer' },
+  { id: 3, name: 'Lung Cancer Panel' },
+  { id: 4, name: 'Toxicity Controls' },
+]
+
+export function installMockInterceptor() {
+  const { client } = useApi()
+  client.interceptors.request.use((config) => {
+    const url = config.url ?? ''
+    if (url.includes('/experiments/experiment-types')) {
+      config.adapter = () => Promise.resolve({ data: mockExperimentTypes, status: 200, statusText: 'OK', headers: {}, config })
+      return config
+    }
+    if (url.includes('/projects')) {
+      config.adapter = () => Promise.resolve({ data: mockProjects, status: 200, statusText: 'OK', headers: {}, config })
+      return config
+    }
+    if (url.startsWith('/api/experiments')) {
+      const params = new URLSearchParams(url.split('?')[1] ?? '')
+      const skip = Number(params.get('skip') ?? 0)
+      const limit = Number(params.get('limit') ?? 100)
+      let filtered = [...mockExperiments]
+      const status = params.get('status')
+      const search = params.get('search')?.toLowerCase()
+      if (status) filtered = filtered.filter(e => e.status === status)
+      if (search) filtered = filtered.filter(e => e.name.toLowerCase().includes(search) || e.experiment_code?.toLowerCase().includes(search))
+      config.adapter = () => Promise.resolve({ data: { experiments: filtered.slice(skip, skip + limit), total: filtered.length }, status: 200, statusText: 'OK', headers: {}, config })
+    }
+    return config
+  })
+}
+
+/**
+ * Wrapper component that fakes integrated mode and provides useAppExperiment context.
+ * Use in story files to demonstrate experiment selector integration.
+ *
+ * Props:
+ *   preselect (boolean, default true) - pre-select the first mock experiment
+ */
+export const ExperimentProvider = defineComponent({
+  props: { preselect: { type: Boolean, default: true } },
+  setup(props, { slots }) {
+    ;(window as any).__MINT_PLATFORM__ = { isIntegrated: true, theme: 'system' }
+    installMockInterceptor()
+    const { set } = useAppExperiment({
+      onSave: async () => 'Saved!',
+    })
+    if (props.preselect) {
+      set({
+        id: 1,
+        name: 'Doxorubicin dose-response in HeLa cells',
+        experiment_code: 'DR-HeLa-DOX-001',
+        status: 'completed',
+      })
+    }
+    onUnmounted(() => { delete (window as any).__MINT_PLATFORM__ })
+    return () => slots.default?.()
+  },
+})

package/src/__tests__/components/AppLayout.test.ts

@@ -0,0 +1,163 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import AppLayout from '../../components/AppLayout.vue'
+
+describe('AppLayout', () => {
+  describe('rendering with default props', () => {
+    it('should render layout with default classes', () => {
+      const wrapper = mount(AppLayout)
+      expect(wrapper.find('.mld-layout').exists()).toBe(true)
+      expect(wrapper.find('.mld-layout--sidebar-right').exists()).toBe(false)
+      expect(wrapper.find('.mld-layout--floating').exists()).toBe(false)
+    })
+
+    it('should render body container', () => {
+      const wrapper = mount(AppLayout)
+      expect(wrapper.find('.mld-layout__body').exists()).toBe(true)
+    })
+
+    it('should render main content slot', () => {
+      const wrapper = mount(AppLayout, {
+        slots: {
+          default: '<p>Main content</p>',
+        },
+      })
+      expect(wrapper.find('.mld-layout__main').exists()).toBe(true)
+      expect(wrapper.find('.mld-layout__main').text()).toBe('Main content')
+    })
+  })
+
+  describe('topbar slot', () => {
+    it('should render topbar when slot is provided', () => {
+      const wrapper = mount(AppLayout, {
+        slots: {
+          topbar: '<div class="custom-topbar">Topbar</div>',
+        },
+      })
+      expect(wrapper.find('.mld-layout__topbar').exists()).toBe(true)
+      expect(wrapper.find('.custom-topbar').text()).toBe('Topbar')
+    })
+
+    it('should not render topbar when slot is not provided', () => {
+      const wrapper = mount(AppLayout)
+      expect(wrapper.find('.mld-layout__topbar').exists()).toBe(false)
+    })
+  })
+
+  describe('sidebar slot', () => {
+    it('should render sidebar when slot is provided', () => {
+      const wrapper = mount(AppLayout, {
+        slots: {
+          sidebar: '<div class="custom-sidebar">Sidebar</div>',
+        },
+      })
+      expect(wrapper.find('.mld-layout__sidebar').exists()).toBe(true)
+      expect(wrapper.find('.custom-sidebar').text()).toBe('Sidebar')
+    })
+
+    it('should not render sidebar when slot is not provided', () => {
+      const wrapper = mount(AppLayout)
+      expect(wrapper.find('.mld-layout__sidebar').exists()).toBe(false)
+    })
+  })
+
+  describe('sidebarPosition prop', () => {
+    it('should default to left position', () => {
+      const wrapper = mount(AppLayout)
+      expect(wrapper.find('.mld-layout--sidebar-right').exists()).toBe(false)
+    })
+
+    it('should add right class when sidebarPosition is right', () => {
+      const wrapper = mount(AppLayout, {
+        props: { sidebarPosition: 'right' },
+      })
+      expect(wrapper.find('.mld-layout--sidebar-right').exists()).toBe(true)
+    })
+
+    it('should not add right class when sidebarPosition is left', () => {
+      const wrapper = mount(AppLayout, {
+        props: { sidebarPosition: 'left' },
+      })
+      expect(wrapper.find('.mld-layout--sidebar-right').exists()).toBe(false)
+    })
+  })
+
+  describe('floating prop', () => {
+    it('should not add floating class by default', () => {
+      const wrapper = mount(AppLayout)
+      expect(wrapper.find('.mld-layout--floating').exists()).toBe(false)
+    })
+
+    it('should add floating class when floating is true', () => {
+      const wrapper = mount(AppLayout, {
+        props: { floating: true },
+      })
+      expect(wrapper.find('.mld-layout--floating').exists()).toBe(true)
+    })
+  })
+
+  describe('sidebar width styling', () => {
+    it('should not apply inline width when default auto is used', () => {
+      const wrapper = mount(AppLayout, {
+        slots: { sidebar: '<div>Sidebar</div>' },
+      })
+      const sidebar = wrapper.find('.mld-layout__sidebar')
+      expect(sidebar.attributes('style')).toBeUndefined()
+    })
+
+    it('should apply custom sidebar width', () => {
+      const wrapper = mount(AppLayout, {
+        props: { sidebarWidth: '300px' },
+        slots: { sidebar: '<div>Sidebar</div>' },
+      })
+      const sidebar = wrapper.find('.mld-layout__sidebar')
+      expect(sidebar.attributes('style')).toContain('width: 300px')
+    })
+
+    it('should handle width with different CSS units', () => {
+      const wrapper = mount(AppLayout, {
+        props: { sidebarWidth: '20rem' },
+        slots: { sidebar: '<div>Sidebar</div>' },
+      })
+      const sidebar = wrapper.find('.mld-layout__sidebar')
+      expect(sidebar.attributes('style')).toContain('width: 20rem')
+    })
+  })
+
+  describe('integration: all slots', () => {
+    it('should render topbar, sidebar, and main content together', () => {
+      const wrapper = mount(AppLayout, {
+        slots: {
+          topbar: '<div class="topbar-content">Header</div>',
+          sidebar: '<div class="sidebar-content">Sidebar</div>',
+          default: '<div class="main-content">Content</div>',
+        },
+      })
+
+      expect(wrapper.find('.topbar-content').text()).toBe('Header')
+      expect(wrapper.find('.sidebar-content').text()).toBe('Sidebar')
+      expect(wrapper.find('.main-content').text()).toBe('Content')
+    })
+
+    it('should apply multiple modifier classes', () => {
+      const wrapper = mount(AppLayout, {
+        props: {
+          sidebarPosition: 'right',
+          floating: true,
+        },
+      })
+
+      const layout = wrapper.find('.mld-layout')
+      expect(layout.classes()).toContain('mld-layout--sidebar-right')
+      expect(layout.classes()).toContain('mld-layout--floating')
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle empty default slot', () => {
+      const wrapper = mount(AppLayout)
+      expect(wrapper.find('.mld-layout__main').exists()).toBe(true)
+      expect(wrapper.find('.mld-layout__main').text()).toBe('')
+    })
+  })
+})

package/src/__tests__/components/AppSidebar.test.ts

@@ -0,0 +1,292 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import AppSidebar from '../../components/AppSidebar.vue'
+import CollapsibleCard from '../../components/CollapsibleCard.vue'
+import type { SidebarToolSection } from '../../types'
+
+const samplePanels: Record<string, SidebarToolSection[]> = {
+  analysis: [
+    { id: 'parameters', label: 'Parameters', icon: '⚙' },
+    { id: 'filters', label: 'Filters', icon: '🔍', defaultOpen: false },
+  ],
+  results: [
+    { id: 'display', label: 'Display Options' },
+  ],
+}
+
+describe('AppSidebar', () => {
+  describe('rendering with default props', () => {
+    it('should render sidebar with default classes', () => {
+      const wrapper = mount(AppSidebar)
+      expect(wrapper.find('.mld-sidebar').exists()).toBe(true)
+      expect(wrapper.find('.mld-sidebar--left').exists()).toBe(true)
+      expect(wrapper.find('.mld-sidebar--floating').exists()).toBe(true)
+    })
+
+    it('should apply default width', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+      })
+      expect(wrapper.find('.mld-sidebar').attributes('style')).toContain('width: 280px')
+    })
+
+    it('should be hidden when no panels match active view', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'settings' },
+      })
+      expect(wrapper.find('.mld-sidebar--hidden').exists()).toBe(true)
+    })
+
+    it('should be hidden when activeView is empty', () => {
+      const wrapper = mount(AppSidebar)
+      expect(wrapper.find('.mld-sidebar--hidden').exists()).toBe(true)
+    })
+  })
+
+  describe('side prop', () => {
+    it('should default to left side', () => {
+      const wrapper = mount(AppSidebar)
+      expect(wrapper.find('.mld-sidebar--left').exists()).toBe(true)
+      expect(wrapper.find('.mld-sidebar--right').exists()).toBe(false)
+    })
+
+    it('should apply right side class', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { side: 'right' },
+      })
+      expect(wrapper.find('.mld-sidebar--right').exists()).toBe(true)
+      expect(wrapper.find('.mld-sidebar--left').exists()).toBe(false)
+    })
+  })
+
+  describe('floating prop', () => {
+    it('should apply floating class by default', () => {
+      const wrapper = mount(AppSidebar)
+      expect(wrapper.find('.mld-sidebar--floating').exists()).toBe(true)
+      expect(wrapper.find('.mld-sidebar--static').exists()).toBe(false)
+    })
+
+    it('should apply static class when floating is false', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { floating: false },
+      })
+      expect(wrapper.find('.mld-sidebar--static').exists()).toBe(true)
+      expect(wrapper.find('.mld-sidebar--floating').exists()).toBe(false)
+    })
+  })
+
+  describe('width prop', () => {
+    it('should apply custom width', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          width: '300px',
+        },
+      })
+      expect(wrapper.find('.mld-sidebar').attributes('style')).toContain('width: 300px')
+    })
+
+    it('should handle different CSS units', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          width: '20rem',
+        },
+      })
+      expect(wrapper.find('.mld-sidebar').attributes('style')).toContain('width: 20rem')
+    })
+  })
+
+  describe('panels and activeView', () => {
+    it('should render sections for active view', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards).toHaveLength(2)
+    })
+
+    it('should render CollapsibleCard for each section', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards).toHaveLength(2)
+    })
+
+    it('should pass section label as title to CollapsibleCard', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards[0].props('title')).toBe('Parameters')
+      expect(cards[1].props('title')).toBe('Filters')
+    })
+
+    it('should pass section icon to CollapsibleCard', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards[0].props('icon')).toBe('⚙')
+    })
+
+    it('should respect defaultOpen on sections', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards[0].props('defaultOpen')).toBe(true)
+      expect(cards[1].props('defaultOpen')).toBe(false)
+    })
+
+    it('should switch sections when activeView changes', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(2)
+
+      await wrapper.setProps({ activeView: 'results' })
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(1)
+    })
+
+    it('should hide when switching to view with no panels', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      expect(wrapper.find('.mld-sidebar--hidden').exists()).toBe(false)
+
+      await wrapper.setProps({ activeView: 'settings' })
+      expect(wrapper.find('.mld-sidebar--hidden').exists()).toBe(true)
+    })
+  })
+
+  describe('section slots', () => {
+    it('should render named section slots', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+        slots: {
+          'section-parameters': '<div class="params-content">Parameters content</div>',
+          'section-filters': '<div class="filters-content">Filters content</div>',
+        },
+      })
+      expect(wrapper.find('.params-content').exists()).toBe(true)
+      expect(wrapper.find('.filters-content').exists()).toBe(true)
+    })
+
+    it('should not render section slots for inactive view', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'results' },
+        global: { components: { CollapsibleCard } },
+        slots: {
+          'section-parameters': '<div class="params-content">Parameters content</div>',
+          'section-display': '<div class="display-content">Display content</div>',
+        },
+      })
+      expect(wrapper.find('.params-content').exists()).toBe(false)
+      expect(wrapper.find('.display-content').exists()).toBe(true)
+    })
+  })
+
+  describe('slots', () => {
+    it('should render header slot', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        slots: {
+          header: '<div class="custom-header">Header</div>',
+        },
+      })
+      expect(wrapper.find('.mld-sidebar__header').exists()).toBe(true)
+      expect(wrapper.find('.custom-header').text()).toBe('Header')
+    })
+
+    it('should render footer slot', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        slots: {
+          footer: '<div class="custom-footer">Footer</div>',
+        },
+      })
+      expect(wrapper.find('.mld-sidebar__footer').exists()).toBe(true)
+      expect(wrapper.find('.custom-footer').text()).toBe('Footer')
+    })
+
+    it('should not render header when slot is not provided', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+      })
+      expect(wrapper.find('.mld-sidebar__header').exists()).toBe(false)
+    })
+
+    it('should not render footer when slot is not provided', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+      })
+      expect(wrapper.find('.mld-sidebar__footer').exists()).toBe(false)
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle empty panels object', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: {}, activeView: 'analysis' },
+      })
+      expect(wrapper.find('.mld-sidebar--hidden').exists()).toBe(true)
+    })
+
+    it('should handle view with empty sections array', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: { empty: [] }, activeView: 'empty' },
+      })
+      expect(wrapper.find('.mld-sidebar--hidden').exists()).toBe(true)
+    })
+
+    it('should handle undefined activeView', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels },
+      })
+      expect(wrapper.find('.mld-sidebar--hidden').exists()).toBe(true)
+    })
+  })
+
+  describe('integration: multiple classes', () => {
+    it('should apply multiple classes correctly', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          side: 'left',
+          floating: false,
+        },
+      })
+
+      const sidebar = wrapper.find('.mld-sidebar')
+      expect(sidebar.classes()).toContain('mld-sidebar--left')
+      expect(sidebar.classes()).toContain('mld-sidebar--static')
+    })
+
+    it('should render all slots with sections', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+        slots: {
+          header: '<div class="header">Header</div>',
+          footer: '<div class="footer">Footer</div>',
+          'section-parameters': '<div>Params</div>',
+        },
+      })
+
+      expect(wrapper.find('.header').exists()).toBe(true)
+      expect(wrapper.find('.footer').exists()).toBe(true)
+      expect(wrapper.find('.mld-sidebar__sections').exists()).toBe(true)
+    })
+  })
+})