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

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,21 @@ 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,
     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 +172,7 @@ onMounted(() => {
 <template>
   <PluginWorkspaceView
     v-model:view="activeDefinitionId"
+    v-model:sidebar-collapsed="sidebarCollapsed"
     :spec="workspace"
     :values="currentValues"
     :form-loading="generated.isSubmitting.value"
@@ -168,7 +181,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 +190,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 +209,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/InstrumentStatusPanels.vue

@@ -105,11 +105,11 @@ function formatValue(value: string | number | boolean | null): string {
 </template>
 
 <style scoped>
-.mint-status-panels__tabs { padding: 0 1rem; }
-.mint-status-panels__body { padding: 0.75rem 1rem; }
+.mint-status-panels__tabs { padding: 0 var(--mint-section-card-inset); }
+.mint-status-panels__body { padding: 0.75rem var(--mint-section-card-inset); }
 .mint-status-panels__bar { display: flex; flex-direction: column; gap: 0.5rem; }
 .mint-status-panels__series { align-self: flex-end; }
-.mint-status-panels__kv { margin: 0; padding: 0.25rem 1rem 0.5rem; }
+.mint-status-panels__kv { margin: 0; padding: 0.25rem var(--mint-section-card-inset) 0.5rem; }
 .mint-status-panels__kv-row {
   display: flex;
   align-items: baseline;

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/PluginIcon.story.vue

@@ -52,8 +52,8 @@ function initState() {
         <HstText v-model="state.icon" title="icon" />
         <HstSelect v-model="state.size" title="size" :options="['sm', 'md', 'topbar', 'lg']" />
         <HstSelect v-model="state.variant" title="variant" :options="['solid', 'tinted']" />
-        <HstSelect v-model="state.tone" title="tone (deprecated, no effect; removed in 1.5)" :options="['', 'neutral', 'primary', 'cta', 'success', 'warning', 'error', 'info']" />
-        <HstText v-model="state.color" title="color (deprecated, no effect; removed in 1.5)" />
+        <HstSelect v-model="state.tone" title="tone (deprecated, no effect; removed in 2.0)" :options="['', 'neutral', 'primary', 'cta', 'success', 'warning', 'error', 'info']" />
+        <HstText v-model="state.color" title="color (deprecated, no effect; removed in 2.0)" />
       </template>
     </Variant>
 

package/src/components/PluginIcon.vue

@@ -18,9 +18,9 @@ interface Props {
   icon?: string
   size?: 'sm' | 'md' | 'topbar' | 'lg'
   variant?: 'solid' | 'tinted'
-  /** @deprecated v2 design: the tile is always the neutral accent-soft tile, so the tone has no visible effect. Removed in 1.5. */
+  /** @deprecated v2 design: the tile is always the neutral accent-soft tile, so the tone has no visible effect. Removed in 2.0. */
   tone?: Tone
-  /** @deprecated v2 design: the tile is always the neutral accent-soft tile, so the color has no visible effect. Removed in 1.5. */
+  /** @deprecated v2 design: the tile is always the neutral accent-soft tile, so the color has no visible effect. Removed in 2.0. */
   color?: string
 }
 

package/src/components/PluginWorkspaceView.vue

@@ -24,6 +24,7 @@ import type { JobState } from '../types/jobs'
 import { useAppExperiment } from '../composables/useAppExperiment'
 import { useJobCenter } from '../composables/useJobCenter'
 import { usePluginWorkspace } from '../composables/usePluginWorkspace'
+import { warnDeprecatedOnce } from '../utils/deprecation'
 import AppToastContainer from './AppToastContainer.vue'
 import JobsStatusTray from './JobsStatusTray.vue'
 import WorkspaceControlsInternal from './internal/WorkspaceControlsInternal.vue'
@@ -51,12 +52,16 @@ const emit = defineEmits<PluginWorkspaceViewEmits>()
 
 defineSlots<{
   default?: (props: PluginWorkspaceSlotProps) => unknown
+  /** @deprecated Configure the bar with `spec.topBar` and page icons; removed in 2.0. */
   topbar?: (props: PluginWorkspaceSlotProps) => unknown
   sidebar?: (props: PluginWorkspaceSlotProps) => unknown
   icon?: (props: PluginWorkspaceForwardedSlotProps) => unknown
   logo?: (props: PluginWorkspaceForwardedSlotProps) => unknown
+  /** @deprecated Removed in 2.0. */
   nav?: (props: PluginWorkspaceForwardedSlotProps) => unknown
+  /** @deprecated Removed in 2.0. */
   center?: (props: PluginWorkspaceForwardedSlotProps) => unknown
+  /** @deprecated Use `spec.topBar.actions`; removed in 2.0. */
   actions?: (props: PluginWorkspaceForwardedSlotProps) => unknown
   'settings-appearance'?: (props: PluginWorkspaceForwardedSlotProps) => unknown
   header?: (props: PluginWorkspaceForwardedSlotProps) => unknown
@@ -66,6 +71,9 @@ defineSlots<{
 }>()
 
 const slots = useSlots()
+if (slots.topbar) {
+  warnDeprecatedOnce('workspace.slot.topbar', 'PluginWorkspaceView #topbar is deprecated: configure spec.topBar and give pages icons. It is removed in 2.0.')
+}
 
 // The experiment chip is setup-time structure, like the rest of the spec.
 if (props.spec.experiment) {
@@ -93,6 +101,7 @@ const {
   controls,
   handleControlValuesUpdate,
   handlePillSelect,
+  handleSidebarCollapsedUpdate,
 } = usePluginWorkspace({
   props,
   slots,
@@ -146,7 +155,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/components/SectionCard.vue

@@ -2,7 +2,7 @@
 /** One-card page region from the MINT 1.1 card system: 12px radius, the
  * single --card-shadow token, a header strip (icon chip, title, mono count,
  * actions), and hairline-separated content — no card-in-card. */
-import { computed } from 'vue'
+import { computed, useId } from 'vue'
 import type { SectionCardAccent, SectionCardDivider } from '../types'
 
 interface Props {
@@ -23,6 +23,8 @@ interface Props {
    * definite height (a flex or grid track).
    */
   fill?: boolean
+  /** The title toggles the body; bind `v-model:collapsed` to control or keep the state. */
+  collapsible?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -32,8 +34,14 @@ const props = withDefaults(defineProps<Props>(), {
   uppercase: false,
   divider: 'strong',
   fill: false,
+  collapsible: false,
 })
 
+const collapsed = defineModel<boolean>('collapsed', { default: false })
+const bodyId = useId()
+/** `collapsed` hides content only on a card that also shows the toggle to open it again. */
+const hidden = computed(() => props.collapsible && collapsed.value)
+
 const iconPaths = computed(() =>
   props.icon === undefined ? [] : Array.isArray(props.icon) ? props.icon : [props.icon],
 )
@@ -41,6 +49,7 @@ const iconPaths = computed(() =>
 const headerClasses = computed(() => [
   'mint-section-card__header',
   props.divider === 'light' ? 'mint-section-card__header--divider-light' : '',
+  hidden.value ? 'mint-section-card__header--collapsed' : '',
 ])
 
 const titleClasses = computed(() => [
@@ -51,6 +60,7 @@ const titleClasses = computed(() => [
 const cardClasses = computed(() => [
   'mint-section-card',
   props.fill ? 'mint-section-card--fill' : '',
+  hidden.value ? 'mint-section-card--collapsed' : '',
 ])
 </script>
 
@@ -74,20 +84,46 @@ const cardClasses = computed(() => [
           <path v-for="(d, i) in iconPaths" :key="i" :d="d" />
         </svg>
       </span>
-      <h2 :class="titleClasses">{{ title }}</h2>
-      <span v-if="count !== undefined" class="mint-section-card__count">{{ count }}</span>
+      <!-- Disclosure pattern: the button sits inside the heading, never the reverse. -->
+      <h2 :class="titleClasses">
+        <button
+          v-if="collapsible"
+          type="button"
+          class="mint-section-card__toggle"
+          :aria-expanded="!collapsed"
+          :aria-controls="bodyId"
+          @click="collapsed = !collapsed"
+        >
+          {{ title }}
+          <span v-if="count !== undefined" class="mint-section-card__count">{{ count }}</span>
+          <svg
+            class="mint-section-card__chevron"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </button>
+        <template v-else>{{ title }}</template>
+      </h2>
+      <span v-if="count !== undefined && !collapsible" class="mint-section-card__count">{{ count }}</span>
       <div class="mint-section-card__spacer"></div>
       <slot name="actions" />
     </div>
     <!-- Controls belong to the card's chrome, so they sit outside the body and
          stay put while the body scrolls. -->
-    <div v-if="$slots.toolbar" class="mint-section-card__toolbar">
+    <div v-if="$slots.toolbar" v-show="!hidden" class="mint-section-card__toolbar">
       <slot name="toolbar" />
     </div>
-    <div class="mint-section-card__body">
+    <div :id="bodyId" v-show="!hidden" class="mint-section-card__body">
       <slot />
     </div>
-    <div v-if="$slots.footer" class="mint-section-card__footer">
+    <div v-if="$slots.footer" v-show="!hidden" class="mint-section-card__footer">
       <slot name="footer" />
     </div>
   </section>

package/src/components/internal/AppTopBarOnboardingInternal.vue

@@ -5,7 +5,7 @@
  */
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { autoUpdate, computePosition, offset, shift } from '@floating-ui/dom'
-import { Check, CircleHelp, Play } from 'lucide-vue-next'
+import { Check, CircleHelp, Play, X } from 'lucide-vue-next'
 import { useEventListener } from '../../composables/useEventListener'
 import type { OnboardingState } from '../../composables/useOnboarding'
 import OnboardingLayerInternal from './OnboardingLayerInternal.vue'
@@ -50,6 +50,12 @@ watch(open, async (isOpen) => {
 })
 onBeforeUnmount(() => stopAutoUpdate?.())
 
+// The close button removes itself, so focus moves on to Help instead of the page.
+function hideChecklist() {
+  props.state.setChecklistHidden(true)
+  nextTick(() => helpButton.value?.focus())
+}
+
 function run(action: () => void) {
   open.value = false
   action()
@@ -66,19 +72,29 @@ useEventListener(document, 'keydown', (event) => {
 
 <template>
   <div v-if="hasContent" ref="root" class="mint-onboarding-help">
-    <button
-      v-if="state.checklistVisible.value"
-      type="button"
-      class="mint-onboarding-help__chip"
-      :class="{ 'mint-onboarding-help__chip--open': open }"
-      data-onboarding="topbar-checklist"
-      :aria-expanded="open"
-      @click="toggle"
-    >
-      Getting started
-      <span class="mint-onboarding-help__count">{{ state.tasksDone.value }}/{{ state.tasks.value.length }}</span>
-      <span class="mint-onboarding-help__bar" aria-hidden="true"><span :style="{ width: `${progress}%` }" /></span>
-    </button>
+    <span v-if="state.checklistVisible.value" class="mint-onboarding-help__chip-group">
+      <button
+        type="button"
+        class="mint-onboarding-help__chip"
+        :class="{ 'mint-onboarding-help__chip--open': open }"
+        data-onboarding="topbar-checklist"
+        :aria-expanded="open"
+        @click="toggle"
+      >
+        Getting started
+        <span class="mint-onboarding-help__count">{{ state.tasksDone.value }}/{{ state.tasks.value.length }}</span>
+        <span class="mint-onboarding-help__bar" aria-hidden="true"><span :style="{ width: `${progress}%` }" /></span>
+      </button>
+      <button
+        type="button"
+        class="mint-onboarding-help__chip-close"
+        aria-label="Hide checklist"
+        title="Hide checklist (Help can show it again)"
+        @click="hideChecklist"
+      >
+        <X :size="12" aria-hidden="true" />
+      </button>
+    </span>
     <button
       ref="helpButton"
       type="button"

package/src/components/internal/AppTopBarPageSelectorInternal.vue

@@ -6,7 +6,9 @@ import { useMenuKeyboard } from '../../composables/useMenuKeyboard'
 import type { PageSelectorItem, PageSelectorItemInput } from '../../types/components'
 import { normalizeItemInput } from '../../utils/items'
 import { isPluginIconFormat } from '../../utils/pluginIcon'
+import { isLucideIconName } from '../../utils/lucideIcon'
 import ActionItemInternal from './ActionItemInternal.vue'
+import LucideIconInternal from './LucideIconInternal.vue'
 import PluginIcon from '../PluginIcon.vue'
 
 interface Props {
@@ -123,6 +125,11 @@ function handleSelect(page: PageSelectorItem) {
               size="sm"
               variant="solid"
             />
+            <LucideIconInternal v-else-if="isLucideIconName(current.icon)" :name="current.icon">
+              <template #fallback>
+                <span class="mint-page-selector__icon-fallback">{{ current.label.charAt(0) }}</span>
+              </template>
+            </LucideIconInternal>
             <span v-else class="mint-page-selector__icon-fallback">{{ current.label.charAt(0) }}</span>
           </slot>
         </span>
@@ -180,6 +187,11 @@ function handleSelect(page: PageSelectorItem) {
                 size="sm"
                 variant="solid"
               />
+              <LucideIconInternal v-else-if="isLucideIconName(page.icon)" :name="page.icon">
+                <template #fallback>
+                  <span class="mint-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
+                </template>
+              </LucideIconInternal>
               <span v-else class="mint-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
             </slot>
           </span>

package/src/components/internal/AutoGroupModalInternal.vue

@@ -209,8 +209,12 @@ function close() {
   emit('update:open', false)
 }
 
+// A close or a newer fetch makes the response of an earlier fetch obsolete.
+let fetchGeneration = 0
+
 async function fetchExperimentData() {
   if (!props.experimentId && !props.designData) return
+  const generation = ++fetchGeneration
   autoGroup.inputMode.value = 'experiment'
   experimentError.value = null
   experimentLoading.value = true
@@ -221,6 +225,7 @@ async function fetchExperimentData() {
     } else {
       const result = await api.get<Record<string, unknown>>(`/experiments/${props.experimentId}/data`)
       pluginData = result.data as Record<string, unknown> | undefined
+      if (generation !== fetchGeneration) return
     }
     if (!pluginData || typeof pluginData !== 'object') {
       experimentError.value = 'No design data found for this experiment'
@@ -232,9 +237,11 @@ async function fetchExperimentData() {
     }
     setQcRouting(qcRouting.value)
   } catch (e) {
-    experimentError.value = e instanceof Error ? e.message : 'Failed to fetch experiment data'
+    if (generation === fetchGeneration) {
+      experimentError.value = e instanceof Error ? e.message : 'Failed to fetch experiment data'
+    }
   } finally {
-    experimentLoading.value = false
+    if (generation === fetchGeneration) experimentLoading.value = false
   }
 }
 
@@ -244,7 +251,11 @@ async function fetchExperimentData() {
 watch(
   () => props.open,
   (open) => {
-    if (!open) return
+    if (!open) {
+      fetchGeneration += 1
+      experimentLoading.value = false
+      return
+    }
     activeWorkflow.value = props.initialMode
     experimentError.value = null
     qcAsOverlay.value = true

package/src/components/internal/LucideIconInternal.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+/** Internal: renders a Lucide icon by name; shows `fallback` until it loads or when the name is unknown. */
+import { shallowRef, watchEffect, type Component } from 'vue'
+import { loadLucideIcon } from '../../utils/lucideIcon'
+
+const props = defineProps<{
+  name: string
+  size?: number
+}>()
+
+const icon = shallowRef<Component>()
+watchEffect(async (onCleanup) => {
+  let stale = false
+  onCleanup(() => { stale = true })
+  const loaded = await loadLucideIcon(props.name)
+  if (!stale) icon.value = loaded
+})
+</script>
+
+<template>
+  <component :is="icon" v-if="icon" :size="size ?? 14" aria-hidden="true" />
+  <slot v-else name="fallback" />
+</template>

package/src/composables/appLayoutSidebar.ts

@@ -0,0 +1,11 @@
+import type { ComputedRef, InjectionKey } from 'vue'
+
+/** The responsive sidebar drawer of an AppLayout; its AppTopBar renders the drawer button. */
+export interface AppLayoutSidebarDrawer {
+  open: ComputedRef<boolean>
+  toggle: () => void
+  openLabel: ComputedRef<string>
+  closeLabel: ComputedRef<string>
+}
+
+export const APP_LAYOUT_SIDEBAR_KEY: InjectionKey<AppLayoutSidebarDrawer> = Symbol('mint-app-layout-sidebar')

package/src/composables/index.ts

@@ -1,6 +1,5 @@
 // Package-root composables: the L1 and L2 names of spec 3.3. Subpath composables are
-// exported from `lab.ts`, `shell.ts`, `data.ts` and `runtime.ts`; `deprecatedRootExports.ts`
-// keeps the other 1.3 root names until MINT 1.5.
+// exported from `lab.ts`, `shell.ts`, `data.ts` and `runtime.ts`.
 export { useTheme } from './useTheme'
 export { useToast } from './useToast'
 export { usePlatform } from './usePlatform'

package/src/composables/useExperimentSelector.ts

@@ -30,6 +30,8 @@ export interface UseExperimentSelectorOptions {
   immediate?: boolean
   /** Keep `statusCounts` in step with the non-status filters (one stats request per change). */
   withStatusCounts?: boolean
+  /** Filter values to start from, for example the ones a caller saved at the last visit. */
+  initialFilters?: Partial<ExperimentFilters>
 }
 
 export interface UseExperimentSelectorReturn {
@@ -89,6 +91,7 @@ export function useExperimentSelector(
     allowedExperimentTypes: optionAllowedExperimentTypes,
     apiBaseUrl,
     withStatusCounts = false,
+    initialFilters,
   } = options
   const platformBase = apiBaseUrl ?? getPlatformApiUrl()
   const api = useApi()
@@ -124,6 +127,7 @@ export function useExperimentSelector(
     experimentType: undefined,
     datePreset: undefined,
     mine: undefined,
+    ...initialFilters,
   })
 
   function normalizeExperimentTypes(values: string[] | null | undefined): string[] | null {