@morscherlab/mint-sdk 1.1.7 → 1.1.9

package/src/components/SampleSelector.vue

@@ -5,10 +5,12 @@ import BaseButton from './BaseButton.vue'
 import BaseInput from './BaseInput.vue'
 import AutoGroupModal from './AutoGroupModal.vue'
 import SampleSelectorSampleRow from './SampleSelectorSampleRow.vue'
+import SampleSelectorGroupNode from './SampleSelectorGroupNode.vue'
+import { collectNodeKeys, type SampleGroupTreeContext } from './SampleSelector.tree'
 import type { SampleGroup } from '../types'
 import type { AutoGroupResult } from '../types/auto-group'
 import { useTextSearch } from '../composables/useTextSearch'
-import { useSampleGroups, type SampleMajorGroup } from '../composables/useSampleGroups'
+import { useSampleGroups } from '../composables/useSampleGroups'
 import { useExpansionSet } from '../composables/useExpansionSet'
 import { useExperimentSamples } from '../composables/useExperimentSamples'
 import { useSampleSelectorDrag } from './SampleSelector.drag'
@@ -21,8 +23,7 @@ import {
 } from './SampleSelector.colors'
 import {
   removeSampleFromGroup as removeSampleFromSampleGroup,
-  removeSampleGroup,
-  removeSampleMajorGroup,
+  removeSampleGroups,
 } from './SampleSelector.groups'
 
 interface Props {
@@ -105,8 +106,7 @@ const sampleGroups = useSampleGroups({
   samples: () => resolvedSamples.value,
   groups: internalGroups,
 })
-const hierarchicalGroups = sampleGroups.hierarchicalGroups
-const showHierarchy = sampleGroups.showHierarchy
+const groupTree = sampleGroups.groupTree
 
 const groupingEnabled = computed(() => internalGroups.value.length > 0)
 const ungroupedSamples = sampleGroups.ungroupedSamples
@@ -123,16 +123,12 @@ const {
   isAllSelected,
   toggleSelectAll,
   toggleSample,
-  toggleGroupSamples,
-  toggleMajorGroupSamples,
-  isGroupFullySelected,
-  isGroupPartiallySelected,
-  isMajorGroupFullySelected,
-  isMajorGroupPartiallySelected,
+  toggleSamplesSelection,
+  isFullySelected,
+  isPartiallySelected,
 } = useSampleSelectorSelection({
   selected: () => props.modelValue,
   samples: () => resolvedSamples.value,
-  findGroup: sampleGroups.findGroup,
   emitSelected: samples => emit('update:modelValue', samples),
 })
 
@@ -146,15 +142,7 @@ function isGroupExpanded(groupName: string): boolean {
 }
 
 function expandAllGroups() {
-  const expanded: string[] = []
-  for (const major of hierarchicalGroups.value) {
-    expanded.push(`major:${major.name}`)
-    for (const sub of major.subGroups) {
-      expanded.push(sub.name)
-    }
-  }
-  expanded.push('__ungrouped__')
-  groupExpansion.setExpanded(expanded)
+  groupExpansion.setExpanded([...collectNodeKeys(groupTree.value), '__ungrouped__'])
 }
 
 function collapseAllGroups() {
@@ -177,12 +165,8 @@ function clearGroups() {
   internalGroups.value = []
 }
 
-function deleteMajorGroup(majorGroup: SampleMajorGroup) {
-  internalGroups.value = removeSampleMajorGroup(internalGroups.value, majorGroup)
-}
-
-function deleteGroup(groupName: string) {
-  internalGroups.value = removeSampleGroup(internalGroups.value, groupName)
+function deleteGroups(groupNames: string[]) {
+  internalGroups.value = removeSampleGroups(internalGroups.value, groupNames)
 }
 
 function removeSampleFromGroup(sample: string, groupName: string) {
@@ -190,15 +174,11 @@ function removeSampleFromGroup(sample: string, groupName: string) {
 }
 
 // Color picker
-function openColorPicker(groupName: string, event: Event) {
+function openColorPicker(groupNames: string[], event: Event) {
   event.stopPropagation()
-  editingColor.value = { kind: 'single', name: groupName }
-  colorPickerInput.value?.click()
-}
-
-function openMajorGroupColorPicker(majorGroup: SampleMajorGroup, event: Event) {
-  event.stopPropagation()
-  editingColor.value = { kind: 'family', names: majorGroup.subGroups.map(sg => sg.name) }
+  editingColor.value = groupNames.length === 1
+    ? { kind: 'single', name: groupNames[0] }
+    : { kind: 'family', names: groupNames }
   colorPickerInput.value?.click()
 }
 
@@ -219,6 +199,36 @@ const colorPickerSeed = computed(() => {
   return getSampleGroupColorEditSeed(editingColor.value, getGroupColor)
 })
 
+// Bundle of handlers handed to every level of the recursive group tree.
+const treeContext = computed<SampleGroupTreeContext>(() => ({
+  isExpanded: isGroupExpanded,
+  toggleExpanded: toggleGroupExpanded,
+  isSampleSelected: sample => props.modelValue.includes(sample),
+  isFullySelected,
+  isPartiallySelected,
+  toggleSamples: toggleSamplesSelection,
+  toggleSample,
+  removeGroups: deleteGroups,
+  removeSampleFromGroup,
+  openColorPicker,
+  draggingSample: () => draggingSample.value,
+  dragOverGroup: () => dragOverGroup.value,
+  draggingGroup: () => draggingGroup.value,
+  draggingGroupKind: () => draggingGroupKind.value,
+  reorderTarget: () => reorderTarget.value,
+  reorderPosition: () => reorderPosition.value,
+  onSampleDragStart: handleDragStart,
+  onSampleDragEnd: handleDragEnd,
+  onSampleDragOver: handleDragOver,
+  onSampleDragLeave: handleDragLeave,
+  onSampleDrop: handleDrop,
+  onGroupDragStart: handleGroupDragStart,
+  onGroupDragEnd: handleGroupDragEnd,
+  onGroupDragOver: handleGroupDragOver,
+  onGroupDragLeave: handleGroupDragLeave,
+  onGroupDrop: handleGroupDrop,
+}))
+
 // New group
 function addNewGroup() {
   const newGroup = createSampleGroup(newGroupName.value, internalGroups.value)
@@ -301,291 +311,13 @@ defineExpose({ handleSmartGroupApply })
 
       <!-- Hierarchical Tree -->
       <div class="mint-sample-selector__tree">
-        <!-- Major Groups (when hierarchy is meaningful) -->
-        <template v-if="showHierarchy">
-          <div
-            v-for="majorGroup in hierarchicalGroups"
-            :key="majorGroup.name"
-            class="mint-sample-selector__major-group"
-          >
-            <!-- Major Group Header -->
-            <div
-              :class="[
-                'mint-sample-selector__major-header',
-                draggingGroup === majorGroup.name && draggingGroupKind === 'major' ? 'mint-sample-selector__header--dragging' : '',
-                reorderTarget === majorGroup.name && draggingGroupKind === 'major' && reorderPosition === 'before' ? 'mint-sample-selector__header--drag-over-before' : '',
-                reorderTarget === majorGroup.name && draggingGroupKind === 'major' && reorderPosition === 'after' ? 'mint-sample-selector__header--drag-over-after' : '',
-              ]"
-              draggable="true"
-              @click="toggleGroupExpanded(`major:${majorGroup.name}`)"
-              @dragstart="handleGroupDragStart(majorGroup.name, 'major', $event)"
-              @dragend="handleGroupDragEnd"
-              @dragover="handleGroupDragOver(majorGroup.name, 'major', $event)"
-              @dragleave="handleGroupDragLeave($event)"
-              @drop="handleGroupDrop(majorGroup.name, 'major', $event)"
-            >
-              <svg
-                :class="[
-                  'mint-sample-selector__chevron',
-                  isGroupExpanded(`major:${majorGroup.name}`) ? 'mint-sample-selector__chevron--open' : '',
-                ]"
-                fill="none" stroke="currentColor" viewBox="0 0 24 24"
-              >
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-              </svg>
-
-              <input
-                type="checkbox"
-                :checked="isMajorGroupFullySelected(majorGroup)"
-                :indeterminate="isMajorGroupPartiallySelected(majorGroup)"
-                class="mint-sample-selector__checkbox"
-                :style="{ accentColor: majorGroup.color }"
-                @click.stop
-                @change="toggleMajorGroupSamples(majorGroup)"
-              />
-
-              <button
-                type="button"
-                class="mint-sample-selector__color-dot mint-sample-selector__color-dot--large mint-sample-selector__color-dot--clickable"
-                :style="{ backgroundColor: majorGroup.color }"
-                @click.stop="openMajorGroupColorPicker(majorGroup, $event)"
-                title="Click to change color family"
-              />
-
-              <span class="mint-sample-selector__major-name">{{ majorGroup.name }}</span>
-
-              <span
-                class="mint-sample-selector__count-badge"
-                :style="{ backgroundColor: majorGroup.color + '20', color: majorGroup.color }"
-              >
-                {{ majorGroup.allSamples.length }}
-              </span>
-
-              <button
-                type="button"
-                class="mint-sample-selector__delete-btn mint-sample-selector__delete-btn--hidden"
-                @click.stop="deleteMajorGroup(majorGroup)"
-                title="Remove major group"
-              >
-                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
-            </div>
-
-            <!-- Sub Groups (collapsible) -->
-            <Transition name="mint-collapse">
-              <div
-                v-if="isGroupExpanded(`major:${majorGroup.name}`)"
-                class="mint-sample-selector__sub-groups"
-                :style="{ borderColor: majorGroup.color + '30' }"
-              >
-              <div
-                v-for="subGroup in majorGroup.subGroups"
-                :key="subGroup.name"
-                :class="[
-                  'mint-sample-selector__sub-group',
-                  dragOverGroup === subGroup.name ? 'mint-sample-selector__sub-group--drag-over' : '',
-                ]"
-                @dragover="handleDragOver(subGroup.name, $event)"
-                @dragleave="handleDragLeave"
-                @drop="handleDrop(subGroup.name, $event)"
-              >
-                <!-- Sub Group Header -->
-                <div
-                  :class="[
-                    'mint-sample-selector__sub-header',
-                    draggingGroup === subGroup.name && draggingGroupKind === 'sub' ? 'mint-sample-selector__header--dragging' : '',
-                    reorderTarget === subGroup.name && draggingGroupKind === 'sub' && reorderPosition === 'before' ? 'mint-sample-selector__header--drag-over-before' : '',
-                    reorderTarget === subGroup.name && draggingGroupKind === 'sub' && reorderPosition === 'after' ? 'mint-sample-selector__header--drag-over-after' : '',
-                  ]"
-                  draggable="true"
-                  @click="toggleGroupExpanded(subGroup.name)"
-                  @dragstart="handleGroupDragStart(subGroup.name, 'sub', $event)"
-                  @dragend="handleGroupDragEnd"
-                  @dragover="handleGroupDragOver(subGroup.name, 'sub', $event)"
-                  @dragleave="handleGroupDragLeave($event)"
-                  @drop="handleGroupDrop(subGroup.name, 'sub', $event)"
-                >
-                  <svg
-                    :class="[
-                      'mint-sample-selector__chevron mint-sample-selector__chevron--small',
-                      isGroupExpanded(subGroup.name) ? 'mint-sample-selector__chevron--open' : '',
-                    ]"
-                    fill="none" stroke="currentColor" viewBox="0 0 24 24"
-                  >
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-                  </svg>
-
-                  <input
-                    type="checkbox"
-                    :checked="isGroupFullySelected(subGroup.name)"
-                    :indeterminate="isGroupPartiallySelected(subGroup.name)"
-                    class="mint-sample-selector__checkbox mint-sample-selector__checkbox--small"
-                    :style="{ accentColor: subGroup.displayColor }"
-                    @click.stop
-                    @change="toggleGroupSamples(subGroup.name)"
-                  />
-
-                  <div
-                    class="mint-sample-selector__color-dot"
-                    :style="{ backgroundColor: subGroup.displayColor }"
-                    aria-hidden="true"
-                  />
-
-                  <span class="mint-sample-selector__sub-name">{{ subGroup.name }}</span>
-
-                  <span
-                    class="mint-sample-selector__count-badge mint-sample-selector__count-badge--small"
-                    :style="{ backgroundColor: subGroup.displayBg, color: subGroup.displayColor }"
-                  >
-                    {{ subGroup.samples.length }}
-                  </span>
-
-                  <button
-                    type="button"
-                    class="mint-sample-selector__delete-btn mint-sample-selector__delete-btn--hidden"
-                    @click.stop="deleteGroup(subGroup.name)"
-                    title="Remove sub group"
-                  >
-                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                  </button>
-                </div>
-
-                <!-- Samples (collapsible) -->
-                <Transition name="mint-collapse">
-                  <div
-                    v-if="isGroupExpanded(subGroup.name)"
-                    class="mint-sample-selector__samples"
-                    :style="{ borderColor: subGroup.displayBorder }"
-                  >
-                    <SampleSelectorSampleRow
-                      v-for="sample in subGroup.samples"
-                      :key="sample"
-                      :sample="sample"
-                      :selected="modelValue.includes(sample)"
-                      :dragging="draggingSample === sample"
-                      :accent-color="subGroup.displayColor"
-                      checkbox-size="tiny"
-                      removable
-                      @dragstart="handleDragStart(sample, subGroup.name, $event)"
-                      @dragend="handleDragEnd"
-                      @toggle="toggleSample(sample)"
-                      @remove="removeSampleFromGroup(sample, subGroup.name)"
-                    />
-                  </div>
-                </Transition>
-              </div>
-            </div>
-          </Transition>
-        </div>
-        </template>
-
-        <!-- Flat Groups (when no meaningful hierarchy - e.g., level 1) -->
-        <template v-else>
-          <div
-            v-for="group in internalGroups"
-            :key="group.name"
-            :class="[
-              'mint-sample-selector__sub-group',
-              dragOverGroup === group.name ? 'mint-sample-selector__sub-group--drag-over' : '',
-            ]"
-            @dragover="handleDragOver(group.name, $event)"
-            @dragleave="handleDragLeave"
-            @drop="handleDrop(group.name, $event)"
-          >
-            <!-- Group Header -->
-            <div
-              :class="[
-                'mint-sample-selector__major-header',
-                draggingGroup === group.name && draggingGroupKind === 'flat' ? 'mint-sample-selector__header--dragging' : '',
-                reorderTarget === group.name && draggingGroupKind === 'flat' && reorderPosition === 'before' ? 'mint-sample-selector__header--drag-over-before' : '',
-                reorderTarget === group.name && draggingGroupKind === 'flat' && reorderPosition === 'after' ? 'mint-sample-selector__header--drag-over-after' : '',
-              ]"
-              draggable="true"
-              @click="toggleGroupExpanded(group.name)"
-              @dragstart="handleGroupDragStart(group.name, 'flat', $event)"
-              @dragend="handleGroupDragEnd"
-              @dragover="handleGroupDragOver(group.name, 'flat', $event)"
-              @dragleave="handleGroupDragLeave($event)"
-              @drop="handleGroupDrop(group.name, 'flat', $event)"
-            >
-              <svg
-                :class="[
-                  'mint-sample-selector__chevron',
-                  isGroupExpanded(group.name) ? 'mint-sample-selector__chevron--open' : '',
-                ]"
-                fill="none" stroke="currentColor" viewBox="0 0 24 24"
-              >
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-              </svg>
-
-              <input
-                type="checkbox"
-                :checked="isGroupFullySelected(group.name)"
-                :indeterminate="isGroupPartiallySelected(group.name)"
-                class="mint-sample-selector__checkbox"
-                :style="{ accentColor: group.color }"
-                @click.stop
-                @change="toggleGroupSamples(group.name)"
-              />
-
-              <button
-                type="button"
-                class="mint-sample-selector__color-dot mint-sample-selector__color-dot--large mint-sample-selector__color-dot--clickable"
-                :style="{ backgroundColor: group.color }"
-                @click.stop="openColorPicker(group.name, $event)"
-                title="Click to change color"
-              />
-
-              <span class="mint-sample-selector__major-name">{{ group.name }}</span>
-
-              <span
-                class="mint-sample-selector__count-badge"
-                :style="{ backgroundColor: group.color + '20', color: group.color }"
-              >
-                {{ group.samples.length }}
-              </span>
-
-              <button
-                type="button"
-                class="mint-sample-selector__delete-btn mint-sample-selector__delete-btn--hidden"
-                @click.stop="deleteGroup(group.name)"
-                title="Remove group"
-              >
-                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
-            </div>
-
-            <!-- Samples (collapsible) -->
-            <Transition name="mint-collapse">
-              <div
-                v-if="isGroupExpanded(group.name)"
-                class="mint-sample-selector__samples"
-                :style="{ borderColor: group.color + '40' }"
-              >
-                <SampleSelectorSampleRow
-                  v-for="sample in group.samples"
-                  :key="sample"
-                  :sample="sample"
-                  :selected="modelValue.includes(sample)"
-                  :dragging="draggingSample === sample"
-                  :accent-color="group.color"
-                  checkbox-size="tiny"
-                  removable
-                  @dragstart="handleDragStart(sample, group.name, $event)"
-                  @dragend="handleDragEnd"
-                  @toggle="toggleSample(sample)"
-                  @remove="removeSampleFromGroup(sample, group.name)"
-                />
-              </div>
-            </Transition>
-          </div>
-        </template>
+        <SampleSelectorGroupNode
+          v-for="node in groupTree"
+          :key="node.key"
+          :node="node"
+          :depth="0"
+          :ctx="treeContext"
+        />
 
         <!-- Empty state -->
         <div v-if="internalGroups.length === 0" class="mint-sample-selector__empty">

package/src/components/SampleSelectorGroupNode.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+/**
+ * One row of the sample-selector group hierarchy, rendered recursively so a
+ * grouping of any depth (Tissue → Dose → Timepoint → samples) nests properly.
+ *
+ * Roots carry the family affordances (large dot, colour-family picker) and
+ * leaves carry the group affordances (sample drop target, sample rows); the
+ * levels in between are pure path nodes that aggregate their descendants.
+ */
+import { computed } from 'vue'
+import SampleSelectorSampleRow from './SampleSelectorSampleRow.vue'
+import type { SampleGroupNode } from '../composables/useSampleGroups'
+import { collectLeafGroupNames, type SampleGroupTreeContext } from './SampleSelector.tree'
+
+interface Props {
+  node: SampleGroupNode
+  depth: number
+  ctx: SampleGroupTreeContext
+}
+
+const props = defineProps<Props>()
+
+const isRoot = computed(() => props.depth === 0)
+const isLeaf = computed(() => props.node.children.length === 0)
+const expanded = computed(() => props.ctx.isExpanded(props.node.key))
+const leafGroupNames = computed(() => collectLeafGroupNames(props.node))
+/** Roots reorder as a family, leaves as individual groups; path nodes stay put. */
+const dragKind = computed(() => (isRoot.value ? 'major' : isLeaf.value ? 'sub' : null))
+/** Reorder drags address a family by its label but a group by its full name. */
+const dragName = computed(() =>
+  isRoot.value ? props.node.label : (props.node.group?.name ?? props.node.label),
+)
+const isDragging = computed(
+  () => dragKind.value !== null
+    && props.ctx.draggingGroup() === dragName.value
+    && props.ctx.draggingGroupKind() === dragKind.value,
+)
+const reorderEdge = computed(() => {
+  if (dragKind.value === null) return null
+  if (props.ctx.reorderTarget() !== dragName.value) return null
+  if (props.ctx.draggingGroupKind() !== dragKind.value) return null
+  return props.ctx.reorderPosition()
+})
+
+function onHeaderDragStart(event: DragEvent) {
+  if (dragKind.value === null) return
+  props.ctx.onGroupDragStart(dragName.value, dragKind.value, event)
+}
+function onHeaderDragOver(event: DragEvent) {
+  if (dragKind.value === null) return
+  props.ctx.onGroupDragOver(dragName.value, dragKind.value, event)
+}
+function onHeaderDrop(event: DragEvent) {
+  if (dragKind.value === null) return
+  props.ctx.onGroupDrop(dragName.value, dragKind.value, event)
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      isRoot ? 'mint-sample-selector__major-group' : 'mint-sample-selector__sub-group',
+      isLeaf && ctx.dragOverGroup() === node.group?.name
+        ? 'mint-sample-selector__sub-group--drag-over'
+        : '',
+    ]"
+    v-on="isLeaf && node.group
+      ? {
+        dragover: (e: DragEvent) => ctx.onSampleDragOver(node.group!.name, e),
+        dragleave: ctx.onSampleDragLeave,
+        drop: (e: DragEvent) => ctx.onSampleDrop(node.group!.name, e),
+      }
+      : {}"
+  >
+    <!-- Header -->
+    <div
+      :class="[
+        isRoot ? 'mint-sample-selector__major-header' : 'mint-sample-selector__sub-header',
+        isDragging ? 'mint-sample-selector__header--dragging' : '',
+        reorderEdge === 'before' ? 'mint-sample-selector__header--drag-over-before' : '',
+        reorderEdge === 'after' ? 'mint-sample-selector__header--drag-over-after' : '',
+      ]"
+      :draggable="dragKind !== null"
+      @click="ctx.toggleExpanded(node.key)"
+      @dragstart="onHeaderDragStart"
+      @dragend="ctx.onGroupDragEnd"
+      @dragover="onHeaderDragOver"
+      @dragleave="ctx.onGroupDragLeave($event)"
+      @drop="onHeaderDrop"
+    >
+      <svg
+        :class="[
+          'mint-sample-selector__chevron',
+          isRoot ? '' : 'mint-sample-selector__chevron--small',
+          expanded ? 'mint-sample-selector__chevron--open' : '',
+        ]"
+        fill="none" stroke="currentColor" viewBox="0 0 24 24"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+      </svg>
+
+      <input
+        type="checkbox"
+        :checked="ctx.isFullySelected(node.allSamples)"
+        :indeterminate="ctx.isPartiallySelected(node.allSamples)"
+        :class="[
+          'mint-sample-selector__checkbox',
+          isRoot ? '' : 'mint-sample-selector__checkbox--small',
+        ]"
+        :style="{ accentColor: node.color }"
+        :aria-label="`Select ${node.label}`"
+        @click.stop
+        @change="ctx.toggleSamples(node.allSamples)"
+      />
+
+      <button
+        v-if="isRoot"
+        type="button"
+        class="mint-sample-selector__color-dot mint-sample-selector__color-dot--large mint-sample-selector__color-dot--clickable"
+        :style="{ backgroundColor: node.color }"
+        :title="`Change ${node.label} color family`"
+        :aria-label="`Change ${node.label} color family`"
+        @click.stop="ctx.openColorPicker(leafGroupNames, $event)"
+      />
+      <div
+        v-else
+        class="mint-sample-selector__color-dot"
+        :style="{ backgroundColor: node.color }"
+        aria-hidden="true"
+      />
+
+      <span
+        :class="isRoot ? 'mint-sample-selector__major-name' : 'mint-sample-selector__sub-name'"
+        :title="node.group?.name ?? node.label"
+      >{{ node.label }}</span>
+
+      <span
+        :class="[
+          'mint-sample-selector__count-badge',
+          isRoot ? '' : 'mint-sample-selector__count-badge--small',
+        ]"
+        :style="{ backgroundColor: node.displayBg, color: node.color }"
+      >
+        {{ node.allSamples.length }}
+      </span>
+
+      <button
+        type="button"
+        class="mint-sample-selector__delete-btn mint-sample-selector__delete-btn--hidden"
+        :title="`Remove ${node.label}`"
+        :aria-label="`Remove ${node.label}`"
+        @click.stop="ctx.removeGroups(leafGroupNames)"
+      >
+        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Children: nested nodes, or the sample rows on a leaf -->
+    <Transition name="mint-collapse">
+      <div
+        v-if="expanded && !isLeaf"
+        class="mint-sample-selector__sub-groups"
+        :style="{ borderColor: node.displayBorder }"
+      >
+        <SampleSelectorGroupNode
+          v-for="child in node.children"
+          :key="child.key"
+          :node="child"
+          :depth="depth + 1"
+          :ctx="ctx"
+        />
+      </div>
+      <div
+        v-else-if="expanded && node.group"
+        class="mint-sample-selector__samples"
+        :style="{ borderColor: node.displayBorder }"
+      >
+        <SampleSelectorSampleRow
+          v-for="sample in node.group.samples"
+          :key="sample"
+          :sample="sample"
+          :selected="ctx.isSampleSelected(sample)"
+          :dragging="ctx.draggingSample() === sample"
+          :accent-color="node.color"
+          checkbox-size="tiny"
+          removable
+          @dragstart="(e: DragEvent) => ctx.onSampleDragStart(sample, node.group!.name, e)"
+          @dragend="ctx.onSampleDragEnd"
+          @toggle="ctx.toggleSample(sample)"
+          @remove="ctx.removeSampleFromGroup(sample, node.group!.name)"
+        />
+      </div>
+    </Transition>
+  </div>
+</template>

package/src/components/SmartGroup.types.ts

@@ -58,6 +58,11 @@ export interface SmartGroupFieldRecipeProps {
   // events instead of running its own fixture grouping logic.
   /** Controls the field toggles; when set, clicking a toggle emits `toggle`. */
   enabled?: boolean[]
+  /**
+   * Per-card 1-based hierarchy layer (1 = the sample selector's major group),
+   * `null` for cards not grouped by. When set, reorder clicks emit `move`.
+   */
+  layers?: (number | null)[]
   /** Pre-computed resulting groups; when set, the rail renders these directly. */
   groups?: FieldRecipeGroup[]
   /** QC summary chip to show in the rail; `null` hides it (e.g. when mixed). */

package/src/components/SmartGroupFieldRecipe.groups.ts

@@ -42,15 +42,19 @@ export interface FieldRecipeSummary {
 
 /**
  * Build the ordered group list from whichever fields are switched on.
- * Returns an empty list when no field is active.
+ * Returns an empty list when no field is active. `layerOrder` (field indices
+ * in layer order) overrides the default field-order joining of the group name.
  */
 export function computeFieldGroups(
   samples: SmartGroupSampleRecord[],
   fields: SmartGroupField[],
   on: boolean[],
   palette: string[],
+  layerOrder?: readonly number[],
 ): FieldRecipeGroup[] {
-  const keys = fields.filter((_, i) => on[i]).map(field => field.key)
+  const keys = layerOrder
+    ? layerOrder.filter(i => on[i]).map(i => fields[i].key)
+    : fields.filter((_, i) => on[i]).map(field => field.key)
   if (keys.length === 0) return []
 
   const order: string[] = []