@morscherlab/mint-sdk 1.4.12 → 1.4.13

package/dist/styles.css

@@ -1422,7 +1422,7 @@ button, input, select, textarea {
 .mint-alert__icon--info    { background-color: var(--mint-info-bg);    color: var(--mint-info); }
 .mint-alert__icon--neutral { background-color: var(--bg-tertiary);     color: var(--text-secondary); }
 .mint-alert__icon--primary { background-color: var(--color-primary-soft); color: var(--color-primary); }
-.mint-alert__icon--cta     { background-color: var(--color-primary-soft); color: var(--color-primary-hover); }
+.mint-alert__icon--cta     { background-color: var(--color-primary-soft); color: var(--_ink-primary); }
 
 .mint-alert__content {
   flex: 1;
@@ -2424,7 +2424,8 @@ button, input, select, textarea {
 .mint-topbar__plugin-name,
 .mint-topbar__plugin-subtitle,
 .mint-topbar-title,
-.mint-topbar-subtitle {
+.mint-topbar-subtitle,
+.mint-topbar__title-only {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.4.12",
+  "version": "1.4.13",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec Infrastructure for Next-generation Toolkits.",
   "type": "module",
   "main": "./dist/index.js",

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

@@ -392,6 +392,25 @@ describe('PluginWorkspaceView', () => {
     expect(wrapper.get('[data-test="sidebar-footer"]').text()).toBe('Run')
   })
 
+  it.each([
+    { name: 'bound v-model', sidebarCollapsed: true, collapsedWidth: undefined, expected: '3rem' },
+    { name: 'its own state', sidebarCollapsed: undefined, collapsedWidth: '3.5rem', expected: '3.5rem' },
+  ])('should give AppLayout the collapsed width when the sidebar collapses through $name', async ({ sidebarCollapsed, collapsedWidth, expected }) => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        sidebarCollapsed,
+        spec: { title: 'Tools', sidebar: { width: '20rem', collapsible: true, collapsedWidth, whenEmpty: true } },
+      },
+      global: globalOptions,
+    })
+    expect(wrapper.findComponent(AppLayout).props('sidebarWidth')).toBe(sidebarCollapsed ? expected : '20rem')
+
+    wrapper.findComponent(AppSidebar).vm.$emit('update:collapsed', true)
+    await nextTick()
+
+    expect(wrapper.findComponent(AppLayout).props('sidebarWidth')).toBe(expected)
+  })
+
   it('can provide AppTopBar experiment selection and save wiring from the shared store', async () => {
     vi.mocked(usePlatform).mockReturnValueOnce({
       integrated: computed(() => true),

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

@@ -40,6 +40,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/PluginWorkspaceView.vue

@@ -93,6 +93,7 @@ const {
   controls,
   handleControlValuesUpdate,
   handlePillSelect,
+  handleSidebarCollapsedUpdate,
 } = usePluginWorkspace({
   props,
   slots,
@@ -146,7 +147,7 @@ function handleFormCancel(sectionId: string) {
         <WorkspaceSidebarInternal
           :sidebar="sidebar"
           @update:values="handleControlValuesUpdate"
-          @update:collapsed="emit('update:sidebarCollapsed', $event)"
+          @update:collapsed="handleSidebarCollapsedUpdate"
           @update:toggle="handleToggle"
           @section-action="(sectionId: string, actionId: string) => emit('section-action', sectionId, actionId)"
           @form-submit="handleFormSubmit"

package/src/composables/usePluginWorkspace.ts

@@ -1,4 +1,4 @@
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import type { ComputedRef } from 'vue'
 import type { PillNavItem, PluginWorkspaceSidebarSpec } from '../types'
 import type {
@@ -48,6 +48,8 @@ export interface UsePluginWorkspaceReturn {
   handleControlValuesUpdate: (values: Record<string, unknown>) => void
   /** Resolves an AppTopBar `pill-select` payload into the active view and emits `update:pill` and `pill-select`. */
   handlePillSelect: (item: PillNavItem) => void
+  /** Applies an AppSidebar `update:collapsed` payload and emits `update:sidebarCollapsed`. */
+  handleSidebarCollapsedUpdate: (value: boolean) => void
 }
 
 /**
@@ -94,6 +96,14 @@ export function usePluginWorkspace(options: UsePluginWorkspaceOptions): UsePlugi
   const topBarSlotNames = computed<string[]>(() => getPluginWorkspaceTopBarSlotNames(slots))
   const sidebarSlotNames = computed<string[]>(() => getPluginWorkspaceSidebarSlotNames(slots))
 
+  // The workspace owns the collapsed state (unless bound) so AppLayout reserves the collapsed width.
+  const internalCollapsed = ref(false)
+  const sidebarCollapsed = computed(() => props.sidebarCollapsed ?? internalCollapsed.value)
+  function handleSidebarCollapsedUpdate(value: boolean) {
+    internalCollapsed.value = value
+    emit('update:sidebarCollapsed', value)
+  }
+
   const hasSidebarSurface = computed(() => hasPluginWorkspaceSidebarSurface({
     sidebar: sidebarSpec.value,
     hasSidebarSlot: Boolean(slots.sidebar),
@@ -114,7 +124,7 @@ export function usePluginWorkspace(options: UsePluginWorkspaceOptions): UsePlugi
     const sidebar = sidebarSpec.value === false ? {} : sidebarSpec.value
     return {
       sidebarPosition: sidebar.position ?? 'left',
-      sidebarWidth: sidebar.width,
+      sidebarWidth: sidebarCollapsed.value ? (sidebar.collapsedWidth ?? '3rem') : sidebar.width,
       floating: props.spec?.floating ?? true,
       responsiveSidebar: sidebar.responsive ?? true,
       sidebarToggleLabel: sidebar.toggleLabel ?? 'Open workspace sidebar',
@@ -142,7 +152,7 @@ export function usePluginWorkspace(options: UsePluginWorkspaceOptions): UsePlugi
       },
       activeView: navigationState.resolvedActiveView.value,
       values: controlsState.internalControlValues,
-      collapsed: props.sidebarCollapsed,
+      collapsed: sidebarCollapsed.value,
       formLoading: props.formLoading ?? false,
       formDisabled: props.formDisabled ?? false,
       formReadonly: props.formReadonly ?? false,
@@ -157,5 +167,6 @@ export function usePluginWorkspace(options: UsePluginWorkspaceOptions): UsePlugi
     hasSidebarSurface,
     handleControlValuesUpdate: controlsState.handleControlValuesUpdate,
     handlePillSelect: navigationState.handlePillSelect,
+    handleSidebarCollapsedUpdate,
   }
 }

package/src/styles/components/alert-box.css

@@ -31,7 +31,7 @@
 .mint-alert__icon--info    { background-color: var(--mint-info-bg);    color: var(--mint-info); }
 .mint-alert__icon--neutral { background-color: var(--bg-tertiary);     color: var(--text-secondary); }
 .mint-alert__icon--primary { background-color: var(--color-primary-soft); color: var(--color-primary); }
-.mint-alert__icon--cta     { background-color: var(--color-primary-soft); color: var(--color-primary-hover); }
+.mint-alert__icon--cta     { background-color: var(--color-primary-soft); color: var(--_ink-primary); }
 
 .mint-alert__content {
   flex: 1;

package/src/styles/components/app-top-bar.css

@@ -170,7 +170,8 @@
 .mint-topbar__plugin-name,
 .mint-topbar__plugin-subtitle,
 .mint-topbar-title,
-.mint-topbar-subtitle {
+.mint-topbar-subtitle,
+.mint-topbar__title-only {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;