@morscherlab/mint-sdk 1.4.0-beta.19 → 1.4.0-beta.20

package/dist/lab.js

@@ -1,5 +1,5 @@
 import { P as time_exports } from "./records-CR_pYzIP.js";
 import { C as FormulaInput_default, L as definePlateEditor, S as useSequenceUtils, a as StepWizard_default, b as MoleculeInput_default, v as ConcentrationInput_default, w as formula_exports, x as SequenceInput_default, y as useConcentrationUnits, z as defineWellPlate } from "./useListReorder-CQ9OCScc.js";
-import { C as defineWellPlateControlProps, S as defineDoseDesignControlModel, T as defineWellPlateDoseControlProps, _ as SampleSelector_default, a as useReagentSeries, c as InstrumentStatusPanels_default, d as ChemicalFormula_default, f as AdductText_default, g as SampleHierarchyTree_default, h as useProtocolTemplates, i as generateDilutionSeries, l as InstrumentStateBadge_default, m as ProtocolStepEditor_default, n as DEFAULT_PRESETS, o as ResourceCard_default, p as ScientificNumber_default, r as DEFAULT_UNITS, s as TimeRangeInput_default, u as SequenceProgressBar_default, v as useSampleGroups, w as defineWellPlateDoseComponentBindings, x as defineDoseCalculatorControlProps } from "./lab-BHVT1qN2.js";
+import { C as defineWellPlateControlProps, S as defineDoseDesignControlModel, T as defineWellPlateDoseControlProps, _ as SampleSelector_default, a as useReagentSeries, c as InstrumentStatusPanels_default, d as ChemicalFormula_default, f as AdductText_default, g as SampleHierarchyTree_default, h as useProtocolTemplates, i as generateDilutionSeries, l as InstrumentStateBadge_default, m as ProtocolStepEditor_default, n as DEFAULT_PRESETS, o as ResourceCard_default, p as ScientificNumber_default, r as DEFAULT_UNITS, s as TimeRangeInput_default, u as SequenceProgressBar_default, v as useSampleGroups, w as defineWellPlateDoseComponentBindings, x as defineDoseCalculatorControlProps } from "./lab-UyTbokQC.js";
 import { C as hexToHsl, E as sampleTypeMarker, S as deriveShade, T as WellPlate_default, _ as mintPlotlyTemplate, b as PlateEditor_default, g as ChartContainer_default, h as PlotlyChart_default, n as ScheduleCalendar_default, r as useScheduleDrag, t as useRackEditor, v as DoseCalculator_default, w as hslToHex, y as dose_exports } from "./useRackEditor-wL3kPrRT.js";
 export { AdductText_default as AdductText, ChartContainer_default as ChartContainer, ChemicalFormula_default as ChemicalFormula, ConcentrationInput_default as ConcentrationInput, DEFAULT_PRESETS, DEFAULT_UNITS, DoseCalculator_default as DoseCalculator, FormulaInput_default as FormulaInput, InstrumentStateBadge_default as InstrumentStateBadge, InstrumentStatusPanels_default as InstrumentStatusPanels, MoleculeInput_default as MoleculeInput, PlateEditor_default as PlateEditor, PlotlyChart_default as PlotlyChart, ProtocolStepEditor_default as ProtocolStepEditor, ResourceCard_default as ResourceCard, SampleHierarchyTree_default as SampleHierarchyTree, SampleSelector_default as SampleSelector, ScheduleCalendar_default as ScheduleCalendar, ScientificNumber_default as ScientificNumber, SequenceInput_default as SequenceInput, SequenceProgressBar_default as SequenceProgressBar, StepWizard_default as StepWizard, TimeRangeInput_default as TimeRangeInput, WellPlate_default as WellPlate, defineDoseCalculatorControlProps, defineDoseDesignControlModel, definePlateEditor, defineWellPlate, defineWellPlateControlProps, defineWellPlateDoseComponentBindings, defineWellPlateDoseControlProps, deriveShade, dose_exports as dose, formula_exports as formula, generateDilutionSeries, hexToHsl, hslToHex, mintPlotlyTemplate, sampleTypeMarker, time_exports as time, useConcentrationUnits, useProtocolTemplates, useRackEditor, useReagentSeries, useSampleGroups, useScheduleDrag, useSequenceUtils };

package/dist/styles.css

@@ -4619,29 +4619,75 @@ button, input, select, textarea {
 .mint-modal:has(.mint-jobs-tray__confirm) {
   z-index: 1001;
 }
+/* The handle is the gap between two panels: its layout width (horizontal: height)
+   is the gap, --mint-layout-resize-gap or else --mint-gutter (8px compact, 12px
+   normal). It stretches along the panels, and its bar and a 12px hit area are
+   centred in it, the hit area drawn above the neighbouring panels. */
 .mint-layout-resize-handle {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
+  --_size: var(--mint-layout-resize-gap, var(--mint-gutter, 0.75rem));
+  --_hit: 0.75rem;
+  position: relative;
+  z-index: 10;
+  flex: 0 0 auto;
+  align-self: stretch;
   background: transparent;
   cursor: col-resize;
+  outline: none;
+}
+
+.mint-layout-resize-handle--vertical {
+  justify-self: center;
+  width: var(--_size);
+  min-height: 2.75rem;
+}
+
+.mint-layout-resize-handle--horizontal {
+  justify-self: stretch;
+  min-width: 2.75rem;
+  height: var(--_size);
+  cursor: row-resize;
+}
+
+/* Hit area and focus ring. Pointer events on it go to the handle. */
+.mint-layout-resize-handle::before {
+  position: absolute;
+  border-radius: var(--radius-sm);
+  content: '';
+}
+
+.mint-layout-resize-handle--vertical::before {
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: var(--_hit);
+  transform: translateX(-50%);
+}
+
+.mint-layout-resize-handle--horizontal::before {
+  top: 50%;
+  right: 0;
+  left: 0;
+  height: var(--_hit);
+  transform: translateY(-50%);
 }
 
-.mint-layout-resize-handle--vertical { width: 1rem; min-height: 2.75rem; }
-.mint-layout-resize-handle--horizontal { min-width: 2.75rem; height: 1rem; cursor: row-resize; }
+/* Edge handles lie outside the edge and cover exactly the gap. */
 .mint-layout-resize-handle--edge-left,
-.mint-layout-resize-handle--edge-right { position: absolute; top: 0; bottom: 0; z-index: 10; height: auto; }
+.mint-layout-resize-handle--edge-right { position: absolute; top: 0; bottom: 0; }
 .mint-layout-resize-handle--edge-left { left: 0; transform: translateX(-100%); }
 .mint-layout-resize-handle--edge-right { right: 0; transform: translateX(100%); }
 
 .mint-layout-resize-handle__bar {
+  position: absolute;
+  top: 50%;
+  left: 50%;
   display: block;
   width: 0.25rem;
   height: 2.75rem;
   border-radius: 999px;
   background: var(--border-color);
   opacity: 0.72;
+  transform: translate(-50%, -50%);
   transition: background-color 150ms ease, opacity 150ms ease, transform 150ms ease;
 }
 
@@ -4657,29 +4703,25 @@ button, input, select, textarea {
 }
 
 .mint-layout-resize-handle--vertical:hover .mint-layout-resize-handle__bar,
-.mint-layout-resize-handle--vertical:focus-visible .mint-layout-resize-handle__bar { transform: scaleX(1.35); }
+.mint-layout-resize-handle--vertical:focus-visible .mint-layout-resize-handle__bar { transform: translate(-50%, -50%) scaleX(1.35); }
 .mint-layout-resize-handle--horizontal:hover .mint-layout-resize-handle__bar,
-.mint-layout-resize-handle--horizontal:focus-visible .mint-layout-resize-handle__bar { transform: scaleY(1.35); }
+.mint-layout-resize-handle--horizontal:focus-visible .mint-layout-resize-handle__bar { transform: translate(-50%, -50%) scaleY(1.35); }
 
-.mint-layout-resize-handle:focus-visible {
+.mint-layout-resize-handle:focus-visible::before {
   outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
+  outline-offset: -2px;
 }
 
-.mint-layout-resize-handle--edge-left:focus-visible,
-.mint-layout-resize-handle--edge-right:focus-visible { outline-offset: -2px; }
-
 .mint-layout-resize-handle[aria-disabled='true'] { cursor: not-allowed; opacity: 0.5; }
 
 @media (prefers-reduced-motion: reduce) {
   .mint-layout-resize-handle__bar { transition: none; }
 }
 
+/* Touch: the handle reserves its full 2.75rem hit area in the layout. */
 @media (pointer: coarse) {
-  .mint-layout-resize-handle--vertical { width: 2.75rem; }
-  .mint-layout-resize-handle--horizontal { height: 2.75rem; }
+  .mint-layout-resize-handle { --_size: 2.75rem; --_hit: 2.75rem; }
 }
-
 /* BaseInput Component Styles */
 
 .mint-input {
@@ -6789,6 +6831,11 @@ html.dark {
  */
 
 .mint-section-card {
+  /* The left grid that the header and the rows share: header icon (or row
+     lead) width, then this gap. Set --mint-section-card-gap on the card to
+     change both. */
+  --mint-section-card-lead-width: 1rem;
+  --mint-section-card-gap: 0.625rem;
   display: flex;
   flex-direction: column;
   border-radius: var(--radius-lg);
@@ -6814,7 +6861,7 @@ html.dark {
 .mint-section-card__header {
   display: flex;
   align-items: center;
-  gap: 0.625rem;
+  gap: var(--mint-section-card-gap);
   box-sizing: border-box;
   min-height: 2.5rem;
   /* 4px block padding: a 28px header control plus padding plus the 1px rule
@@ -6834,8 +6881,8 @@ html.dark {
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: 1rem;
-  height: 1rem;
+  width: var(--mint-section-card-lead-width);
+  height: var(--mint-section-card-lead-width);
   color: var(--text-muted);
 }
 
@@ -6895,12 +6942,27 @@ html.dark {
 .mint-section-card__row {
   display: flex;
   align-items: center;
-  gap: 0.625rem;
+  gap: var(--mint-section-card-gap);
   padding: 0.375rem 0.75rem;
   background: var(--bg-secondary);
   transition: background-color var(--mint-transition);
 }
 
+/* Leading glyph slot of a row: as wide as the header icon, so the glyph
+ * centres under it and the row text starts at the header title. Leave it
+ * empty to keep the text on the grid. It is one title line high (1lh at the
+ * title size), so a two-line row keeps its glyph on the first line. */
+.mint-section-card__row-lead {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  align-self: flex-start;
+  width: var(--mint-section-card-lead-width);
+  height: 1lh;
+  font-size: 0.8125rem;
+}
+
 a.mint-section-card__row,
 button.mint-section-card__row {
   cursor: pointer;
@@ -6922,6 +6984,8 @@ button.mint-section-card__row:hover {
 [data-density="comfortable"] .mint-section-card__row {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
+  /* Same left inset as the header, so row content lines up under the header. */
+  padding-left: 0.875rem;
 }
 
 /* SecretInput — plugin secret settings field with a set / not set / environment status.
@@ -8430,26 +8494,69 @@ html.dark .mint-toast__item {
   box-sizing: border-box;
   border-bottom: 1px solid var(--border-light);
   font-size: 0.8125rem;
+  /* The header compacts when it is narrow (sidebars); see the query below. */
+  container-type: inline-size;
 }
 
 .mint-sample-selector__title {
+  flex-shrink: 0;
+  white-space: nowrap;
   font-weight: 600;
   color: var(--text-primary);
 }
 
 .mint-sample-selector__selected {
+  /* Without the query (or with a long count) the count gives way, never the row. */
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--text-muted);
 }
 
 .mint-sample-selector__header-actions {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   gap: 0.125rem;
   margin-left: auto;
 }
 
+.mint-sample-selector__selected-short {
+  display: none;
+}
+
+/* Narrow selector: the header stays one row and keeps its height. The grouping
+   button shows only its icon (the label stays its accessible name and tooltip)
+   and the count shortens to "N sel." (screen readers keep "N selected"). */
+/* Measured: the full row (title, "N selected", Smart group, Clear groups) needs
+   about 17.55rem of header content width with Fira Sans. */
+@container (max-width: 17.625rem) {
+  .mint-sample-selector__group-btn .mint-button__label,
+  .mint-sample-selector__selected-full {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .mint-sample-selector__selected-short {
+    display: inline;
+  }
+
+  .mint-sample-selector__group-btn {
+    min-width: var(--form-height-sm);
+    padding-inline: 0.25rem;
+  }
+}
+
 .mint-sample-selector__grouped,
 .mint-sample-selector__flat,
 .mint-sample-selector__state {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.4.0-beta.19",
+  "version": "1.4.0-beta.20",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
   "type": "module",
   "main": "./dist/index.js",

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

@@ -125,6 +125,26 @@ describe('SampleSelector', () => {
     expect(modal.props('initialMode')).toBe('auto')
   })
 
+  it.each([
+    [true, 'Smart group'],
+    [false, 'Group'],
+  ])('should keep the grouping label as accessible name and tooltip when smart group is %s', (enableSmartGroup, label) => {
+    const wrapper = mount(SampleSelector, {
+      props: { samples: ['S1', 'S2'], modelValue: ['S1'], groups: [], enableSmartGroup },
+      global: { stubs: { AutoGroupModalInternal: true } },
+    })
+    const button = wrapper.get('.mint-sample-selector__header-actions > .mint-sample-selector__action-btn')
+    const count = wrapper.get('.mint-sample-selector__selected')
+
+    expect({
+      name: button.text(),
+      title: button.attributes('title'),
+      full: count.get('.mint-sample-selector__selected-full').text(),
+      short: count.get('.mint-sample-selector__selected-short').text(),
+      shortHidden: count.get('.mint-sample-selector__selected-short').attributes('aria-hidden'),
+    }).toEqual({ name: label, title: label, full: '1 selected', short: '1 sel.', shortHidden: 'true' })
+  })
+
   it('opens the grouping modal in manual mode', async () => {
     const wrapper = mount(SampleSelector, {
       props: {

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

@@ -14,7 +14,10 @@ const variablesCss = readFileSync(join(stylesDir, 'variables.css'), 'utf-8')
  * component-local knobs declared in the same stylesheet that consumes them.
  * Anything else must be a canonical token from variables.css.
  */
-const RUNTIME_PROPERTY_ALLOWLIST = new Set<string>([])
+const RUNTIME_PROPERTY_ALLOWLIST = new Set<string>([
+  // Consumer knob: the gap width an edge LayoutResizeHandle centres on (falls back to --mint-gutter).
+  '--mint-layout-resize-gap',
+])
 
 const SOURCE_EXTENSIONS = ['.vue', '.css', '.ts']
 const IGNORED_DIRS = new Set(['__tests__', 'generated-ui', 'node_modules'])

package/src/components/LayoutResizeHandle.story.vue

@@ -3,15 +3,20 @@ import { ref } from 'vue'
 import LayoutResizeHandle from './LayoutResizeHandle.vue'
 
 const width = ref(320)
+const gapWidth = ref(320)
+const edgeWidth = ref(280)
+const height = ref(50)
+
+const panel = 'background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 0.75rem;'
+const caption = 'margin: 0 0 0.5rem; font: 0.75rem var(--font-mono); color: var(--text-secondary);'
 </script>
 
 <template>
   <Story title="Layout/LayoutResizeHandle">
     <Variant title="Keyboard splitter">
+      <!-- Directly between two panels, the handle is the gutter. -->
       <div style="display: flex; height: 16rem; padding: 2rem;">
-        <div :style="{ width: `${width}px`, background: 'var(--bg-secondary)', border: '1px solid var(--border-color)' }">
-          Panel width: {{ width }}px
-        </div>
+        <div :style="`${panel} width: ${width}px;`">Panel width: {{ width }}px</div>
         <LayoutResizeHandle
           v-model="width"
           orientation="vertical"
@@ -19,7 +24,63 @@ const width = ref(320)
           :min="240"
           :max="480"
         />
-        <div style="flex: 1; background: var(--bg-tertiary);" />
+        <div :style="`${panel} flex: 1;`" />
+      </div>
+    </Variant>
+
+    <Variant title="Gaps and edge">
+      <div style="display: grid; gap: 1.5rem; padding: 2rem;">
+        <div data-gap="flex-8">
+          <p :style="caption">flex, 8px gutter (compact), handle between the panels</p>
+          <div style="display: flex; height: 8rem; --mint-gutter: 0.5rem;">
+            <div :style="`${panel} width: ${gapWidth}px;`">Left panel</div>
+            <LayoutResizeHandle v-model="gapWidth" orientation="vertical" label="Resize left panel (8px)" :min="200" :max="480" />
+            <div :style="`${panel} flex: 1;`">Right panel</div>
+          </div>
+        </div>
+        <div data-gap="wrapper-12">
+          <p :style="caption">flex, 12px gutter, handle in a gutter-wide wrapper</p>
+          <div style="display: flex; height: 8rem; --mint-gutter: 0.75rem;">
+            <div :style="`${panel} width: ${gapWidth}px;`">Left panel</div>
+            <div style="display: flex; justify-content: center; flex-shrink: 0; width: var(--mint-gutter);">
+              <LayoutResizeHandle v-model="gapWidth" orientation="vertical" label="Resize left panel (12px)" :min="200" :max="480" />
+            </div>
+            <div :style="`${panel} flex: 1;`">Right panel</div>
+          </div>
+        </div>
+        <div data-gap="grid-8">
+          <p :style="caption">grid, 8px track</p>
+          <div :style="`display: grid; grid-template-columns: ${gapWidth}px 0.5rem 1fr; height: 8rem;`">
+            <div :style="panel">Left panel</div>
+            <LayoutResizeHandle
+              v-model="gapWidth"
+              orientation="vertical"
+              label="Resize left panel (grid)"
+              :min="200"
+              :max="480"
+              style="--mint-layout-resize-gap: 0.5rem;"
+            />
+            <div :style="panel">Right panel</div>
+          </div>
+        </div>
+        <div data-gap="edge">
+          <p :style="caption">edge="right", 12px gutter</p>
+          <div style="display: flex; gap: var(--mint-gutter); height: 8rem; --mint-gutter: 0.75rem;">
+            <aside :style="`${panel} position: relative; width: ${edgeWidth}px;`">
+              Sidebar
+              <LayoutResizeHandle v-model="edgeWidth" orientation="vertical" edge="right" label="Resize sidebar" :min="200" :max="480" />
+            </aside>
+            <div :style="`${panel} flex: 1;`">Main</div>
+          </div>
+        </div>
+        <div data-gap="horizontal">
+          <p :style="caption">horizontal, 8px gutter</p>
+          <div style="display: flex; flex-direction: column; height: 14rem; --mint-gutter: 0.5rem;">
+            <div :style="`${panel} flex: 0 0 ${height}%;`">Top panel</div>
+            <LayoutResizeHandle v-model="height" orientation="horizontal" label="Resize top panel" :min="20" :max="80" :step="1" />
+            <div :style="`${panel} flex: 1;`">Bottom panel</div>
+          </div>
+        </div>
       </div>
     </Variant>
   </Story>

package/src/components/SampleSelector.story.vue

@@ -21,6 +21,13 @@ const mockGroups: SampleGroup[] = [
   { name: 'Vehicle', color: '#F59E0B', samples: ['Vehicle_Rep1', 'Vehicle_Rep2', 'Vehicle_Rep3'] },
 ]
 
+// 1024 selected runs in two groups: the long count must not push the actions out.
+const manyRuns = Array.from({ length: 1024 }, (_, i) => `Run_${String(i + 1).padStart(4, '0')}`)
+const manyGroups: SampleGroup[] = [
+  { name: 'Batch A', color: '#3B82F6', samples: manyRuns.slice(0, 512) },
+  { name: 'Batch B', color: '#10B981', samples: manyRuns.slice(512) },
+]
+
 const manualSamples = [
   'Pt001_TumorA_d7_rep1',
   'Pt001_TumorA_d7_rep1_reseq2024',
@@ -136,12 +143,20 @@ function handleSmartGroup(result: AutoGroupResult, state: { groups: SampleGroup[
     </Variant>
 
     <Variant title="Narrow Header">
-      <div style="padding: 2rem; width: 320px;">
-        <SampleSelector
-          :model-value="['Control_Rep1']"
-          :samples="mockSamples"
-          :groups="mockGroups"
-        />
+      <!-- At 17.625rem of header content width and below, the grouping button shows only its icon and the count shortens. -->
+      <div style="display: flex; align-items: flex-start; gap: 2rem; padding: 2rem;">
+        <div v-for="width in [220, 300, 340]" :key="width" :data-width="width" :style="{ width: `${width}px` }">
+          <p style="margin: 0 0 0.5rem; font: 0.75rem var(--font-mono); color: var(--text-secondary);">{{ width }}px</p>
+          <SampleSelector
+            :model-value="['Control_Rep1']"
+            :samples="mockSamples"
+            :groups="mockGroups"
+          />
+        </div>
+        <div data-width="320-long" style="width: 320px; height: 22rem;">
+          <p style="margin: 0 0 0.5rem; font: 0.75rem var(--font-mono); color: var(--text-secondary);">320px, 1024 selected</p>
+          <SampleSelector :model-value="manyRuns" :samples="manyRuns" :groups="manyGroups" />
+        </div>
       </div>
     </Variant>
 

package/src/components/SampleSelector.vue

@@ -256,6 +256,8 @@ function addNewGroup() {
   newGroupName.value = ''
 }
 
+const groupingLabel = computed(() => (props.enableSmartGroup ? 'Smart group' : 'Group'))
+
 /** Selected samples among the resolved list, for the select-all header. */
 const selectedCount = computed(() => resolvedSamples.value.filter(s => props.modelValue.includes(s)).length)
 
@@ -271,16 +273,21 @@ defineExpose({ handleSmartGroupApply })
   <div class="mint-sample-selector">
     <div class="mint-sample-selector__header">
       <span class="mint-sample-selector__title">Samples</span>
-      <span class="mint-sample-selector__selected">{{ selectedCount }} selected</span>
+      <!-- A narrow selector shows "N sel."; screen readers keep "N selected". -->
+      <span class="mint-sample-selector__selected">
+        <span class="mint-sample-selector__selected-full">{{ selectedCount }} selected</span>
+        <span class="mint-sample-selector__selected-short" aria-hidden="true">{{ selectedCount }} sel.</span>
+      </span>
       <div v-if="!isPlaceholderState && enableGrouping" class="mint-sample-selector__header-actions">
         <BaseButton
           variant="ghost"
           size="sm"
           :icon="enableSmartGroup ? WandSparkles : Layers"
-          class="mint-sample-selector__action-btn"
+          :title="groupingLabel"
+          class="mint-sample-selector__action-btn mint-sample-selector__group-btn"
           @click="openGroupingModal(groupingActionMode)"
         >
-          {{ enableSmartGroup ? 'Smart group' : 'Group' }}
+          {{ groupingLabel }}
         </BaseButton>
         <BaseButton
           v-if="internalGroups.length > 0"

package/src/components/SectionCard.story.vue

@@ -107,6 +107,39 @@ function initPlayground() {
       </div>
     </Variant>
 
+    <Variant title="Rows with lead">
+      <div style="padding: 2rem; max-width: 600px; display: grid; gap: 1rem;">
+        <SectionCard title="Experiments" count="3 total" :icon="flaskIcon" accent="experiment" uppercase>
+          <div class="mint-section-card__rows">
+            <a v-for="e in experiments" :key="e.code" href="#" class="mint-section-card__row">
+              <span class="mint-section-card__row-lead">
+                <span style="width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--mint-success)" />
+              </span>
+              <span style="flex: 1; min-width: 0">
+                <span style="display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">{{ e.name }}</span>
+                <span style="display: block; font-family: var(--font-mono); font-size: 0.65625rem; color: var(--text-muted)">{{ e.code }}</span>
+              </span>
+              <span style="flex-shrink: 0; font-size: 0.71875rem; color: var(--text-muted)">{{ e.updated }}</span>
+            </a>
+          </div>
+        </SectionCard>
+        <SectionCard title="Projects" count="2 active" :icon="folderIcon" accent="project" uppercase>
+          <div class="mint-section-card__rows">
+            <a href="#" class="mint-section-card__row">
+              <span class="mint-section-card__row-lead" aria-hidden="true" />
+              <span style="flex: 1; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">Hypoxia metabolic rewiring</span>
+              <span style="font-size: 0.71875rem; color: var(--text-muted)">12 experiments</span>
+            </a>
+            <a href="#" class="mint-section-card__row">
+              <span class="mint-section-card__row-lead" aria-hidden="true" />
+              <span style="flex: 1; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">Serine one-carbon flux</span>
+              <span style="font-size: 0.71875rem; color: var(--text-muted)">7 experiments</span>
+            </a>
+          </div>
+        </SectionCard>
+      </div>
+    </Variant>
+
     <Variant title="Detail card with footer">
       <div style="padding: 2rem; max-width: 600px;">
         <SectionCard title="Analysis artifacts" :count="4" divider="light">

package/src/styles/components/layout-resize-handle.css

@@ -1,26 +1,72 @@
+/* The handle is the gap between two panels: its layout width (horizontal: height)
+   is the gap, --mint-layout-resize-gap or else --mint-gutter (8px compact, 12px
+   normal). It stretches along the panels, and its bar and a 12px hit area are
+   centred in it, the hit area drawn above the neighbouring panels. */
 .mint-layout-resize-handle {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
+  --_size: var(--mint-layout-resize-gap, var(--mint-gutter, 0.75rem));
+  --_hit: 0.75rem;
+  position: relative;
+  z-index: 10;
+  flex: 0 0 auto;
+  align-self: stretch;
   background: transparent;
   cursor: col-resize;
+  outline: none;
 }
 
-.mint-layout-resize-handle--vertical { width: 1rem; min-height: 2.75rem; }
-.mint-layout-resize-handle--horizontal { min-width: 2.75rem; height: 1rem; cursor: row-resize; }
+.mint-layout-resize-handle--vertical {
+  justify-self: center;
+  width: var(--_size);
+  min-height: 2.75rem;
+}
+
+.mint-layout-resize-handle--horizontal {
+  justify-self: stretch;
+  min-width: 2.75rem;
+  height: var(--_size);
+  cursor: row-resize;
+}
+
+/* Hit area and focus ring. Pointer events on it go to the handle. */
+.mint-layout-resize-handle::before {
+  position: absolute;
+  border-radius: var(--radius-sm);
+  content: '';
+}
+
+.mint-layout-resize-handle--vertical::before {
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: var(--_hit);
+  transform: translateX(-50%);
+}
+
+.mint-layout-resize-handle--horizontal::before {
+  top: 50%;
+  right: 0;
+  left: 0;
+  height: var(--_hit);
+  transform: translateY(-50%);
+}
+
+/* Edge handles lie outside the edge and cover exactly the gap. */
 .mint-layout-resize-handle--edge-left,
-.mint-layout-resize-handle--edge-right { position: absolute; top: 0; bottom: 0; z-index: 10; height: auto; }
+.mint-layout-resize-handle--edge-right { position: absolute; top: 0; bottom: 0; }
 .mint-layout-resize-handle--edge-left { left: 0; transform: translateX(-100%); }
 .mint-layout-resize-handle--edge-right { right: 0; transform: translateX(100%); }
 
 .mint-layout-resize-handle__bar {
+  position: absolute;
+  top: 50%;
+  left: 50%;
   display: block;
   width: 0.25rem;
   height: 2.75rem;
   border-radius: 999px;
   background: var(--border-color);
   opacity: 0.72;
+  transform: translate(-50%, -50%);
   transition: background-color 150ms ease, opacity 150ms ease, transform 150ms ease;
 }
 
@@ -36,25 +82,22 @@
 }
 
 .mint-layout-resize-handle--vertical:hover .mint-layout-resize-handle__bar,
-.mint-layout-resize-handle--vertical:focus-visible .mint-layout-resize-handle__bar { transform: scaleX(1.35); }
+.mint-layout-resize-handle--vertical:focus-visible .mint-layout-resize-handle__bar { transform: translate(-50%, -50%) scaleX(1.35); }
 .mint-layout-resize-handle--horizontal:hover .mint-layout-resize-handle__bar,
-.mint-layout-resize-handle--horizontal:focus-visible .mint-layout-resize-handle__bar { transform: scaleY(1.35); }
+.mint-layout-resize-handle--horizontal:focus-visible .mint-layout-resize-handle__bar { transform: translate(-50%, -50%) scaleY(1.35); }
 
-.mint-layout-resize-handle:focus-visible {
+.mint-layout-resize-handle:focus-visible::before {
   outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
+  outline-offset: -2px;
 }
 
-.mint-layout-resize-handle--edge-left:focus-visible,
-.mint-layout-resize-handle--edge-right:focus-visible { outline-offset: -2px; }
-
 .mint-layout-resize-handle[aria-disabled='true'] { cursor: not-allowed; opacity: 0.5; }
 
 @media (prefers-reduced-motion: reduce) {
   .mint-layout-resize-handle__bar { transition: none; }
 }
 
+/* Touch: the handle reserves its full 2.75rem hit area in the layout. */
 @media (pointer: coarse) {
-  .mint-layout-resize-handle--vertical { width: 2.75rem; }
-  .mint-layout-resize-handle--horizontal { height: 2.75rem; }
+  .mint-layout-resize-handle { --_size: 2.75rem; --_hit: 2.75rem; }
 }