@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

package/src/components/RackEditor.vue

@@ -1,429 +0,0 @@
-<script setup lang="ts">
-/** Multi-rack editor for managing collections of well-plate racks with add/remove/reorder controls and per-well editing. */
-import { computed, watch, type ComponentPublicInstance } from 'vue'
-import { SLOT_COLORS, SLOT_ORDER } from '../utils/color'
-import type { Rack, SlotPosition, WellPlateFormat, WellPlateSize, WellEditData, Well, WellEditField, WellSampleDropData, RackSampleDropMapper } from '../types'
-import { useListReorder } from '../composables/useListReorder'
-import { useRackEditor } from '../composables/useRackEditor'
-import WellPlate from './WellPlate.vue'
-
-interface Props {
-  modelValue?: Rack[]
-  activeRackId?: string
-  maxRacks?: number
-  minRacks?: number
-  allowReorder?: boolean
-  editable?: boolean
-  readonly?: boolean
-  wellPlateSize?: WellPlateSize
-  showLegend?: boolean
-  showBadges?: boolean
-  allowSampleDrop?: boolean
-  sampleDropMapper?: RackSampleDropMapper
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: undefined,
-  activeRackId: undefined,
-  maxRacks: 10,
-  minRacks: 1,
-  allowReorder: true,
-  editable: true,
-  readonly: false,
-  wellPlateSize: 'md',
-  showLegend: true,
-  showBadges: true,
-  allowSampleDrop: false,
-  sampleDropMapper: undefined,
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [racks: Rack[]]
-  'update:activeRackId': [rackId: string]
-  'rack-add': [rack: Rack]
-  'rack-remove': [rackId: string]
-  'rack-reorder': [rackIds: string[]]
-  'well-edit': [rackId: string, wellId: string, data: WellEditData]
-  'sample-drop': [rackId: string, wellId: string, data: WellSampleDropData, event: DragEvent]
-}>()
-
-interface RackWellEditorSlotProps {
-  rack?: Rack
-  rackId: string
-  wellId: string
-  wellData?: Partial<Well>
-  editFields: WellEditField[]
-  defaultInjectionVolume: number
-  position: { x: number; y: number }
-  save: (data: WellEditData) => void
-  clear: () => void
-  close: () => void
-}
-
-defineSlots<{
-  'well-editor'?: (props: RackWellEditorSlotProps) => unknown
-}>()
-
-const editor = useRackEditor(props.modelValue, {
-  maxRacks: props.maxRacks,
-  minRacks: props.minRacks,
-})
-
-// Sync external modelValue -> internal racks
-watch(
-  () => props.modelValue,
-  (newRacks) => {
-    if (newRacks && JSON.stringify(newRacks) !== JSON.stringify(editor.racks.value)) {
-      editor.racks.value = newRacks.map(r => ({ ...r }))
-    }
-  },
-)
-
-// Sync external activeRackId -> internal
-watch(
-  () => props.activeRackId,
-  (id) => {
-    if (id && id !== editor.activeRackId.value) {
-      editor.setActiveRack(id)
-    }
-  },
-)
-
-// Sync internal racks -> external modelValue
-watch(
-  editor.racks,
-  (newRacks) => {
-    emit('update:modelValue', newRacks)
-  },
-  { deep: true },
-)
-
-// Sync internal activeRackId -> external
-watch(
-  editor.activeRackId,
-  (id) => {
-    emit('update:activeRackId', id)
-  },
-)
-
-const SLOT_OPTIONS: readonly SlotPosition[] = SLOT_ORDER
-
-const FORMAT_OPTIONS: { value: WellPlateFormat; label: string }[] = [
-  { value: 54, label: '54' },
-  { value: 96, label: '96' },
-]
-
-// Rack tab reordering: HTML5 drag for pointers, Alt+Arrow for the keyboard,
-// both owned by the shared reorder composable.
-const tabRefs = new Map<string, HTMLElement>()
-
-const {
-  draggingId: draggingRackId,
-  dragOverId: dragOverRackId,
-  announcement: reorderAnnouncement,
-  announcerStyle,
-  onDragStart: onRackDragStart,
-  onDragOver: onRackDragOver,
-  onDragLeave: onRackDragLeave,
-  onDrop: onRackDrop,
-  onDragEnd: onRackDragEnd,
-  onKeydown: onRackReorderKeydown,
-} = useListReorder<Rack>({
-  items: () => editor.racks.value,
-  getId: (rack) => rack.id,
-  getLabel: (rack) => rack.name,
-  disabled: () => !props.allowReorder || props.readonly,
-  getElement: (id) => tabRefs.get(id),
-  itemNoun: 'Rack',
-  onReorder: ({ fromIndex, toIndex }) => {
-    editor.reorderRacks(fromIndex, toIndex)
-    emit('rack-reorder', editor.racks.value.map(r => r.id))
-  },
-})
-
-function setTabRef(id: string, el: Element | ComponentPublicInstance | null) {
-  if (el instanceof HTMLElement) {
-    tabRefs.set(id, el)
-  } else {
-    tabRefs.delete(id)
-  }
-}
-
-function handleAddRack() {
-  const rack = editor.addRack()
-  emit('rack-add', rack)
-}
-
-function handleRemoveRack(rackId: string) {
-  editor.removeRack(rackId)
-  emit('rack-remove', rackId)
-}
-
-function handleTabClick(rackId: string) {
-  editor.setActiveRack(rackId)
-}
-
-// Toolbar actions
-function handleFormatChange(format: WellPlateFormat) {
-  if (!editor.activeRack.value) return
-  editor.updateRack(editor.activeRack.value.id, { format })
-}
-
-function handleSlotChange(slot: SlotPosition) {
-  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)
-}
-
-// Well edit from WellPlate
-function handleWellEdit(wellId: string, data: WellEditData) {
-  if (!editor.activeRack.value) return
-  const rackId = editor.activeRack.value.id
-
-  const wellData: Partial<Well> = {
-    id: wellId,
-    state: data.label ? 'filled' : 'empty',
-    sampleType: data.sampleType || undefined,
-    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: string) {
-  if (!editor.activeRack.value) return
-  editor.clearWell(editor.activeRack.value.id, wellId)
-}
-
-function handleSampleDrop(wellId: string, data: WellSampleDropData, event: DragEvent) {
-  const rack = editor.activeRack.value
-  if (!rack) return
-
-  emit('sample-drop', rack.id, wellId, data, event)
-
-  const editData = props.sampleDropMapper?.(data, {
-    rack,
-    rackId: rack.id,
-    wellId,
-    event,
-  }) ?? defaultSampleDropEditData(wellId, data, rack)
-
-  if (!editData) return
-  handleWellEdit(wellId, { ...editData, wellId })
-}
-
-function defaultSampleDropEditData(wellId: string, data: WellSampleDropData, rack: Rack): WellEditData | null {
-  const label = data.label ?? data.sampleName ?? data.id ?? ''
-  if (!label.trim()) return null
-
-  return {
-    wellId,
-    label: label.trim(),
-    sampleType: data.sampleType ?? 'sample',
-    injectionVolume: data.injectionVolume ?? rack.injectionVolume,
-    injectionCount: data.injectionCount ?? 1,
-    customMethod: data.customMethod ?? '',
-  }
-}
-
-// Computed well count per rack
-function getWellCount(rack: Rack): number {
-  return Object.keys(rack.wells).length
-}
-
-const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
-</script>
-
-<template>
-  <div :class="['mint-rack-editor', { 'mint-rack-editor--readonly': readonly }]">
-    <!-- Rack tabs -->
-    <div class="mint-rack-editor__tabs">
-      <div class="mint-rack-editor__tabs-inner">
-        <div
-          v-for="(rack, rackIndex) in editor.racks.value"
-          :key="rack.id"
-          class="mint-rack-editor__tab-item"
-        >
-          <button
-            :ref="(el) => setTabRef(rack.id, el)"
-            type="button"
-            :draggable="allowReorder && !readonly"
-            :title="allowReorder && !readonly ? `${rack.name} — press Alt with the arrow keys to reorder` : undefined"
-            :class="[
-              'mint-rack-editor__tab',
-              {
-                'mint-rack-editor__tab--active': editor.activeRackId.value === rack.id,
-                'mint-rack-editor__tab--dragging': draggingRackId === rack.id,
-                'mint-rack-editor__tab--drag-over': dragOverRackId === rack.id,
-              },
-            ]"
-            @click="handleTabClick(rack.id)"
-            @keydown="onRackReorderKeydown($event, rack, rackIndex)"
-            @dragstart="onRackDragStart($event, rack, rackIndex)"
-            @dragover="onRackDragOver($event, rack, rackIndex)"
-            @dragleave="onRackDragLeave"
-            @drop="onRackDrop($event, rack, rackIndex)"
-            @dragend="onRackDragEnd"
-          >
-            <span
-              class="mint-rack-editor__slot-dot"
-              :style="{ backgroundColor: SLOT_COLORS[rack.slot] }"
-            />
-            {{ rack.name }}
-            <span
-              v-if="getWellCount(rack) > 0"
-              :class="[
-                'mint-rack-editor__count',
-                editor.activeRackId.value === rack.id ? 'mint-rack-editor__count--active' : 'mint-rack-editor__count--inactive',
-              ]"
-            >
-              {{ getWellCount(rack) }}
-            </span>
-          </button>
-          <button
-            v-if="editor.racks.value.length > minRacks && !readonly"
-            type="button"
-            class="mint-rack-editor__tab-remove"
-            :aria-label="`Remove ${rack.name}`"
-            @click.stop="handleRemoveRack(rack.id)"
-          >
-            &times;
-          </button>
-        </div>
-      </div>
-
-      <!-- Add rack button -->
-      <button
-        v-if="editor.racks.value.length < maxRacks && !readonly"
-        class="mint-rack-editor__add-btn"
-        @click="handleAddRack"
-      >
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M5 12h14" /><path d="M12 5v14" />
-        </svg>
-        Add Rack
-      </button>
-    </div>
-
-    <!-- Toolbar for active rack -->
-    <div v-if="editor.activeRack.value && !readonly" class="mint-rack-editor__toolbar">
-      <div class="mint-rack-editor__toolbar-group">
-        <!-- Format selector -->
-        <div class="mint-rack-editor__toolbar-section">
-          <span class="mint-rack-editor__toolbar-label">Plate</span>
-          <div class="mint-rack-editor__format-btns">
-            <button
-              v-for="opt in FORMAT_OPTIONS"
-              :key="opt.value"
-              :class="[
-                'mint-rack-editor__format-btn',
-                editor.activeRack.value.format === opt.value ? 'mint-rack-editor__format-btn--active' : 'mint-rack-editor__format-btn--inactive',
-              ]"
-              @click="handleFormatChange(opt.value)"
-            >
-              {{ opt.label }}
-            </button>
-          </div>
-        </div>
-
-        <div class="mint-rack-editor__toolbar-divider" />
-
-        <!-- Slot selector -->
-        <div class="mint-rack-editor__toolbar-section">
-          <span class="mint-rack-editor__toolbar-label">Slot</span>
-          <div class="mint-rack-editor__slot-btns">
-            <button
-              v-for="s in SLOT_OPTIONS"
-              :key="s"
-              class="mint-rack-editor__slot-btn"
-              :style="{
-                backgroundColor: editor.activeRack.value.slot === s ? SLOT_COLORS[s] : 'var(--bg-secondary)',
-                color: editor.activeRack.value.slot === s ? 'white' : SLOT_COLORS[s],
-                borderColor: editor.activeRack.value.slot === s ? 'transparent' : `${SLOT_COLORS[s]}40`,
-                boxShadow: editor.activeRack.value.slot === s ? '0 2px 4px rgba(0,0,0,0.15)' : 'none',
-              }"
-              @click="handleSlotChange(s)"
-            >
-              {{ s }}
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div class="mint-rack-editor__toolbar-spacer" />
-
-      <!-- Actions -->
-      <button class="mint-rack-editor__action-btn" @click="handleClearAll">
-        <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 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" />
-        </svg>
-        Clear
-      </button>
-      <button class="mint-rack-editor__action-btn" @click="handleFillSeries">
-        <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" /><path d="M3 9h18" /><path d="M3 15h18" /><path d="M9 3v18" /><path d="M15 3v18" />
-        </svg>
-        Fill Series
-      </button>
-    </div>
-
-    <!-- Plate view -->
-    <div v-if="editor.activeRack.value" class="mint-rack-editor__plate">
-      <WellPlate
-        :format="editor.activeRack.value.format"
-        :wells="activeRackWells"
-        :editable="editable && !readonly"
-        :show-well-labels="true"
-        :show-badges="showBadges"
-        :show-legend="showLegend"
-        :default-injection-volume="editor.activeRack.value.injectionVolume"
-        :readonly="readonly"
-        :size="wellPlateSize"
-        :show-sample-type-indicator="true"
-        :allow-sample-drop="allowSampleDrop && !readonly"
-        @well-edit="handleWellEdit"
-        @well-clear="handleWellClear"
-        @sample-drop="handleSampleDrop"
-      >
-        <template v-if="$slots['well-editor']" #well-editor="slotProps">
-          <slot
-            name="well-editor"
-            :rack="editor.activeRack.value"
-            :rack-id="editor.activeRack.value?.id ?? ''"
-            :well-id="slotProps.wellId"
-            :well-data="slotProps.wellData"
-            :edit-fields="slotProps.editFields"
-            :default-injection-volume="slotProps.defaultInjectionVolume"
-            :position="slotProps.position"
-            :save="slotProps.save"
-            :clear="slotProps.clear"
-            :close="slotProps.close"
-          />
-        </template>
-      </WellPlate>
-    </div>
-
-    <!-- Reorder announcements for screen readers -->
-    <div role="status" aria-live="polite" :style="announcerStyle">{{ reorderAnnouncement }}</div>
-  </div>
-</template>

package/src/components/fileBrowserPresentation.ts

@@ -1,39 +0,0 @@
-import type { FileEntry } from '../types/fileBrowserTypes'
-
-export const FILE_BROWSER_ICONS = {
-  disk: 'M4 5h16v14H4zM8 9h.01M4 12h16',
-  folder: 'M4 7h6l2 2h8v10H4z',
-  file: 'M14 3v5h5M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z',
-}
-
-export function formatCount(value: number): string {
-  // Thin spaces group digits without the comma/period ambiguity across locales.
-  return value.toLocaleString('en-US').replace(/,/g, ' ')
-}
-
-export function formatSize(entry: FileEntry): string {
-  if (entry.kind === 'directory') {
-    return entry.child_count === null || entry.child_count === undefined
-      ? '—'
-      : `${entry.child_count} item${entry.child_count === 1 ? '' : 's'}`
-  }
-  return formatBytes(entry.size_bytes ?? null)
-}
-
-export function formatBytes(bytes: number | null): string {
-  if (bytes === null) return '—'
-  const units = ['B', 'KB', 'MB', 'GB', 'TB']
-  let value = bytes
-  let unit = 0
-  while (value >= 1024 && unit < units.length - 1) {
-    value /= 1024
-    unit += 1
-  }
-  const rounded = value >= 100 || unit === 0 ? Math.round(value) : Number(value.toFixed(1))
-  return `${rounded} ${units[unit]}`
-}
-
-export function entryType(entry: FileEntry): string {
-  if (entry.kind === 'directory') return 'Folder'
-  return entry.extension ? entry.extension.replace('.', '').toUpperCase() : 'File'
-}

package/src/components/internal/FileBrowserDialogInternal.vue

@@ -1,75 +0,0 @@
-<script setup lang="ts">
-import { onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'
-import type { ModalSize } from '../../types'
-import { useFocusTrap } from '../../composables/useFocusTrap'
-import IconButton from '../IconButton.vue'
-
-const props = defineProps<{ open: boolean; label: string; size: ModalSize; variant?: 'picker' }>()
-const emit = defineEmits<{ close: [] }>()
-const containerRef = shallowRef<HTMLElement | null>(null)
-const active = shallowRef(false)
-useFocusTrap({ containerRef, active })
-
-// Activate after mounting so an initially open picker traps focus too.
-onMounted(() => {
-  active.value = props.open
-})
-watch(
-  () => props.open,
-  (open) => {
-    active.value = open
-  },
-)
-watch(
-  active,
-  (open, _, onCleanup) => {
-    if (!open) return
-    const overflow = document.body.style.overflow
-    document.body.style.overflow = 'hidden'
-    onCleanup(() => {
-      document.body.style.overflow = overflow
-    })
-  },
-  { flush: 'sync' },
-)
-onBeforeUnmount(() => {
-  active.value = false
-})
-</script>
-
-<template>
-  <Teleport to="body">
-    <div v-if="open" class="mint-file-browser-overlay">
-      <section
-        ref="containerRef"
-        class="mint-file-browser-dialog"
-        :class="[
-          `mint-file-browser-dialog--${size}`,
-          variant === 'picker' ? 'mint-picker-dialog' : '',
-        ]"
-        role="dialog"
-        aria-modal="true"
-        :aria-label="label"
-        tabindex="-1"
-        @keydown.esc.stop.prevent="emit('close')"
-      >
-        <header class="mint-file-browser-dialog__header">
-          <slot name="header" />
-          <IconButton size="sm" label="Close modal" @click="emit('close')">
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              aria-hidden="true"
-            >
-              <path d="M6 6l12 12M18 6L6 18" />
-            </svg>
-          </IconButton>
-        </header>
-        <slot />
-        <footer class="mint-file-browser-dialog__footer"><slot name="footer" /></footer>
-      </section>
-    </div>
-  </Teleport>
-</template>