@morscherlab/mld-sdk 0.6.0

package/dist/components/RackEditor.vue.d.ts

@@ -0,0 +1,40 @@
+import { Rack, WellPlateSize, WellEditData } from '../types';
+interface Props {
+    modelValue?: Rack[];
+    activeRackId?: string;
+    maxRacks?: number;
+    minRacks?: number;
+    allowReorder?: boolean;
+    editable?: boolean;
+    readonly?: boolean;
+    wellPlateSize?: WellPlateSize;
+    showLegend?: boolean;
+    showBadges?: boolean;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (racks: Rack[]) => any;
+    "well-edit": (rackId: string, wellId: string, data: WellEditData) => any;
+    "update:activeRackId": (rackId: string) => any;
+    "rack-add": (rack: Rack) => any;
+    "rack-remove": (rackId: string) => any;
+    "rack-reorder": (rackIds: string[]) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((racks: Rack[]) => any) | undefined;
+    "onWell-edit"?: ((rackId: string, wellId: string, data: WellEditData) => any) | undefined;
+    "onUpdate:activeRackId"?: ((rackId: string) => any) | undefined;
+    "onRack-add"?: ((rack: Rack) => any) | undefined;
+    "onRack-remove"?: ((rackId: string) => any) | undefined;
+    "onRack-reorder"?: ((rackIds: string[]) => any) | undefined;
+}>, {
+    modelValue: Rack[];
+    readonly: boolean;
+    showBadges: boolean;
+    editable: boolean;
+    showLegend: boolean;
+    activeRackId: string;
+    maxRacks: number;
+    minRacks: number;
+    allowReorder: boolean;
+    wellPlateSize: WellPlateSize;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/RackEditor.vue.js

@@ -0,0 +1,325 @@
+import { defineComponent, watch, ref, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, unref, normalizeStyle, createTextVNode, toDisplayString, createCommentVNode, withModifiers, createStaticVNode, createVNode } from "vue";
+import { useRackEditor } from "../composables/useRackEditor.js";
+import _sfc_main$1 from "./WellPlate.vue.js";
+/* empty css               */
+const _hoisted_1 = { class: "mld-rack-editor__tabs" };
+const _hoisted_2 = { class: "mld-rack-editor__tabs-inner" };
+const _hoisted_3 = ["draggable", "onClick", "onDragstart", "onDragover", "onDrop"];
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = {
+  key: 0,
+  class: "mld-rack-editor__toolbar"
+};
+const _hoisted_6 = { class: "mld-rack-editor__toolbar-group" };
+const _hoisted_7 = { style: { "display": "flex", "align-items": "center", "gap": "0.5rem" } };
+const _hoisted_8 = { class: "mld-rack-editor__format-btns" };
+const _hoisted_9 = ["onClick"];
+const _hoisted_10 = { style: { "display": "flex", "align-items": "center", "gap": "0.5rem" } };
+const _hoisted_11 = { class: "mld-rack-editor__slot-btns" };
+const _hoisted_12 = ["onClick"];
+const _hoisted_13 = {
+  key: 1,
+  class: "mld-rack-editor__plate"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "RackEditor",
+  props: {
+    modelValue: { default: void 0 },
+    activeRackId: { default: void 0 },
+    maxRacks: { default: 10 },
+    minRacks: { default: 1 },
+    allowReorder: { type: Boolean, default: true },
+    editable: { type: Boolean, default: true },
+    readonly: { type: Boolean, default: false },
+    wellPlateSize: { default: "md" },
+    showLegend: { type: Boolean, default: true },
+    showBadges: { type: Boolean, default: true }
+  },
+  emits: ["update:modelValue", "update:activeRackId", "rack-add", "rack-remove", "rack-reorder", "well-edit"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const editor = useRackEditor(props.modelValue, {
+      maxRacks: props.maxRacks,
+      minRacks: props.minRacks
+    });
+    watch(
+      () => props.modelValue,
+      (newRacks) => {
+        if (newRacks && JSON.stringify(newRacks) !== JSON.stringify(editor.racks.value)) {
+          editor.racks.value = newRacks.map((r) => ({ ...r }));
+        }
+      }
+    );
+    watch(
+      () => props.activeRackId,
+      (id) => {
+        if (id && id !== editor.activeRackId.value) {
+          editor.setActiveRack(id);
+        }
+      }
+    );
+    watch(
+      editor.racks,
+      (newRacks) => {
+        emit("update:modelValue", newRacks);
+      },
+      { deep: true }
+    );
+    watch(
+      editor.activeRackId,
+      (id) => {
+        emit("update:activeRackId", id);
+      }
+    );
+    const SLOT_COLORS = {
+      R: "#ef4444",
+      G: "#22c55e",
+      B: "#3b82f6",
+      Y: "#eab308"
+    };
+    const SLOT_OPTIONS = ["R", "G", "B", "Y"];
+    const FORMAT_OPTIONS = [
+      { value: 54, label: "54" },
+      { value: 96, label: "96" }
+    ];
+    const draggingRackId = ref(null);
+    const dragOverRackId = ref(null);
+    function handleAddRack() {
+      const rack = editor.addRack();
+      emit("rack-add", rack);
+    }
+    function handleRemoveRack(rackId) {
+      editor.removeRack(rackId);
+      emit("rack-remove", rackId);
+    }
+    function handleTabClick(rackId) {
+      editor.setActiveRack(rackId);
+    }
+    function handleRackDragStart(event, rackId) {
+      if (!props.allowReorder) return;
+      draggingRackId.value = rackId;
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", rackId);
+      }
+    }
+    function handleRackDragOver(event, rackId) {
+      event.preventDefault();
+      if (draggingRackId.value && draggingRackId.value !== rackId) {
+        dragOverRackId.value = rackId;
+      }
+    }
+    function handleRackDragLeave() {
+      dragOverRackId.value = null;
+    }
+    function handleRackDrop(event, targetRackId) {
+      event.preventDefault();
+      if (!draggingRackId.value || draggingRackId.value === targetRackId) {
+        clearDragState();
+        return;
+      }
+      const fromIndex = editor.racks.value.findIndex((r) => r.id === draggingRackId.value);
+      const toIndex = editor.racks.value.findIndex((r) => r.id === targetRackId);
+      if (fromIndex !== -1 && toIndex !== -1) {
+        editor.reorderRacks(fromIndex, toIndex);
+        emit("rack-reorder", editor.racks.value.map((r) => r.id));
+      }
+      clearDragState();
+    }
+    function handleRackDragEnd() {
+      clearDragState();
+    }
+    function clearDragState() {
+      draggingRackId.value = null;
+      dragOverRackId.value = null;
+    }
+    function handleFormatChange(format) {
+      if (!editor.activeRack.value) return;
+      editor.updateRack(editor.activeRack.value.id, { format });
+    }
+    function handleSlotChange(slot) {
+      if (!editor.activeRack.value) return;
+      editor.updateRack(editor.activeRack.value.id, { slot });
+    }
+    function handleClearAll() {
+      if (!editor.activeRack.value) return;
+      editor.clearAllWells(editor.activeRack.value.id);
+    }
+    function handleFillSeries() {
+      if (!editor.activeRack.value) return;
+      editor.fillSeries(editor.activeRack.value.id);
+    }
+    function handleWellEdit(wellId, data) {
+      if (!editor.activeRack.value) return;
+      const rackId = editor.activeRack.value.id;
+      const wellData = {
+        id: wellId,
+        state: data.label ? "filled" : "empty",
+        sampleType: data.sampleType || void 0,
+        metadata: {
+          label: data.label,
+          injectionVolume: data.injectionVolume,
+          injectionCount: data.injectionCount,
+          customMethod: data.customMethod || null
+        }
+      };
+      if (data.label) {
+        editor.setWellData(rackId, wellId, wellData);
+      } else {
+        editor.clearWell(rackId, wellId);
+      }
+      emit("well-edit", rackId, wellId, data);
+    }
+    function handleWellClear(wellId) {
+      if (!editor.activeRack.value) return;
+      editor.clearWell(editor.activeRack.value.id, wellId);
+    }
+    function getWellCount(rack) {
+      return Object.keys(rack.wells).length;
+    }
+    const activeRackWells = computed(() => {
+      var _a;
+      return ((_a = editor.activeRack.value) == null ? void 0 : _a.wells) ?? {};
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["mld-rack-editor", { "mld-rack-editor--readonly": __props.readonly }])
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(editor).racks.value, (rack) => {
+              return openBlock(), createElementBlock("button", {
+                key: rack.id,
+                draggable: __props.allowReorder && !__props.readonly,
+                class: normalizeClass([
+                  "mld-rack-editor__tab",
+                  {
+                    "mld-rack-editor__tab--active": unref(editor).activeRackId.value === rack.id,
+                    "mld-rack-editor__tab--dragging": draggingRackId.value === rack.id,
+                    "mld-rack-editor__tab--drag-over": dragOverRackId.value === rack.id
+                  }
+                ]),
+                onClick: ($event) => handleTabClick(rack.id),
+                onDragstart: ($event) => handleRackDragStart($event, rack.id),
+                onDragover: ($event) => handleRackDragOver($event, rack.id),
+                onDragleave: handleRackDragLeave,
+                onDrop: ($event) => handleRackDrop($event, rack.id),
+                onDragend: handleRackDragEnd
+              }, [
+                createElementVNode("span", {
+                  class: "mld-rack-editor__slot-dot",
+                  style: normalizeStyle({ backgroundColor: SLOT_COLORS[rack.slot] })
+                }, null, 4),
+                createTextVNode(" " + toDisplayString(rack.name) + " ", 1),
+                getWellCount(rack) > 0 ? (openBlock(), createElementBlock("span", {
+                  key: 0,
+                  class: normalizeClass([
+                    "mld-rack-editor__count",
+                    unref(editor).activeRackId.value === rack.id ? "mld-rack-editor__count--active" : "mld-rack-editor__count--inactive"
+                  ])
+                }, toDisplayString(getWellCount(rack)), 3)) : createCommentVNode("", true),
+                unref(editor).racks.value.length > __props.minRacks && !__props.readonly ? (openBlock(), createElementBlock("button", {
+                  key: 1,
+                  class: "mld-rack-editor__tab-remove",
+                  onClick: withModifiers(($event) => handleRemoveRack(rack.id), ["stop"])
+                }, " × ", 8, _hoisted_4)) : createCommentVNode("", true)
+              ], 42, _hoisted_3);
+            }), 128))
+          ]),
+          unref(editor).racks.value.length < __props.maxRacks && !__props.readonly ? (openBlock(), createElementBlock("button", {
+            key: 0,
+            class: "mld-rack-editor__add-btn",
+            onClick: handleAddRack
+          }, [..._cache[0] || (_cache[0] = [
+            createElementVNode("svg", {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, [
+              createElementVNode("path", { d: "M5 12h14" }),
+              createElementVNode("path", { d: "M12 5v14" })
+            ], -1),
+            createTextVNode(" Add Rack ", -1)
+          ])])) : createCommentVNode("", true)
+        ]),
+        unref(editor).activeRack.value && !__props.readonly ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          createElementVNode("div", _hoisted_6, [
+            createElementVNode("div", _hoisted_7, [
+              _cache[1] || (_cache[1] = createElementVNode("span", { class: "mld-rack-editor__toolbar-label" }, "Plate", -1)),
+              createElementVNode("div", _hoisted_8, [
+                (openBlock(), createElementBlock(Fragment, null, renderList(FORMAT_OPTIONS, (opt) => {
+                  return createElementVNode("button", {
+                    key: opt.value,
+                    class: normalizeClass([
+                      "mld-rack-editor__format-btn",
+                      unref(editor).activeRack.value.format === opt.value ? "mld-rack-editor__format-btn--active" : "mld-rack-editor__format-btn--inactive"
+                    ]),
+                    onClick: ($event) => handleFormatChange(opt.value)
+                  }, toDisplayString(opt.label), 11, _hoisted_9);
+                }), 64))
+              ])
+            ]),
+            _cache[3] || (_cache[3] = createElementVNode("div", { class: "mld-rack-editor__toolbar-divider" }, null, -1)),
+            createElementVNode("div", _hoisted_10, [
+              _cache[2] || (_cache[2] = createElementVNode("span", { class: "mld-rack-editor__toolbar-label" }, "Slot", -1)),
+              createElementVNode("div", _hoisted_11, [
+                (openBlock(), createElementBlock(Fragment, null, renderList(SLOT_OPTIONS, (s) => {
+                  return createElementVNode("button", {
+                    key: s,
+                    class: "mld-rack-editor__slot-btn",
+                    style: normalizeStyle({
+                      backgroundColor: unref(editor).activeRack.value.slot === s ? SLOT_COLORS[s] : "var(--bg-secondary)",
+                      color: unref(editor).activeRack.value.slot === s ? "white" : SLOT_COLORS[s],
+                      borderColor: unref(editor).activeRack.value.slot === s ? "transparent" : `${SLOT_COLORS[s]}40`,
+                      boxShadow: unref(editor).activeRack.value.slot === s ? "0 2px 4px rgba(0,0,0,0.15)" : "none"
+                    }),
+                    onClick: ($event) => handleSlotChange(s)
+                  }, toDisplayString(s), 13, _hoisted_12);
+                }), 64))
+              ])
+            ])
+          ]),
+          _cache[6] || (_cache[6] = createElementVNode("div", { class: "mld-rack-editor__toolbar-spacer" }, null, -1)),
+          createElementVNode("button", {
+            class: "mld-rack-editor__action-btn",
+            onClick: handleClearAll
+          }, [..._cache[4] || (_cache[4] = [
+            createStaticVNode('<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg> Clear ', 2)
+          ])]),
+          createElementVNode("button", {
+            class: "mld-rack-editor__action-btn",
+            onClick: handleFillSeries
+          }, [..._cache[5] || (_cache[5] = [
+            createStaticVNode('<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18"></path><path d="M3 15h18"></path><path d="M9 3v18"></path><path d="M15 3v18"></path></svg> Fill Series ', 2)
+          ])])
+        ])) : createCommentVNode("", true),
+        unref(editor).activeRack.value ? (openBlock(), createElementBlock("div", _hoisted_13, [
+          createVNode(_sfc_main$1, {
+            format: unref(editor).activeRack.value.format,
+            wells: activeRackWells.value,
+            editable: __props.editable && !__props.readonly,
+            "show-well-labels": true,
+            "show-badges": __props.showBadges,
+            "show-legend": __props.showLegend,
+            "default-injection-volume": unref(editor).activeRack.value.injectionVolume,
+            readonly: __props.readonly,
+            size: __props.wellPlateSize,
+            "show-sample-type-indicator": true,
+            onWellEdit: handleWellEdit,
+            onWellClear: handleWellClear
+          }, null, 8, ["format", "wells", "editable", "show-badges", "show-legend", "default-injection-volume", "readonly", "size"])
+        ])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=RackEditor.vue.js.map

package/dist/components/RackEditor.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RackEditor.vue.js","sources":["../../src/components/RackEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, watch } from 'vue'\nimport type { Rack, SlotPosition, WellPlateFormat, WellPlateSize, WellEditData, Well } from '../types'\nimport { useRackEditor } from '../composables/useRackEditor'\nimport WellPlate from './WellPlate.vue'\n\ninterface Props {\n  modelValue?: Rack[]\n  activeRackId?: string\n  maxRacks?: number\n  minRacks?: number\n  allowReorder?: boolean\n  editable?: boolean\n  readonly?: boolean\n  wellPlateSize?: WellPlateSize\n  showLegend?: boolean\n  showBadges?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  modelValue: undefined,\n  activeRackId: undefined,\n  maxRacks: 10,\n  minRacks: 1,\n  allowReorder: true,\n  editable: true,\n  readonly: false,\n  wellPlateSize: 'md',\n  showLegend: true,\n  showBadges: true,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [racks: Rack[]]\n  'update:activeRackId': [rackId: string]\n  'rack-add': [rack: Rack]\n  'rack-remove': [rackId: string]\n  'rack-reorder': [rackIds: string[]]\n  'well-edit': [rackId: string, wellId: string, data: WellEditData]\n}>()\n\nconst editor = useRackEditor(props.modelValue, {\n  maxRacks: props.maxRacks,\n  minRacks: props.minRacks,\n})\n\n// Sync external modelValue -> internal racks\nwatch(\n  () => props.modelValue,\n  (newRacks) => {\n    if (newRacks && JSON.stringify(newRacks) !== JSON.stringify(editor.racks.value)) {\n      editor.racks.value = newRacks.map(r => ({ ...r }))\n    }\n  },\n)\n\n// Sync external activeRackId -> internal\nwatch(\n  () => props.activeRackId,\n  (id) => {\n    if (id && id !== editor.activeRackId.value) {\n      editor.setActiveRack(id)\n    }\n  },\n)\n\n// Sync internal racks -> external modelValue\nwatch(\n  editor.racks,\n  (newRacks) => {\n    emit('update:modelValue', newRacks)\n  },\n  { deep: true },\n)\n\n// Sync internal activeRackId -> external\nwatch(\n  editor.activeRackId,\n  (id) => {\n    emit('update:activeRackId', id)\n  },\n)\n\nconst SLOT_COLORS: Record<SlotPosition, string> = {\n  R: '#ef4444',\n  G: '#22c55e',\n  B: '#3b82f6',\n  Y: '#eab308',\n}\n\nconst SLOT_OPTIONS: SlotPosition[] = ['R', 'G', 'B', 'Y']\n\nconst FORMAT_OPTIONS: { value: WellPlateFormat; label: string }[] = [\n  { value: 54, label: '54' },\n  { value: 96, label: '96' },\n]\n\n// Drag state for rack reordering\nconst draggingRackId = ref<string | null>(null)\nconst dragOverRackId = ref<string | null>(null)\n\nfunction handleAddRack() {\n  const rack = editor.addRack()\n  emit('rack-add', rack)\n}\n\nfunction handleRemoveRack(rackId: string) {\n  editor.removeRack(rackId)\n  emit('rack-remove', rackId)\n}\n\nfunction handleTabClick(rackId: string) {\n  editor.setActiveRack(rackId)\n}\n\n// Rack drag handlers\nfunction handleRackDragStart(event: DragEvent, rackId: string) {\n  if (!props.allowReorder) return\n  draggingRackId.value = rackId\n  if (event.dataTransfer) {\n    event.dataTransfer.effectAllowed = 'move'\n    event.dataTransfer.setData('text/plain', rackId)\n  }\n}\n\nfunction handleRackDragOver(event: DragEvent, rackId: string) {\n  event.preventDefault()\n  if (draggingRackId.value && draggingRackId.value !== rackId) {\n    dragOverRackId.value = rackId\n  }\n}\n\nfunction handleRackDragLeave() {\n  dragOverRackId.value = null\n}\n\nfunction handleRackDrop(event: DragEvent, targetRackId: string) {\n  event.preventDefault()\n  if (!draggingRackId.value || draggingRackId.value === targetRackId) {\n    clearDragState()\n    return\n  }\n\n  const fromIndex = editor.racks.value.findIndex(r => r.id === draggingRackId.value)\n  const toIndex = editor.racks.value.findIndex(r => r.id === targetRackId)\n\n  if (fromIndex !== -1 && toIndex !== -1) {\n    editor.reorderRacks(fromIndex, toIndex)\n    emit('rack-reorder', editor.racks.value.map(r => r.id))\n  }\n\n  clearDragState()\n}\n\nfunction handleRackDragEnd() {\n  clearDragState()\n}\n\nfunction clearDragState() {\n  draggingRackId.value = null\n  dragOverRackId.value = null\n}\n\n// Toolbar actions\nfunction handleFormatChange(format: WellPlateFormat) {\n  if (!editor.activeRack.value) return\n  editor.updateRack(editor.activeRack.value.id, { format })\n}\n\nfunction handleSlotChange(slot: SlotPosition) {\n  if (!editor.activeRack.value) return\n  editor.updateRack(editor.activeRack.value.id, { slot })\n}\n\nfunction handleClearAll() {\n  if (!editor.activeRack.value) return\n  editor.clearAllWells(editor.activeRack.value.id)\n}\n\nfunction handleFillSeries() {\n  if (!editor.activeRack.value) return\n  editor.fillSeries(editor.activeRack.value.id)\n}\n\n// Well edit from WellPlate\nfunction handleWellEdit(wellId: string, data: WellEditData) {\n  if (!editor.activeRack.value) return\n  const rackId = editor.activeRack.value.id\n\n  const wellData: Partial<Well> = {\n    id: wellId,\n    state: data.label ? 'filled' : 'empty',\n    sampleType: data.sampleType || undefined,\n    metadata: {\n      label: data.label,\n      injectionVolume: data.injectionVolume,\n      injectionCount: data.injectionCount,\n      customMethod: data.customMethod || null,\n    },\n  }\n\n  if (data.label) {\n    editor.setWellData(rackId, wellId, wellData)\n  } else {\n    editor.clearWell(rackId, wellId)\n  }\n\n  emit('well-edit', rackId, wellId, data)\n}\n\nfunction handleWellClear(wellId: string) {\n  if (!editor.activeRack.value) return\n  editor.clearWell(editor.activeRack.value.id, wellId)\n}\n\n// Computed well count per rack\nfunction getWellCount(rack: Rack): number {\n  return Object.keys(rack.wells).length\n}\n\nconst activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})\n</script>\n\n<template>\n  <div :class=\"['mld-rack-editor', { 'mld-rack-editor--readonly': readonly }]\">\n    <!-- Rack tabs -->\n    <div class=\"mld-rack-editor__tabs\">\n      <div class=\"mld-rack-editor__tabs-inner\">\n        <button\n          v-for=\"rack in editor.racks.value\"\n          :key=\"rack.id\"\n          :draggable=\"allowReorder && !readonly\"\n          :class=\"[\n            'mld-rack-editor__tab',\n            {\n              'mld-rack-editor__tab--active': editor.activeRackId.value === rack.id,\n              'mld-rack-editor__tab--dragging': draggingRackId === rack.id,\n              'mld-rack-editor__tab--drag-over': dragOverRackId === rack.id,\n            },\n          ]\"\n          @click=\"handleTabClick(rack.id)\"\n          @dragstart=\"handleRackDragStart($event, rack.id)\"\n          @dragover=\"handleRackDragOver($event, rack.id)\"\n          @dragleave=\"handleRackDragLeave\"\n          @drop=\"handleRackDrop($event, rack.id)\"\n          @dragend=\"handleRackDragEnd\"\n        >\n          <span\n            class=\"mld-rack-editor__slot-dot\"\n            :style=\"{ backgroundColor: SLOT_COLORS[rack.slot] }\"\n          />\n          {{ rack.name }}\n          <span\n            v-if=\"getWellCount(rack) > 0\"\n            :class=\"[\n              'mld-rack-editor__count',\n              editor.activeRackId.value === rack.id ? 'mld-rack-editor__count--active' : 'mld-rack-editor__count--inactive',\n            ]\"\n          >\n            {{ getWellCount(rack) }}\n          </span>\n          <!-- Remove button -->\n          <button\n            v-if=\"editor.racks.value.length > minRacks && !readonly\"\n            class=\"mld-rack-editor__tab-remove\"\n            @click.stop=\"handleRemoveRack(rack.id)\"\n          >\n            &times;\n          </button>\n        </button>\n      </div>\n\n      <!-- Add rack button -->\n      <button\n        v-if=\"editor.racks.value.length < maxRacks && !readonly\"\n        class=\"mld-rack-editor__add-btn\"\n        @click=\"handleAddRack\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M5 12h14\" /><path d=\"M12 5v14\" />\n        </svg>\n        Add Rack\n      </button>\n    </div>\n\n    <!-- Toolbar for active rack -->\n    <div v-if=\"editor.activeRack.value && !readonly\" class=\"mld-rack-editor__toolbar\">\n      <div class=\"mld-rack-editor__toolbar-group\">\n        <!-- Format selector -->\n        <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n          <span class=\"mld-rack-editor__toolbar-label\">Plate</span>\n          <div class=\"mld-rack-editor__format-btns\">\n            <button\n              v-for=\"opt in FORMAT_OPTIONS\"\n              :key=\"opt.value\"\n              :class=\"[\n                'mld-rack-editor__format-btn',\n                editor.activeRack.value.format === opt.value ? 'mld-rack-editor__format-btn--active' : 'mld-rack-editor__format-btn--inactive',\n              ]\"\n              @click=\"handleFormatChange(opt.value)\"\n            >\n              {{ opt.label }}\n            </button>\n          </div>\n        </div>\n\n        <div class=\"mld-rack-editor__toolbar-divider\" />\n\n        <!-- Slot selector -->\n        <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n          <span class=\"mld-rack-editor__toolbar-label\">Slot</span>\n          <div class=\"mld-rack-editor__slot-btns\">\n            <button\n              v-for=\"s in SLOT_OPTIONS\"\n              :key=\"s\"\n              class=\"mld-rack-editor__slot-btn\"\n              :style=\"{\n                backgroundColor: editor.activeRack.value.slot === s ? SLOT_COLORS[s] : 'var(--bg-secondary)',\n                color: editor.activeRack.value.slot === s ? 'white' : SLOT_COLORS[s],\n                borderColor: editor.activeRack.value.slot === s ? 'transparent' : `${SLOT_COLORS[s]}40`,\n                boxShadow: editor.activeRack.value.slot === s ? '0 2px 4px rgba(0,0,0,0.15)' : 'none',\n              }\"\n              @click=\"handleSlotChange(s)\"\n            >\n              {{ s }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"mld-rack-editor__toolbar-spacer\" />\n\n      <!-- Actions -->\n      <button class=\"mld-rack-editor__action-btn\" @click=\"handleClearAll\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M10 11v6\" /><path d=\"M14 11v6\" /><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6\" /><path d=\"M3 6h18\" /><path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\" />\n        </svg>\n        Clear\n      </button>\n      <button class=\"mld-rack-editor__action-btn\" @click=\"handleFillSeries\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" /><path d=\"M3 9h18\" /><path d=\"M3 15h18\" /><path d=\"M9 3v18\" /><path d=\"M15 3v18\" />\n        </svg>\n        Fill Series\n      </button>\n    </div>\n\n    <!-- Plate view -->\n    <div v-if=\"editor.activeRack.value\" class=\"mld-rack-editor__plate\">\n      <WellPlate\n        :format=\"editor.activeRack.value.format\"\n        :wells=\"activeRackWells\"\n        :editable=\"editable && !readonly\"\n        :show-well-labels=\"true\"\n        :show-badges=\"showBadges\"\n        :show-legend=\"showLegend\"\n        :default-injection-volume=\"editor.activeRack.value.injectionVolume\"\n        :readonly=\"readonly\"\n        :size=\"wellPlateSize\"\n        :show-sample-type-indicator=\"true\"\n        @well-edit=\"handleWellEdit\"\n        @well-clear=\"handleWellClear\"\n      />\n    </div>\n  </div>\n</template>\n\n<style>\n@import '../styles/components/rack-editor.css';\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_openBlock","_Fragment","_unref","_normalizeClass","_normalizeStyle","_createTextVNode","_toDisplayString","_withModifiers","_renderList","_createVNode","WellPlate"],"mappings":"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"}

package/dist/components/RackEditor.vue3.js

@@ -0,0 +1,6 @@
+import _sfc_main from "./RackEditor.vue.js";
+/* empty css                */
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=RackEditor.vue3.js.map

package/dist/components/RackEditor.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RackEditor.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/ReagentList.vue.d.ts

@@ -0,0 +1,46 @@
+export type StorageCondition = 'RT' | '4C' | '-20C' | '-80C';
+export type ReagentColumn = 'name' | 'catalog' | 'lot' | 'expiry' | 'storage' | 'location' | 'stock' | 'supplier';
+export interface Reagent {
+    id: string;
+    name: string;
+    catalogNumber?: string;
+    lotNumber?: string;
+    expiryDate?: Date | string;
+    storageCondition?: StorageCondition;
+    location?: string;
+    stockLevel?: number;
+    stockUnit?: string;
+    supplier?: string;
+    url?: string;
+}
+interface Props {
+    modelValue?: Reagent[];
+    readonly?: boolean;
+    showStockLevel?: boolean;
+    lowStockThreshold?: number;
+    columns?: ReagentColumn[];
+    sortable?: boolean;
+    searchable?: boolean;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (reagents: Reagent[]) => any;
+    remove: (reagentId: string) => any;
+    add: () => any;
+    edit: (reagent: Reagent) => any;
+    reorder: (reagentId: string, fromIndex: number, toIndex: number) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((reagents: Reagent[]) => any) | undefined;
+    onRemove?: ((reagentId: string) => any) | undefined;
+    onAdd?: (() => any) | undefined;
+    onEdit?: ((reagent: Reagent) => any) | undefined;
+    onReorder?: ((reagentId: string, fromIndex: number, toIndex: number) => any) | undefined;
+}>, {
+    modelValue: Reagent[];
+    readonly: boolean;
+    columns: ReagentColumn[];
+    sortable: boolean;
+    searchable: boolean;
+    showStockLevel: boolean;
+    lowStockThreshold: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;