@morscherlab/mint-sdk 1.2.0-beta.2 → 1.2.0-beta.3

package/src/components/ResourceCard.vue

@@ -1,161 +0,0 @@
-<script setup lang="ts">
-/** Card displaying a lab resource with availability status, specs, tags, and a book action. */
-import { computed } from 'vue'
-import BasePill from './BasePill.vue'
-import type { ResourceStatus, ResourceSpec } from '../types/components'
-
-interface Props {
-  name: string
-  description?: string
-  status?: ResourceStatus
-  image?: string
-  location?: string
-  specs?: ResourceSpec[]
-  tags?: string[]
-  nextAvailable?: string
-  showBookAction?: boolean
-  compact?: boolean
-  size?: 'sm' | 'md' | 'lg'
-  statusLabel?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  status: 'available',
-  specs: () => [],
-  tags: () => [],
-  showBookAction: true,
-  compact: false,
-  size: 'md',
-})
-
-const emit = defineEmits<{
-  book: []
-  click: []
-}>()
-
-const defaultStatusLabels: Record<ResourceStatus, string> = {
-  'available': 'Available',
-  'in-use': 'In Use',
-  'maintenance': 'Maintenance',
-  'offline': 'Offline',
-}
-
-const displayStatusLabel = computed(() => props.statusLabel ?? defaultStatusLabels[props.status])
-
-const cardClasses = computed(() => [
-  'mint-resource-card',
-  `mint-resource-card--${props.size}`,
-  { 'mint-resource-card--compact': props.compact },
-])
-
-function handleBook(event: MouseEvent) {
-  event.stopPropagation()
-  emit('book')
-}
-
-function handleClick() {
-  emit('click')
-}
-</script>
-
-<template>
-  <!-- Compact mode -->
-  <div v-if="compact" :class="cardClasses" @click="handleClick">
-    <slot name="status">
-      <span :class="['mint-resource-card__status-dot', `mint-resource-card__status-dot--${status}`]" />
-    </slot>
-
-    <span class="mint-resource-card__name">{{ name }}</span>
-
-    <span :class="['mint-resource-card__status-label', `mint-resource-card__status-label--${status}`]">
-      {{ displayStatusLabel }}
-    </span>
-
-    <slot name="action">
-      <button
-        v-if="showBookAction"
-        type="button"
-        class="mint-resource-card__book-btn"
-        @click="handleBook"
-      >
-        Book
-      </button>
-    </slot>
-  </div>
-
-  <!-- Card mode -->
-  <div v-else :class="cardClasses" @click="handleClick">
-    <div class="mint-resource-card__content">
-      <div class="mint-resource-card__header">
-        <!-- Image / fallback -->
-        <div class="mint-resource-card__image">
-          <slot name="image">
-            <img v-if="image" :src="image" :alt="name" />
-            <div v-else class="mint-resource-card__image-fallback">
-              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 00-.659 1.59V21a.75.75 0 01-.75.75h-6.24a.75.75 0 01-.75-.75v-2.44a2.25 2.25 0 00-.659-1.59L5 14.5m14 0h-2.25m-10.5 0H4" />
-              </svg>
-            </div>
-          </slot>
-        </div>
-
-        <!-- Body -->
-        <div class="mint-resource-card__body">
-          <div class="mint-resource-card__title-row">
-            <h3 class="mint-resource-card__name">{{ name }}</h3>
-
-            <slot name="status">
-              <div class="mint-resource-card__status">
-                <span :class="['mint-resource-card__status-dot', `mint-resource-card__status-dot--${status}`]" />
-                <span class="mint-resource-card__status-label">{{ displayStatusLabel }}</span>
-              </div>
-            </slot>
-          </div>
-
-          <p v-if="description" class="mint-resource-card__description">{{ description }}</p>
-
-          <p v-if="location" class="mint-resource-card__location">Location: {{ location }}</p>
-
-          <p v-if="nextAvailable" class="mint-resource-card__next-available">Next available: {{ nextAvailable }}</p>
-        </div>
-      </div>
-
-      <!-- Specs -->
-      <div v-if="specs.length > 0 || $slots.specs" class="mint-resource-card__specs">
-        <slot name="specs">
-          <div v-for="spec in specs" :key="spec.label" class="mint-resource-card__spec">
-            <span class="mint-resource-card__spec-label">{{ spec.label }}</span>
-            <span class="mint-resource-card__spec-value">{{ spec.value }}</span>
-          </div>
-        </slot>
-      </div>
-
-      <!-- Tags + action -->
-      <div v-if="tags.length > 0 || showBookAction || $slots.action" class="mint-resource-card__footer">
-        <div class="mint-resource-card__tags">
-          <BasePill v-for="tag in tags" :key="tag" size="sm">{{ tag }}</BasePill>
-        </div>
-
-        <div class="mint-resource-card__action">
-          <slot name="action">
-            <button
-              v-if="showBookAction"
-              type="button"
-              class="mint-resource-card__book-btn"
-              @click="handleBook"
-            >
-              Book Now
-              <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-              </svg>
-            </button>
-          </slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/resource-card.css';
-</style>

package/src/components/RuntimeUpdateNotice.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { RefreshCw } from 'lucide-vue-next'
-
-defineProps<{
-  visible: boolean
-}>()
-
-const emit = defineEmits<{
-  reload: []
-}>()
-</script>
-
-<template>
-  <div v-if="visible" class="mint-runtime-update" role="status">
-    <RefreshCw :size="16" aria-hidden="true" />
-    <span>A new version is ready.</span>
-    <button type="button" @click="emit('reload')">
-      Reload now
-    </button>
-  </div>
-</template>
-
-<style scoped>
-.mint-runtime-update {
-  position: fixed;
-  right: 20px;
-  bottom: 20px;
-  z-index: 1200;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  color: var(--mint-text-primary, #172033);
-  background: var(--mint-bg-primary, #fff);
-  border: 1px solid var(--mint-border-default, #d9e1ec);
-  border-radius: 10px;
-  box-shadow: 0 10px 28px rgb(15 23 42 / 16%);
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.mint-runtime-update button {
-  padding: 5px 9px;
-  color: #fff;
-  background: var(--mint-color-primary, #0f9f8f);
-  border: 0;
-  border-radius: 6px;
-  font: inherit;
-  cursor: pointer;
-}
-</style>

package/src/components/SampleHierarchyTree.story.vue

@@ -1,161 +0,0 @@
-<script setup lang="ts">
-import SampleHierarchyTree from './SampleHierarchyTree.vue'
-import type { TreeNode } from '../types'
-
-const mockNodes: TreeNode[] = [
-  {
-    id: 'study-1',
-    label: 'Drug Resistance Study',
-    type: 'study',
-    badge: 3,
-    badgeVariant: 'default',
-    children: [
-      {
-        id: 'exp-1',
-        label: 'Cisplatin Dose Response',
-        type: 'experiment',
-        children: [
-          {
-            id: 'plate-1',
-            label: 'Plate 1 (96-well)',
-            type: 'plate',
-            badge: 96,
-            children: [
-              { id: 'sample-1', label: 'HeLa Control', type: 'sample' },
-              { id: 'sample-2', label: 'HeLa 0.1 uM', type: 'sample' },
-              { id: 'sample-3', label: 'HeLa 1.0 uM', type: 'sample' },
-              { id: 'sample-4', label: 'HeLa 10 uM', type: 'sample' },
-            ],
-          },
-          {
-            id: 'plate-2',
-            label: 'Plate 2 (96-well)',
-            type: 'plate',
-            badge: 96,
-            children: [
-              { id: 'sample-5', label: 'MCF-7 Control', type: 'sample' },
-              { id: 'sample-6', label: 'MCF-7 0.1 uM', type: 'sample' },
-              { id: 'sample-7', label: 'MCF-7 1.0 uM', type: 'sample' },
-            ],
-          },
-        ],
-      },
-      {
-        id: 'exp-2',
-        label: 'Combination Treatment',
-        type: 'experiment',
-        children: [
-          {
-            id: 'plate-3',
-            label: 'Combo Plate A',
-            type: 'plate',
-            badge: 54,
-          },
-        ],
-      },
-      {
-        id: 'exp-3',
-        label: 'Cell Line Characterization',
-        type: 'experiment',
-        children: [
-          {
-            id: 'cell-1',
-            label: 'HeLa',
-            type: 'cell_line',
-            children: [
-              { id: 'p-1', label: 'Passage 12', type: 'passage' },
-              { id: 'p-2', label: 'Passage 15', type: 'passage', badge: 'low', badgeVariant: 'warning' },
-            ],
-          },
-          {
-            id: 'cell-2',
-            label: 'MCF-7',
-            type: 'cell_line',
-            children: [
-              { id: 'clone-1', label: 'Clone A', type: 'clone' },
-              { id: 'clone-2', label: 'Clone B', type: 'clone', badge: 'resistant', badgeVariant: 'error' },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-]
-
-function initState() {
-  return {
-    nodes: mockNodes,
-    expandAll: false,
-    showIcons: true,
-    showCounts: true,
-    size: 'md' as const,
-  }
-}
-</script>
-
-<template>
-  <Story title="Lab/SampleHierarchyTree">
-    <Variant title="Playground" :init-state="initState">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 500px;">
-          <SampleHierarchyTree
-            :nodes="state.nodes"
-            :expand-all="state.expandAll"
-            :show-icons="state.showIcons"
-            :show-counts="state.showCounts"
-            :size="state.size"
-          />
-        </div>
-      </template>
-      <template #controls="{ state }">
-        <HstCheckbox v-model="state.expandAll" title="Expand All" />
-        <HstCheckbox v-model="state.showIcons" title="Show Icons" />
-        <HstCheckbox v-model="state.showCounts" title="Show Counts" />
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="[
-            { value: 'sm', label: 'Small' },
-            { value: 'md', label: 'Medium' },
-            { value: 'lg', label: 'Large' },
-          ]"
-        />
-      </template>
-    </Variant>
-
-    <Variant title="Expanded">
-      <div style="padding: 2rem; max-width: 500px;">
-        <SampleHierarchyTree
-          :nodes="mockNodes"
-          expand-all
-        />
-      </div>
-    </Variant>
-
-    <Variant title="No Icons">
-      <div style="padding: 2rem; max-width: 500px;">
-        <SampleHierarchyTree
-          :nodes="mockNodes"
-          :show-icons="false"
-          expand-all
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Small">
-      <div style="padding: 2rem; max-width: 400px;">
-        <SampleHierarchyTree
-          :nodes="mockNodes"
-          size="sm"
-          expand-all
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Empty">
-      <div style="padding: 2rem; max-width: 500px;">
-        <SampleHierarchyTree :nodes="[]" />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/SampleHierarchyTree.vue

@@ -1,246 +0,0 @@
-<script setup lang="ts">
-/** Collapsible tree visualizing the biological sample hierarchy (study → experiment → plate → sample → cell line → passage → clone → treatment). */
-import { h, Transition, type VNode } from 'vue'
-import type { TreeNodeType, BadgeVariant, TreeNode } from '../types'
-import { useExpansionSet } from '../composables/useExpansionSet'
-
-interface Props {
-  nodes: TreeNode[]
-  defaultExpandedIds?: string[]
-  expandAll?: boolean
-  showIcons?: boolean
-  showCounts?: boolean
-  maxDepth?: number
-  size?: 'sm' | 'md' | 'lg'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  defaultExpandedIds: () => [],
-  expandAll: false,
-  showIcons: true,
-  showCounts: true,
-  size: 'md',
-})
-
-const emit = defineEmits<{
-  'node-click': [node: TreeNode]
-  'expand': [nodeId: string]
-  'collapse': [nodeId: string]
-}>()
-
-// Default icons by type (Lucide SVG paths - arrays to support multi-path icons)
-interface IconElement {
-  tag: 'path' | 'circle' | 'rect'
-  attrs: Record<string, string | number>
-}
-
-const typeIcons: Record<TreeNodeType, IconElement[]> = {
-  study: [
-    { tag: 'path', attrs: { d: 'M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z' } },
-  ],
-  experiment: [
-    { tag: 'path', attrs: { d: 'M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2' } },
-    { tag: 'path', attrs: { d: 'M6.453 15h11.094' } },
-    { tag: 'path', attrs: { d: 'M8.5 2h7' } },
-  ],
-  plate: [
-    { tag: 'rect', attrs: { width: '7', height: '7', x: '3', y: '3', rx: '1' } },
-    { tag: 'rect', attrs: { width: '7', height: '7', x: '14', y: '3', rx: '1' } },
-    { tag: 'rect', attrs: { width: '7', height: '7', x: '14', y: '14', rx: '1' } },
-    { tag: 'rect', attrs: { width: '7', height: '7', x: '3', y: '14', rx: '1' } },
-  ],
-  sample: [
-    { tag: 'circle', attrs: { cx: '12', cy: '12', r: '10' } },
-    { tag: 'path', attrs: { d: 'M12 6v6l4 2' } },
-  ],
-  cell_line: [
-    { tag: 'path', attrs: { d: 'M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5' } },
-    { tag: 'path', attrs: { d: 'M9 18h6' } },
-    { tag: 'path', attrs: { d: 'M10 22h4' } },
-  ],
-  passage: [
-    { tag: 'path', attrs: { d: 'M3 5h.01' } },
-    { tag: 'path', attrs: { d: 'M3 12h.01' } },
-    { tag: 'path', attrs: { d: 'M3 19h.01' } },
-    { tag: 'path', attrs: { d: 'M8 5h13' } },
-    { tag: 'path', attrs: { d: 'M8 12h13' } },
-    { tag: 'path', attrs: { d: 'M8 19h13' } },
-  ],
-  clone: [
-    { tag: 'rect', attrs: { width: '14', height: '14', x: '8', y: '8', rx: '2', ry: '2' } },
-    { tag: 'path', attrs: { d: 'M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2' } },
-  ],
-  treatment: [
-    { tag: 'path', attrs: { d: 'M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2' } },
-    { tag: 'path', attrs: { d: 'M6.453 15h11.094' } },
-    { tag: 'path', attrs: { d: 'M8.5 2h7' } },
-  ],
-  folder: [
-    { tag: 'path', attrs: { d: 'M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z' } },
-  ],
-  custom: [
-    { tag: 'path', attrs: { d: 'M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915' } },
-    { tag: 'circle', attrs: { cx: '12', cy: '12', r: '3' } },
-  ],
-}
-
-// Collect all node IDs for expand all
-function collectAllIds(nodes: TreeNode[]): string[] {
-  const ids: string[] = []
-  function traverse(node: TreeNode) {
-    ids.push(node.id)
-    if (node.children) {
-      node.children.forEach(traverse)
-    }
-  }
-  nodes.forEach(traverse)
-  return ids
-}
-
-const expansion = useExpansionSet({
-  defaultIds: () => props.defaultExpandedIds,
-  allIds: () => collectAllIds(props.nodes),
-  expandAll: () => props.expandAll,
-})
-
-function isExpanded(nodeId: string): boolean {
-  return expansion.isExpanded(nodeId)
-}
-
-function toggleExpand(node: TreeNode) {
-  const expanded = expansion.toggle(node.id)
-  if (expanded) {
-    emit('expand', node.id)
-  } else {
-    emit('collapse', node.id)
-  }
-}
-
-function handleNodeClick(node: TreeNode) {
-  emit('node-click', node)
-}
-
-function getIconElements(node: TreeNode): IconElement[] {
-  if (node.icon) return [{ tag: 'path', attrs: { d: node.icon } }]
-  return typeIcons[node.type || 'custom']
-}
-
-function getBadgeContent(node: TreeNode): string | number | undefined {
-  if (node.badge !== undefined) return node.badge
-  if (props.showCounts && node.children && node.children.length > 0) {
-    return node.children.length
-  }
-  return undefined
-}
-
-function getBadgeVariant(node: TreeNode): BadgeVariant {
-  return node.badgeVariant || 'default'
-}
-
-function hasChildren(node: TreeNode): boolean {
-  return !!node.children && node.children.length > 0
-}
-
-function canShowChildren(node: TreeNode, depth: number): boolean {
-  if (!hasChildren(node)) return false
-  if (props.maxDepth !== undefined && depth >= props.maxDepth) return false
-  return isExpanded(node.id)
-}
-
-// Render tree node recursively
-function renderNode(node: TreeNode, depth: number): VNode {
-  const children = node.children
-  const expanded = isExpanded(node.id)
-  const canExpand = hasChildren(node)
-  const showChildNodes = canShowChildren(node, depth)
-  const badge = getBadgeContent(node)
-  const badgeVar = getBadgeVariant(node)
-  const iconElements = getIconElements(node)
-
-  const header = h(
-    'div',
-    {
-      class: 'mint-sample-tree__node-header',
-      onClick: () => handleNodeClick(node),
-    },
-    [
-      canExpand
-        ? h(
-            'button',
-            {
-              type: 'button',
-              class: 'mint-sample-tree__toggle',
-              'aria-label': expanded ? 'Collapse' : 'Expand',
-              onClick: (e: Event) => {
-                e.stopPropagation()
-                toggleExpand(node)
-              },
-            },
-            [
-              h('svg', { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, [
-                h('path', { d: 'm9 18 6-6-6-6' }),
-              ]),
-            ]
-          )
-        : h('span', { class: 'mint-sample-tree__toggle-placeholder' }),
-      props.showIcons
-        ? h('span', { class: ['mint-sample-tree__icon', `mint-sample-tree__icon--${node.type || 'custom'}`] }, [
-            h('svg', { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' },
-              iconElements.map(el => h(el.tag, el.attrs))
-            ),
-          ])
-        : null,
-      h('span', { class: 'mint-sample-tree__label' }, node.label),
-      badge !== undefined
-        ? h('span', { class: ['mint-sample-tree__badge', `mint-sample-tree__badge--${badgeVar}`] }, String(badge))
-        : null,
-    ]
-  )
-
-  const childNodes =
-    showChildNodes && children
-      ? h(
-          Transition,
-          { enterActiveClass: 'mint-sample-tree__children--entering', leaveActiveClass: 'mint-sample-tree__children--leaving' },
-          () => h('div', { class: 'mint-sample-tree__children' }, children.map((child) => renderNode(child, depth + 1)))
-        )
-      : null
-
-  return h(
-    'div',
-    {
-      key: node.id,
-      class: ['mint-sample-tree__node', expanded ? 'mint-sample-tree__node--expanded' : '', !canExpand ? 'mint-sample-tree__node--leaf' : ''],
-      role: 'treeitem',
-      'aria-expanded': canExpand ? expanded : undefined,
-    },
-    [header, childNodes]
-  )
-}
-
-// Render the entire tree
-function renderTree(): VNode[] {
-  return props.nodes.map((node) => renderNode(node, 0))
-}
-</script>
-
-<template>
-  <div :class="['mint-sample-tree', `mint-sample-tree--${size}`]" role="tree">
-    <!-- Empty state -->
-    <div v-if="nodes.length === 0" class="mint-sample-tree__empty">
-      <svg class="mint-sample-tree__empty-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
-      </svg>
-      <p class="mint-sample-tree__empty-text">No items</p>
-    </div>
-
-    <!-- Tree nodes rendered via render function -->
-    <template v-else>
-      <component :is="() => renderTree()" />
-    </template>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/sample-hierarchy-tree.css';
-</style>