@morscherlab/mint-sdk 1.0.0-rc.4 → 1.0.0-rc.5

package/src/components/SampleSelector.vue

@@ -4,14 +4,26 @@ import { ref, computed } from 'vue'
 import BaseButton from './BaseButton.vue'
 import BaseInput from './BaseInput.vue'
 import AutoGroupModal from './AutoGroupModal.vue'
+import SampleSelectorSampleRow from './SampleSelectorSampleRow.vue'
 import type { SampleGroup } from '../types'
 import type { AutoGroupResult } from '../types/auto-group'
-import { DEFAULT_COLORS } from '../composables/useAutoGroup'
 import { useTextSearch } from '../composables/useTextSearch'
-import { useListSelection } from '../composables/useListSelection'
 import { useSampleGroups, type SampleMajorGroup } from '../composables/useSampleGroups'
 import { useExpansionSet } from '../composables/useExpansionSet'
 import { useExperimentSamples } from '../composables/useExperimentSamples'
+import { useSampleSelectorDrag } from './SampleSelector.drag'
+import { useSampleSelectorSelection } from './SampleSelector.selection'
+import {
+  applySampleGroupColorEdit,
+  createSampleGroup,
+  getSampleGroupColorEditSeed,
+  type ColorEdit,
+} from './SampleSelector.colors'
+import {
+  removeSampleFromGroup as removeSampleFromSampleGroup,
+  removeSampleGroup,
+  removeSampleMajorGroup,
+} from './SampleSelector.groups'
 
 interface Props {
   samples?: string[]
@@ -41,10 +53,6 @@ const emit = defineEmits<{
 }>()
 
 // 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)
@@ -52,24 +60,31 @@ const colorPickerInput = ref<HTMLInputElement | null>(null)
 const searchQuery = ref('')
 const groupExpansion = useExpansionSet()
 
-// 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),
 })
 
+const {
+  draggingSample,
+  dragOverGroup,
+  draggingGroup,
+  draggingGroupKind,
+  reorderTarget,
+  reorderPosition,
+  handleDragStart,
+  handleDragEnd,
+  handleDragOver,
+  handleDragLeave,
+  handleDrop,
+  handleGroupDragStart,
+  handleGroupDragEnd,
+  handleGroupDragOver,
+  handleGroupDragLeave,
+  handleGroupDrop,
+} = useSampleSelectorDrag(internalGroups)
+
 const providedSamples = computed(() => props.samples)
 const shouldLoadExperimentSamples = computed(() =>
   props.autoloadExperimentData && providedSamples.value.length === 0,
@@ -102,61 +117,22 @@ const sampleSearch = useTextSearch({
 })
 const filteredSamples = sampleSearch.filteredItems
 
-const sampleSelection = useListSelection({
+const {
+  isAllSelected,
+  toggleSelectAll,
+  toggleSample,
+  toggleGroupSamples,
+  toggleMajorGroupSamples,
+  isGroupFullySelected,
+  isGroupPartiallySelected,
+  isMajorGroupFullySelected,
+  isMajorGroupPartiallySelected,
+} = useSampleSelectorSelection({
   selected: () => props.modelValue,
-  items: () => resolvedSamples.value,
+  samples: () => resolvedSamples.value,
+  findGroup: sampleGroups.findGroup,
+  emitSelected: samples => emit('update:modelValue', samples),
 })
-const isAllSelected = sampleSelection.isAllSelected
-
-// Toggle functions
-function toggleSelectAll() {
-  emit('update:modelValue', sampleSelection.toggleAll())
-}
-
-function toggleSample(sample: string) {
-  emit('update:modelValue', sampleSelection.toggleValue(sample))
-}
-
-function toggleSamplesSelection(samples: string[]) {
-  emit('update:modelValue', sampleSelection.toggleValues(samples))
-}
-
-function toggleGroupSamples(groupName: string) {
-  const group = sampleGroups.findGroup(groupName)
-  if (!group) return
-  toggleSamplesSelection(group.samples)
-}
-
-function toggleMajorGroupSamples(majorGroup: SampleMajorGroup) {
-  toggleSamplesSelection(majorGroup.allSamples)
-}
-
-// Selection state checks
-function isFullySelected(samples: string[]): boolean {
-  return sampleSelection.isFullySelected(samples)
-}
-
-function isPartiallySelected(samples: string[]): boolean {
-  return sampleSelection.isPartiallySelected(samples)
-}
-
-function isGroupFullySelected(groupName: string): boolean {
-  const group = sampleGroups.findGroup(groupName)
-  return group ? isFullySelected(group.samples) : false
-}
-
-function isGroupPartiallySelected(groupName: string): boolean {
-  const group = sampleGroups.findGroup(groupName)
-  return group ? isPartiallySelected(group.samples) : false
-}
-
-function isMajorGroupFullySelected(majorGroup: SampleMajorGroup): boolean {
-  return isFullySelected(majorGroup.allSamples)
-}
-
-function isMajorGroupPartiallySelected(majorGroup: SampleMajorGroup): boolean {
-  return isPartiallySelected(majorGroup.allSamples)
-}
 
 // Expand/collapse
 function toggleGroupExpanded(groupName: string) {
@@ -195,194 +171,15 @@ function clearGroups() {
 }
 
 function deleteMajorGroup(majorGroup: SampleMajorGroup) {
-  internalGroups.value = internalGroups.value.filter(
-    g => !majorGroup.subGroups.some(sg => sg.name === g.name)
-  )
+  internalGroups.value = removeSampleMajorGroup(internalGroups.value, majorGroup)
 }
 
 function deleteGroup(groupName: string) {
-  internalGroups.value = internalGroups.value.filter(g => g.name !== groupName)
+  internalGroups.value = removeSampleGroup(internalGroups.value, 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', `mint-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
+  internalGroups.value = removeSampleFromSampleGroup(internalGroups.value, sample, groupName)
 }
 
 // Color picker
@@ -403,12 +200,7 @@ function handleColorChange(event: Event) {
   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,
-  )
+  internalGroups.value = applySampleGroupColorEdit(internalGroups.value, edit, newColor)
   editingColor.value = null
 }
 
@@ -417,28 +209,18 @@ function getGroupColor(groupName: string): string {
 }
 
 const colorPickerSeed = computed(() => {
-  const edit = editingColor.value
-  if (!edit) return '#3B82F6'
-  return getGroupColor(edit.kind === 'family' ? edit.names[0] : edit.name)
+  return getSampleGroupColorEditSeed(editingColor.value, getGroupColor)
 })
 
 // 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: [],
-  }
-
+  const newGroup = createSampleGroup(newGroupName.value, internalGroups.value)
+  if (!newGroup) return
   internalGroups.value = [...internalGroups.value, newGroup]
   newGroupName.value = ''
 }
 
+defineExpose({ handleSmartGroupApply })
 </script>
 
 <template>
@@ -670,39 +452,20 @@ function addNewGroup() {
                     class="mint-sample-selector__samples"
                     :style="{ borderColor: subGroup.displayBorder }"
                   >
-                    <div
+                    <SampleSelectorSampleRow
                       v-for="sample in subGroup.samples"
                       :key="sample"
-                      :class="[
-                        'mint-sample-selector__sample',
-                        draggingSample === sample ? 'mint-sample-selector__sample--dragging' : '',
-                      ]"
-                      draggable="true"
+                      :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"
-                    >
-                      <svg class="mint-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="mint-sample-selector__checkbox mint-sample-selector__checkbox--tiny"
-                        :style="{ accentColor: subGroup.displayColor }"
-                        @change="toggleSample(sample)"
-                      />
-                      <span class="mint-sample-selector__sample-name">{{ sample }}</span>
-                      <button
-                        type="button"
-                        class="mint-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>
+                      @toggle="toggleSample(sample)"
+                      @remove="removeSampleFromGroup(sample, subGroup.name)"
+                    />
                   </div>
                 </Transition>
               </div>
@@ -796,39 +559,20 @@ function addNewGroup() {
                 class="mint-sample-selector__samples"
                 :style="{ borderColor: group.color + '40' }"
               >
-                <div
+                <SampleSelectorSampleRow
                   v-for="sample in group.samples"
                   :key="sample"
-                  :class="[
-                    'mint-sample-selector__sample',
-                    draggingSample === sample ? 'mint-sample-selector__sample--dragging' : '',
-                  ]"
-                  draggable="true"
+                  :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"
-                >
-                  <svg class="mint-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="mint-sample-selector__checkbox mint-sample-selector__checkbox--tiny"
-                    :style="{ accentColor: group.color }"
-                    @change="toggleSample(sample)"
-                  />
-                  <span class="mint-sample-selector__sample-name">{{ sample }}</span>
-                  <button
-                    type="button"
-                    class="mint-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>
+                  @toggle="toggleSample(sample)"
+                  @remove="removeSampleFromGroup(sample, group.name)"
+                />
               </div>
             </Transition>
           </div>
@@ -864,28 +608,17 @@ function addNewGroup() {
             v-if="isGroupExpanded('__ungrouped__')"
             class="mint-sample-selector__ungrouped-list"
           >
-            <div
+            <SampleSelectorSampleRow
               v-for="sample in ungroupedSamples"
               :key="sample"
-              :class="[
-                'mint-sample-selector__sample',
-                draggingSample === sample ? 'mint-sample-selector__sample--dragging' : '',
-              ]"
-              draggable="true"
+              :sample="sample"
+              :selected="modelValue.includes(sample)"
+              :dragging="draggingSample === sample"
+              checkbox-size="small"
               @dragstart="handleDragStart(sample, null, $event)"
               @dragend="handleDragEnd"
-            >
-              <svg class="mint-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="mint-sample-selector__checkbox mint-sample-selector__checkbox--small"
-                @change="toggleSample(sample)"
-              />
-              <span class="mint-sample-selector__sample-name">{{ sample }}</span>
-            </div>
+              @toggle="toggleSample(sample)"
+            />
           </div>
         </Transition>
       </div>

package/src/components/SampleSelectorSampleRow.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+/** Single draggable sample row used by grouped and ungrouped SampleSelector lists. */
+import { computed } from 'vue'
+
+type CheckboxSize = 'small' | 'tiny'
+
+interface Props {
+  sample: string
+  selected: boolean
+  dragging?: boolean
+  accentColor?: string
+  checkboxSize?: CheckboxSize
+  removable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dragging: false,
+  checkboxSize: 'tiny',
+  removable: false,
+})
+
+const emit = defineEmits<{
+  toggle: []
+  remove: []
+}>()
+
+const checkboxClasses = computed(() => [
+  'mint-sample-selector__checkbox',
+  `mint-sample-selector__checkbox--${props.checkboxSize}`,
+])
+</script>
+
+<template>
+  <div
+    :class="[
+      'mint-sample-selector__sample',
+      dragging ? 'mint-sample-selector__sample--dragging' : '',
+    ]"
+    draggable="true"
+  >
+    <svg class="mint-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="selected"
+      :class="checkboxClasses"
+      :style="accentColor ? { accentColor } : undefined"
+      @change="emit('toggle')"
+    />
+    <span class="mint-sample-selector__sample-name">{{ sample }}</span>
+    <button
+      v-if="removable"
+      type="button"
+      class="mint-sample-selector__remove-btn"
+      title="Remove from group"
+      @click="emit('remove')"
+    >
+      <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>
+</template>