@morscherlab/mint-sdk 1.5.0-beta.12 → 1.5.0-beta.14

package/dist/styles.css

@@ -122,12 +122,7 @@
   overflow-wrap: anywhere;
 }
 
-.mint-generated-workspace[data-v-7ba9e342] {
-  min-width: 0;
-  min-height: 0;
-  overflow-y: auto;
-}
-.mint-generated-workspace__loading[data-v-7ba9e342] {
+.mint-generated-workspace__loading[data-v-57d6f544] {
   display: flex;
   flex: 1;
   align-items: center;
@@ -135,12 +130,12 @@
   gap: 0.75rem;
   color: var(--text-secondary);
 }
-.mint-generated-workspace__resources[data-v-7ba9e342] {
+.mint-generated-workspace__resources[data-v-57d6f544] {
   color: var(--text-muted);
   font-family: var(--font-mono);
   font-size: 0.75rem;
 }
-.mint-generated-workspace__description[data-v-7ba9e342] {
+.mint-generated-workspace__description[data-v-57d6f544] {
   margin: 0 0 var(--mint-gutter);
   color: var(--text-secondary);
 }
@@ -1711,6 +1706,23 @@ button, input, select, textarea {
 .mint-layout--responsive-sidebar:has(.mint-topbar__sidebar-toggle) .mint-layout__sidebar-toggle {
   display: none;
 }
+
+/* PluginWorkspaceView main card: one scrolling card that stacks the views' section cards. */
+.mint-container.mint-workspace-main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mint-gutter);
+}
+
+/*
+ * Children start at their content height and never shrink, so the card scrolls instead of
+ * squeezing them. Their own flex-grow stays: a `flex: 1` child (fill SectionCard, loading
+ * state) still fills the free height when the content is short.
+ */
+.mint-plugin-workspace-view .mint-container.mint-workspace-main > * {
+  flex-basis: auto;
+  flex-shrink: 0;
+}
 /* AppSidebar Component Styles */
 
 .mint-sidebar {

package/dist/types/components.d.ts

@@ -268,6 +268,12 @@ export interface PluginWorkspaceViewSpec {
     subtitle?: string;
     /** Floating layout style. Default true. */
     floating?: boolean;
+    /**
+     * Main pane surface. `'card'` puts the default slot in one scrolling card that stacks its
+     * children (`SectionCard`s) with the gutter; `'plain'` renders the slot as is, for full-bleed
+     * views. Default `'card'` when `floating`, else `'plain'`.
+     */
+    main?: 'card' | 'plain';
     /** Render the toast container. Default true; set false when the page renders its own. */
     toasts?: boolean;
     /** Show the experiment chip (popover, selector, save) in the top bar. Read once at setup, like `save`. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.5.0-beta.12",
+  "version": "1.5.0-beta.14",
   "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

@@ -228,6 +228,23 @@ describe('PluginWorkspaceView', () => {
     expect(wrapper.findComponent(AppTopBar).exists()).toBe(false)
   })
 
+  it.each([
+    { spec: {}, card: true },
+    { spec: { main: 'plain' as const }, card: false },
+    { spec: { floating: false }, card: false },
+    { spec: { floating: false, main: 'card' as const }, card: true },
+  ])('should render the main card: $card when spec is $spec', ({ spec, card }) => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: { spec },
+      slots: { default: () => h('p', { class: 'view' }, 'View') },
+      global: globalOptions,
+    })
+
+    const main = wrapper.find('.mint-workspace-main')
+    expect(main.exists()).toBe(card)
+    expect(wrapper.find(card ? '.mint-workspace-main > .view' : '.mint-layout__main > .view').exists()).toBe(true)
+  })
+
   it.each([
     { toasts: undefined, rendered: true },
     { toasts: false, rendered: false },

package/src/components/GeneratedPluginView.vue

@@ -22,7 +22,6 @@ import {
   type GeneratedAnalysisTransport,
 } from '../composables/useJobsEndpoint'
 import AlertBox from './AlertBox.vue'
-import AppContainer from './AppContainer.vue'
 import EmptyState from './EmptyState.vue'
 import GeneratedResultRenderer from './GeneratedResultRenderer.vue'
 import LoadingSpinner from './LoadingSpinner.vue'
@@ -181,47 +180,39 @@ onMounted(() => {
     @form-submit="submitJob"
     @job-select="selectJob"
   >
-    <AppContainer direction="column" gap="var(--mint-gutter)" class="mint-generated-workspace">
-      <div v-if="generated.isLoading.value" class="mint-generated-workspace__loading">
-        <LoadingSpinner size="lg" />
-        <span>Loading analysis workspace</span>
-      </div>
-
-      <template v-else>
-        <AlertBox v-if="generated.error.value" tone="error">{{ generated.error.value }}</AlertBox>
-
-        <SectionCard :title="activeDefinition?.title ?? 'Result'">
-          <template v-if="activeDefinition" #actions>
-            <span class="mint-generated-workspace__resources" aria-label="Job resource requirements">
-              {{ resourceSummary(activeDefinition) }}
-            </span>
-          </template>
-          <p v-if="activeDefinition?.description" class="mint-generated-workspace__description">
-            {{ activeDefinition.description }}
-          </p>
-          <GeneratedResultRenderer
-            v-if="currentResult"
-            :result="currentResult"
-          />
-          <EmptyState
-            v-else
-            title="No result yet"
-            description="Set the parameters and run the analysis. Jobs continue independently if you switch tabs."
-            size="md"
-          />
-        </SectionCard>
-      </template>
-    </AppContainer>
+    <div v-if="generated.isLoading.value" class="mint-generated-workspace__loading">
+      <LoadingSpinner size="lg" />
+      <span>Loading analysis workspace</span>
+    </div>
+
+    <template v-else>
+      <AlertBox v-if="generated.error.value" tone="error">{{ generated.error.value }}</AlertBox>
+
+      <SectionCard :title="activeDefinition?.title ?? 'Result'">
+        <template v-if="activeDefinition" #actions>
+          <span class="mint-generated-workspace__resources" aria-label="Job resource requirements">
+            {{ resourceSummary(activeDefinition) }}
+          </span>
+        </template>
+        <p v-if="activeDefinition?.description" class="mint-generated-workspace__description">
+          {{ activeDefinition.description }}
+        </p>
+        <GeneratedResultRenderer
+          v-if="currentResult"
+          :result="currentResult"
+        />
+        <EmptyState
+          v-else
+          title="No result yet"
+          description="Set the parameters and run the analysis. Jobs continue independently if you switch tabs."
+          size="md"
+        />
+      </SectionCard>
+    </template>
   </PluginWorkspaceView>
 </template>
 
 <style scoped>
-.mint-generated-workspace {
-  min-width: 0;
-  min-height: 0;
-  overflow-y: auto;
-}
-
 .mint-generated-workspace__loading {
   display: flex;
   flex: 1;

package/src/components/PluginWorkspaceView.vue

@@ -6,7 +6,9 @@
  * top bar, sidebar (a `defineControlModel()` result generates its sections),
  * the experiment chip and its save action. The active pill, view, sidebar
  * values and collapse state are `v-model`s. It renders the toast container
- * unless `spec.toasts` is false.
+ * unless `spec.toasts` is false. The default slot sits in one scrolling main
+ * card that stacks its children (`spec.main`, default `'card'` when floating);
+ * views put `SectionCard`s straight into the slot.
  *
  * @example Recommended
  * ```vue
@@ -25,6 +27,7 @@ import { useAppExperiment } from '../composables/useAppExperiment'
 import { useJobCenter } from '../composables/useJobCenter'
 import { usePluginWorkspace } from '../composables/usePluginWorkspace'
 import { warnDeprecatedOnce } from '../utils/deprecation'
+import AppContainer from './AppContainer.vue'
 import AppToastContainer from './AppToastContainer.vue'
 import JobsStatusTray from './JobsStatusTray.vue'
 import WorkspaceControlsInternal from './internal/WorkspaceControlsInternal.vue'
@@ -177,7 +180,15 @@ function handleFormCancel(sectionId: string) {
     </template>
 
     <template #default>
-      <WorkspaceControlsInternal :controls="controls">
+      <!-- The main pane is one card; the views' section cards stack inside it. -->
+      <AppContainer v-if="shell.mainCard" scrollable class="mint-workspace-main">
+        <WorkspaceControlsInternal :controls="controls">
+          <template #default="controlsScope">
+            <slot v-bind="controlsScope" />
+          </template>
+        </WorkspaceControlsInternal>
+      </AppContainer>
+      <WorkspaceControlsInternal v-else :controls="controls">
         <template #default="controlsScope">
           <slot v-bind="controlsScope" />
         </template>

package/src/composables/pluginWorkspaceModel.ts

@@ -42,6 +42,8 @@ export interface PluginWorkspaceShellModel {
   sidebarWidth?: string
   /** AppLayout floating style. */
   floating: boolean
+  /** Wrap the default slot in the SDK main card. */
+  mainCard: boolean
   /** Convert the sidebar into an SDK-owned mobile overlay below the AppLayout breakpoint. */
   responsiveSidebar: boolean
   /** Accessible label for the mobile sidebar toggle. */

package/src/composables/usePluginWorkspace.ts

@@ -126,6 +126,7 @@ export function usePluginWorkspace(options: UsePluginWorkspaceOptions): UsePlugi
       sidebarPosition: sidebar.position ?? 'left',
       sidebarWidth: sidebarCollapsed.value ? (sidebar.collapsedWidth ?? '3rem') : sidebar.width,
       floating: props.spec?.floating ?? true,
+      mainCard: (props.spec?.main ?? ((props.spec?.floating ?? true) ? 'card' : 'plain')) === 'card',
       responsiveSidebar: sidebar.responsive ?? true,
       sidebarToggleLabel: sidebar.toggleLabel ?? 'Open workspace sidebar',
       sidebarCloseLabel: sidebar.closeLabel ?? 'Close workspace sidebar',

package/src/styles/components/app-layout.css

@@ -187,3 +187,20 @@
 .mint-layout--responsive-sidebar:has(.mint-topbar__sidebar-toggle) .mint-layout__sidebar-toggle {
   display: none;
 }
+
+/* PluginWorkspaceView main card: one scrolling card that stacks the views' section cards. */
+.mint-container.mint-workspace-main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mint-gutter);
+}
+
+/*
+ * Children start at their content height and never shrink, so the card scrolls instead of
+ * squeezing them. Their own flex-grow stays: a `flex: 1` child (fill SectionCard, loading
+ * state) still fills the free height when the content is short.
+ */
+.mint-plugin-workspace-view .mint-container.mint-workspace-main > * {
+  flex-basis: auto;
+  flex-shrink: 0;
+}

package/src/types/components.ts

@@ -324,6 +324,12 @@ export interface PluginWorkspaceViewSpec {
   subtitle?: string
   /** Floating layout style. Default true. */
   floating?: boolean
+  /**
+   * Main pane surface. `'card'` puts the default slot in one scrolling card that stacks its
+   * children (`SectionCard`s) with the gutter; `'plain'` renders the slot as is, for full-bleed
+   * views. Default `'card'` when `floating`, else `'plain'`.
+   */
+  main?: 'card' | 'plain'
   /** Render the toast container. Default true; set false when the page renders its own. */
   toasts?: boolean
   /** Show the experiment chip (popover, selector, save) in the top bar. Read once at setup, like `save`. */