@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/SampleSelector.vue

@@ -0,0 +1,1033 @@
+<script setup lang="ts">
+/** Interactive sample list with drag-and-drop group assignment, color labeling, and smart-group support. */
+import { ref, computed } from 'vue'
+import BaseButton from './BaseButton.vue'
+import BaseInput from './BaseInput.vue'
+import AutoGroupModal from './AutoGroupModal.vue'
+import type { SampleGroup } from '../types'
+import type { AutoGroupResult } from '../types/auto-group'
+import { deriveShade } from '../utils/color'
+import { DEFAULT_COLORS } from '../composables/useAutoGroup'
+
+interface Props {
+  samples: string[]
+  modelValue: string[]
+  groups?: SampleGroup[]
+  enableGrouping?: boolean
+  enableSmartGroup?: boolean
+  experimentId?: number
+  designData?: Record<string, unknown>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  groups: () => [],
+  enableGrouping: true,
+  enableSmartGroup: true,
+  experimentId: undefined,
+  designData: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [samples: string[]]
+  'update:groups': [groups: SampleGroup[]]
+  smartGroup: [result: AutoGroupResult]
+}>()
+
+// UI State
+type ColorEdit =
+  | { kind: 'single'; name: string }
+  | { kind: 'family'; names: string[] }
+
+const showSmartGroupModal = ref(false)
+const newGroupName = ref('')
+const editingColor = ref<ColorEdit | null>(null)
+const colorPickerInput = ref<HTMLInputElement | null>(null)
+const expandedGroups = ref<Record<string, boolean>>({})
+const searchQuery = ref('')
+
+// Sample Drag State
+const draggingSample = ref<string | null>(null)
+const dragSourceGroup = ref<string | null>(null)
+const dragOverGroup = ref<string | null>(null)
+
+// Group-Reorder Drag State
+type GroupDragKind = 'major' | 'sub' | 'flat'
+const draggingGroup = ref<string | null>(null)
+const draggingGroupKind = ref<GroupDragKind | null>(null)
+const reorderTarget = ref<string | null>(null)
+const reorderPosition = ref<'before' | 'after' | null>(null)
+
+// Computed: groups from props
+const internalGroups = computed({
+  get: () => props.groups,
+  set: (value) => emit('update:groups', value),
+})
+
+interface DisplaySubGroup extends SampleGroup {
+  displayColor: string
+  // Pre-built `displayColor + alpha` strings hoisted out of the template so
+  // each render re-uses the same string reference instead of re-allocating.
+  displayBg: string
+  displayBorder: string
+}
+
+interface MajorGroup {
+  name: string
+  color: string
+  subGroups: DisplaySubGroup[]
+  allSamples: string[]
+}
+
+const hierarchicalGroups = computed<MajorGroup[]>(() => {
+  const groups = internalGroups.value
+  if (groups.length === 0) return []
+
+  // Detect separator: use '/' if any group name contains it, otherwise '_'
+  const separator = groups.some(g => g.name.includes('/')) ? '/' : '_'
+  const majorGroupMap: Record<string, SampleGroup[]> = {}
+
+  for (const group of groups) {
+    const parts = group.name.split(separator)
+    // Use first part as major group, or full name if no separator
+    const majorPrefix = parts.length > 1 ? parts[0] : group.name
+
+    if (!majorGroupMap[majorPrefix]) {
+      majorGroupMap[majorPrefix] = []
+    }
+    majorGroupMap[majorPrefix].push(group)
+  }
+
+  const result: MajorGroup[] = []
+
+  // Preserve insertion order from internalGroups so manual drag-reorder sticks.
+  for (const [majorName, subGroups] of Object.entries(majorGroupMap)) {
+    const allSamples = subGroups.flatMap(g => g.samples)
+    const color = subGroups[0]?.color || '#3B82F6'
+    const displaySubs: DisplaySubGroup[] = subGroups.map((sub, i) => {
+      const displayColor = deriveShade(color, i, subGroups.length)
+      return {
+        ...sub,
+        displayColor,
+        displayBg: displayColor + '20',
+        displayBorder: displayColor + '40',
+      }
+    })
+
+    result.push({ name: majorName, color, subGroups: displaySubs, allSamples })
+  }
+
+  return result
+})
+
+// Check if hierarchy is meaningful (major groups have multiple sub-groups)
+// If each major group only has 1 sub-group with same name, show flat view instead
+const showHierarchy = computed(() => {
+  const groups = hierarchicalGroups.value
+  if (groups.length === 0) return false
+
+  // Show hierarchy if any major group has multiple sub-groups
+  // OR if major group name differs from its sub-group name
+  return groups.some(major =>
+    major.subGroups.length > 1 ||
+    (major.subGroups.length === 1 && major.name !== major.subGroups[0].name)
+  )
+})
+
+const groupingEnabled = computed(() => internalGroups.value.length > 0)
+
+const ungroupedSamples = computed(() => {
+  const groupedSamples = new Set(
+    internalGroups.value.flatMap(g => g.samples)
+  )
+  return props.samples.filter(s => !groupedSamples.has(s))
+})
+
+const filteredSamples = computed(() => {
+  if (!searchQuery.value.trim()) return props.samples
+  const query = searchQuery.value.toLowerCase()
+  return props.samples.filter(s => s.toLowerCase().includes(query))
+})
+
+
+// Selection state
+const isAllSelected = computed(() =>
+  props.samples.length > 0 && props.modelValue.length === props.samples.length
+)
+
+// Toggle functions
+function toggleSelectAll() {
+  if (isAllSelected.value) {
+    emit('update:modelValue', [])
+  } else {
+    emit('update:modelValue', [...props.samples])
+  }
+}
+
+function toggleSample(sample: string) {
+  const newSelection = props.modelValue.includes(sample)
+    ? props.modelValue.filter(s => s !== sample)
+    : [...props.modelValue, sample]
+  emit('update:modelValue', newSelection)
+}
+
+function toggleSamplesSelection(samples: string[]) {
+  const allSelected = samples.every(s => props.modelValue.includes(s))
+  const newSelection = allSelected
+    ? props.modelValue.filter(s => !samples.includes(s))
+    : [...props.modelValue, ...samples.filter(s => !props.modelValue.includes(s))]
+
+  emit('update:modelValue', newSelection)
+}
+
+function toggleGroupSamples(groupName: string) {
+  const group = internalGroups.value.find(g => g.name === groupName)
+  if (!group) return
+  toggleSamplesSelection(group.samples)
+}
+
+function toggleMajorGroupSamples(majorGroup: MajorGroup) {
+  toggleSamplesSelection(majorGroup.allSamples)
+}
+
+// Selection state checks
+function isFullySelected(samples: string[]): boolean {
+  return samples.length > 0 && samples.every(s => props.modelValue.includes(s))
+}
+
+function isPartiallySelected(samples: string[]): boolean {
+  if (samples.length === 0) return false
+  const selectedCount = samples.filter(s => props.modelValue.includes(s)).length
+  return selectedCount > 0 && selectedCount < samples.length
+}
+
+function isGroupFullySelected(groupName: string): boolean {
+  const group = internalGroups.value.find(g => g.name === groupName)
+  return group ? isFullySelected(group.samples) : false
+}
+
+function isGroupPartiallySelected(groupName: string): boolean {
+  const group = internalGroups.value.find(g => g.name === groupName)
+  return group ? isPartiallySelected(group.samples) : false
+}
+
+function isMajorGroupFullySelected(majorGroup: MajorGroup): boolean {
+  return isFullySelected(majorGroup.allSamples)
+}
+
+function isMajorGroupPartiallySelected(majorGroup: MajorGroup): boolean {
+  return isPartiallySelected(majorGroup.allSamples)
+}
+
+// Expand/collapse
+function toggleGroupExpanded(groupName: string) {
+  expandedGroups.value[groupName] = !expandedGroups.value[groupName]
+}
+
+function isGroupExpanded(groupName: string): boolean {
+  return !!expandedGroups.value[groupName]
+}
+
+function expandAllGroups() {
+  const expanded: Record<string, boolean> = {}
+  for (const major of hierarchicalGroups.value) {
+    expanded[`major:${major.name}`] = true
+    for (const sub of major.subGroups) {
+      expanded[sub.name] = true
+    }
+  }
+  expanded['__ungrouped__'] = true
+  expandedGroups.value = expanded
+}
+
+function collapseAllGroups() {
+  expandedGroups.value = {}
+}
+
+// Smart group
+function handleSmartGroupApply(result: AutoGroupResult) {
+  emit('smartGroup', result)
+  emit('update:groups', result.groups)
+}
+
+// Group management
+function clearGroups() {
+  internalGroups.value = []
+}
+
+function deleteMajorGroup(majorGroup: MajorGroup) {
+  internalGroups.value = internalGroups.value.filter(
+    g => !majorGroup.subGroups.some(sg => sg.name === g.name)
+  )
+}
+
+function deleteGroup(groupName: string) {
+  internalGroups.value = internalGroups.value.filter(g => g.name !== groupName)
+}
+
+function removeSampleFromGroup(sample: string, groupName: string) {
+  internalGroups.value = internalGroups.value.map(g =>
+    g.name === groupName
+      ? { ...g, samples: g.samples.filter((s: string) => s !== sample) }
+      : g
+  )
+}
+
+// Drag and Drop handlers
+function handleDragStart(sample: string, sourceGroup: string | null, event: DragEvent) {
+  draggingSample.value = sample
+  dragSourceGroup.value = sourceGroup
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData('text/plain', sample)
+  }
+}
+
+function resetDragState() {
+  draggingSample.value = null
+  dragSourceGroup.value = null
+  dragOverGroup.value = null
+}
+
+function handleDragEnd() {
+  resetDragState()
+}
+
+function handleDragOver(groupName: string, event: DragEvent) {
+  // Only accept this drop target when a sample is being dragged; group drags are handled separately.
+  if (!draggingSample.value) return
+  event.preventDefault()
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'move'
+  }
+  dragOverGroup.value = groupName
+}
+
+function handleDragLeave() {
+  dragOverGroup.value = null
+}
+
+function handleDrop(targetGroupName: string, event: DragEvent) {
+  if (!draggingSample.value) return
+  event.preventDefault()
+
+  const sample = draggingSample.value
+  const sourceGroup = dragSourceGroup.value
+
+  if (sourceGroup === targetGroupName) {
+    resetDragState()
+    return
+  }
+
+  internalGroups.value = internalGroups.value.map(g => {
+    if (sourceGroup && g.name === sourceGroup) {
+      return { ...g, samples: g.samples.filter((s: string) => s !== sample) }
+    }
+    if (g.name === targetGroupName && !g.samples.includes(sample)) {
+      return { ...g, samples: [...g.samples, sample] }
+    }
+    return g
+  })
+
+  resetDragState()
+}
+
+// Group reorder helpers
+function detectSeparator(groups: SampleGroup[]): string {
+  return groups.some(g => g.name.includes('/')) ? '/' : '_'
+}
+
+function getMajorPrefix(groupName: string, separator: string): string {
+  const parts = groupName.split(separator)
+  return parts.length > 1 ? parts[0] : groupName
+}
+
+function handleGroupDragStart(name: string, kind: GroupDragKind, event: DragEvent) {
+  draggingGroup.value = name
+  draggingGroupKind.value = kind
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData('text/plain', `mld-group:${name}`)
+  }
+}
+
+function handleGroupDragEnd() {
+  draggingGroup.value = null
+  draggingGroupKind.value = null
+  reorderTarget.value = null
+  reorderPosition.value = null
+}
+
+function handleGroupDragOver(name: string, kind: GroupDragKind, event: DragEvent) {
+  if (!draggingGroup.value || draggingGroupKind.value !== kind) return
+  if (draggingGroup.value === name) return
+
+  // Sub-group reorder is restricted to siblings under the same major prefix —
+  // crossing majors would silently rename the group, which is too magical.
+  if (kind === 'sub') {
+    const sep = detectSeparator(internalGroups.value)
+    if (getMajorPrefix(draggingGroup.value, sep) !== getMajorPrefix(name, sep)) return
+  }
+
+  event.preventDefault()
+  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'
+
+  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
+  reorderTarget.value = name
+  reorderPosition.value = event.clientY < rect.top + rect.height / 2 ? 'before' : 'after'
+}
+
+function handleGroupDragLeave(event: DragEvent) {
+  const cur = event.currentTarget as HTMLElement
+  const rel = event.relatedTarget as Node | null
+  if (rel && cur.contains(rel)) return
+  reorderTarget.value = null
+  reorderPosition.value = null
+}
+
+function handleGroupDrop(name: string, kind: GroupDragKind, event: DragEvent) {
+  if (!draggingGroup.value || draggingGroupKind.value !== kind) {
+    handleGroupDragEnd()
+    return
+  }
+  const position = reorderPosition.value
+  if (!position || draggingGroup.value === name) {
+    handleGroupDragEnd()
+    return
+  }
+
+  event.preventDefault()
+
+  if (kind === 'major') {
+    moveMajorGroup(draggingGroup.value, name, position)
+  } else {
+    moveGroup(draggingGroup.value, name, position)
+  }
+
+  handleGroupDragEnd()
+}
+
+function moveGroup(source: string, target: string, position: 'before' | 'after') {
+  if (source === target) return
+  const groups = [...internalGroups.value]
+  const srcIdx = groups.findIndex(g => g.name === source)
+  if (srcIdx === -1) return
+  const [item] = groups.splice(srcIdx, 1)
+  const targetIdx = groups.findIndex(g => g.name === target)
+  if (targetIdx === -1) return
+  groups.splice(position === 'before' ? targetIdx : targetIdx + 1, 0, item)
+  internalGroups.value = groups
+}
+
+function moveMajorGroup(source: string, target: string, position: 'before' | 'after') {
+  if (source === target) return
+  const groups = [...internalGroups.value]
+  const sep = detectSeparator(groups)
+
+  const isSource = (g: SampleGroup) => getMajorPrefix(g.name, sep) === source
+  const isTarget = (g: SampleGroup) => getMajorPrefix(g.name, sep) === target
+
+  const sourceGroups = groups.filter(isSource)
+  if (sourceGroups.length === 0) return
+  const remaining = groups.filter(g => !isSource(g))
+
+  let firstTarget = -1
+  let lastTarget = -1
+  remaining.forEach((g, i) => {
+    if (isTarget(g)) {
+      if (firstTarget === -1) firstTarget = i
+      lastTarget = i
+    }
+  })
+  if (firstTarget === -1) return
+
+  const insertIdx = position === 'before' ? firstTarget : lastTarget + 1
+  remaining.splice(insertIdx, 0, ...sourceGroups)
+  internalGroups.value = remaining
+}
+
+// Color picker
+function openColorPicker(groupName: string, event: Event) {
+  event.stopPropagation()
+  editingColor.value = { kind: 'single', name: groupName }
+  colorPickerInput.value?.click()
+}
+
+function openMajorGroupColorPicker(majorGroup: MajorGroup, event: Event) {
+  event.stopPropagation()
+  editingColor.value = { kind: 'family', names: majorGroup.subGroups.map(sg => sg.name) }
+  colorPickerInput.value?.click()
+}
+
+function handleColorChange(event: Event) {
+  const edit = editingColor.value
+  if (!edit) return
+
+  const newColor = (event.target as HTMLInputElement).value
+  // For a family edit, every sub-group gets the new seed; the hierarchical
+  // computed re-derives shades from it.
+  const targets = edit.kind === 'family' ? new Set(edit.names) : new Set([edit.name])
+  internalGroups.value = internalGroups.value.map(g =>
+    targets.has(g.name) ? { ...g, color: newColor } : g,
+  )
+  editingColor.value = null
+}
+
+function getGroupColor(groupName: string): string {
+  const group = internalGroups.value.find(g => g.name === groupName)
+  return group?.color || '#3B82F6'
+}
+
+const colorPickerSeed = computed(() => {
+  const edit = editingColor.value
+  if (!edit) return '#3B82F6'
+  return getGroupColor(edit.kind === 'family' ? edit.names[0] : edit.name)
+})
+
+// New group
+function addNewGroup() {
+  if (!newGroupName.value.trim()) return
+
+  const usedColors = new Set(internalGroups.value.map(g => g.color))
+  const availableColor = DEFAULT_COLORS.find(c => !usedColors.has(c)) || DEFAULT_COLORS[0]
+
+  const newGroup: SampleGroup = {
+    name: newGroupName.value.trim(),
+    color: availableColor,
+    samples: [],
+  }
+
+  internalGroups.value = [...internalGroups.value, newGroup]
+  newGroupName.value = ''
+}
+
+</script>
+
+<template>
+  <div class="mld-sample-selector">
+    <!-- Select All Row -->
+    <label class="mld-sample-selector__select-all">
+      <input
+        type="checkbox"
+        :checked="isAllSelected"
+        @change="toggleSelectAll"
+        class="mld-sample-selector__checkbox"
+      />
+      <span class="mld-sample-selector__select-all-label">Select All</span>
+      <span class="mld-sample-selector__select-all-count">{{ samples.length }} samples</span>
+    </label>
+
+    <!-- Action Buttons Row -->
+    <div v-if="enableGrouping" class="mld-sample-selector__actions">
+      <div class="mld-sample-selector__actions-row">
+        <!-- Smart Group Button -->
+        <BaseButton
+          v-if="enableSmartGroup"
+          :variant="groupingEnabled ? 'primary' : 'secondary'"
+          size="sm"
+          :disabled="samples.length === 0"
+          class="mld-sample-selector__action-btn"
+          @click="showSmartGroupModal = true"
+        >
+          <svg class="mld-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+          </svg>
+          <span>Smart Group</span>
+        </BaseButton>
+
+        <!-- Reset Button -->
+        <BaseButton
+          variant="ghost"
+          size="sm"
+          :disabled="internalGroups.length === 0"
+          class="mld-sample-selector__action-btn mld-sample-selector__action-btn--reset"
+          @click="clearGroups"
+          title="Clear all groups"
+        >
+          <svg class="mld-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+          </svg>
+        </BaseButton>
+      </div>
+    </div>
+
+    <!-- Grouped View -->
+    <div v-if="groupingEnabled" class="mld-sample-selector__grouped">
+      <!-- Groups Header -->
+      <div class="mld-sample-selector__groups-header">
+        <span class="mld-sample-selector__groups-title">Groups ({{ internalGroups.length }})</span>
+        <div class="mld-sample-selector__groups-controls">
+          <button type="button" class="mld-sample-selector__expand-btn" @click="expandAllGroups" title="Expand all">
+            <svg class="mld-sample-selector__expand-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+          <button type="button" class="mld-sample-selector__expand-btn" @click="collapseAllGroups" title="Collapse all">
+            <svg class="mld-sample-selector__expand-icon" 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>
+          </button>
+        </div>
+      </div>
+
+      <!-- Hierarchical Tree -->
+      <div class="mld-sample-selector__tree">
+        <!-- Major Groups (when hierarchy is meaningful) -->
+        <template v-if="showHierarchy">
+          <div
+            v-for="majorGroup in hierarchicalGroups"
+            :key="majorGroup.name"
+            class="mld-sample-selector__major-group"
+          >
+            <!-- Major Group Header -->
+            <div
+              :class="[
+                'mld-sample-selector__major-header',
+                draggingGroup === majorGroup.name && draggingGroupKind === 'major' ? 'mld-sample-selector__header--dragging' : '',
+                reorderTarget === majorGroup.name && draggingGroupKind === 'major' && reorderPosition === 'before' ? 'mld-sample-selector__header--drag-over-before' : '',
+                reorderTarget === majorGroup.name && draggingGroupKind === 'major' && reorderPosition === 'after' ? 'mld-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="[
+                  'mld-sample-selector__chevron',
+                  isGroupExpanded(`major:${majorGroup.name}`) ? 'mld-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="mld-sample-selector__checkbox"
+                :style="{ accentColor: majorGroup.color }"
+                @click.stop
+                @change="toggleMajorGroupSamples(majorGroup)"
+              />
+
+              <button
+                type="button"
+                class="mld-sample-selector__color-dot mld-sample-selector__color-dot--large mld-sample-selector__color-dot--clickable"
+                :style="{ backgroundColor: majorGroup.color }"
+                @click.stop="openMajorGroupColorPicker(majorGroup, $event)"
+                title="Click to change color family"
+              />
+
+              <span class="mld-sample-selector__major-name">{{ majorGroup.name }}</span>
+
+              <span
+                class="mld-sample-selector__count-badge"
+                :style="{ backgroundColor: majorGroup.color + '20', color: majorGroup.color }"
+              >
+                {{ majorGroup.allSamples.length }}
+              </span>
+
+              <button
+                type="button"
+                class="mld-sample-selector__delete-btn mld-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="mld-collapse">
+              <div
+                v-if="isGroupExpanded(`major:${majorGroup.name}`)"
+                class="mld-sample-selector__sub-groups"
+                :style="{ borderColor: majorGroup.color + '30' }"
+              >
+              <div
+                v-for="subGroup in majorGroup.subGroups"
+                :key="subGroup.name"
+                :class="[
+                  'mld-sample-selector__sub-group',
+                  dragOverGroup === subGroup.name ? 'mld-sample-selector__sub-group--drag-over' : '',
+                ]"
+                @dragover="handleDragOver(subGroup.name, $event)"
+                @dragleave="handleDragLeave"
+                @drop="handleDrop(subGroup.name, $event)"
+              >
+                <!-- Sub Group Header -->
+                <div
+                  :class="[
+                    'mld-sample-selector__sub-header',
+                    draggingGroup === subGroup.name && draggingGroupKind === 'sub' ? 'mld-sample-selector__header--dragging' : '',
+                    reorderTarget === subGroup.name && draggingGroupKind === 'sub' && reorderPosition === 'before' ? 'mld-sample-selector__header--drag-over-before' : '',
+                    reorderTarget === subGroup.name && draggingGroupKind === 'sub' && reorderPosition === 'after' ? 'mld-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="[
+                      'mld-sample-selector__chevron mld-sample-selector__chevron--small',
+                      isGroupExpanded(subGroup.name) ? 'mld-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="mld-sample-selector__checkbox mld-sample-selector__checkbox--small"
+                    :style="{ accentColor: subGroup.displayColor }"
+                    @click.stop
+                    @change="toggleGroupSamples(subGroup.name)"
+                  />
+
+                  <div
+                    class="mld-sample-selector__color-dot"
+                    :style="{ backgroundColor: subGroup.displayColor }"
+                    aria-hidden="true"
+                  />
+
+                  <span class="mld-sample-selector__sub-name">{{ subGroup.name }}</span>
+
+                  <span
+                    class="mld-sample-selector__count-badge mld-sample-selector__count-badge--small"
+                    :style="{ backgroundColor: subGroup.displayBg, color: subGroup.displayColor }"
+                  >
+                    {{ subGroup.samples.length }}
+                  </span>
+
+                  <button
+                    type="button"
+                    class="mld-sample-selector__delete-btn mld-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="mld-collapse">
+                  <div
+                    v-if="isGroupExpanded(subGroup.name)"
+                    class="mld-sample-selector__samples"
+                    :style="{ borderColor: subGroup.displayBorder }"
+                  >
+                    <div
+                      v-for="sample in subGroup.samples"
+                      :key="sample"
+                      :class="[
+                        'mld-sample-selector__sample',
+                        draggingSample === sample ? 'mld-sample-selector__sample--dragging' : '',
+                      ]"
+                      draggable="true"
+                      @dragstart="handleDragStart(sample, subGroup.name, $event)"
+                      @dragend="handleDragEnd"
+                    >
+                      <svg class="mld-sample-selector__drag-handle" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
+                      </svg>
+                      <input
+                        type="checkbox"
+                        :checked="modelValue.includes(sample)"
+                        class="mld-sample-selector__checkbox mld-sample-selector__checkbox--tiny"
+                        :style="{ accentColor: subGroup.displayColor }"
+                        @change="toggleSample(sample)"
+                      />
+                      <span class="mld-sample-selector__sample-name">{{ sample }}</span>
+                      <button
+                        type="button"
+                        class="mld-sample-selector__remove-btn"
+                        @click="removeSampleFromGroup(sample, subGroup.name)"
+                        title="Remove from group"
+                      >
+                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
+                        </svg>
+                      </button>
+                    </div>
+                  </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="[
+              'mld-sample-selector__sub-group',
+              dragOverGroup === group.name ? 'mld-sample-selector__sub-group--drag-over' : '',
+            ]"
+            @dragover="handleDragOver(group.name, $event)"
+            @dragleave="handleDragLeave"
+            @drop="handleDrop(group.name, $event)"
+          >
+            <!-- Group Header -->
+            <div
+              :class="[
+                'mld-sample-selector__major-header',
+                draggingGroup === group.name && draggingGroupKind === 'flat' ? 'mld-sample-selector__header--dragging' : '',
+                reorderTarget === group.name && draggingGroupKind === 'flat' && reorderPosition === 'before' ? 'mld-sample-selector__header--drag-over-before' : '',
+                reorderTarget === group.name && draggingGroupKind === 'flat' && reorderPosition === 'after' ? 'mld-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="[
+                  'mld-sample-selector__chevron',
+                  isGroupExpanded(group.name) ? 'mld-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="mld-sample-selector__checkbox"
+                :style="{ accentColor: group.color }"
+                @click.stop
+                @change="toggleGroupSamples(group.name)"
+              />
+
+              <button
+                type="button"
+                class="mld-sample-selector__color-dot mld-sample-selector__color-dot--large mld-sample-selector__color-dot--clickable"
+                :style="{ backgroundColor: group.color }"
+                @click.stop="openColorPicker(group.name, $event)"
+                title="Click to change color"
+              />
+
+              <span class="mld-sample-selector__major-name">{{ group.name }}</span>
+
+              <span
+                class="mld-sample-selector__count-badge"
+                :style="{ backgroundColor: group.color + '20', color: group.color }"
+              >
+                {{ group.samples.length }}
+              </span>
+
+              <button
+                type="button"
+                class="mld-sample-selector__delete-btn mld-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="mld-collapse">
+              <div
+                v-if="isGroupExpanded(group.name)"
+                class="mld-sample-selector__samples"
+                :style="{ borderColor: group.color + '40' }"
+              >
+                <div
+                  v-for="sample in group.samples"
+                  :key="sample"
+                  :class="[
+                    'mld-sample-selector__sample',
+                    draggingSample === sample ? 'mld-sample-selector__sample--dragging' : '',
+                  ]"
+                  draggable="true"
+                  @dragstart="handleDragStart(sample, group.name, $event)"
+                  @dragend="handleDragEnd"
+                >
+                  <svg class="mld-sample-selector__drag-handle" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
+                  </svg>
+                  <input
+                    type="checkbox"
+                    :checked="modelValue.includes(sample)"
+                    class="mld-sample-selector__checkbox mld-sample-selector__checkbox--tiny"
+                    :style="{ accentColor: group.color }"
+                    @change="toggleSample(sample)"
+                  />
+                  <span class="mld-sample-selector__sample-name">{{ sample }}</span>
+                  <button
+                    type="button"
+                    class="mld-sample-selector__remove-btn"
+                    @click="removeSampleFromGroup(sample, group.name)"
+                    title="Remove from group"
+                  >
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </Transition>
+          </div>
+        </template>
+
+        <!-- Empty state -->
+        <div v-if="internalGroups.length === 0" class="mld-sample-selector__empty">
+          Click Smart Group to auto-group samples
+        </div>
+      </div>
+
+      <!-- Ungrouped Samples Section -->
+      <div v-if="ungroupedSamples.length > 0" class="mld-sample-selector__ungrouped">
+        <div
+          class="mld-sample-selector__ungrouped-header"
+          @click="toggleGroupExpanded('__ungrouped__')"
+        >
+          <svg
+            :class="[
+              'mld-sample-selector__chevron',
+              isGroupExpanded('__ungrouped__') ? 'mld-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>
+          <span class="mld-sample-selector__ungrouped-label">Ungrouped</span>
+          <span class="mld-sample-selector__ungrouped-count">{{ ungroupedSamples.length }}</span>
+        </div>
+
+        <Transition name="mld-collapse">
+          <div
+            v-if="isGroupExpanded('__ungrouped__')"
+            class="mld-sample-selector__ungrouped-list"
+          >
+            <div
+              v-for="sample in ungroupedSamples"
+              :key="sample"
+              :class="[
+                'mld-sample-selector__sample',
+                draggingSample === sample ? 'mld-sample-selector__sample--dragging' : '',
+              ]"
+              draggable="true"
+              @dragstart="handleDragStart(sample, null, $event)"
+              @dragend="handleDragEnd"
+            >
+              <svg class="mld-sample-selector__drag-handle" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
+              </svg>
+              <input
+                type="checkbox"
+                :checked="modelValue.includes(sample)"
+                class="mld-sample-selector__checkbox mld-sample-selector__checkbox--small"
+                @change="toggleSample(sample)"
+              />
+              <span class="mld-sample-selector__sample-name">{{ sample }}</span>
+            </div>
+          </div>
+        </Transition>
+      </div>
+
+      <!-- New Group Input -->
+      <div class="mld-sample-selector__new-group">
+        <BaseInput
+          v-model="newGroupName"
+          placeholder="New group name..."
+          class="mld-sample-selector__new-group-input"
+          @keyup.enter="addNewGroup"
+        />
+        <BaseButton
+          variant="ghost"
+          size="sm"
+          :disabled="!newGroupName.trim()"
+          class="mld-sample-selector__new-group-btn"
+          @click="addNewGroup"
+        >
+          Add
+        </BaseButton>
+      </div>
+
+      <!-- Hidden color picker input -->
+      <input
+        ref="colorPickerInput"
+        type="color"
+        class="mld-sample-selector__color-input"
+        :value="colorPickerSeed"
+        @change="handleColorChange"
+      />
+    </div>
+
+    <!-- Flat View (when no groups) -->
+    <div v-if="!groupingEnabled" class="mld-sample-selector__flat">
+      <!-- Search -->
+      <div class="mld-sample-selector__search">
+        <svg class="mld-sample-selector__search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        </svg>
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Search samples..."
+          class="mld-sample-selector__search-input"
+        />
+      </div>
+
+      <!-- Flat samples list -->
+      <div class="mld-sample-selector__flat-list">
+        <div
+          v-for="sample in filteredSamples"
+          :key="sample"
+          class="mld-sample-selector__flat-item"
+        >
+          <input
+            type="checkbox"
+            :checked="modelValue.includes(sample)"
+            class="mld-sample-selector__checkbox"
+            @change="toggleSample(sample)"
+          />
+          <span class="mld-sample-selector__flat-name">{{ sample }}</span>
+        </div>
+
+        <div v-if="filteredSamples.length === 0 && searchQuery.trim()" class="mld-sample-selector__empty">
+          No samples match "{{ searchQuery }}"
+        </div>
+      </div>
+    </div>
+
+    <!-- Smart Grouping Modal -->
+    <AutoGroupModal
+      v-model="showSmartGroupModal"
+      :samples="samples"
+      :experiment-id="experimentId"
+      :design-data="designData"
+      @apply="handleSmartGroupApply"
+    />
+  </div>
+</template>
+
+<style>
+@import '../styles/components/sample-selector.css';
+</style>