@morscherlab/mint-sdk 1.4.11 → 1.4.13

package/src/components/GeneratedPluginView.vue

@@ -22,10 +22,12 @@ 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'
 import PluginWorkspaceView from './PluginWorkspaceView.vue'
+import SectionCard from './SectionCard.vue'
 import { GENERATED_JOBS_API_KEY } from './internal/generatedJobsApi'
 import { definePluginWorkspaceView } from '../composables/componentSpecs'
 import { providePluginIdentity } from '../composables/pluginIdentity'
@@ -48,6 +50,7 @@ const generated = useJobsEndpoint({
 provide(GENERATED_JOBS_API_KEY, { baseUrl: props.baseUrl, transport: props.transport })
 const activeDefinitionId = ref('')
 const selectedJobId = ref('')
+const sidebarCollapsed = ref(false)
 const valuesByDefinition = reactive<Record<string, Record<string, unknown>>>({})
 const definitions = computed(() => generated.manifest.value?.jobs ?? [])
 const activeDefinition = computed(() => (
@@ -77,12 +80,22 @@ const workspace = computed(() => definePluginWorkspaceView({
   subtitle: generated.manifest.value?.ui.subtitle || generated.manifest.value?.ui.description,
   // The platform shell renders the toasts around this view.
   toasts: false,
+  floating: true,
   topBar: {
+    variant: 'card',
     pills: pillNav.value,
+    themeToggle: true,
     settings: false,
     standaloneLabel: props.showStandaloneLabel ? 'Standalone' : false,
   },
-  sidebar: { title: 'Parameters', panels: panels.value, forms: forms.value },
+  sidebar: {
+    title: 'Parameters',
+    width: '300px',
+    collapsible: true,
+    collapsedWidth: '3rem',
+    panels: panels.value,
+    forms: forms.value,
+  },
   jobs: generated,
 }))
 
@@ -160,6 +173,7 @@ onMounted(() => {
 <template>
   <PluginWorkspaceView
     v-model:view="activeDefinitionId"
+    v-model:sidebar-collapsed="sidebarCollapsed"
     :spec="workspace"
     :values="currentValues"
     :form-loading="generated.isSubmitting.value"
@@ -168,7 +182,7 @@ onMounted(() => {
     @form-submit="submitJob"
     @job-select="selectJob"
   >
-    <main class="mint-generated-workspace">
+    <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>
@@ -177,18 +191,15 @@ onMounted(() => {
       <template v-else>
         <AlertBox v-if="generated.error.value" tone="error">{{ generated.error.value }}</AlertBox>
 
-        <header v-if="activeDefinition" class="mint-generated-workspace__header">
-          <div>
-            <p class="mint-generated-workspace__eyebrow">Analysis result</p>
-            <h1>{{ activeDefinition.title }}</h1>
-            <p v-if="activeDefinition.description">{{ activeDefinition.description }}</p>
-          </div>
-          <div class="mint-generated-workspace__resources" aria-label="Job resource requirements">
-            <span>{{ resourceSummary(activeDefinition) }}</span>
-          </div>
-        </header>
-
-        <section class="mint-generated-workspace__result">
+        <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"
@@ -199,93 +210,36 @@ onMounted(() => {
             description="Set the parameters and run the analysis. Jobs continue independently if you switch tabs."
             size="md"
           />
-        </section>
+        </SectionCard>
       </template>
-    </main>
+    </AppContainer>
   </PluginWorkspaceView>
 </template>
 
 <style scoped>
 .mint-generated-workspace {
-  position: relative;
   min-width: 0;
-  min-height: calc(100vh - 5rem);
-  padding: clamp(1rem, 2.5vw, 2.5rem);
-  background: var(--bg-primary);
+  min-height: 0;
+  overflow-y: auto;
 }
 
 .mint-generated-workspace__loading {
   display: flex;
-  min-height: 24rem;
+  flex: 1;
   align-items: center;
   justify-content: center;
   gap: 0.75rem;
   color: var(--text-secondary);
 }
 
-.mint-generated-workspace__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1.5rem;
-  max-width: 76rem;
-  margin: 0 auto 1.25rem;
-}
-
-.mint-generated-workspace__header h1 {
-  margin: 0;
-  color: var(--text-primary);
-  font-size: clamp(1.35rem, 2vw, 1.8rem);
-  line-height: 1.2;
-}
-
-.mint-generated-workspace__header p:not(.mint-generated-workspace__eyebrow) {
-  margin: 0.4rem 0 0;
-  color: var(--text-secondary);
-}
-
-.mint-generated-workspace__eyebrow {
-  margin: 0 0 0.35rem;
-  color: var(--text-secondary);
-  font-size: 0.72rem;
-  font-weight: 700;
-}
-
 .mint-generated-workspace__resources {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 0.4rem;
-}
-
-.mint-generated-workspace__resources span {
-  padding: 0.3rem 0.55rem;
-  border: 1px solid var(--border-color);
-  border-radius: 999px;
-  background: var(--bg-secondary);
-  color: var(--text-secondary);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
   font-size: 0.75rem;
-  font-weight: 600;
 }
 
-.mint-generated-workspace__result {
-  max-width: 76rem;
-  min-height: 24rem;
-  margin: 0 auto;
-  padding: clamp(1rem, 2vw, 1.75rem);
-  border: 1px solid var(--border-color);
-  border-radius: 1rem;
-  background: var(--bg-secondary);
-  box-shadow: var(--shadow-sm);
-}
-
-@media (max-width: 640px) {
-  .mint-generated-workspace__header {
-    flex-direction: column;
-  }
-
-  .mint-generated-workspace__resources {
-    justify-content: flex-start;
-  }
+.mint-generated-workspace__description {
+  margin: 0 0 var(--mint-gutter);
+  color: var(--text-secondary);
 }
 </style>

package/src/components/GeneratedResultRenderer.vue

@@ -133,6 +133,7 @@ function humanize(value: string): string {
   padding: 0.75rem 1rem;
   border-radius: var(--radius-md);
   background: var(--bg-tertiary);
+  font-family: var(--font-mono);
   font-size: 0.8125rem;
   line-height: 1.55;
   white-space: pre-wrap;
@@ -152,7 +153,7 @@ function humanize(value: string): string {
   gap: 1rem;
   padding: 1rem;
   border: 1px solid var(--border-color);
-  border-radius: 0.75rem;
+  border-radius: var(--radius-lg);
   color: var(--color-primary);
   text-decoration: none;
 }

package/src/components/PlotlyChart.vue

@@ -360,7 +360,7 @@ onBeforeUnmount(() => {
   margin: 0;
   padding: 1rem;
   border: 1px solid var(--mint-error-border);
-  border-radius: 0.75rem;
+  border-radius: var(--radius-lg);
   background: var(--mint-error-bg);
   color: var(--mint-error-hover);
 }

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/generated-ui/main.ts

@@ -2,6 +2,7 @@ import { createPinia } from 'pinia'
 import { createApp, h } from 'vue'
 
 import GeneratedPluginView from '../components/GeneratedPluginView.vue'
+import { useSettingsStore } from '../stores/settings'
 import '../styles/index.css'
 
 function generatedApiBase(location: Location): string {
@@ -13,9 +14,10 @@ const app = createApp({
   name: 'MintGeneratedUiApp',
   render: () => h(GeneratedPluginView, {
     baseUrl: generatedApiBase(window.location),
-    showStandaloneLabel: true,
   }),
 })
 
 app.use(createPinia())
+// Theme, palette and density apply before the first paint, as in the platform.
+useSettingsStore().initialize()
 app.mount('#app')

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-cta-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-sidebar.css

@@ -97,8 +97,8 @@
   min-width: 1.375rem;
   padding: 0.125rem 0.375rem;
   border-radius: var(--radius);
-  background: color-mix(in srgb, var(--color-cta) 14%, transparent);
-  color: var(--color-cta);
+  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
+  color: var(--color-primary);
   font-size: 0.6875rem;
   font-weight: 700;
   line-height: 1.1;
@@ -369,7 +369,7 @@
   width: 11px;
   height: 11px;
   border-radius: 9999px;
-  background: white;
+  background: var(--control-knob);
   box-shadow: var(--shadow-sm);
   transition: left 180ms var(--mint-ease-out-quart);
 }
@@ -469,7 +469,7 @@
   padding: 0 0.25rem;
   border-radius: var(--radius);
   background: var(--mint-sidebar-tone);
-  color: white;
+  color: var(--text-on-accent);
   font-size: 0.6875rem;
   font-weight: 700;
   line-height: 1rem;
@@ -492,7 +492,7 @@
 .mint-sidebar__rail-badge--cta,
 .mint-sidebar__tag--cta,
 .mint-sidebar__group-action--cta {
-  --mint-sidebar-tone: var(--color-cta);
+  --mint-sidebar-tone: var(--color-primary);
 }
 
 .mint-sidebar__rail-badge--success,

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;

package/src/styles/components/button.css

@@ -68,17 +68,17 @@
 }
 
 .mint-button--cta {
-  background-color: var(--color-cta);
+  background-color: var(--color-primary);
   color: var(--text-on-accent);
 }
 
 .mint-button--cta:hover:not(.mint-button--disabled) {
-  background-color: var(--color-cta-hover);
+  background-color: var(--color-primary-hover);
 }
 
 .mint-button--danger {
   background-color: var(--mint-error);
-  color: white;
+  color: var(--text-on-danger);
 }
 
 .mint-button--danger:hover:not(.mint-button--disabled) {

package/src/styles/components/checkbox.css

@@ -133,7 +133,7 @@
 .mint-checkbox__native:disabled + .mint-checkbox__box.mint-checkbox__box--indeterminate {
   background-color: var(--text-muted);
   border-color: var(--text-muted);
-  color: #FFFFFF;
+  color: var(--control-knob);
 }
 
 .mint-checkbox__box--sm {

package/src/styles/components/collapsible-card.css

@@ -159,7 +159,7 @@
 
 .mint-collapsible-card__badge--cta,
 .mint-collapsible-card__action--cta {
-  --mint-sidebar-badge-color: var(--color-cta);
+  --mint-sidebar-badge-color: var(--color-primary);
 }
 
 .mint-collapsible-card__badge--success,

package/src/styles/components/confirm-dialog.css

@@ -48,8 +48,8 @@
 }
 
 .mint-confirm__icon--cta {
-  background-color: color-mix(in srgb, var(--color-cta) 12%, transparent);
-  color: var(--color-cta);
+  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  color: var(--color-primary);
 }
 
 .mint-confirm__icon--neutral {

package/src/styles/components/file-uploader.css

@@ -160,9 +160,9 @@
   font-size: 0.6875rem;
   font-weight: 700;
   font-family: var(--font-mono);
-  color: var(--badge-color);
-  background-color: color-mix(in srgb, var(--badge-color) 10%, transparent);
-  border: 1px solid color-mix(in srgb, var(--badge-color) 20%, transparent);
+  color: var(--text-secondary);
+  background-color: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
 }
 
 .mint-file-uploader__file-meta {

package/src/styles/components/icon-button.css

@@ -57,17 +57,17 @@
 }
 
 .mint-icon-button--cta {
-  background-color: var(--color-cta);
+  background-color: var(--color-primary);
   color: var(--text-on-accent);
 }
 
 .mint-icon-button--cta:hover:not(.mint-icon-button--disabled) {
-  background-color: var(--color-cta-hover);
+  background-color: var(--color-primary-hover);
 }
 
 .mint-icon-button--danger {
   background-color: var(--mint-error);
-  color: white;
+  color: var(--text-on-danger);
 }
 
 .mint-icon-button--danger:hover:not(.mint-icon-button--disabled) {

package/src/styles/components/loading-spinner.css

@@ -33,7 +33,7 @@
 
 /* Tones */
 .mint-spinner--primary { color: var(--color-primary); }
-.mint-spinner--cta     { color: var(--color-cta); }
+.mint-spinner--cta     { color: var(--color-primary); }
 .mint-spinner--success { color: var(--mint-success); }
 .mint-spinner--warning { color: var(--mint-warning); }
 .mint-spinner--error   { color: var(--mint-error); }

package/src/styles/components/pill.css

@@ -33,7 +33,7 @@
    (soft-tint background, dot, outline border); `--mint-pill-ink` the text. A
    `color` prop sets `--mint-pill-tone` inline. */
 .mint-pill--primary { --mint-pill-tone: var(--color-primary); --mint-pill-ink: var(--color-primary-hover); }
-.mint-pill--cta     { --mint-pill-tone: var(--color-cta);     --mint-pill-ink: var(--color-cta-hover); }
+.mint-pill--cta     { --mint-pill-tone: var(--color-primary);     --mint-pill-ink: var(--color-primary-hover); }
 .mint-pill--success { --mint-pill-tone: var(--mint-success);  --mint-pill-ink: var(--mint-success-hover); }
 .mint-pill--warning { --mint-pill-tone: var(--mint-warning);  --mint-pill-ink: var(--mint-warning-text); }
 .mint-pill--error   { --mint-pill-tone: var(--mint-error);    --mint-pill-ink: var(--mint-error-hover); }

package/src/styles/components/plugin-icon.css

@@ -19,7 +19,7 @@
 /* Tones (deprecated with the tone/color props, removed in 1.5): the v2 tile no longer reads the variable. */
 .mint-plugin-icon--neutral { --mint-plugin-icon-tone: var(--text-secondary); }
 .mint-plugin-icon--primary { --mint-plugin-icon-tone: var(--color-primary); }
-.mint-plugin-icon--cta     { --mint-plugin-icon-tone: var(--color-cta); }
+.mint-plugin-icon--cta     { --mint-plugin-icon-tone: var(--color-primary); }
 .mint-plugin-icon--success { --mint-plugin-icon-tone: var(--mint-success); }
 .mint-plugin-icon--warning { --mint-plugin-icon-tone: var(--mint-warning); }
 .mint-plugin-icon--error   { --mint-plugin-icon-tone: var(--mint-error); }

package/src/styles/components/presence-avatars.css

@@ -1,18 +1,18 @@
 /* PresenceAvatars: an avatar stack that opens a list of who is here.
  * The editing cue is a ring plus a pencil badge, so it does not depend on
- * colour only. Light mode uses --color-cta-hover (3:1 on the card), dark
- * mode --color-cta. --mint-presence-surface is the colour the avatars are
+ * colour only. Light mode uses --color-primary-hover (3:1 on the card), dark
+ * mode --color-primary. --mint-presence-surface is the colour the avatars are
  * cut out of; set it when the stack sits on another surface. */
 
 .mint-presence {
-  --mint-presence-editing: var(--color-cta-hover);
+  --mint-presence-editing: var(--color-primary-hover);
   --mint-presence-surface: var(--bg-secondary);
   position: relative;
   display: inline-flex;
 }
 
 :where(html.dark) .mint-presence {
-  --mint-presence-editing: var(--color-cta);
+  --mint-presence-editing: var(--color-primary);
 }
 
 .mint-presence__trigger {

package/src/styles/components/progress-bar.css

@@ -46,7 +46,7 @@
 .mint-progress__bar--success { background-color: var(--mint-success); }
 .mint-progress__bar--warning { background-color: var(--mint-warning); }
 .mint-progress__bar--error   { background-color: var(--mint-error); }
-.mint-progress__bar--cta     { background-color: var(--color-cta); }
+.mint-progress__bar--cta     { background-color: var(--color-primary); }
 .mint-progress__bar--neutral { background-color: var(--text-muted); }
 .mint-progress__bar--info    { background-color: var(--color-primary); } /* 6b: progress fill is always primary; --mint-info is for the running dot */
 

package/src/styles/components/sequence-input.css

@@ -226,7 +226,7 @@
 .mint-sequence-input__problem--error .mint-sequence-input__problem-shape { fill: var(--mint-error); }
 
 .mint-sequence-input__problem-mark {
-  stroke: white;
+  stroke: var(--text-on-danger);
   stroke-width: 1.6;
   stroke-linecap: round;
 }

package/src/styles/components/slider.css

@@ -56,7 +56,7 @@
   box-sizing: border-box;
   transform: translateX(-50%) translateY(-50%);
   border-radius: 9999px;
-  background-color: #FFFFFF;
+  background-color: var(--control-knob);
   border: 1px solid color-mix(in srgb, var(--text-secondary) 40%, transparent);
   box-shadow: var(--shadow-sm);
   pointer-events: none;

package/src/styles/components/toggle.css

@@ -151,7 +151,7 @@
   top: 50%;
   left: 2px;
   border-radius: 9999px;
-  background-color: #FFFFFF;
+  background-color: var(--control-knob);
   box-shadow: var(--shadow-sm);
   transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1);
   pointer-events: none;

package/src/styles/variables.css

@@ -59,6 +59,10 @@
   --mint-primary: var(--color-primary);
   /* Text and icons on an accent fill (filled buttons, Save). */
   --text-on-accent: #FFFFFF;
+  /* Text on a --mint-error fill (danger buttons); white in both themes, 3.76:1 on #EF4444. */
+  --text-on-danger: #FFFFFF;
+  /* Knob of a toggle or slider, and the mark of a disabled checkbox; white in both themes. */
+  --control-knob: #FFFFFF;
   /* Retired hues, aliased to the accent until 1.5 (mint doctor warns on use). */
   --color-cta: var(--color-primary);
   --color-cta-hover: var(--color-primary-hover);