@morscherlab/mld-sdk 0.6.0

package/dist/components/SampleSelector.vue.js

@@ -0,0 +1,1076 @@
+import { defineComponent, ref, computed, onMounted, onUnmounted, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, withModifiers, withCtx, createCommentVNode, createVNode, Transition, Fragment, renderList, createTextVNode, normalizeClass, normalizeStyle, withKeys, withDirectives, vModelText } from "vue";
+import _sfc_main$1 from "./BaseButton.vue.js";
+/* empty css                */
+import _sfc_main$2 from "./BaseInput.vue.js";
+/* empty css               */
+import _sfc_main$3 from "./GroupingModal.vue.js";
+/* empty css                   */
+const _hoisted_1 = { class: "mld-sample-selector" };
+const _hoisted_2 = { class: "mld-sample-selector__select-all" };
+const _hoisted_3 = ["checked"];
+const _hoisted_4 = { class: "mld-sample-selector__select-all-count" };
+const _hoisted_5 = { class: "mld-sample-selector__actions-row" };
+const _hoisted_6 = {
+  key: 0,
+  class: "mld-sample-selector__popover"
+};
+const _hoisted_7 = { class: "mld-sample-selector__popover-body" };
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = { class: "mld-sample-selector__level-info" };
+const _hoisted_10 = { class: "mld-sample-selector__level-title" };
+const _hoisted_11 = { class: "mld-sample-selector__level-badge" };
+const _hoisted_12 = { class: "mld-sample-selector__level-desc" };
+const _hoisted_13 = {
+  key: 0,
+  class: "mld-sample-selector__level-example"
+};
+const _hoisted_14 = {
+  key: 1,
+  class: "mld-sample-selector__grouped"
+};
+const _hoisted_15 = { class: "mld-sample-selector__groups-header" };
+const _hoisted_16 = { class: "mld-sample-selector__groups-title" };
+const _hoisted_17 = { class: "mld-sample-selector__tree" };
+const _hoisted_18 = ["onClick"];
+const _hoisted_19 = ["checked", "indeterminate", "onChange"];
+const _hoisted_20 = { class: "mld-sample-selector__major-name" };
+const _hoisted_21 = ["onClick"];
+const _hoisted_22 = ["onDragover", "onDrop"];
+const _hoisted_23 = ["onClick"];
+const _hoisted_24 = ["checked", "indeterminate", "onChange"];
+const _hoisted_25 = ["onClick"];
+const _hoisted_26 = { class: "mld-sample-selector__sub-name" };
+const _hoisted_27 = ["onClick"];
+const _hoisted_28 = ["onDragstart"];
+const _hoisted_29 = ["checked", "onChange"];
+const _hoisted_30 = { class: "mld-sample-selector__sample-name" };
+const _hoisted_31 = ["onClick"];
+const _hoisted_32 = ["onDragover", "onDrop"];
+const _hoisted_33 = ["onClick"];
+const _hoisted_34 = ["checked", "indeterminate", "onChange"];
+const _hoisted_35 = ["onClick"];
+const _hoisted_36 = { class: "mld-sample-selector__major-name" };
+const _hoisted_37 = ["onClick"];
+const _hoisted_38 = ["onDragstart"];
+const _hoisted_39 = ["checked", "onChange"];
+const _hoisted_40 = { class: "mld-sample-selector__sample-name" };
+const _hoisted_41 = ["onClick"];
+const _hoisted_42 = {
+  key: 2,
+  class: "mld-sample-selector__empty"
+};
+const _hoisted_43 = {
+  key: 0,
+  class: "mld-sample-selector__ungrouped"
+};
+const _hoisted_44 = { class: "mld-sample-selector__ungrouped-count" };
+const _hoisted_45 = {
+  key: 0,
+  class: "mld-sample-selector__ungrouped-list"
+};
+const _hoisted_46 = ["onDragstart"];
+const _hoisted_47 = ["checked", "onChange"];
+const _hoisted_48 = { class: "mld-sample-selector__sample-name" };
+const _hoisted_49 = { class: "mld-sample-selector__new-group" };
+const _hoisted_50 = ["value"];
+const _hoisted_51 = {
+  key: 2,
+  class: "mld-sample-selector__flat"
+};
+const _hoisted_52 = { class: "mld-sample-selector__search" };
+const _hoisted_53 = { class: "mld-sample-selector__flat-list" };
+const _hoisted_54 = ["checked", "onChange"];
+const _hoisted_55 = { class: "mld-sample-selector__flat-name" };
+const _hoisted_56 = {
+  key: 0,
+  class: "mld-sample-selector__empty"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SampleSelector",
+  props: {
+    samples: {},
+    modelValue: {},
+    groups: { default: () => [] },
+    enableGrouping: { type: Boolean, default: true },
+    enableAutoGroup: { type: Boolean, default: true },
+    enableMetadataGroup: { type: Boolean, default: true }
+  },
+  emits: ["update:modelValue", "update:groups", "autoGroup", "metadataGroup"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const DEFAULT_COLORS = [
+      "#3B82F6",
+      "#10B981",
+      "#F59E0B",
+      "#EF4444",
+      "#8B5CF6",
+      "#EC4899",
+      "#06B6D4",
+      "#84CC16",
+      "#F97316",
+      "#6366F1"
+    ];
+    const showLevelPopover = ref(false);
+    const popoverRef = ref(null);
+    const showMetadataModal = ref(false);
+    const newGroupName = ref("");
+    const editingGroupColor = ref(null);
+    const colorPickerInput = ref(null);
+    const expandedGroups = ref({});
+    const searchQuery = ref("");
+    const draggingSample = ref(null);
+    const dragSourceGroup = ref(null);
+    const dragOverGroup = ref(null);
+    const internalGroups = computed({
+      get: () => props.groups,
+      set: (value) => emit("update:groups", value)
+    });
+    const hierarchicalGroups = computed(() => {
+      var _a;
+      const groups = internalGroups.value;
+      if (groups.length === 0) return [];
+      const separator = groups.some((g) => g.name.includes("/")) ? "/" : "_";
+      const majorGroupMap = {};
+      for (const group of groups) {
+        const parts = group.name.split(separator);
+        const majorPrefix = parts.length > 1 ? parts[0] : group.name;
+        if (!majorGroupMap[majorPrefix]) {
+          majorGroupMap[majorPrefix] = [];
+        }
+        majorGroupMap[majorPrefix].push(group);
+      }
+      const result = [];
+      for (const [majorName, subGroups] of Object.entries(majorGroupMap).sort(([a], [b]) => a.localeCompare(b))) {
+        const allSamples = subGroups.flatMap((g) => g.samples);
+        const color = ((_a = subGroups[0]) == null ? void 0 : _a.color) || "#3B82F6";
+        result.push({
+          name: majorName,
+          color,
+          subGroups: subGroups.sort((a, b) => a.name.localeCompare(b.name)),
+          allSamples
+        });
+      }
+      return result;
+    });
+    const showHierarchy = computed(() => {
+      const groups = hierarchicalGroups.value;
+      if (groups.length === 0) return false;
+      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));
+    });
+    const groupingLevels = computed(() => {
+      if (props.samples.length === 0) return [];
+      const maxLevel = detectGroupingLevels();
+      const levels = [];
+      for (let level = 1; level <= maxLevel; level++) {
+        const prefixGroups = {};
+        for (const sample of props.samples) {
+          const parts = sample.split(/[_\-.]/);
+          const prefix = parts.slice(0, level).join("_");
+          if (prefix) {
+            if (!prefixGroups[prefix]) {
+              prefixGroups[prefix] = [];
+            }
+            prefixGroups[prefix].push(sample);
+          }
+        }
+        const groupNames = Object.keys(prefixGroups).sort();
+        const example = groupNames[0] || "";
+        const descriptions = ["main groups", "sub-groups"];
+        const description = descriptions[level - 1] || `level ${level} groups`;
+        levels.push({
+          level,
+          groupCount: groupNames.length,
+          example,
+          description
+        });
+      }
+      return levels;
+    });
+    function detectGroupingLevels() {
+      if (props.samples.length === 0) return 1;
+      const maxParts = Math.max(...props.samples.map((s) => s.split(/[_\-.]/).length));
+      return Math.min(maxParts, 3);
+    }
+    const isAllSelected = computed(
+      () => props.samples.length > 0 && props.modelValue.length === props.samples.length
+    );
+    function toggleSelectAll() {
+      if (isAllSelected.value) {
+        emit("update:modelValue", []);
+      } else {
+        emit("update:modelValue", [...props.samples]);
+      }
+    }
+    function toggleSample(sample) {
+      const newSelection = props.modelValue.includes(sample) ? props.modelValue.filter((s) => s !== sample) : [...props.modelValue, sample];
+      emit("update:modelValue", newSelection);
+    }
+    function toggleSamplesSelection(samples) {
+      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) {
+      const group = internalGroups.value.find((g) => g.name === groupName);
+      if (!group) return;
+      toggleSamplesSelection(group.samples);
+    }
+    function toggleMajorGroupSamples(majorGroup) {
+      toggleSamplesSelection(majorGroup.allSamples);
+    }
+    function isFullySelected(samples) {
+      return samples.length > 0 && samples.every((s) => props.modelValue.includes(s));
+    }
+    function isPartiallySelected(samples) {
+      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) {
+      const group = internalGroups.value.find((g) => g.name === groupName);
+      return group ? isFullySelected(group.samples) : false;
+    }
+    function isGroupPartiallySelected(groupName) {
+      const group = internalGroups.value.find((g) => g.name === groupName);
+      return group ? isPartiallySelected(group.samples) : false;
+    }
+    function isMajorGroupFullySelected(majorGroup) {
+      return isFullySelected(majorGroup.allSamples);
+    }
+    function isMajorGroupPartiallySelected(majorGroup) {
+      return isPartiallySelected(majorGroup.allSamples);
+    }
+    function toggleGroupExpanded(groupName) {
+      expandedGroups.value[groupName] = !expandedGroups.value[groupName];
+    }
+    function isGroupExpanded(groupName) {
+      return !!expandedGroups.value[groupName];
+    }
+    function expandAllGroups() {
+      const expanded = {};
+      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 = {};
+    }
+    function toggleLevelPopover() {
+      showLevelPopover.value = !showLevelPopover.value;
+    }
+    function selectLevel(level) {
+      emit("autoGroup", level);
+      showLevelPopover.value = false;
+    }
+    function clearGroups() {
+      internalGroups.value = [];
+    }
+    function deleteMajorGroup(majorGroup) {
+      internalGroups.value = internalGroups.value.filter(
+        (g) => !majorGroup.subGroups.some((sg) => sg.name === g.name)
+      );
+    }
+    function deleteGroup(groupName) {
+      internalGroups.value = internalGroups.value.filter((g) => g.name !== groupName);
+    }
+    function removeSampleFromGroup(sample, groupName) {
+      internalGroups.value = internalGroups.value.map(
+        (g) => g.name === groupName ? { ...g, samples: g.samples.filter((s) => s !== sample) } : g
+      );
+    }
+    function handleDragStart(sample, sourceGroup, event) {
+      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, event) {
+      event.preventDefault();
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = "move";
+      }
+      dragOverGroup.value = groupName;
+    }
+    function handleDragLeave() {
+      dragOverGroup.value = null;
+    }
+    function handleDrop(targetGroupName, event) {
+      event.preventDefault();
+      const sample = draggingSample.value;
+      const sourceGroup = dragSourceGroup.value;
+      if (!sample) return;
+      if (sourceGroup === targetGroupName) {
+        resetDragState();
+        return;
+      }
+      internalGroups.value = internalGroups.value.map((g) => {
+        if (sourceGroup && g.name === sourceGroup) {
+          return { ...g, samples: g.samples.filter((s) => s !== sample) };
+        }
+        if (g.name === targetGroupName && !g.samples.includes(sample)) {
+          return { ...g, samples: [...g.samples, sample] };
+        }
+        return g;
+      });
+      resetDragState();
+    }
+    function openColorPicker(groupName, event) {
+      var _a;
+      event.stopPropagation();
+      editingGroupColor.value = groupName;
+      (_a = colorPickerInput.value) == null ? void 0 : _a.click();
+    }
+    function handleColorChange(event) {
+      const target = event.target;
+      if (editingGroupColor.value) {
+        internalGroups.value = internalGroups.value.map(
+          (g) => g.name === editingGroupColor.value ? { ...g, color: target.value } : g
+        );
+      }
+      editingGroupColor.value = null;
+    }
+    function getGroupColor(groupName) {
+      const group = internalGroups.value.find((g) => g.name === groupName);
+      return (group == null ? void 0 : group.color) || "#3B82F6";
+    }
+    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 = {
+        name: newGroupName.value.trim(),
+        color: availableColor,
+        samples: []
+      };
+      internalGroups.value = [...internalGroups.value, newGroup];
+      newGroupName.value = "";
+    }
+    function handleMetadataApply(mapping) {
+      emit("metadataGroup", mapping);
+      showMetadataModal.value = false;
+    }
+    function handleClickOutside(event) {
+      if (popoverRef.value && !popoverRef.value.contains(event.target)) {
+        showLevelPopover.value = false;
+      }
+    }
+    onMounted(() => {
+      document.addEventListener("click", handleClickOutside);
+    });
+    onUnmounted(() => {
+      document.removeEventListener("click", handleClickOutside);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("label", _hoisted_2, [
+          createElementVNode("input", {
+            type: "checkbox",
+            checked: isAllSelected.value,
+            onChange: toggleSelectAll,
+            class: "mld-sample-selector__checkbox"
+          }, null, 40, _hoisted_3),
+          _cache[8] || (_cache[8] = createElementVNode("span", { class: "mld-sample-selector__select-all-label" }, "Select All", -1)),
+          createElementVNode("span", _hoisted_4, toDisplayString(__props.samples.length) + " samples", 1)
+        ]),
+        __props.enableGrouping ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "mld-sample-selector__actions",
+          ref_key: "popoverRef",
+          ref: popoverRef
+        }, [
+          createElementVNode("div", _hoisted_5, [
+            __props.enableAutoGroup ? (openBlock(), createBlock(_sfc_main$1, {
+              key: 0,
+              variant: showLevelPopover.value || groupingEnabled.value ? "primary" : "secondary",
+              size: "sm",
+              disabled: __props.samples.length === 0,
+              class: "mld-sample-selector__action-btn",
+              onClick: withModifiers(toggleLevelPopover, ["stop"])
+            }, {
+              default: withCtx(() => [..._cache[9] || (_cache[9] = [
+                createElementVNode("svg", {
+                  class: "mld-sample-selector__action-icon",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24"
+                }, [
+                  createElementVNode("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    "stroke-width": "2",
+                    d: "M13 10V3L4 14h7v7l9-11h-7z"
+                  })
+                ], -1),
+                createElementVNode("span", null, "Auto", -1)
+              ])]),
+              _: 1
+            }, 8, ["variant", "disabled"])) : createCommentVNode("", true),
+            __props.enableMetadataGroup ? (openBlock(), createBlock(_sfc_main$1, {
+              key: 1,
+              variant: "secondary",
+              size: "sm",
+              disabled: __props.samples.length === 0,
+              class: "mld-sample-selector__action-btn",
+              onClick: _cache[0] || (_cache[0] = ($event) => showMetadataModal.value = true)
+            }, {
+              default: withCtx(() => [..._cache[10] || (_cache[10] = [
+                createElementVNode("svg", {
+                  class: "mld-sample-selector__action-icon",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24"
+                }, [
+                  createElementVNode("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    "stroke-width": "2",
+                    d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                  })
+                ], -1),
+                createElementVNode("span", null, "Metadata", -1)
+              ])]),
+              _: 1
+            }, 8, ["disabled"])) : createCommentVNode("", true),
+            createVNode(_sfc_main$1, {
+              variant: "ghost",
+              size: "sm",
+              disabled: internalGroups.value.length === 0,
+              class: "mld-sample-selector__action-btn mld-sample-selector__action-btn--reset",
+              onClick: clearGroups,
+              title: "Clear all groups"
+            }, {
+              default: withCtx(() => [..._cache[11] || (_cache[11] = [
+                createElementVNode("svg", {
+                  class: "mld-sample-selector__action-icon",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24"
+                }, [
+                  createElementVNode("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"
+                  })
+                ], -1)
+              ])]),
+              _: 1
+            }, 8, ["disabled"])
+          ]),
+          createVNode(Transition, { name: "mld-popover" }, {
+            default: withCtx(() => [
+              showLevelPopover.value ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                _cache[13] || (_cache[13] = createElementVNode("div", { class: "mld-sample-selector__popover-header" }, "Auto-Group by Level", -1)),
+                createElementVNode("div", _hoisted_7, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(groupingLevels.value, (levelInfo) => {
+                    return openBlock(), createElementBlock("button", {
+                      key: levelInfo.level,
+                      type: "button",
+                      class: "mld-sample-selector__level-btn",
+                      onClick: ($event) => selectLevel(levelInfo.level)
+                    }, [
+                      createElementVNode("div", _hoisted_9, [
+                        createElementVNode("div", _hoisted_10, [
+                          createElementVNode("span", null, "Level " + toDisplayString(levelInfo.level), 1),
+                          createElementVNode("span", _hoisted_11, toDisplayString(levelInfo.groupCount) + " groups", 1)
+                        ]),
+                        createElementVNode("div", _hoisted_12, [
+                          createTextVNode(toDisplayString(levelInfo.description) + " ", 1),
+                          levelInfo.example ? (openBlock(), createElementBlock("span", _hoisted_13, [
+                            _cache[12] || (_cache[12] = createTextVNode(" e.g. ", -1)),
+                            createElementVNode("code", null, toDisplayString(levelInfo.example), 1)
+                          ])) : createCommentVNode("", true)
+                        ])
+                      ])
+                    ], 8, _hoisted_8);
+                  }), 128))
+                ])
+              ])) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ], 512)) : createCommentVNode("", true),
+        groupingEnabled.value ? (openBlock(), createElementBlock("div", _hoisted_14, [
+          createElementVNode("div", _hoisted_15, [
+            createElementVNode("span", _hoisted_16, "Groups (" + toDisplayString(internalGroups.value.length) + ")", 1),
+            createElementVNode("div", { class: "mld-sample-selector__groups-controls" }, [
+              createElementVNode("button", {
+                type: "button",
+                class: "mld-sample-selector__expand-btn",
+                onClick: expandAllGroups,
+                title: "Expand all"
+              }, [..._cache[14] || (_cache[14] = [
+                createElementVNode("svg", {
+                  class: "mld-sample-selector__expand-icon",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24"
+                }, [
+                  createElementVNode("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    "stroke-width": "2",
+                    d: "M19 9l-7 7-7-7"
+                  })
+                ], -1)
+              ])]),
+              createElementVNode("button", {
+                type: "button",
+                class: "mld-sample-selector__expand-btn",
+                onClick: collapseAllGroups,
+                title: "Collapse all"
+              }, [..._cache[15] || (_cache[15] = [
+                createElementVNode("svg", {
+                  class: "mld-sample-selector__expand-icon",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24"
+                }, [
+                  createElementVNode("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    "stroke-width": "2",
+                    d: "M9 5l7 7-7 7"
+                  })
+                ], -1)
+              ])])
+            ])
+          ]),
+          createElementVNode("div", _hoisted_17, [
+            showHierarchy.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(hierarchicalGroups.value, (majorGroup) => {
+              return openBlock(), createElementBlock("div", {
+                key: majorGroup.name,
+                class: "mld-sample-selector__major-group"
+              }, [
+                createElementVNode("div", {
+                  class: "mld-sample-selector__major-header",
+                  onClick: ($event) => toggleGroupExpanded(`major:${majorGroup.name}`)
+                }, [
+                  (openBlock(), createElementBlock("svg", {
+                    class: normalizeClass([
+                      "mld-sample-selector__chevron",
+                      isGroupExpanded(`major:${majorGroup.name}`) ? "mld-sample-selector__chevron--open" : ""
+                    ]),
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24"
+                  }, [..._cache[16] || (_cache[16] = [
+                    createElementVNode("path", {
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      "stroke-width": "2",
+                      d: "M9 5l7 7-7 7"
+                    }, null, -1)
+                  ])], 2)),
+                  createElementVNode("input", {
+                    type: "checkbox",
+                    checked: isMajorGroupFullySelected(majorGroup),
+                    indeterminate: isMajorGroupPartiallySelected(majorGroup),
+                    class: "mld-sample-selector__checkbox",
+                    style: normalizeStyle({ accentColor: majorGroup.color }),
+                    onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+                    }, ["stop"])),
+                    onChange: ($event) => toggleMajorGroupSamples(majorGroup)
+                  }, null, 44, _hoisted_19),
+                  createElementVNode("div", {
+                    class: "mld-sample-selector__color-dot mld-sample-selector__color-dot--large",
+                    style: normalizeStyle({ backgroundColor: majorGroup.color })
+                  }, null, 4),
+                  createElementVNode("span", _hoisted_20, toDisplayString(majorGroup.name), 1),
+                  createElementVNode("span", {
+                    class: "mld-sample-selector__count-badge",
+                    style: normalizeStyle({ backgroundColor: majorGroup.color + "20", color: majorGroup.color })
+                  }, toDisplayString(majorGroup.allSamples.length), 5),
+                  createElementVNode("button", {
+                    type: "button",
+                    class: "mld-sample-selector__delete-btn mld-sample-selector__delete-btn--hidden",
+                    onClick: withModifiers(($event) => deleteMajorGroup(majorGroup), ["stop"]),
+                    title: "Remove major group"
+                  }, [..._cache[17] || (_cache[17] = [
+                    createElementVNode("svg", {
+                      fill: "none",
+                      stroke: "currentColor",
+                      viewBox: "0 0 24 24"
+                    }, [
+                      createElementVNode("path", {
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round",
+                        "stroke-width": "2",
+                        d: "M6 18L18 6M6 6l12 12"
+                      })
+                    ], -1)
+                  ])], 8, _hoisted_21)
+                ], 8, _hoisted_18),
+                createVNode(Transition, { name: "mld-collapse" }, {
+                  default: withCtx(() => [
+                    isGroupExpanded(`major:${majorGroup.name}`) ? (openBlock(), createElementBlock("div", {
+                      key: 0,
+                      class: "mld-sample-selector__sub-groups",
+                      style: normalizeStyle({ borderColor: majorGroup.color + "30" })
+                    }, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(majorGroup.subGroups, (subGroup) => {
+                        return openBlock(), createElementBlock("div", {
+                          key: subGroup.name,
+                          class: normalizeClass([
+                            "mld-sample-selector__sub-group",
+                            dragOverGroup.value === subGroup.name ? "mld-sample-selector__sub-group--drag-over" : ""
+                          ]),
+                          onDragover: ($event) => handleDragOver(subGroup.name, $event),
+                          onDragleave: handleDragLeave,
+                          onDrop: ($event) => handleDrop(subGroup.name, $event)
+                        }, [
+                          createElementVNode("div", {
+                            class: "mld-sample-selector__sub-header",
+                            onClick: ($event) => toggleGroupExpanded(subGroup.name)
+                          }, [
+                            (openBlock(), createElementBlock("svg", {
+                              class: normalizeClass([
+                                "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"
+                            }, [..._cache[18] || (_cache[18] = [
+                              createElementVNode("path", {
+                                "stroke-linecap": "round",
+                                "stroke-linejoin": "round",
+                                "stroke-width": "2",
+                                d: "M9 5l7 7-7 7"
+                              }, null, -1)
+                            ])], 2)),
+                            createElementVNode("input", {
+                              type: "checkbox",
+                              checked: isGroupFullySelected(subGroup.name),
+                              indeterminate: isGroupPartiallySelected(subGroup.name),
+                              class: "mld-sample-selector__checkbox mld-sample-selector__checkbox--small",
+                              style: normalizeStyle({ accentColor: subGroup.color }),
+                              onClick: _cache[2] || (_cache[2] = withModifiers(() => {
+                              }, ["stop"])),
+                              onChange: ($event) => toggleGroupSamples(subGroup.name)
+                            }, null, 44, _hoisted_24),
+                            createElementVNode("button", {
+                              type: "button",
+                              class: "mld-sample-selector__color-dot mld-sample-selector__color-dot--clickable",
+                              style: normalizeStyle({ backgroundColor: subGroup.color }),
+                              onClick: withModifiers(($event) => openColorPicker(subGroup.name, $event), ["stop"]),
+                              title: "Click to change color"
+                            }, null, 12, _hoisted_25),
+                            createElementVNode("span", _hoisted_26, toDisplayString(subGroup.name), 1),
+                            createElementVNode("span", {
+                              class: "mld-sample-selector__count-badge mld-sample-selector__count-badge--small",
+                              style: normalizeStyle({ backgroundColor: subGroup.color + "20", color: subGroup.color })
+                            }, toDisplayString(subGroup.samples.length), 5),
+                            createElementVNode("button", {
+                              type: "button",
+                              class: "mld-sample-selector__delete-btn mld-sample-selector__delete-btn--hidden",
+                              onClick: withModifiers(($event) => deleteGroup(subGroup.name), ["stop"]),
+                              title: "Remove sub group"
+                            }, [..._cache[19] || (_cache[19] = [
+                              createElementVNode("svg", {
+                                fill: "none",
+                                stroke: "currentColor",
+                                viewBox: "0 0 24 24"
+                              }, [
+                                createElementVNode("path", {
+                                  "stroke-linecap": "round",
+                                  "stroke-linejoin": "round",
+                                  "stroke-width": "2",
+                                  d: "M6 18L18 6M6 6l12 12"
+                                })
+                              ], -1)
+                            ])], 8, _hoisted_27)
+                          ], 8, _hoisted_23),
+                          createVNode(Transition, { name: "mld-collapse" }, {
+                            default: withCtx(() => [
+                              isGroupExpanded(subGroup.name) ? (openBlock(), createElementBlock("div", {
+                                key: 0,
+                                class: "mld-sample-selector__samples",
+                                style: normalizeStyle({ borderColor: subGroup.color + "40" })
+                              }, [
+                                (openBlock(true), createElementBlock(Fragment, null, renderList(subGroup.samples, (sample) => {
+                                  return openBlock(), createElementBlock("div", {
+                                    key: sample,
+                                    class: normalizeClass([
+                                      "mld-sample-selector__sample",
+                                      draggingSample.value === sample ? "mld-sample-selector__sample--dragging" : ""
+                                    ]),
+                                    draggable: "true",
+                                    onDragstart: ($event) => handleDragStart(sample, subGroup.name, $event),
+                                    onDragend: handleDragEnd
+                                  }, [
+                                    _cache[21] || (_cache[21] = createElementVNode("svg", {
+                                      class: "mld-sample-selector__drag-handle",
+                                      fill: "none",
+                                      stroke: "currentColor",
+                                      viewBox: "0 0 24 24"
+                                    }, [
+                                      createElementVNode("path", {
+                                        "stroke-linecap": "round",
+                                        "stroke-linejoin": "round",
+                                        "stroke-width": "2",
+                                        d: "M4 8h16M4 16h16"
+                                      })
+                                    ], -1)),
+                                    createElementVNode("input", {
+                                      type: "checkbox",
+                                      checked: __props.modelValue.includes(sample),
+                                      class: "mld-sample-selector__checkbox mld-sample-selector__checkbox--tiny",
+                                      style: normalizeStyle({ accentColor: subGroup.color }),
+                                      onChange: ($event) => toggleSample(sample)
+                                    }, null, 44, _hoisted_29),
+                                    createElementVNode("span", _hoisted_30, toDisplayString(sample), 1),
+                                    createElementVNode("button", {
+                                      type: "button",
+                                      class: "mld-sample-selector__remove-btn",
+                                      onClick: ($event) => removeSampleFromGroup(sample, subGroup.name),
+                                      title: "Remove from group"
+                                    }, [..._cache[20] || (_cache[20] = [
+                                      createElementVNode("svg", {
+                                        fill: "none",
+                                        stroke: "currentColor",
+                                        viewBox: "0 0 24 24"
+                                      }, [
+                                        createElementVNode("path", {
+                                          "stroke-linecap": "round",
+                                          "stroke-linejoin": "round",
+                                          "stroke-width": "2",
+                                          d: "M20 12H4"
+                                        })
+                                      ], -1)
+                                    ])], 8, _hoisted_31)
+                                  ], 42, _hoisted_28);
+                                }), 128))
+                              ], 4)) : createCommentVNode("", true)
+                            ]),
+                            _: 2
+                          }, 1024)
+                        ], 42, _hoisted_22);
+                      }), 128))
+                    ], 4)) : createCommentVNode("", true)
+                  ]),
+                  _: 2
+                }, 1024)
+              ]);
+            }), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(internalGroups.value, (group) => {
+              return openBlock(), createElementBlock("div", {
+                key: group.name,
+                class: normalizeClass([
+                  "mld-sample-selector__sub-group",
+                  dragOverGroup.value === group.name ? "mld-sample-selector__sub-group--drag-over" : ""
+                ]),
+                onDragover: ($event) => handleDragOver(group.name, $event),
+                onDragleave: handleDragLeave,
+                onDrop: ($event) => handleDrop(group.name, $event)
+              }, [
+                createElementVNode("div", {
+                  class: "mld-sample-selector__major-header",
+                  onClick: ($event) => toggleGroupExpanded(group.name)
+                }, [
+                  (openBlock(), createElementBlock("svg", {
+                    class: normalizeClass([
+                      "mld-sample-selector__chevron",
+                      isGroupExpanded(group.name) ? "mld-sample-selector__chevron--open" : ""
+                    ]),
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24"
+                  }, [..._cache[22] || (_cache[22] = [
+                    createElementVNode("path", {
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      "stroke-width": "2",
+                      d: "M9 5l7 7-7 7"
+                    }, null, -1)
+                  ])], 2)),
+                  createElementVNode("input", {
+                    type: "checkbox",
+                    checked: isGroupFullySelected(group.name),
+                    indeterminate: isGroupPartiallySelected(group.name),
+                    class: "mld-sample-selector__checkbox",
+                    style: normalizeStyle({ accentColor: group.color }),
+                    onClick: _cache[3] || (_cache[3] = withModifiers(() => {
+                    }, ["stop"])),
+                    onChange: ($event) => toggleGroupSamples(group.name)
+                  }, null, 44, _hoisted_34),
+                  createElementVNode("button", {
+                    type: "button",
+                    class: "mld-sample-selector__color-dot mld-sample-selector__color-dot--large mld-sample-selector__color-dot--clickable",
+                    style: normalizeStyle({ backgroundColor: group.color }),
+                    onClick: withModifiers(($event) => openColorPicker(group.name, $event), ["stop"]),
+                    title: "Click to change color"
+                  }, null, 12, _hoisted_35),
+                  createElementVNode("span", _hoisted_36, toDisplayString(group.name), 1),
+                  createElementVNode("span", {
+                    class: "mld-sample-selector__count-badge",
+                    style: normalizeStyle({ backgroundColor: group.color + "20", color: group.color })
+                  }, toDisplayString(group.samples.length), 5),
+                  createElementVNode("button", {
+                    type: "button",
+                    class: "mld-sample-selector__delete-btn mld-sample-selector__delete-btn--hidden",
+                    onClick: withModifiers(($event) => deleteGroup(group.name), ["stop"]),
+                    title: "Remove group"
+                  }, [..._cache[23] || (_cache[23] = [
+                    createElementVNode("svg", {
+                      fill: "none",
+                      stroke: "currentColor",
+                      viewBox: "0 0 24 24"
+                    }, [
+                      createElementVNode("path", {
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round",
+                        "stroke-width": "2",
+                        d: "M6 18L18 6M6 6l12 12"
+                      })
+                    ], -1)
+                  ])], 8, _hoisted_37)
+                ], 8, _hoisted_33),
+                createVNode(Transition, { name: "mld-collapse" }, {
+                  default: withCtx(() => [
+                    isGroupExpanded(group.name) ? (openBlock(), createElementBlock("div", {
+                      key: 0,
+                      class: "mld-sample-selector__samples",
+                      style: normalizeStyle({ borderColor: group.color + "40" })
+                    }, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(group.samples, (sample) => {
+                        return openBlock(), createElementBlock("div", {
+                          key: sample,
+                          class: normalizeClass([
+                            "mld-sample-selector__sample",
+                            draggingSample.value === sample ? "mld-sample-selector__sample--dragging" : ""
+                          ]),
+                          draggable: "true",
+                          onDragstart: ($event) => handleDragStart(sample, group.name, $event),
+                          onDragend: handleDragEnd
+                        }, [
+                          _cache[25] || (_cache[25] = createElementVNode("svg", {
+                            class: "mld-sample-selector__drag-handle",
+                            fill: "none",
+                            stroke: "currentColor",
+                            viewBox: "0 0 24 24"
+                          }, [
+                            createElementVNode("path", {
+                              "stroke-linecap": "round",
+                              "stroke-linejoin": "round",
+                              "stroke-width": "2",
+                              d: "M4 8h16M4 16h16"
+                            })
+                          ], -1)),
+                          createElementVNode("input", {
+                            type: "checkbox",
+                            checked: __props.modelValue.includes(sample),
+                            class: "mld-sample-selector__checkbox mld-sample-selector__checkbox--tiny",
+                            style: normalizeStyle({ accentColor: group.color }),
+                            onChange: ($event) => toggleSample(sample)
+                          }, null, 44, _hoisted_39),
+                          createElementVNode("span", _hoisted_40, toDisplayString(sample), 1),
+                          createElementVNode("button", {
+                            type: "button",
+                            class: "mld-sample-selector__remove-btn",
+                            onClick: ($event) => removeSampleFromGroup(sample, group.name),
+                            title: "Remove from group"
+                          }, [..._cache[24] || (_cache[24] = [
+                            createElementVNode("svg", {
+                              fill: "none",
+                              stroke: "currentColor",
+                              viewBox: "0 0 24 24"
+                            }, [
+                              createElementVNode("path", {
+                                "stroke-linecap": "round",
+                                "stroke-linejoin": "round",
+                                "stroke-width": "2",
+                                d: "M20 12H4"
+                              })
+                            ], -1)
+                          ])], 8, _hoisted_41)
+                        ], 42, _hoisted_38);
+                      }), 128))
+                    ], 4)) : createCommentVNode("", true)
+                  ]),
+                  _: 2
+                }, 1024)
+              ], 42, _hoisted_32);
+            }), 128)),
+            internalGroups.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_42, " Click the lightning bolt to auto-group samples ")) : createCommentVNode("", true)
+          ]),
+          ungroupedSamples.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_43, [
+            createElementVNode("div", {
+              class: "mld-sample-selector__ungrouped-header",
+              onClick: _cache[4] || (_cache[4] = ($event) => toggleGroupExpanded("__ungrouped__"))
+            }, [
+              (openBlock(), createElementBlock("svg", {
+                class: normalizeClass([
+                  "mld-sample-selector__chevron",
+                  isGroupExpanded("__ungrouped__") ? "mld-sample-selector__chevron--open" : ""
+                ]),
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24"
+              }, [..._cache[26] || (_cache[26] = [
+                createElementVNode("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  "stroke-width": "2",
+                  d: "M9 5l7 7-7 7"
+                }, null, -1)
+              ])], 2)),
+              _cache[27] || (_cache[27] = createElementVNode("span", { class: "mld-sample-selector__ungrouped-label" }, "Ungrouped", -1)),
+              createElementVNode("span", _hoisted_44, toDisplayString(ungroupedSamples.value.length), 1)
+            ]),
+            createVNode(Transition, { name: "mld-collapse" }, {
+              default: withCtx(() => [
+                isGroupExpanded("__ungrouped__") ? (openBlock(), createElementBlock("div", _hoisted_45, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(ungroupedSamples.value, (sample) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: sample,
+                      class: normalizeClass([
+                        "mld-sample-selector__sample",
+                        draggingSample.value === sample ? "mld-sample-selector__sample--dragging" : ""
+                      ]),
+                      draggable: "true",
+                      onDragstart: ($event) => handleDragStart(sample, null, $event),
+                      onDragend: handleDragEnd
+                    }, [
+                      _cache[28] || (_cache[28] = createElementVNode("svg", {
+                        class: "mld-sample-selector__drag-handle",
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24"
+                      }, [
+                        createElementVNode("path", {
+                          "stroke-linecap": "round",
+                          "stroke-linejoin": "round",
+                          "stroke-width": "2",
+                          d: "M4 8h16M4 16h16"
+                        })
+                      ], -1)),
+                      createElementVNode("input", {
+                        type: "checkbox",
+                        checked: __props.modelValue.includes(sample),
+                        class: "mld-sample-selector__checkbox mld-sample-selector__checkbox--small",
+                        onChange: ($event) => toggleSample(sample)
+                      }, null, 40, _hoisted_47),
+                      createElementVNode("span", _hoisted_48, toDisplayString(sample), 1)
+                    ], 42, _hoisted_46);
+                  }), 128))
+                ])) : createCommentVNode("", true)
+              ]),
+              _: 1
+            })
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_49, [
+            createVNode(_sfc_main$2, {
+              modelValue: newGroupName.value,
+              "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => newGroupName.value = $event),
+              placeholder: "New group name...",
+              class: "mld-sample-selector__new-group-input",
+              onKeyup: withKeys(addNewGroup, ["enter"])
+            }, null, 8, ["modelValue"]),
+            createVNode(_sfc_main$1, {
+              variant: "ghost",
+              size: "sm",
+              disabled: !newGroupName.value.trim(),
+              class: "mld-sample-selector__new-group-btn",
+              onClick: addNewGroup
+            }, {
+              default: withCtx(() => [..._cache[29] || (_cache[29] = [
+                createTextVNode(" Add ", -1)
+              ])]),
+              _: 1
+            }, 8, ["disabled"])
+          ]),
+          createElementVNode("input", {
+            ref_key: "colorPickerInput",
+            ref: colorPickerInput,
+            type: "color",
+            class: "mld-sample-selector__color-input",
+            value: editingGroupColor.value ? getGroupColor(editingGroupColor.value) : "#3B82F6",
+            onChange: handleColorChange
+          }, null, 40, _hoisted_50)
+        ])) : createCommentVNode("", true),
+        !groupingEnabled.value ? (openBlock(), createElementBlock("div", _hoisted_51, [
+          createElementVNode("div", _hoisted_52, [
+            _cache[30] || (_cache[30] = createElementVNode("svg", {
+              class: "mld-sample-selector__search-icon",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24"
+            }, [
+              createElementVNode("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"
+              })
+            ], -1)),
+            withDirectives(createElementVNode("input", {
+              "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => searchQuery.value = $event),
+              type: "text",
+              placeholder: "Search samples...",
+              class: "mld-sample-selector__search-input"
+            }, null, 512), [
+              [vModelText, searchQuery.value]
+            ])
+          ]),
+          createElementVNode("div", _hoisted_53, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(filteredSamples.value, (sample) => {
+              return openBlock(), createElementBlock("div", {
+                key: sample,
+                class: "mld-sample-selector__flat-item"
+              }, [
+                createElementVNode("input", {
+                  type: "checkbox",
+                  checked: __props.modelValue.includes(sample),
+                  class: "mld-sample-selector__checkbox",
+                  onChange: ($event) => toggleSample(sample)
+                }, null, 40, _hoisted_54),
+                createElementVNode("span", _hoisted_55, toDisplayString(sample), 1)
+              ]);
+            }), 128)),
+            filteredSamples.value.length === 0 && searchQuery.value.trim() ? (openBlock(), createElementBlock("div", _hoisted_56, ' No samples match "' + toDisplayString(searchQuery.value) + '" ', 1)) : createCommentVNode("", true)
+          ])
+        ])) : createCommentVNode("", true),
+        createVNode(_sfc_main$3, {
+          open: showMetadataModal.value,
+          samples: __props.samples,
+          onClose: _cache[7] || (_cache[7] = ($event) => showMetadataModal.value = false),
+          onApply: handleMetadataApply
+        }, null, 8, ["open", "samples"])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=SampleSelector.vue.js.map