@morscherlab/mld-sdk 0.7.8 → 0.8.2

package/dist/composables/useExperimentSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"useExperimentSelector.js","sources":["../../src/composables/useExperimentSelector.ts"],"sourcesContent":["import { ref, reactive, watch, type Ref } from 'vue'\nimport { useApi } from './useApi'\nimport type { ExperimentSummary, ExperimentListResponse, ExperimentFilters } from '../types'\n\nexport interface UseExperimentSelectorOptions {\n  experimentType?: string\n  apiBaseUrl?: string\n  limit?: number\n  immediate?: boolean\n}\n\nexport interface UseExperimentSelectorReturn {\n  experiments: Ref<ExperimentSummary[]>\n  total: Ref<number>\n  selectedExperiment: Ref<ExperimentSummary | null>\n  filters: ExperimentFilters\n  isLoading: Ref<boolean>\n  error: Ref<string | null>\n  fetch: () => Promise<void>\n  select: (experiment: ExperimentSummary) => void\n  clear: () => void\n}\n\nexport function useExperimentSelector(\n  options: UseExperimentSelectorOptions = {},\n): UseExperimentSelectorReturn {\n  const { limit = 100, immediate = false, experimentType, apiBaseUrl } = options\n  const api = useApi({ baseUrl: apiBaseUrl })\n\n  const experiments = ref<ExperimentSummary[]>([])\n  const total = ref(0)\n  const selectedExperiment = ref<ExperimentSummary | null>(null)\n  const isLoading = ref(false)\n  const error = ref<string | null>(null)\n\n  const filters: ExperimentFilters = reactive({\n    search: undefined,\n    status: undefined,\n    project: undefined,\n  })\n\n  async function fetchExperiments(): Promise<void> {\n    isLoading.value = true\n    error.value = null\n    try {\n      const params = new URLSearchParams()\n      if (experimentType) params.set('experiment_type', experimentType)\n      if (filters.status) params.set('status', filters.status)\n      if (filters.search) params.set('search', filters.search)\n      if (filters.project) params.set('project', filters.project)\n      params.set('limit', String(limit))\n\n      const query = params.toString()\n      const url = `/api/experiments${query ? `?${query}` : ''}`\n      const data = await api.get<ExperimentListResponse>(url)\n      experiments.value = data.experiments\n      total.value = data.total\n    } catch (e) {\n      error.value = e instanceof Error ? e.message : 'Failed to fetch experiments'\n      experiments.value = []\n      total.value = 0\n    } finally {\n      isLoading.value = false\n    }\n  }\n\n  function select(experiment: ExperimentSummary): void {\n    selectedExperiment.value = experiment\n  }\n\n  function clear(): void {\n    selectedExperiment.value = null\n    filters.search = undefined\n    filters.status = undefined\n    filters.project = undefined\n  }\n\n  // Debounced watch on search filter\n  let debounceTimer: ReturnType<typeof setTimeout> | null = null\n  watch(\n    () => filters.search,\n    () => {\n      if (debounceTimer) clearTimeout(debounceTimer)\n      debounceTimer = setTimeout(() => {\n        fetchExperiments()\n      }, 300)\n    },\n  )\n\n  // Immediate watch on status/project filters (no debounce needed)\n  watch(\n    () => [filters.status, filters.project],\n    () => {\n      fetchExperiments()\n    },\n  )\n\n  if (immediate) {\n    fetchExperiments()\n  }\n\n  return {\n    experiments,\n    total,\n    selectedExperiment,\n    filters,\n    isLoading,\n    error,\n    fetch: fetchExperiments,\n    select,\n    clear,\n  }\n}\n"],"names":[],"mappings":";;AAuBO,SAAS,sBACd,UAAwC,IACX;AAC7B,QAAM,EAAE,QAAQ,KAAK,YAAY,OAAO,gBAAgB,eAAe;AACvE,QAAM,MAAM,OAAO,EAAE,SAAS,YAAY;AAE1C,QAAM,cAAc,IAAyB,EAAE;AAC/C,QAAM,QAAQ,IAAI,CAAC;AACnB,QAAM,qBAAqB,IAA8B,IAAI;AAC7D,QAAM,YAAY,IAAI,KAAK;AAC3B,QAAM,QAAQ,IAAmB,IAAI;AAErC,QAAM,UAA6B,SAAS;AAAA,IAC1C,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,EAAA,CACV;AAED,iBAAe,mBAAkC;AAC/C,cAAU,QAAQ;AAClB,UAAM,QAAQ;AACd,QAAI;AACF,YAAM,SAAS,IAAI,gBAAA;AACnB,UAAI,eAAgB,QAAO,IAAI,mBAAmB,cAAc;AAChE,UAAI,QAAQ,OAAQ,QAAO,IAAI,UAAU,QAAQ,MAAM;AACvD,UAAI,QAAQ,OAAQ,QAAO,IAAI,UAAU,QAAQ,MAAM;AACvD,UAAI,QAAQ,QAAS,QAAO,IAAI,WAAW,QAAQ,OAAO;AAC1D,aAAO,IAAI,SAAS,OAAO,KAAK,CAAC;AAEjC,YAAM,QAAQ,OAAO,SAAA;AACrB,YAAM,MAAM,mBAAmB,QAAQ,IAAI,KAAK,KAAK,EAAE;AACvD,YAAM,OAAO,MAAM,IAAI,IAA4B,GAAG;AACtD,kBAAY,QAAQ,KAAK;AACzB,YAAM,QAAQ,KAAK;AAAA,IACrB,SAAS,GAAG;AACV,YAAM,QAAQ,aAAa,QAAQ,EAAE,UAAU;AAC/C,kBAAY,QAAQ,CAAA;AACpB,YAAM,QAAQ;AAAA,IAChB,UAAA;AACE,gBAAU,QAAQ;AAAA,IACpB;AAAA,EACF;AAEA,WAAS,OAAO,YAAqC;AACnD,uBAAmB,QAAQ;AAAA,EAC7B;AAEA,WAAS,QAAc;AACrB,uBAAmB,QAAQ;AAC3B,YAAQ,SAAS;AACjB,YAAQ,SAAS;AACjB,YAAQ,UAAU;AAAA,EACpB;AAGA,MAAI,gBAAsD;AAC1D;AAAA,IACE,MAAM,QAAQ;AAAA,IACd,MAAM;AACJ,UAAI,4BAA4B,aAAa;AAC7C,sBAAgB,WAAW,MAAM;AAC/B,yBAAA;AAAA,MACF,GAAG,GAAG;AAAA,IACR;AAAA,EAAA;AAIF;AAAA,IACE,MAAM,CAAC,QAAQ,QAAQ,QAAQ,OAAO;AAAA,IACtC,MAAM;AACJ,uBAAA;AAAA,IACF;AAAA,EAAA;AAGF,MAAI,WAAW;AACb,qBAAA;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useExperimentSelector.js","sources":["../../src/composables/useExperimentSelector.ts"],"sourcesContent":["import { ref, reactive, computed, watch, onScopeDispose, type Ref, type ComputedRef } from 'vue'\nimport { useApi } from './useApi'\nimport type { ExperimentSummary, ExperimentListResponse, ExperimentFilters } from '../types'\n\nexport interface UseExperimentSelectorOptions {\n  experimentType?: string\n  apiBaseUrl?: string\n  limit?: number\n  immediate?: boolean\n}\n\nexport interface UseExperimentSelectorReturn {\n  experiments: Ref<ExperimentSummary[]>\n  total: Ref<number>\n  selectedExperiment: Ref<ExperimentSummary | null>\n  filters: ExperimentFilters\n  isLoading: Ref<boolean>\n  error: Ref<string | null>\n  page: Ref<number>\n  hasMore: ComputedRef<boolean>\n  fetch: () => Promise<void>\n  loadMore: () => Promise<void>\n  reset: () => void\n  select: (experiment: ExperimentSummary) => void\n  clear: () => void\n}\n\nexport function useExperimentSelector(\n  options: UseExperimentSelectorOptions = {},\n): UseExperimentSelectorReturn {\n  const { limit = 100, immediate = false, experimentType, apiBaseUrl } = options\n  const api = useApi({ baseUrl: apiBaseUrl })\n\n  const experiments = ref<ExperimentSummary[]>([])\n  const total = ref(0)\n  const selectedExperiment = ref<ExperimentSummary | null>(null)\n  const isLoading = ref(false)\n  const error = ref<string | null>(null)\n  const page = ref(0)\n\n  const hasMore = computed(() => experiments.value.length < total.value)\n\n  async function fetchExperiments(): Promise<void> {\n    isLoading.value = true\n    error.value = null\n    try {\n      const params = new URLSearchParams()\n      if (experimentType) params.set('experiment_type', experimentType)\n      if (filters.status) params.set('status', filters.status)\n      if (filters.search) params.set('search', filters.search)\n      if (filters.project) params.set('project', filters.project)\n      params.set('limit', String(limit))\n      params.set('skip', String(page.value * limit))\n\n      const query = params.toString()\n      const url = `/api/experiments${query ? `?${query}` : ''}`\n      const data = await api.get<ExperimentListResponse>(url)\n\n      if (page.value === 0) {\n        experiments.value = data.experiments\n      } else {\n        experiments.value = [...experiments.value, ...data.experiments]\n      }\n      total.value = data.total\n    } catch (e) {\n      error.value = e instanceof Error ? e.message : 'Failed to fetch experiments'\n      if (page.value === 0) {\n        experiments.value = []\n        total.value = 0\n      }\n    } finally {\n      isLoading.value = false\n    }\n  }\n\n  async function loadMore(): Promise<void> {\n    if (!hasMore.value || isLoading.value) return\n    page.value++\n    await fetchExperiments()\n  }\n\n  function reset(): void {\n    page.value = 0\n    experiments.value = []\n    total.value = 0\n    fetchExperiments()\n  }\n\n  function select(experiment: ExperimentSummary): void {\n    selectedExperiment.value = experiment\n  }\n\n  function clear(): void {\n    selectedExperiment.value = null\n    filters.search = undefined\n    filters.status = undefined\n    filters.project = undefined\n    page.value = 0\n  }\n\n  const filters: ExperimentFilters = reactive({\n    search: undefined,\n    status: undefined,\n    project: undefined,\n  })\n\n  // Debounced watch on search filter\n  let debounceTimer: ReturnType<typeof setTimeout> | null = null\n  watch(\n    () => filters.search,\n    () => {\n      if (debounceTimer) clearTimeout(debounceTimer)\n      debounceTimer = setTimeout(() => {\n        page.value = 0\n        fetchExperiments()\n      }, 300)\n    },\n  )\n\n  // Immediate watch on status/project filters (no debounce needed)\n  watch(\n    () => [filters.status, filters.project],\n    () => {\n      page.value = 0\n      fetchExperiments()\n    },\n  )\n\n  onScopeDispose(() => {\n    if (debounceTimer) clearTimeout(debounceTimer)\n  })\n\n  if (immediate) {\n    fetchExperiments()\n  }\n\n  return {\n    experiments,\n    total,\n    selectedExperiment,\n    filters,\n    isLoading,\n    error,\n    page,\n    hasMore,\n    fetch: fetchExperiments,\n    loadMore,\n    reset,\n    select,\n    clear,\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { MLDSdk, default } from './install';
 export { BaseButton, BaseInput, BaseTextarea, BaseSelect, BaseCheckbox, BaseToggle, BaseRadioGroup, BaseSlider, ColorSlider, BaseTabs, BaseModal, FormField, DatePicker, TimePicker, TagsInput, NumberInput, FileUploader, AlertBox, ToastNotification, IconButton, ThemeToggle, SettingsButton, CollapsibleCard, AppTopBar, AppSidebar, AppLayout, AppContainer, Skeleton, WellPlate, RackEditor, SampleLegend, PlateMapEditor, ExperimentTimeline, SampleSelector, GroupingModal, AutoGroupModal, GroupAssigner, MoleculeInput, ConcentrationInput, DoseCalculator, ReagentList, SampleHierarchyTree, ProtocolStepEditor, SegmentedControl, MultiSelect, BasePill, DropdownButton, Calendar, DataFrame, LoadingSpinner, Divider, StatusIndicator, ProgressBar, Avatar, EmptyState, Breadcrumb, Tooltip, ConfirmDialog, ChartContainer, SettingsModal, ScientificNumber, ChemicalFormula, FormulaInput, SequenceInput, UnitInput, StepWizard, AuditTrail, BatchProgressList, ExperimentDataViewer, ExperimentCodeBadge, DateTimePicker, TimeRangeInput, ScheduleCalendar, ResourceCard, ExperimentSelectorModal, FitPanel, } from './components';
-export { useApi, useAuth, usePasskey, useTheme, useToast, usePlatformContext, useWellPlateEditor, useConcentrationUnits, useDoseCalculator, useProtocolTemplates, useRackEditor, useChemicalFormula, ATOMIC_WEIGHTS, useSequenceUtils, type ApiClientOptions, type UseWellPlateEditorOptions, type UseWellPlateEditorReturn, type UseRackEditorOptions, type UseRackEditorReturn, type ConcentrationValue, type ConcentrationUnit, type VolumeValue, type VolumeUnit, type StepTemplate, type FormulaParseResult, type FormulaPart, type SequenceType, type SequenceStats, parseTime, formatTime, generateTimeSlots, rangesOverlap, durationMinutes, formatDuration, isTimeInRange, findAvailableSlots, snapToSlot, addMinutes, compareTime, useScheduleDrag, usePluginConfig, type UsePluginConfigReturn, useAutoGroup, DEFAULT_COLORS, useExperimentSelector, type UseExperimentSelectorOptions, type UseExperimentSelectorReturn, } from './composables';
+export { useApi, useAuth, usePasskey, useTheme, useToast, usePlatformContext, useWellPlateEditor, useConcentrationUnits, useDoseCalculator, useProtocolTemplates, useRackEditor, useChemicalFormula, ATOMIC_WEIGHTS, useSequenceUtils, type ApiClientOptions, type UseWellPlateEditorOptions, type UseWellPlateEditorReturn, type UseRackEditorOptions, type UseRackEditorReturn, type ConcentrationValue, type ConcentrationUnit, type VolumeValue, type VolumeUnit, type StepTemplate, type FormulaParseResult, type FormulaPart, type SequenceType, type SequenceStats, parseTime, formatTime, generateTimeSlots, rangesOverlap, durationMinutes, formatDuration, isTimeInRange, findAvailableSlots, snapToSlot, addMinutes, compareTime, useScheduleDrag, usePluginConfig, type UsePluginConfigReturn, useAutoGroup, DEFAULT_COLORS, useExperimentSelector, type UseExperimentSelectorOptions, type UseExperimentSelectorReturn, formatExperimentDate, EXPERIMENT_STATUS_OPTIONS, EXPERIMENT_STATUS_VARIANT_MAP, EXPERIMENT_STATUS_LABELS, useExperimentData, type UseExperimentDataOptions, type UseExperimentDataReturn, } from './composables';
 export { useAuthStore, useSettingsStore, colorPalettes, type SettingsState, } from './stores';
 export type { ContainerDirection, ButtonVariant, ButtonSize, InputType, ModalSize, AlertType, Toast, TabItem, SelectOption, RadioOption, FormFieldProps, SidebarToolSection, CollapsibleState, TopBarVariant, TopBarPage, TopBarTab, TopBarTabOption, TopBarSettingsConfig, WellPlateFormat, WellState, WellPlateSelectionMode, Well, HeatmapColorScale, HeatmapConfig, SlotPosition, WellExtendedData, WellEditData, WellEditField, WellLegendItem, Rack, SampleType, PlateMap, PlateMapEditorState, ProtocolStepType, ProtocolStepStatus, ProtocolStep, SampleGroup, GroupItem, OutlierAction, InputMode, OutlierInfo, ColumnInfo, MetadataRow, AutoGroupResult, ParsedCsvData, FileUploaderMode, SegmentedOption, SegmentedControlVariant, SegmentedControlSize, MultiSelectOption, MultiSelectSize, PillVariant, PillSize, CalendarSelectionMode, CalendarMarker, CalendarDayContext, SortDirection, SortState, DataFrameColumn, PaginationState, SpinnerSize, SpinnerVariant, DividerSpacing, StatusType, ProgressVariant, ProgressSize, AvatarSize, EmptyStateColor, EmptyStateSize, BreadcrumbItem, TooltipPosition, ConfirmVariant, SettingsTab, NumberNotation, TimePickerFormat, TimeRange, ScheduleView, ScheduleEventStatus, ScheduleEvent, ScheduleBlockedSlot, ScheduleSlotContext, ScheduleEventCreateContext, ScheduleEventUpdateContext, ResourceStatus, ResourceSpec, ExperimentStatus, ExperimentSummary, ExperimentListResponse, ExperimentFilters, FitState, FitResultSummary, UnitOption, WizardStep, WizardStepState, AuditEntryType, AuditEntry, BatchItemStatus, BatchItem, BatchSummary, AuthConfig, UserInfo, LoginResponse, TokenVerifyResponse, RegisterRequest, UpdateProfileRequest, CredentialInfo, SummaryData, SummarySection, SummarySectionItem, TreeNode, TreeNodeType, PluginInfo, PluginNavItem, PluginSettings, PluginSettingField, PlatformContext, PlatformEventType, PlatformEvent, ThemeMode, ColorPalette, TableDensity, } from './types';

package/dist/index.js

@@ -169,6 +169,8 @@ import { useScheduleDrag } from "./composables/useScheduleDrag.js";
 import { DEFAULT_COLORS, useAutoGroup } from "./composables/useAutoGroup.js";
 import { usePluginConfig } from "./composables/usePluginConfig.js";
 import { useExperimentSelector } from "./composables/useExperimentSelector.js";
+import { EXPERIMENT_STATUS_LABELS, EXPERIMENT_STATUS_OPTIONS, EXPERIMENT_STATUS_VARIANT_MAP, formatExperimentDate } from "./composables/experiment-utils.js";
+import { useExperimentData } from "./composables/useExperimentData.js";
 import { useAuthStore } from "./stores/auth.js";
 import { colorPalettes, useSettingsStore } from "./stores/settings.js";
 export {
@@ -208,6 +210,9 @@ export {
   default37 as Divider,
   default58 as DoseCalculator,
   default16 as DropdownButton,
+  EXPERIMENT_STATUS_LABELS,
+  EXPERIMENT_STATUS_OPTIONS,
+  EXPERIMENT_STATUS_VARIANT_MAP,
   default41 as EmptyState,
   default71 as ExperimentCodeBadge,
   default70 as ExperimentDataViewer,
@@ -258,6 +263,7 @@ export {
   durationMinutes,
   findAvailableSlots,
   formatDuration,
+  formatExperimentDate,
   formatTime,
   generateTimeSlots,
   isTimeInRange,
@@ -271,6 +277,7 @@ export {
   useChemicalFormula,
   useConcentrationUnits,
   useDoseCalculator,
+  useExperimentData,
   useExperimentSelector,
   usePasskey,
   usePlatformContext,

package/dist/index.js.map

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

package/dist/styles.css

@@ -12515,7 +12515,14 @@ html.dark .mld-settings-modal__option-btn--active {
   max-height: 600px;
   overflow-y: auto;
 }
-.mld-data-viewer__loading,
+.mld-data-viewer__loading {
+  padding: 24px 12px;
+}
+.mld-data-viewer__skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
 .mld-data-viewer__empty {
   text-align: center;
   padding: 32px;
@@ -12619,10 +12626,28 @@ html.dark .mld-settings-modal__option-btn--active {
   color: var(--mld-color-text-secondary, #666);
   border-radius: var(--mld-radius-sm, 4px);
   letter-spacing: 0.02em;
+  transition: background-color 0.15s ease, color 0.15s ease;
 }
 .mld-exp-code--sm { padding: 1px 6px; font-size: 11px; }
 .mld-exp-code--md { padding: 2px 8px; font-size: 12px; }
 .mld-exp-code--lg { padding: 3px 10px; font-size: 14px; }
+/* Copyable state */
+.mld-exp-code--copyable {
+  cursor: pointer;
+  user-select: none;
+}
+.mld-exp-code--copyable:hover {
+  background: var(--mld-color-surface-3, #e4e4e4);
+}
+.mld-exp-code--copyable:focus-visible {
+  outline: 2px solid var(--color-primary, #3b82f6);
+  outline-offset: 1px;
+}
+/* Copied feedback */
+.mld-exp-code--copied {
+  background: var(--mld-color-success-soft, #dcfce7);
+  color: var(--mld-color-success, #16a34a);
+}
 /* ExperimentSelectorModal Component Styles */
 .mld-experiment-selector {
   display: flex;
@@ -12642,11 +12667,26 @@ html.dark .mld-settings-modal__option-btn--active {
   flex-shrink: 0;
   width: 10rem;
 }
-/* Loading */
-.mld-experiment-selector__loading {
+/* Loading skeleton */
+.mld-experiment-selector__skeleton {
   display: flex;
-  justify-content: center;
-  padding: 2rem 0;
+  flex-direction: column;
+  gap: 1px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--mld-radius);
+}
+.mld-experiment-selector__skeleton-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background-color: var(--bg-primary);
+}
+.mld-experiment-selector__skeleton-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 /* Error */
 .mld-experiment-selector__error {
@@ -12689,15 +12729,30 @@ html.dark .mld-settings-modal__option-btn--active {
 .mld-experiment-selector__row--active:hover {
   background-color: var(--color-primary-soft);
 }
+/* Keyboard focused row */
+.mld-experiment-selector__row--focused {
+  background-color: var(--bg-hover);
+  outline: 2px solid var(--color-primary, #3b82f6);
+  outline-offset: -2px;
+  border-radius: 2px;
+}
+.mld-experiment-selector__row--active.mld-experiment-selector__row--focused {
+  background-color: var(--color-primary-soft);
+}
 /* Row content */
 .mld-experiment-selector__row-content {
   flex: 1;
   min-width: 0;
 }
 .mld-experiment-selector__name {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--text-primary);
+}
+.mld-experiment-selector__name > span:first-child {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -24080,7 +24135,14 @@ to { transform: rotate(360deg);
   max-height: 600px;
   overflow-y: auto;
 }
-.mld-data-viewer__loading,
+.mld-data-viewer__loading {
+  padding: 24px 12px;
+}
+.mld-data-viewer__skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
 .mld-data-viewer__empty {
   text-align: center;
   padding: 32px;
@@ -24184,6 +24246,7 @@ to { transform: rotate(360deg);
   color: var(--mld-color-text-secondary, #666);
   border-radius: var(--mld-radius-sm, 4px);
   letter-spacing: 0.02em;
+  transition: background-color 0.15s ease, color 0.15s ease;
 }
 .mld-exp-code--sm { padding: 1px 6px; font-size: 11px;
 }
@@ -24191,6 +24254,23 @@ to { transform: rotate(360deg);
 }
 .mld-exp-code--lg { padding: 3px 10px; font-size: 14px;
 }
+/* Copyable state */
+.mld-exp-code--copyable {
+  cursor: pointer;
+  user-select: none;
+}
+.mld-exp-code--copyable:hover {
+  background: var(--mld-color-surface-3, #e4e4e4);
+}
+.mld-exp-code--copyable:focus-visible {
+  outline: 2px solid var(--color-primary, #3b82f6);
+  outline-offset: 1px;
+}
+/* Copied feedback */
+.mld-exp-code--copied {
+  background: var(--mld-color-success-soft, #dcfce7);
+  color: var(--mld-color-success, #16a34a);
+}
 /* TimeRangeInput Component Styles */
 .mld-time-range {
   display: flex;
@@ -24993,11 +25073,26 @@ to { transform: rotate(360deg);
   width: 10rem;
 }
 
-/* Loading */
-.mld-experiment-selector__loading {
+/* Loading skeleton */
+.mld-experiment-selector__skeleton {
   display: flex;
-  justify-content: center;
-  padding: 2rem 0;
+  flex-direction: column;
+  gap: 1px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--mld-radius);
+}
+.mld-experiment-selector__skeleton-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background-color: var(--bg-primary);
+}
+.mld-experiment-selector__skeleton-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
 /* Error */
@@ -25044,15 +25139,31 @@ to { transform: rotate(360deg);
   background-color: var(--color-primary-soft);
 }
 
+/* Keyboard focused row */
+.mld-experiment-selector__row--focused {
+  background-color: var(--bg-hover);
+  outline: 2px solid var(--color-primary, #3b82f6);
+  outline-offset: -2px;
+  border-radius: 2px;
+}
+.mld-experiment-selector__row--active.mld-experiment-selector__row--focused {
+  background-color: var(--color-primary-soft);
+}
+
 /* Row content */
 .mld-experiment-selector__row-content {
   flex: 1;
   min-width: 0;
 }
 .mld-experiment-selector__name {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--text-primary);
+}
+.mld-experiment-selector__name > span:first-child {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mld-sdk",
-  "version": "0.7.8",
+  "version": "0.8.2",
   "description": "MLD Platform SDK - Vue 3 components, composables, and types for plugin development",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/ExperimentCodeBadge.story.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import ExperimentCodeBadge from './ExperimentCodeBadge.vue'
+
+const sizes = ['sm', 'md', 'lg'] as const
+</script>
+
+<template>
+  <Story title="Experiment/ExperimentCodeBadge">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <ExperimentCodeBadge
+            :code="state.code"
+            :size="state.size"
+            :copyable="state.copyable"
+            @copy="(code) => console.log('Copied:', code)"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.code" title="Code" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.copyable" title="Copyable" />
+      </template>
+    </Variant>
+
+    <Variant title="All Sizes">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;">
+        <div v-for="size in sizes" :key="size" style="display: flex; align-items: center; gap: 1rem;">
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; width: 2rem;">
+            {{ size }}
+          </span>
+          <ExperimentCodeBadge :code="'EXP-2024-001'" :size="size" :copyable="false" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Long Code">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start;">
+        <ExperimentCodeBadge code="EXP-2024-001" :copyable="false" />
+        <ExperimentCodeBadge code="DR-CV-HEK293T-2024-12-001" :copyable="false" />
+        <ExperimentCodeBadge code="IC50-PANC1-GEM-SERIES-A" :copyable="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Copyable Demo">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0;">
+          Click any badge to copy its code to clipboard
+        </p>
+        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+          <ExperimentCodeBadge
+            code="EXP-2024-001"
+            @copy="(code) => console.log('Copied:', code)"
+          />
+          <ExperimentCodeBadge
+            code="DR-HeLa-DOX-003"
+            @copy="(code) => console.log('Copied:', code)"
+          />
+          <ExperimentCodeBadge
+            code="CV-MCF7-24H"
+            @copy="(code) => console.log('Copied:', code)"
+          />
+        </div>
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0;">
+          Non-copyable badge (display only)
+        </p>
+        <ExperimentCodeBadge code="EXP-2024-001" :copyable="false" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/ExperimentCodeBadge.vue

@@ -1,17 +1,60 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+
 interface Props {
   code: string
   size?: 'sm' | 'md' | 'lg'
+  copyable?: boolean
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   size: 'md',
+  copyable: true,
 })
+
+const emit = defineEmits<{
+  copy: [code: string]
+}>()
+
+const copied = ref(false)
+let copyTimeout: ReturnType<typeof setTimeout> | null = null
+
+async function handleCopy() {
+  if (!props.copyable) return
+  try {
+    await navigator.clipboard.writeText(props.code)
+    copied.value = true
+    emit('copy', props.code)
+    if (copyTimeout) clearTimeout(copyTimeout)
+    copyTimeout = setTimeout(() => { copied.value = false }, 1500)
+  } catch {
+    // Clipboard API not available (e.g. insecure context)
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (!props.copyable) return
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    handleCopy()
+  }
+}
 </script>
 
 <template>
-  <span :class="['mld-exp-code', `mld-exp-code--${size}`]">
-    {{ code }}
+  <span
+    :class="[
+      'mld-exp-code',
+      `mld-exp-code--${size}`,
+      { 'mld-exp-code--copyable': copyable, 'mld-exp-code--copied': copied },
+    ]"
+    :role="copyable ? 'button' : undefined"
+    :tabindex="copyable ? 0 : undefined"
+    :title="copyable ? (copied ? 'Copied!' : 'Click to copy') : undefined"
+    @click="handleCopy"
+    @keydown="handleKeydown"
+  >
+    {{ copied ? 'Copied!' : code }}
   </span>
 </template>
 

package/src/components/ExperimentDataViewer.story.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import ExperimentDataViewer from './ExperimentDataViewer.vue'
+import type { TreeNode, SummaryData } from '../types'
+
+const treeData: TreeNode[] = [
+  {
+    id: 'plate-1',
+    label: 'Plate PLT-001',
+    type: 'plate',
+    badge: 96,
+    badgeVariant: 'default',
+    children: [
+      {
+        id: 'group-ctrl',
+        label: 'Vehicle Control',
+        type: 'treatment',
+        badge: 12,
+        children: [
+          { id: 's-1', label: 'Well A01', type: 'sample', metadata: { viability: 98.5 } },
+          { id: 's-2', label: 'Well A02', type: 'sample', metadata: { viability: 97.2 } },
+          { id: 's-3', label: 'Well A03', type: 'sample', metadata: { viability: 99.1 } },
+        ],
+      },
+      {
+        id: 'group-dox',
+        label: 'Doxorubicin 1uM',
+        type: 'treatment',
+        badge: 12,
+        children: [
+          { id: 's-4', label: 'Well B01', type: 'sample', metadata: { viability: 45.2 } },
+          { id: 's-5', label: 'Well B02', type: 'sample', metadata: { viability: 42.8 } },
+          { id: 's-6', label: 'Well B03', type: 'sample', metadata: { viability: 48.1 } },
+        ],
+      },
+    ],
+  },
+]
+
+const tableData = [
+  { well: 'A01', group: 'Vehicle Control', concentration: 0, viability: 98.5, normalized: 100 },
+  { well: 'A02', group: 'Vehicle Control', concentration: 0, viability: 97.2, normalized: 98.7 },
+  { well: 'A03', group: 'Vehicle Control', concentration: 0, viability: 99.1, normalized: 100.6 },
+  { well: 'B01', group: 'Doxorubicin', concentration: 1.0, viability: 45.2, normalized: 45.9 },
+  { well: 'B02', group: 'Doxorubicin', concentration: 1.0, viability: 42.8, normalized: 43.5 },
+  { well: 'B03', group: 'Doxorubicin', concentration: 1.0, viability: 48.1, normalized: 48.8 },
+]
+
+const summaryData: SummaryData = {
+  metadata: {
+    cell_line: 'HeLa',
+    passage: 'P12',
+    plate_format: '96-well',
+    seeding_density: '5000 cells/well',
+  },
+  sections: [
+    {
+      key: 'treatments',
+      label: 'Treatments',
+      type: 'group',
+      items: [
+        {
+          label: 'Vehicle Control',
+          metadata: { type: 'negative control' },
+          item_count: 12,
+          item_key: 'wells',
+          columns: ['well', 'viability', 'normalized'],
+          rows: [
+            { well: 'A01', viability: 98.5, normalized: 100 },
+            { well: 'A02', viability: 97.2, normalized: 98.7 },
+            { well: 'A03', viability: 99.1, normalized: 100.6 },
+          ],
+        },
+        {
+          label: 'Doxorubicin 1uM',
+          metadata: { type: 'treatment', compound: 'Doxorubicin' },
+          item_count: 12,
+          item_key: 'wells',
+          columns: ['well', 'viability', 'normalized'],
+          rows: [
+            { well: 'B01', viability: 45.2, normalized: 45.9 },
+            { well: 'B02', viability: 42.8, normalized: 43.5 },
+            { well: 'B03', viability: 48.1, normalized: 48.8 },
+          ],
+        },
+      ],
+    },
+  ],
+}
+
+const views = ['summary', 'tree', 'table'] as const
+</script>
+
+<template>
+  <Story title="Experiment/ExperimentDataViewer">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 1rem; max-width: 800px; margin: 0 auto;">
+          <ExperimentDataViewer
+            :tree-data="treeData"
+            :table-data="tableData"
+            :summary-data="state.showSummary ? summaryData : null"
+            :default-view="state.defaultView"
+            :loading="state.loading"
+            title="Cell Viability Data"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.defaultView"
+          title="Default View"
+          :options="views.map(v => ({ label: v, value: v }))"
+        />
+        <HstCheckbox v-model="state.loading" title="Loading" />
+        <HstCheckbox v-model="state.showSummary" title="Show Summary" />
+      </template>
+    </Variant>
+
+    <Variant title="Summary View">
+      <div style="padding: 1rem; max-width: 800px; margin: 0 auto;">
+        <ExperimentDataViewer
+          :tree-data="treeData"
+          :table-data="tableData"
+          :summary-data="summaryData"
+          default-view="summary"
+          title="Dose Response - HeLa"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Tree View">
+      <div style="padding: 1rem; max-width: 800px; margin: 0 auto;">
+        <ExperimentDataViewer
+          :tree-data="treeData"
+          :table-data="tableData"
+          default-view="tree"
+          title="Sample Hierarchy"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Table View">
+      <div style="padding: 1rem; max-width: 800px; margin: 0 auto;">
+        <ExperimentDataViewer
+          :tree-data="treeData"
+          :table-data="tableData"
+          default-view="table"
+          title="Raw Measurements"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Loading">
+      <div style="padding: 1rem; max-width: 800px; margin: 0 auto;">
+        <ExperimentDataViewer
+          :tree-data="[]"
+          :loading="true"
+          title="Loading Data..."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty">
+      <div style="padding: 1rem; max-width: 800px; margin: 0 auto;">
+        <ExperimentDataViewer
+          :tree-data="[]"
+          default-view="tree"
+          title="Empty Experiment"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>