@morscherlab/mint-sdk 1.5.0-beta.1 → 1.5.0-beta.11

package/src/__tests__/docs/frontendDocsCatalog.test.ts

@@ -470,9 +470,9 @@ describe('frontend docs catalog coverage', () => {
       'BaseButton',
       'PluginWorkspaceView',
       'DataFrame',
-      'useForm',
-      'useReagentSeries',
-      'ConcentrationValue',
+      'useExperiment',
+      'useRequest',
+      'UseExperimentReturn',
       'FormSectionSchema',
     ]))
   })

package/src/__tests__/styles/menusShellRefresh.test.ts

@@ -21,6 +21,11 @@ describe('menus and app shell styles', () => {
     expect(css('step-wizard.css')).not.toMatch(/\.mint-wizard__nav-btn/)
   })
 
+  // A max-content pill column made the grid wider than a phone, pushing theme and settings off the bar.
+  it('should let the pill column shrink when the two-row top bar is narrower than the pills', () => {
+    expect(css('app-top-bar.css')).toMatch(/\.mint-topbar__container--stackable\s*\{[^}]*grid-template-columns:\s*minmax\(0, max-content\) minmax\(0, 1fr\) auto;/)
+  })
+
   it('should pad the top bar to the 1.2 height (62px)', () => {
     expect(css('app-top-bar.css')).toMatch(/\.mint-topbar\s*\{[^}]*padding:\s*0\.75rem 1rem;/)
   })
@@ -40,6 +45,11 @@ describe('menus and app shell styles', () => {
     expect(css('app-page-selector.css')).toMatch(new RegExp(`\\.mint-page-selector__${part}\\s*\\{[^}]*box-sizing:\\s*border-box;`))
   })
 
+  // Beside a nav slot, a title without a subtitle broke at its hyphen ("LEAF-" over "cal").
+  it('should keep a title-only top-bar label on one line', () => {
+    expect(css('app-top-bar.css')).toMatch(/\.mint-topbar__title-only[^{]*\{[^}]*white-space:\s*nowrap;/)
+  })
+
   // Shrinking the tile beside the identity also shrank structured icons inside their solid chip, drawing a ring.
   it('should keep the plugin tile beside the static plugin identity (5a)', () => {
     expect(css('app-top-bar.css')).not.toMatch(/:has\(\+ \.mint-topbar__plugin-identity\)/)

package/src/components/AppLayout.story.vue

@@ -52,7 +52,7 @@ const logScale = ref(false)
           >
             <template #topbar>
               <AppTopBar
-                :spec="{ pills: pillNav, themeToggle: true, homePath: '' }"
+                :spec="{ pills: pillNav, homePath: '' }"
                 title="My Plugin"
                 subtitle="Laboratory Analysis"
                 :pill="activeView"
@@ -113,7 +113,7 @@ const logScale = ref(false)
         >
           <template #topbar>
             <AppTopBar
-              :spec="{ pills: pillNav, themeToggle: true, homePath: '' }"
+              :spec="{ pills: pillNav, homePath: '' }"
               title="Plate Analyzer"
               subtitle="Dashboard"
               :pill="activeView"
@@ -170,7 +170,7 @@ const logScale = ref(false)
       <div style="height: 400px;">
         <AppLayout>
           <template #topbar>
-            <AppTopBar :spec="{ themeToggle: true, homePath: '' }" title="Simple Page" />
+            <AppTopBar :spec="{ homePath: '' }" title="Simple Page" />
           </template>
           <div style="padding: 2rem;">
             <p style="color: var(--text-muted, #94a3b8);">Layout without a sidebar, just topbar and content.</p>
@@ -254,7 +254,7 @@ const logScale = ref(false)
           <AppLayout :floating="true" sidebar-width="280px">
             <template #topbar>
               <AppTopBar
-                :spec="{ pills: pillNav, themeToggle: true, homePath: '' }"
+                :spec="{ pills: pillNav, homePath: '' }"
                 title="IC50 Calculator"
                 subtitle="Analysis"
                 :pill="activeView"
@@ -302,7 +302,7 @@ const logScale = ref(false)
           <AppLayout :floating="true">
             <template #topbar>
               <AppTopBar
-                :spec="{ themeToggle: true, homePath: '' }"
+                :spec="{ homePath: '' }"
                 title="Plate Analyzer"
                 subtitle="Dashboard"
               />

package/src/components/AppLayout.vue

@@ -21,7 +21,8 @@
  * </AppLayout>
  * ```
  */
-import { computed, ref } from 'vue'
+import { computed, provide, ref, useSlots } from 'vue'
+import { APP_LAYOUT_SIDEBAR_KEY } from '../composables/appLayoutSidebar'
 
 interface Props {
   /** Position of sidebar (left or right side of screen) */
@@ -57,6 +58,7 @@ const emit = defineEmits<{
   'update:sidebarOpen': [value: boolean]
 }>()
 
+const slots = useSlots()
 const internalSidebarOpen = ref(props.defaultSidebarOpen)
 const sidebarOpenModel = computed({
   get: () => props.sidebarOpen ?? internalSidebarOpen.value,
@@ -82,6 +84,16 @@ function toggleSidebar() {
   sidebarOpenModel.value = !sidebarOpenModel.value
 }
 
+// An AppTopBar in the topbar slot takes the drawer button; the floating one then hides (CSS :has).
+if (props.responsiveSidebar && slots.sidebar) {
+  provide(APP_LAYOUT_SIDEBAR_KEY, {
+    open: computed(() => sidebarOpenModel.value),
+    toggle: toggleSidebar,
+    openLabel: computed(() => props.sidebarToggleLabel),
+    closeLabel: computed(() => props.sidebarCloseLabel),
+  })
+}
+
 function closeSidebar() {
   sidebarOpenModel.value = false
 }

package/src/components/AppSidebar.vue

@@ -208,11 +208,11 @@ function railIconStyle(section: SidebarToolSection): Record<string, string> {
 }
 
 function badgeToneClass(section: SidebarToolSection): string {
-  return `mint-sidebar__rail-badge--${section.badgeTone ?? 'cta'}`
+  return `mint-sidebar__rail-badge--${section.badgeTone ?? 'primary'}`
 }
 
 function tagToneClass(section: SidebarToolSection): string {
-  return `mint-sidebar__tag--${section.badgeTone ?? 'cta'}`
+  return `mint-sidebar__tag--${section.badgeTone ?? 'primary'}`
 }
 
 function actionClasses(action: SidebarToolSectionAction): string[] {

package/src/components/AppTopBar.compact.ts

@@ -0,0 +1,60 @@
+/**
+ * Decides when the top bar trades the Save and Jobs labels for icons.
+ *
+ * Labels go when the content no longer fits: the experiment chip is squeezed below
+ * `CHIP_MIN_PX` with its name cut, the plugin or page name is cut, or the pills or the context group overflow. They come back once the
+ * bar has grown by at least the width the labels took, so the bar never flips back and
+ * forth at one width. `reset()` re-measures after the content changes.
+ */
+import type { Ref } from 'vue'
+
+const CHIP_MIN_PX = 192
+const LABELS = '.mint-experiment-popover__save-label, .mint-topbar__job-label'
+/** Identity text that truncates when the left side is squeezed. */
+const IDENTITY_TEXT = '.mint-page-selector__plugin, .mint-page-selector__label, .mint-topbar__plugin-name, .mint-topbar-title, .mint-topbar__title-only'
+
+function overflows(el: Element | null): boolean {
+  return !!el && el.scrollWidth > el.clientWidth + 1
+}
+
+export function trackTopBarCompact(header: HTMLElement, compact: Ref<boolean>): { reset: () => void; stop: () => void } {
+  if (typeof ResizeObserver === 'undefined') return { reset: () => {}, stop: () => {} }
+  let expandAt = 0
+
+  function check(): void {
+    const width = header.clientWidth
+    if (compact.value) {
+      if (width >= expandAt) compact.value = false
+      return
+    }
+    // A short name leaves the chip narrow by itself: squeezed means narrow and truncated.
+    const chip = header.querySelector('.mint-experiment-popover__trigger')
+    const squeezed = (chip && chip.getBoundingClientRect().width < CHIP_MIN_PX
+      && overflows(chip.querySelector('.mint-experiment-popover__trigger-text')))
+      || [...header.querySelectorAll(IDENTITY_TEXT)].some(overflows)
+      || overflows(header.querySelector('.mint-topbar__center'))
+      || overflows(header.querySelector('.mint-topbar__context'))
+    if (!squeezed) return
+    const labelsWidth = [...header.querySelectorAll(LABELS)].reduce((sum, el) => sum + el.getBoundingClientRect().width, 0)
+    if (labelsWidth === 0) return
+    expandAt = width + labelsWidth
+    compact.value = true
+  }
+
+  const observer = new ResizeObserver(check)
+  // The groups mount and unmount with their content, so each reset observes them again.
+  function observe(): void {
+    observer.disconnect()
+    observer.observe(header)
+    for (const el of header.querySelectorAll('.mint-topbar__center, .mint-topbar__context')) observer.observe(el)
+  }
+  observe()
+  return {
+    reset: () => {
+      compact.value = false
+      expandAt = 0
+      requestAnimationFrame(observe)
+    },
+    stop: () => observer.disconnect(),
+  }
+}

package/src/components/AppTopBar.story.vue

@@ -10,6 +10,7 @@ import type {
   PillNavItem,
   PageSelectorItem,
   PluginInfo,
+  TopBarAction,
   TopBarJob,
 } from '../types'
 
@@ -87,6 +88,17 @@ const samplePluginWithSubtitle: PluginInfo = {
   api_prefix: '/api/ms-planner',
 }
 
+// Page icons are Lucide names; plugin buttons come from spec.actions (two show, the rest in More).
+const sampleIconPages: PageSelectorItem[] = [
+  { id: 'monitor', label: 'Monitor', icon: 'activity' },
+  { id: 'planner', label: 'Planner', icon: 'calendar-days' },
+  { id: 'queue', label: 'Queue', icon: 'list-ordered' },
+]
+const sampleActions: TopBarAction[] = [
+  { id: 'status', label: 'Database ready', icon: 'database', dot: 'success', onSelect: () => {} },
+  { id: 'export', label: 'Export', icon: 'download', onSelect: () => {} },
+  { id: 'reindex', label: 'Reindex', onSelect: () => {} },
+]
 // The seed is module state: clear it when the variant unmounts.
 function seedIdentity({ app }: { app: App }) {
   providePluginIdentity({
@@ -109,7 +121,6 @@ function seedIdentity({ app }: { app: App }) {
         <AppTopBar
           :spec="{
             pills: samplePillNav.slice(1, 3),
-            themeToggle: true,
             homePath: '',
             standaloneLabel: false,
           }"
@@ -127,7 +138,7 @@ function seedIdentity({ app }: { app: App }) {
     <Variant title="Refresh · Workspace">
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 22rem;">
         <AppTopBar
-          :spec="{ pills: samplePillNav, themeToggle: true, homePath: '' }"
+          :spec="{ pills: samplePillNav, homePath: '' }"
           :page-selector="samplePageSelector"
           current-page-selector-id="workspace"
           pill="workspace"
@@ -139,7 +150,7 @@ function seedIdentity({ app }: { app: App }) {
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <ExperimentProvider>
           <AppTopBar
-            :spec="{ pills: samplePillNav, themeToggle: true, homePath: '' }"
+            :spec="{ pills: samplePillNav, homePath: '' }"
             :page-selector="samplePageSelector"
             current-page-selector-id="experiments"
             pill="experiments"
@@ -152,7 +163,7 @@ function seedIdentity({ app }: { app: App }) {
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <ExperimentProvider :plugin="samplePlugin">
           <AppTopBar
-            :spec="{ pills: samplePillNav, themeToggle: true, homePath: '' }"
+            :spec="{ pills: samplePillNav, homePath: '' }"
             :page-selector="samplePluginPages"
             current-page-selector-id="peaks"
             pill="experiments"
@@ -168,7 +179,7 @@ function seedIdentity({ app }: { app: App }) {
           <AppTopBar
             v-for="row in runSlotJobs"
             :key="row.label"
-            :spec="{ themeToggle: true, homePath: '' }"
+            :spec="{ homePath: '' }"
             :page-selector="samplePluginPages"
             current-page-selector-id="peaks"
             :job="row.job"
@@ -193,7 +204,7 @@ function seedIdentity({ app }: { app: App }) {
         </div>
         <ExperimentProvider :plugin="samplePlugin" :save="false">
           <AppTopBar
-            :spec="{ themeToggle: true, homePath: '' }"
+            :spec="{ homePath: '' }"
             :page-selector="samplePluginPages"
             current-page-selector-id="peaks"
             :job="runSlotJobs[liveRow].job"
@@ -205,7 +216,7 @@ function seedIdentity({ app }: { app: App }) {
     <Variant title="Refresh · Admin">
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <AppTopBar
-          :spec="{ pills: samplePillNav, themeToggle: true, homePath: '' }"
+          :spec="{ pills: samplePillNav, homePath: '' }"
           :page-selector="samplePageSelector"
           current-page-selector-id="admin"
           pill="admin"
@@ -217,7 +228,7 @@ function seedIdentity({ app }: { app: App }) {
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <ExperimentProvider :preselect="false">
           <AppTopBar
-            :spec="{ pills: samplePillNav, themeToggle: true, homePath: '' }"
+            :spec="{ pills: samplePillNav, homePath: '' }"
             :page-selector="samplePageSelector"
             current-page-selector-id="workspace"
             pill="workspace"
@@ -232,7 +243,6 @@ function seedIdentity({ app }: { app: App }) {
         <AppTopBar
           :spec="{
             pills: samplePillNav.slice(1, 3),
-            themeToggle: true,
             homePath: '',
             standaloneLabel: false,
           }"
@@ -256,7 +266,6 @@ function seedIdentity({ app }: { app: App }) {
             :spec="{
               variant: state.variant,
               logo: state.showLogo,
-              themeToggle: state.showThemeToggle,
               homePath: state.homePath,
             }"
             :title="state.title"
@@ -274,7 +283,6 @@ function seedIdentity({ app }: { app: App }) {
           :options="variants.map(v => ({ label: v, value: v }))"
         />
         <HstCheckbox v-model="state.showLogo" title="Show Logo" />
-        <HstCheckbox v-model="state.showThemeToggle" title="Show Theme Toggle" />
         <HstText v-model="state.homePath" title="Home Path" />
       </template>
     </Variant>
@@ -282,7 +290,7 @@ function seedIdentity({ app }: { app: App }) {
     <Variant title="Base · Title + Subtitle">
       <div style="padding: 2rem;">
         <AppTopBar
-          :spec="{ themeToggle: true }"
+          :spec="{}"
           title="Dose-Response Analysis"
           subtitle="Experiment EXP-2024-001"
         />
@@ -306,7 +314,7 @@ function seedIdentity({ app }: { app: App }) {
     <Variant title="Navigation · Page selector">
       <div style="padding: 2rem;">
         <AppTopBar
-          :spec="{ themeToggle: true, homePath: '' }"
+          :spec="{ homePath: '' }"
           title="Results"
           :page-selector="samplePageSelector"
           current-page-selector-id="plugins"
@@ -354,11 +362,28 @@ function seedIdentity({ app }: { app: App }) {
       <div style="padding: 2rem;">
         <ExperimentProvider>
           <AppTopBar
-            :spec="{ themeToggle: true, homePath: '' }"
+            :spec="{ homePath: '' }"
             title="Analysis"
           />
         </ExperimentProvider>
       </div>
     </Variant>
+
+    <Variant title="Layout · Fixed tail and two rows">
+      <!-- The theme and settings buttons always close the bar. Below 1024px of bar width the
+           pills and the context group (experiment, plugin buttons) move to a second row. -->
+      <div style="padding: 2rem; background: var(--bg-primary); display: grid; gap: 1rem;">
+        <ExperimentProvider v-for="width in ['1360px', '1180px', '900px', '768px']" :key="width" :plugin="samplePlugin">
+          <div :style="{ width, maxWidth: '100%' }">
+            <AppTopBar
+              :spec="{ pills: samplePillNav.slice(0, 3), homePath: '', actions: sampleActions }"
+              :page-selector="sampleIconPages"
+              current-page-selector-id="monitor"
+              pill="workspace"
+            />
+          </div>
+        </ExperimentProvider>
+      </div>
+    </Variant>
   </Story>
 </template>