@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

package/src/components/AppSidebar.story.vue

@@ -3,17 +3,13 @@ import { ref, reactive } from 'vue'
 import AppSidebar from './AppSidebar.vue'
 import BaseSlider from './BaseSlider.vue'
 import BaseSelect from './BaseSelect.vue'
-import BaseToggle from './BaseToggle.vue'
 import BaseCheckbox from './BaseCheckbox.vue'
 import BaseButton from './BaseButton.vue'
 import BaseInput from './BaseInput.vue'
 import NumberInput from './NumberInput.vue'
 import FileUploader from './FileUploader.vue'
 import FormField from './FormField.vue'
-import WellPlate from './WellPlate.vue'
 import { defineControlModel, defineControls, getControlDefaults } from '../composables/useControlSchema'
-import { useBioTemplateWorkspace } from '../composables/useBioTemplateWorkspace'
-import { createWellPlateScreenCollection } from '../templates'
 import type { SidebarToolSection } from '../types'
 
 type SidebarDensity = 'compact' | 'comfortable'
@@ -40,16 +36,12 @@ const sequencePanels: Record<string, SidebarToolSection[]> = {
       label: 'Import Layout',
       subtitle: 'Upload from Excel',
       icon: icons.upload,
-      iconColor: '#3b82f6',
-      iconBg: '#dbeafe',
     },
     {
       id: 'naming',
       label: 'Experiment & Naming',
       subtitle: 'exp001_260210_XP_M...',
       icon: icons.fileText,
-      iconColor: '#6366f1',
-      iconBg: '#e0e7ff',
       showToggle: true,
       badge: 'on',
       badgeTone: 'success',
@@ -59,8 +51,6 @@ const sequencePanels: Record<string, SidebarToolSection[]> = {
       label: 'Randomize Samples',
       subtitle: 'Sequential order',
       icon: icons.shuffle,
-      iconColor: '#6366f1',
-      iconBg: '#e0e7ff',
       showToggle: true,
       badge: 3,
       badgeTone: 'cta',
@@ -74,16 +64,12 @@ const sequencePanels: Record<string, SidebarToolSection[]> = {
       label: 'Acquisition',
       subtitle: 'NEG, VIAL',
       icon: icons.zap,
-      iconColor: '#ef4444',
-      iconBg: '#fee2e2',
     },
     {
       id: 'method',
       label: 'Method & Path',
       subtitle: 'Select method',
       icon: icons.route,
-      iconColor: '#8b5cf6',
-      iconBg: '#ede9fe',
       defaultOpen: false,
     },
   ],
@@ -97,16 +83,12 @@ const simplePanels: Record<string, SidebarToolSection[]> = {
       label: 'Parameters',
       subtitle: 'Analysis settings',
       icon: ['M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z', 'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'],
-      iconColor: '#6366f1',
-      iconBg: '#e0e7ff',
     },
     {
       id: 'filters',
       label: 'Filters',
       subtitle: 'Refine results',
       icon: ['M22 3H2l8 9.46V19l4 2v-8.54L22 3'],
-      iconColor: '#0ea5e9',
-      iconBg: '#e0f2fe',
       defaultOpen: false,
     },
   ],
@@ -116,16 +98,12 @@ const simplePanels: Record<string, SidebarToolSection[]> = {
       label: 'Display Options',
       subtitle: 'Chart and table settings',
       icon: ['M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z', 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'],
-      iconColor: '#8b5cf6',
-      iconBg: '#ede9fe',
     },
     {
       id: 'export',
       label: 'Export',
       subtitle: 'Download data',
       icon: ['M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4', 'M7 10l5 5 5-5', 'M12 15V3'],
-      iconColor: '#10b981',
-      iconBg: '#d1fae5',
       defaultOpen: false,
     },
   ],
@@ -167,8 +145,6 @@ const schemaControls = defineControls({
     view: 'analysis',
     sidebar: {
       icon: icons.settings,
-      iconColor: '#6366f1',
-      iconBg: '#e0e7ff',
     },
   },
   method: {
@@ -184,21 +160,18 @@ const schemaControls = defineControls({
     default: true,
     hint: 'Keep flagged points visible',
     icon: icons.eye,
-    iconColor: '#0ea5e9',
-    iconBg: '#e0f2fe',
     section: 'display',
     sectionLabel: 'Display',
     sectionSubtitle: 'Result filters',
     view: 'analysis',
     sidebar: {
       icon: icons.zap,
-      iconColor: '#0ea5e9',
-      iconBg: '#e0f2fe',
       defaultOpen: false,
     },
   },
 })
 const controlValues = ref<Record<string, unknown>>({ ...getControlDefaults(schemaControls) })
+const schemaSidebarModel = defineControlModel({ controls: schemaControls })
 const modelDrivenSidebarModel = defineControlModel({
   views: {
     analysis: {
@@ -218,8 +191,6 @@ const modelDrivenSidebarModel = defineControlModel({
           description: 'Result cleanup',
           sidebar: {
             icon: icons.zap,
-            iconColor: '#0ea5e9',
-            iconBg: '#e0f2fe',
             defaultOpen: false,
           },
           controls: {
@@ -228,8 +199,6 @@ const modelDrivenSidebarModel = defineControlModel({
               default: true,
               hint: 'Keep flagged points visible',
               icon: icons.eye,
-              iconColor: '#0ea5e9',
-              iconBg: '#e0f2fe',
             },
             minPeakArea: { type: 'number', default: 1000, min: 0 },
           },
@@ -239,16 +208,6 @@ const modelDrivenSidebarModel = defineControlModel({
   },
 })
 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 = ref<Record<string, unknown>>({ ...templateWorkspace.controls.initialValues })
-const templateWellPlateProps = templateWorkspace.componentProps
-  .find(binding => binding.component === 'WellPlate')
-  ?.propsObject ?? {}
-
 function handleToggle(id: string, value: boolean) {
   toggleState[id] = value
 }
@@ -269,10 +228,9 @@ function initSimpleToolkit() {
     <Variant title="Sequence Builder">
       <div style="padding: 2rem; height: 700px; position: relative; background: var(--bg-primary, #f1f5f9);">
         <AppSidebar
-          :panels="sequencePanels"
+          :spec="{ panels: sequencePanels, width: '300px' }"
           active-view="sequence"
           :toggle-state="toggleState"
-          width="300px"
           @update:toggle="handleToggle"
         >
           <template #section-import>
@@ -325,9 +283,10 @@ function initSimpleToolkit() {
             </div>
           </template>
           <template #section-method>
-            <BaseToggle
+            <BaseCheckbox
+              type="switch"
               model-value
-              variant="row"
+              layout="row"
               label="Use custom method paths"
               description="Override the default acquisition directory"
               :icon="icons.route"
@@ -351,11 +310,9 @@ function initSimpleToolkit() {
     <Variant title="Schema Driven Controls">
       <div style="padding: 2rem; height: 520px; position: relative; background: var(--bg-primary, #f1f5f9);">
         <AppSidebar
-          title="Peak Picking"
-          subtitle="Current experiment"
-          :controls="schemaControls"
+          v-model:values="controlValues"
+          :spec="{ title: 'Peak Picking', subtitle: 'Current experiment', controls: schemaSidebarModel }"
           active-view="analysis"
-          v-model="controlValues"
         />
       </div>
     </Variant>
@@ -363,10 +320,12 @@ function initSimpleToolkit() {
     <Variant title="Model Driven Analysis">
       <div style="padding: 2rem; height: 560px; position: relative; background: var(--bg-primary, #f1f5f9);">
         <AppSidebar
-          v-model="modelDrivenValues"
-          title="Peak Picking"
-          subtitle="Current experiment"
-          :model="modelDrivenSidebarModel"
+          v-model:values="modelDrivenValues"
+          :spec="{
+            title: 'Peak Picking',
+            subtitle: 'Current experiment',
+            controls: modelDrivenSidebarModel,
+          }"
         />
       </div>
     </Variant>
@@ -374,10 +333,12 @@ function initSimpleToolkit() {
     <Variant title="Route Owned Shell">
       <div style="padding: 2rem; height: 560px; display: flex; gap: 1rem; background: var(--bg-primary, #f1f5f9);">
         <AppSidebar
-          title="Sequence"
-          subtitle="Acquisition run"
-          content-id="seqgen-sidebar"
-          show-when-empty
+          :spec="{
+            title: 'Sequence',
+            subtitle: 'Acquisition run',
+            contentId: 'seqgen-sidebar',
+            whenEmpty: true,
+          }"
         >
           <div style="display: flex; flex-direction: column; gap: 0.75rem;">
             <FormField label="File Prefix">
@@ -412,34 +373,6 @@ function initSimpleToolkit() {
       </div>
     </Variant>
 
-    <Variant title="Template Driven Controls">
-      <div style="padding: 2rem; min-height: 560px; display: flex; gap: 1rem; background: var(--bg-primary, #f1f5f9);">
-        <AppSidebar
-          v-bind="templateWorkspace.sidebar"
-          active-view="design"
-          v-model="templateValues"
-          width="300px"
-        />
-
-        <div style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem;">
-          <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
-            <span
-              v-for="binding in templateWorkspace.componentBindings"
-              :key="binding.id"
-              style="font-size: 0.75rem; padding: 0.25rem 0.5rem; border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-secondary, #4b5563);"
-            >
-              {{ binding.component }}
-            </span>
-          </div>
-          <WellPlate
-            v-bind="templateWellPlateProps"
-            size="fill"
-            readonly
-          />
-        </div>
-      </div>
-    </Variant>
-
     <Variant title="Simple Toolkit" :init-state="initSimpleToolkit">
       <template #default="{ state }">
         <div style="padding: 2rem; height: 500px; position: relative; background: var(--bg-primary, #f1f5f9);">
@@ -462,21 +395,24 @@ function initSimpleToolkit() {
             </button>
           </div>
           <AppSidebar
-            :panels="simplePanels"
-            :density="state.density"
+            :spec="{
+              panels: simplePanels,
+              dense: state.density !== 'comfortable',
+              floating: state.floating,
+              width: state.width,
+              position: state.side,
+            }"
             :active-view="state.activeView"
-            :floating="state.floating"
-            :width="state.width"
-            :side="state.side"
           >
             <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
+              <BaseCheckbox
+                type="switch"
                 v-model="showOutliers"
-                variant="row"
+                layout="row"
                 label="Exclude outliers"
                 description="Hide flagged injections from summaries"
                 :icon="icons.eye"
@@ -485,18 +421,20 @@ function initSimpleToolkit() {
               />
             </template>
             <template #section-display>
-              <BaseToggle
+              <BaseCheckbox
+                type="switch"
                 v-model="showOutliers"
-                variant="row"
+                layout="row"
                 label="Show outliers"
                 description="Keep flagged peaks visible"
                 :icon="icons.eye"
                 icon-color="#0ea5e9"
                 icon-bg="#e0f2fe"
               />
-              <BaseToggle
+              <BaseCheckbox
+                type="switch"
                 v-model="logScale"
-                variant="row"
+                layout="row"
                 label="Log scale"
                 description="Compress high-intensity spread"
                 :icon="icons.chart"
@@ -507,7 +445,7 @@ function initSimpleToolkit() {
             <template #section-export>
               <BaseCheckbox
                 v-model="includeMetadata"
-                variant="row"
+                layout="row"
                 label="Include metadata"
                 description="Add method and sample context"
                 :icon="icons.database"
@@ -548,7 +486,7 @@ function initSimpleToolkit() {
     <Variant title="With Header and Footer">
       <div style="padding: 2rem; height: 500px; position: relative; background: var(--bg-primary, #f1f5f9);">
         <AppSidebar
-          :panels="simplePanels"
+          :spec="{ panels: simplePanels }"
           active-view="analysis"
         >
           <template #header>
@@ -561,9 +499,10 @@ function initSimpleToolkit() {
             <BaseSelect v-model="method" label="Method" :options="methods" />
           </template>
           <template #section-filters>
-            <BaseToggle
+            <BaseCheckbox
+              type="switch"
               v-model="showOutliers"
-              variant="row"
+              layout="row"
               label="Exclude outliers"
               description="Hide flagged injections from summaries"
               :icon="icons.eye"