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

package/src/components/AppSidebar.story.vue

@@ -10,11 +10,13 @@ import NumberInput from './NumberInput.vue'
 import FileUploader from './FileUploader.vue'
 import FormField from './FormField.vue'
 import WellPlate from './WellPlate.vue'
-import { defineControls, getControlDefaults } from '../composables/useControlSchema'
+import { defineControlModel, defineControls, getControlDefaults } from '../composables/useControlSchema'
 import { useBioTemplateWorkspace } from '../composables/useBioTemplateWorkspace'
 import { createWellPlateScreenCollection } from '../templates'
 import type { SidebarToolSection } from '../types'
 
+type SidebarVariant = 'analysis' | 'default'
+
 /* --- Icon paths (Lucide-style) --- */
 const icons = {
   upload: ['M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4', 'M17 8l-5-5-5 5', 'M12 3v12'],
@@ -130,6 +132,13 @@ const polarity = ref('negative')
 const container = ref('vial')
 const expNumber = ref(1)
 const initials = ref('XP')
+const sequencePrefix = ref('exp001_260210_XP')
+const runMode = ref('balanced')
+const runModeOptions = [
+  { value: 'fast', label: 'Fast' },
+  { value: 'balanced', label: 'Balanced' },
+  { value: 'qc', label: 'QC focused' },
+]
 const toggleState = reactive<Record<string, boolean>>({ naming: true, randomize: false })
 const schemaControls = defineControls({
   threshold: {
@@ -172,13 +181,46 @@ const schemaControls = defineControls({
     },
   },
 })
-const controlValues = reactive<Record<string, unknown>>({ ...getControlDefaults(schemaControls) })
+const controlValues = ref<Record<string, unknown>>({ ...getControlDefaults(schemaControls) })
+const modelDrivenSidebarModel = defineControlModel({
+  views: {
+    analysis: {
+      label: 'Analysis',
+      sections: {
+        parameters: {
+          label: 'Parameters',
+          description: 'Thresholds and scoring',
+          icon: icons.settings,
+          controls: {
+            threshold: { type: 'number', default: 0.05, min: 0, max: 1 },
+            method: ['linear', 'logistic', 'spline'],
+          },
+        },
+        filters: {
+          label: 'Filters',
+          description: 'Result cleanup',
+          sidebar: {
+            icon: icons.zap,
+            iconColor: '#0ea5e9',
+            iconBg: '#e0f2fe',
+            defaultOpen: false,
+          },
+          controls: {
+            showOutliers: true,
+            minPeakArea: { type: 'number', default: 1000, min: 0 },
+          },
+        },
+      },
+    },
+  },
+})
+const modelDrivenValues = ref<Record<string, unknown>>({})
 const templateCollection = createWellPlateScreenCollection({
   samples: ['Control', 'Treatment'],
   compounds: { 'Drug A': [10, 1, 0.1] },
 })
 const templateWorkspace = useBioTemplateWorkspace(templateCollection)
-const templateValues = reactive<Record<string, unknown>>({ ...templateWorkspace.controls.initialValues })
+const templateValues = ref<Record<string, unknown>>({ ...templateWorkspace.controls.initialValues })
 const templateWellPlateProps = templateWorkspace.componentProps
   .find(binding => binding.component === 'WellPlate')
   ?.propsObject ?? {}
@@ -190,8 +232,9 @@ function handleToggle(id: string, value: boolean) {
 function initSimpleToolkit() {
   return {
     activeView: 'analysis',
+    variant: 'analysis' as SidebarVariant,
     floating: false,
-    width: '260px',
+    width: '20rem',
     side: 'left' as const,
   }
 }
@@ -276,14 +319,70 @@ function initSimpleToolkit() {
     <Variant title="Schema Driven Controls">
       <div style="padding: 2rem; height: 520px; position: relative; background: var(--bg-primary, #f1f5f9);">
         <AppSidebar
+          variant="analysis"
+          title="Peak Picking"
+          subtitle="Current experiment"
           :controls="schemaControls"
           active-view="analysis"
           v-model="controlValues"
-          width="300px"
         />
       </div>
     </Variant>
 
+    <Variant title="Model Driven Analysis">
+      <div style="padding: 2rem; height: 560px; position: relative; background: var(--bg-primary, #f1f5f9);">
+        <AppSidebar
+          v-model="modelDrivenValues"
+          variant="analysis"
+          title="Peak Picking"
+          subtitle="Current experiment"
+          :model="modelDrivenSidebarModel"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Route Owned Shell">
+      <div style="padding: 2rem; height: 560px; display: flex; gap: 1rem; background: var(--bg-primary, #f1f5f9);">
+        <AppSidebar
+          variant="analysis"
+          title="Sequence"
+          subtitle="Acquisition run"
+          content-id="seqgen-sidebar"
+          show-when-empty
+        >
+          <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+            <FormField label="File Prefix">
+              <BaseInput v-model="sequencePrefix" size="sm" />
+            </FormField>
+            <FormField label="Run Mode">
+              <BaseSelect v-model="runMode" :options="runModeOptions" size="sm" />
+            </FormField>
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;">
+              <BaseButton size="sm" variant="secondary">NEG</BaseButton>
+              <BaseButton size="sm" variant="secondary">VIAL</BaseButton>
+            </div>
+          </div>
+
+          <template #footer>
+            <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+              <BaseButton variant="cta" style="width: 100%;">Generate Sequence</BaseButton>
+              <BaseButton variant="ghost" size="sm" style="width: 100%;">Clear Draft</BaseButton>
+            </div>
+          </template>
+        </AppSidebar>
+
+        <div style="flex: 1; min-width: 0; border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.5rem; background: var(--bg-card, #fff); padding: 1rem;">
+          <div style="display: flex; justify-content: space-between; gap: 1rem; align-items: center;">
+            <div>
+              <div style="font-size: 0.875rem; font-weight: 650; color: var(--text-primary, #111827);">MS queue</div>
+              <div style="font-size: 0.75rem; color: var(--text-muted, #6b7280);">{{ sequencePrefix }} · {{ runMode }}</div>
+            </div>
+            <BaseButton size="sm" variant="secondary">Preview CSV</BaseButton>
+          </div>
+        </div>
+      </div>
+    </Variant>
+
     <Variant title="Template Driven Controls">
       <div style="padding: 2rem; min-height: 560px; display: flex; gap: 1rem; background: var(--bg-primary, #f1f5f9);">
         <AppSidebar
@@ -335,6 +434,7 @@ function initSimpleToolkit() {
           </div>
           <AppSidebar
             :panels="simplePanels"
+            :variant="state.variant"
             :active-view="state.activeView"
             :floating="state.floating"
             :width="state.width"
@@ -365,6 +465,14 @@ function initSimpleToolkit() {
           title="Active View"
           :options="['analysis', 'results', 'settings'].map(v => ({ label: v, value: v }))"
         />
+        <HstSelect
+          v-model="state.variant"
+          title="Variant"
+          :options="[
+            { label: 'Analysis', value: 'analysis' },
+            { label: 'Default', value: 'default' },
+          ]"
+        />
         <HstCheckbox v-model="state.floating" title="Floating" />
         <HstText v-model="state.width" title="Width" />
         <HstSelect

package/src/components/AppSidebar.vue

@@ -24,7 +24,7 @@
  * <AppSidebar :controls="controls" :active-view="activeTab" v-model="values" />
  * ```
  */
-import { computed } from 'vue'
+import { computed, ref, useSlots, type Slots } from 'vue'
 import type { PillNavItem, SidebarToolSection } from '../types'
 import type { FormEnhancements, FormSchema } from '../types/form-builder'
 import {
@@ -42,15 +42,23 @@ import CollapsibleCard from './CollapsibleCard.vue'
 import FormBuilder from './FormBuilder.vue'
 
 interface Props {
+  /** Optional chrome title rendered above generated sections. */
+  title?: string
+  /** Optional secondary chrome copy rendered below title. */
+  subtitle?: string
+  /** Optional compact badge/count rendered in the chrome header. */
+  badge?: string | number
+  /** Visual preset for common plugin sidebars. `analysis` preserves the LEAF-style MINT analysis sidebar design language. */
+  variant?: 'default' | 'analysis'
   /** Map of view IDs to their tool sections */
   panels?: Record<string, SidebarToolSection[]>
   /** Which view's panels to display */
   activeView?: string
-  /** Floating variant with absolute positioning */
+  /** Floating variant with absolute positioning. Defaults to false for analysis variant. */
   floating?: boolean
   /** Compact layout: smaller headers, tighter spacing, no icon backgrounds */
   dense?: boolean
-  /** Width when visible */
+  /** Width when visible. Defaults to 20rem for analysis variant, otherwise 280px. */
   width?: string
   /** Position sidebar on left or right side */
   side?: 'left' | 'right'
@@ -60,7 +68,7 @@ interface Props {
   forms?: Record<string, FormSchema>
   /** Generated view IDs from useControlSchema(). Consumed for clean v-bind ergonomics. */
   viewIds?: string[]
-  /** Generated AppPillNav-compatible view items from useControlSchema(). Consumed for clean v-bind ergonomics. */
+  /** Generated AppTopBar pillNav-compatible view items from useControlSchema(). Consumed for clean v-bind ergonomics. */
   viewItems?: PillNavItem[]
   /** Default view ID used when activeView is omitted. */
   defaultView?: string
@@ -70,6 +78,10 @@ interface Props {
   controls?: ControlSchema
   /** Options passed to compact control schema generation, including shared initialValues. */
   controlOptions?: ControlWorkspaceOptions
+  /** DOM id for the scrollable content area. Use with Teleport when route/tab children own sidebar controls. */
+  contentId?: string
+  /** Render the sidebar shell even when no panel matches the active view. Useful for default-slot or Teleport-driven sidebars. */
+  showWhenEmpty?: boolean
   /** Shared values for auto-rendered section forms. Supports default v-model. */
   modelValue?: Record<string, unknown>
   /** Shared values for auto-rendered section forms */
@@ -86,14 +98,30 @@ interface Props {
   formReadonly?: boolean
   /** Size passed to auto-rendered section forms */
   formSize?: 'sm' | 'md' | 'lg'
+  /** Show a built-in collapse/expand button in the sidebar chrome. Defaults to true for analysis variant. */
+  collapsible?: boolean
+  /** Controlled collapsed state. */
+  collapsed?: boolean
+  /** Initial collapsed state when collapsed is uncontrolled. */
+  defaultCollapsed?: boolean
+  /** Width when collapsed. */
+  collapsedWidth?: string
+  /** Accessible label for the collapse action. */
+  collapseButtonLabel?: string
+  /** Accessible label for the expand action. */
+  expandButtonLabel?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  title: undefined,
+  subtitle: undefined,
+  badge: undefined,
+  variant: 'default',
   panels: () => ({}),
   activeView: '',
-  floating: true,
+  floating: undefined,
   dense: false,
-  width: '280px',
+  width: undefined,
   side: 'left',
   toggleState: () => ({}),
   forms: () => ({}),
@@ -102,6 +130,8 @@ const props = withDefaults(defineProps<Props>(), {
   defaultView: '',
   model: undefined,
   controlOptions: () => ({}),
+  contentId: undefined,
+  showWhenEmpty: false,
   modelValue: undefined,
   values: () => ({}),
   showFormActions: false,
@@ -109,8 +139,38 @@ const props = withDefaults(defineProps<Props>(), {
   formDisabled: false,
   formReadonly: false,
   formSize: 'sm',
+  collapsible: undefined,
+  collapsed: undefined,
+  defaultCollapsed: false,
+  collapsedWidth: '3rem',
+  collapseButtonLabel: 'Collapse sidebar',
+  expandButtonLabel: 'Expand sidebar',
 })
 
+const emit = defineEmits<{
+  'update:toggle': [sectionId: string, value: boolean]
+  'update:modelValue': [values: Record<string, unknown>]
+  'update:values': [values: Record<string, unknown>]
+  'update:collapsed': [value: boolean]
+  'form-submit': [sectionId: string, values: Record<string, unknown>]
+  'form-cancel': [sectionId: string]
+}>()
+
+const slots: Slots = useSlots()
+const internalCollapsed = ref(props.defaultCollapsed)
+const collapsedModel = computed({
+  get: () => props.collapsed ?? internalCollapsed.value,
+  set: (value: boolean) => {
+    internalCollapsed.value = value
+    emit('update:collapsed', value)
+  },
+})
+
+const isAnalysisVariant = computed(() => props.variant === 'analysis')
+const resolvedFloating = computed(() => props.floating ?? !isAnalysisVariant.value)
+const resolvedWidth = computed(() => props.width ?? (isAnalysisVariant.value ? '20rem' : '280px'))
+const resolvedCollapsible = computed(() => props.collapsible ?? isAnalysisVariant.value)
+
 const resolvedModel = computed<ControlModelBinding | undefined>(() => {
   if (props.model === undefined) return undefined
   return isControlModelBinding(props.model) ? props.model : defineControlModel(props.model)
@@ -168,28 +228,25 @@ const activeSections = computed<SidebarToolSection[]>(() => {
   return resolvedPanels.value[resolvedActiveView.value]
 })
 
-const isVisible = computed(() => activeSections.value.length > 0)
+const isVisible = computed<boolean>(() =>
+  activeSections.value.length > 0 || props.showWhenEmpty || Boolean(slots.default),
+)
 
-const sidebarClasses = computed(() => [
+const sidebarClasses = computed<string[]>(() => [
   'mint-sidebar',
   `mint-sidebar--${props.side}`,
-  props.floating ? 'mint-sidebar--floating' : 'mint-sidebar--static',
+  `mint-sidebar--${props.variant}`,
+  resolvedFloating.value ? 'mint-sidebar--floating' : 'mint-sidebar--static',
   props.dense ? 'mint-sidebar--dense' : '',
+  resolvedCollapsible.value ? 'mint-sidebar--collapsible' : '',
+  collapsedModel.value ? 'mint-sidebar--collapsed' : '',
   !isVisible.value ? 'mint-sidebar--hidden' : '',
 ])
 
-const sidebarStyle = computed(() => ({
-  width: props.width,
+const sidebarStyle = computed<Record<string, string>>(() => ({
+  width: collapsedModel.value ? props.collapsedWidth : resolvedWidth.value,
 }))
 
-const emit = defineEmits<{
-  'update:toggle': [sectionId: string, value: boolean]
-  'update:modelValue': [values: Record<string, unknown>]
-  'update:values': [values: Record<string, unknown>]
-  'form-submit': [sectionId: string, values: Record<string, unknown>]
-  'form-cancel': [sectionId: string]
-}>()
-
 function handleFormUpdate(values: Record<string, unknown>) {
   const nextValues = { ...resolvedValues.value, ...values }
   emit('update:modelValue', nextValues)
@@ -204,6 +261,14 @@ function handleFormCancel(sectionId: string) {
   emit('form-cancel', sectionId)
 }
 
+function toggleCollapsed() {
+  collapsedModel.value = !collapsedModel.value
+}
+
+function expandCollapsed() {
+  collapsedModel.value = false
+}
+
 function mergeSidebarPanels(
   generated: Record<string, SidebarToolSection[]>,
   explicit: Record<string, SidebarToolSection[]>,
@@ -242,13 +307,54 @@ function isControlModelBinding(model: ControlModel | ControlModelBinding): model
     :class="sidebarClasses"
     :style="sidebarStyle"
   >
-    <!-- Header slot -->
-    <div v-if="$slots.header" class="mint-sidebar__header">
-      <slot name="header" />
+    <!-- Header slot / built-in chrome -->
+    <div
+      v-if="$slots.header || title || subtitle || badge !== undefined || resolvedCollapsible"
+      class="mint-sidebar__header"
+    >
+      <slot
+        name="header"
+        :collapsed="collapsedModel"
+        :toggle-collapsed="toggleCollapsed"
+      >
+        <div v-if="!collapsedModel" class="mint-sidebar__heading">
+          <div class="mint-sidebar__heading-copy">
+            <h2 v-if="title" class="mint-sidebar__title">{{ title }}</h2>
+            <p v-if="subtitle" class="mint-sidebar__subtitle">{{ subtitle }}</p>
+          </div>
+          <span v-if="badge !== undefined" class="mint-sidebar__badge">{{ badge }}</span>
+        </div>
+        <button
+          v-if="resolvedCollapsible"
+          type="button"
+          class="mint-sidebar__collapse-button"
+          :aria-label="collapsedModel ? expandButtonLabel : collapseButtonLabel"
+          :aria-expanded="!collapsedModel"
+          @click="toggleCollapsed"
+        >
+          <svg
+            class="mint-sidebar__collapse-icon"
+            :class="{ 'mint-sidebar__collapse-icon--collapsed': collapsedModel }"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+          </svg>
+        </button>
+      </slot>
     </div>
 
     <!-- Tool sections -->
-    <div class="mint-sidebar__sections">
+    <div
+      v-if="!collapsedModel"
+      :id="contentId"
+      class="mint-sidebar__sections"
+    >
       <CollapsibleCard
         v-for="section in activeSections"
         :key="section.id"
@@ -280,10 +386,24 @@ function isControlModelBinding(model: ControlModel | ControlModelBinding): model
           />
         </slot>
       </CollapsibleCard>
+
+      <slot
+        :sections="activeSections"
+        :active-view="resolvedActiveView"
+        :values="resolvedValues"
+      />
+    </div>
+
+    <div v-else-if="$slots.collapsed" class="mint-sidebar__collapsed">
+      <slot
+        name="collapsed"
+        :sections="activeSections"
+        :expand="expandCollapsed"
+      />
     </div>
 
     <!-- Footer slot -->
-    <div v-if="$slots.footer" class="mint-sidebar__footer">
+    <div v-if="!collapsedModel && $slots.footer" class="mint-sidebar__footer">
       <slot name="footer" />
     </div>
   </aside>

package/src/components/AppTopBar.story.vue

@@ -231,10 +231,9 @@ const sampleAccountMenu: AccountMenuItem[] = [
       </div>
     </Variant>
 
-    <Variant title="Classic · Page selector">
+    <Variant title="Navigation · Page selector">
       <div style="padding: 2rem;">
         <AppTopBar
-          plugin-name="IC50 Calculator"
           title="Results"
           :page-selector="samplePageSelector"
           current-page-selector-id="plugins"
@@ -245,10 +244,9 @@ const sampleAccountMenu: AccountMenuItem[] = [
       </div>
     </Variant>
 
-    <Variant title="Classic · Pill nav">
+    <Variant title="Navigation · Pill nav">
       <div style="padding: 2rem;">
         <AppTopBar
-          plugin-name="Plate Analyzer"
           title="Experiment View"
           :pill-nav="samplePillNav.slice(0, 3)"
           current-pill-id="workspace"
@@ -268,7 +266,6 @@ const sampleAccountMenu: AccountMenuItem[] = [
       <div style="padding: 2rem;">
         <ExperimentProvider>
           <AppTopBar
-            plugin-name="IC50 Calculator"
             title="Analysis"
             variant="card"
             :show-theme-toggle="true"