@morscherlab/mint-sdk 1.1.25 → 1.2.0-beta.10

package/src/components/PluginWorkspaceView.vue

@@ -12,26 +12,19 @@
 import { computed, useSlots } from 'vue'
 import type {
   AccountMenuItem,
-  ExperimentSummary,
-  PageSelectorItem,
   PillNavItem,
   PluginSwitcherPlugin,
   PillNavOption,
 } from '../types'
 import { useAppExperiment } from '../composables/useAppExperiment'
-import AppLayout from './AppLayout.vue'
-import AppSidebar from './AppSidebar.vue'
-import AppTopBar from './AppTopBar.vue'
-import { usePluginWorkspaceControls } from './PluginWorkspaceView.controls'
-import { usePluginWorkspaceNavigation } from './PluginWorkspaceView.navigation'
-import {
-  getPluginWorkspaceSidebarSlotNames,
-  getPluginWorkspaceTopBarSlotNames,
-  hasPluginWorkspaceSidebarSurface,
-} from './PluginWorkspaceView.shell'
+import { usePluginWorkspace } from '../composables/usePluginWorkspace'
+import WorkspaceControlsInternal from './internal/WorkspaceControlsInternal.vue'
+import WorkspaceShellInternal from './internal/WorkspaceShellInternal.vue'
+import WorkspaceSidebarInternal from './internal/WorkspaceSidebarInternal.vue'
 import type {
   PluginWorkspaceForwardedSlotProps,
   PluginWorkspaceSlotProps,
+  PluginWorkspaceViewEmits,
   PluginWorkspaceViewProps,
 } from './PluginWorkspaceView.props'
 
@@ -103,28 +96,7 @@ const props = withDefaults(defineProps<PluginWorkspaceViewProps>(), {
   sidebarCloseLabel: 'Close workspace sidebar',
 })
 
-const emit = defineEmits<{
-  'update:activeView': [value: string]
-  'page-selector-select': [page: PageSelectorItem]
-  'pill-select': [item: PillNavItem]
-  'pill-option-select': [option: PillNavOption, item: PillNavItem]
-  'plugin-switcher-select': [plugin: PluginSwitcherPlugin]
-  'plugin-switcher-install': []
-  'account-menu-select': [item: AccountMenuItem]
-  'sign-out': []
-  'notifications-click': []
-  'settings-values-change': [data: Record<string, unknown>]
-  'admin-click': []
-  'experiment-select': [experiment: ExperimentSummary]
-  'experiment-detach': []
-  'update:modelValue': [values: Record<string, unknown>]
-  'update:values': [values: Record<string, unknown>]
-  'update:sidebarCollapsed': [value: boolean]
-  'update:toggle': [sectionId: string, value: boolean]
-  'section-action': [sectionId: string, actionId: string]
-  'form-submit': [sectionId: string, values: Record<string, unknown>]
-  'form-cancel': [sectionId: string]
-}>()
+const emit = defineEmits<PluginWorkspaceViewEmits>()
 
 defineSlots<{
   default?: (props: PluginWorkspaceSlotProps) => unknown
@@ -158,82 +130,19 @@ if (props.experimentShell) {
   })
 }
 
-const topBarSlotNames = computed<string[]>(() =>
-  getPluginWorkspaceTopBarSlotNames(slots),
-)
-
-const sidebarSlotNames = computed<string[]>(() =>
-  getPluginWorkspaceSidebarSlotNames(slots),
-)
-
 const {
-  generatedPillNav,
-  generatedDefaultView,
-  internalControlValues,
-  resolvedComponentBindings,
-  resolvedComponentBindingsById,
-  resolvedComponentProps,
-  resolvedComponentPropsById,
+  shell,
+  sidebar,
+  controls,
   handleControlValuesUpdate,
-} = usePluginWorkspaceControls({
-  model: () => props.model,
-  controls: () => props.controls,
-  controlOptions: () => props.controlOptions,
-  modelValue: () => props.modelValue,
-  values: () => props.values,
-  componentBindings: () => props.componentBindings,
-  componentProps: () => props.componentProps,
-  componentPropsById: () => props.componentPropsById,
-  emitValues: (values) => {
-    emit('update:modelValue', values)
-    emit('update:values', values)
-  },
-})
-
-const {
-  resolvedPillNav,
-  resolvedActiveView,
-  resolvedCurrentPillId,
-  resolvedCurrentPageSelectorId,
-  setActiveView,
   handlePageSelectorSelect,
   handlePillSelect,
-} = usePluginWorkspaceNavigation({
-  activeView: () => props.activeView,
-  defaultActiveView: () => props.defaultActiveView,
-  currentPillId: () => props.currentPillId,
-  currentPageSelectorId: () => props.currentPageSelectorId,
-  pillNav: () => props.pillNav,
-  pageSelector: () => props.pageSelector,
-  panelIds: () => Object.keys(props.panels),
-  generatedPillNav,
-  generatedDefaultView,
-  emitActiveView: (viewId) => emit('update:activeView', viewId),
-  emitPageSelectorSelect: (page) => emit('page-selector-select', page),
-  emitPillSelect: (item) => emit('pill-select', item),
+} = usePluginWorkspace({
+  props,
+  slots,
+  emit,
 })
 
-const hasSidebarSurface = computed(() => {
-  return hasPluginWorkspaceSidebarSurface({
-    showSidebar: props.showSidebar,
-    panels: props.panels,
-    forms: props.forms,
-    model: props.model,
-    controls: props.controls,
-    showSidebarWhenEmpty: props.showSidebarWhenEmpty,
-    sidebarContentId: props.sidebarContentId,
-    sidebarTitle: props.sidebarTitle,
-    sidebarSubtitle: props.sidebarSubtitle,
-    sidebarBadge: props.sidebarBadge,
-    hasSidebarSlot: Boolean(slots.sidebar),
-    sidebarSlotCount: sidebarSlotNames.value.length,
-  })
-})
-
-function handlePillOptionSelect(option: PillNavOption, item: PillNavItem) {
-  emit('pill-option-select', option, item)
-}
-
 function handleToggle(sectionId: string, value: boolean) {
   emit('update:toggle', sectionId, value)
 }
@@ -249,126 +158,48 @@ function handleFormCancel(sectionId: string) {
 </script>
 
 <template>
-  <AppLayout
-    class="mint-plugin-workspace-view"
-    :sidebar-position="sidebarPosition"
-    :sidebar-width="sidebarWidth"
-    :floating="floating"
-    :responsive-sidebar="responsiveSidebar"
-    :sidebar-toggle-label="sidebarToggleLabel"
-    :sidebar-close-label="sidebarCloseLabel"
+  <WorkspaceShellInternal
+    :shell="shell"
+    @page-selector-select="handlePageSelectorSelect"
+    @pill-select="handlePillSelect"
+    @pill-option-select="(option: PillNavOption, item: PillNavItem) => emit('pill-option-select', option, item)"
+    @plugin-switcher-select="(plugin: PluginSwitcherPlugin) => emit('plugin-switcher-select', plugin)"
+    @plugin-switcher-install="emit('plugin-switcher-install')"
+    @account-menu-select="(item: AccountMenuItem) => emit('account-menu-select', item)"
+    @sign-out="emit('sign-out')"
+    @notifications-click="emit('notifications-click')"
+    @settings-values-change="emit('settings-values-change', $event)"
+    @admin-click="emit('admin-click')"
   >
-    <template #topbar>
-      <slot
-        name="topbar"
-        :active-view="resolvedActiveView"
-        :set-active-view="setActiveView"
-        :values="internalControlValues"
-        :component-bindings="resolvedComponentBindings"
-        :component-bindings-by-id="resolvedComponentBindingsById"
-        :component-props="resolvedComponentProps"
-        :component-props-by-id="resolvedComponentPropsById"
-      >
-        <AppTopBar
-          :title="title"
-          :subtitle="subtitle"
-          :variant="topBarVariant"
-          :home-path="homePath"
-          :show-logo="showLogo"
-          :page-selector="pageSelector"
-          :current-page-selector-id="resolvedCurrentPageSelectorId"
-          :plugin-switcher="pluginSwitcher"
-          :pill-nav="resolvedPillNav"
-          :current-pill-id="resolvedCurrentPillId"
-          :show-theme-toggle="showThemeToggle"
-          :show-settings="showSettings"
-          :settings-config="settingsConfig"
-          :show-standalone-label="showStandaloneLabel"
-          :standalone-label="standaloneLabel"
-          :account-menu="accountMenu"
-          :show-notifications="showNotifications"
-          :has-notification-dot="hasNotificationDot"
-          :show-admin="showAdmin"
-          :admin-path="adminPath"
-          :user-name="userName"
-          :user-initial="userInitial"
-          :user-email="userEmail"
-          @page-selector-select="handlePageSelectorSelect"
-          @pill-select="handlePillSelect"
-          @pill-option-select="handlePillOptionSelect"
-          @plugin-switcher-select="emit('plugin-switcher-select', $event)"
-          @plugin-switcher-install="emit('plugin-switcher-install')"
-          @account-menu-select="emit('account-menu-select', $event)"
-          @sign-out="emit('sign-out')"
-          @notifications-click="emit('notifications-click')"
-          @settings-values-change="emit('settings-values-change', $event)"
-          @admin-click="emit('admin-click')"
-        >
-          <template
-            v-for="slotName in topBarSlotNames"
-            :key="slotName"
-            #[slotName]="slotProps"
-          >
-            <!-- @vue-ignore dynamic SDK slot forwarding for AppTopBar passthrough slots -->
-            <slot
-              :name="slotName"
-              v-bind="slotProps ?? {}"
-            />
-          </template>
-        </AppTopBar>
-      </slot>
+    <template v-if="slots.topbar" #topbar="scope">
+      <slot name="topbar" v-bind="scope" />
     </template>
 
-    <template v-if="hasSidebarSurface" #sidebar>
+    <template
+      v-for="slotName in shell.topBarSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <!-- @vue-ignore dynamic SDK slot forwarding for AppTopBar passthrough slots -->
       <slot
-        name="sidebar"
-        :active-view="resolvedActiveView"
-        :set-active-view="setActiveView"
-        :values="internalControlValues"
-        :component-bindings="resolvedComponentBindings"
-        :component-bindings-by-id="resolvedComponentBindingsById"
-        :component-props="resolvedComponentProps"
-        :component-props-by-id="resolvedComponentPropsById"
-      >
-        <AppSidebar
-          :title="sidebarTitle"
-          :subtitle="sidebarSubtitle"
-          :badge="sidebarBadge"
-          :variant="sidebarVariant"
-          :panels="panels"
-          :active-view="resolvedActiveView"
-          :floating="false"
-          :dense="dense"
-          :width="sidebarWidth"
-          :side="sidebarPosition"
-          :forms="forms"
-          :content-id="sidebarContentId"
-          :show-when-empty="showSidebarWhenEmpty || sidebarContentId !== undefined"
-          :model="model"
-          :controls="controls"
-          :control-options="controlOptions"
-          :values="internalControlValues"
-          :form-enhancements="formEnhancements"
-          :show-form-actions="showFormActions"
-          :form-loading="formLoading"
-          :form-disabled="formDisabled"
-          :form-readonly="formReadonly"
-          :form-size="formSize"
-          :collapsible="sidebarCollapsible"
-          :collapsed="sidebarCollapsed"
-          :default-collapsed="defaultSidebarCollapsed"
-          :collapsed-width="sidebarCollapsedWidth"
-          :collapse-button-label="sidebarCollapseButtonLabel"
-          :expand-button-label="sidebarExpandButtonLabel"
+        :name="slotName"
+        v-bind="slotProps ?? {}"
+      />
+    </template>
+
+    <template v-if="shell.hasSidebarSurface" #sidebar="scope">
+      <slot name="sidebar" v-bind="scope">
+        <WorkspaceSidebarInternal
+          :sidebar="sidebar"
           @update:model-value="handleControlValuesUpdate"
           @update:collapsed="emit('update:sidebarCollapsed', $event)"
           @update:toggle="handleToggle"
-          @section-action="(sectionId, actionId) => emit('section-action', sectionId, actionId)"
+          @section-action="(sectionId: string, actionId: string) => emit('section-action', sectionId, actionId)"
           @form-submit="handleFormSubmit"
           @form-cancel="handleFormCancel"
         >
           <template
-            v-for="slotName in sidebarSlotNames"
+            v-for="slotName in sidebar.slotNames"
             :key="slotName"
             #[slotName]="slotProps"
           >
@@ -378,18 +209,16 @@ function handleFormCancel(sectionId: string) {
               v-bind="slotProps ?? {}"
             />
           </template>
-        </AppSidebar>
+        </WorkspaceSidebarInternal>
       </slot>
     </template>
 
-    <slot
-      :active-view="resolvedActiveView"
-      :set-active-view="setActiveView"
-      :values="internalControlValues"
-      :component-bindings="resolvedComponentBindings"
-      :component-bindings-by-id="resolvedComponentBindingsById"
-      :component-props="resolvedComponentProps"
-      :component-props-by-id="resolvedComponentPropsById"
-    />
-  </AppLayout>
+    <template #default>
+      <WorkspaceControlsInternal :controls="controls">
+        <template #default="controlsScope">
+          <slot v-bind="controlsScope" />
+        </template>
+      </WorkspaceControlsInternal>
+    </template>
+  </WorkspaceShellInternal>
 </template>

package/src/components/ProgressBar.vue

@@ -111,7 +111,3 @@ const segmentCount = computed(() => props.steps.length || 0)
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/progress-bar.css';
-</style>

package/src/components/ProtocolStepEditor.vue

@@ -53,6 +53,7 @@ const selectedTemplateId = ref<string | null>(null)
 const {
   isOpen: templateDropdownOpen,
   rootRef: templateDropdownRef,
+  triggerRef: templateTriggerRef,
   close: closeTemplateDropdown,
   toggle: toggleTemplateDropdown,
 } = useDropdownState()
@@ -204,6 +205,7 @@ watch(
         <label class="mint-protocol-editor__template-label">Template</label>
         <div ref="templateDropdownRef" class="mint-protocol-editor__template-dropdown">
           <button
+            ref="templateTriggerRef"
             type="button"
             class="mint-protocol-editor__template-btn"
             @click="toggleTemplateDropdown"
@@ -376,7 +378,3 @@ watch(
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/protocol-step-editor.css';
-</style>

package/src/components/RackEditor.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 /** Multi-rack editor for managing collections of well-plate racks with add/remove/reorder controls and per-well editing. */
-import { ref, computed, watch } from 'vue'
+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'
 
@@ -104,23 +106,48 @@ watch(
   },
 )
 
-const SLOT_COLORS: Record<SlotPosition, string> = {
-  R: '#ef4444',
-  G: '#22c55e',
-  B: '#3b82f6',
-  Y: '#eab308',
-}
-
-const SLOT_OPTIONS: SlotPosition[] = ['R', 'G', 'B', 'Y']
+const SLOT_OPTIONS: readonly SlotPosition[] = SLOT_ORDER
 
 const FORMAT_OPTIONS: { value: WellPlateFormat; label: string }[] = [
   { value: 54, label: '54' },
   { value: 96, label: '96' },
 ]
 
-// Drag state for rack reordering
-const draggingRackId = ref<string | null>(null)
-const dragOverRackId = ref<string | null>(null)
+// 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()
@@ -136,54 +163,6 @@ function handleTabClick(rackId: string) {
   editor.setActiveRack(rackId)
 }
 
-// Rack drag handlers
-function handleRackDragStart(event: DragEvent, rackId: string) {
-  if (!props.allowReorder) return
-  draggingRackId.value = rackId
-  if (event.dataTransfer) {
-    event.dataTransfer.effectAllowed = 'move'
-    event.dataTransfer.setData('text/plain', rackId)
-  }
-}
-
-function handleRackDragOver(event: DragEvent, rackId: string) {
-  event.preventDefault()
-  if (draggingRackId.value && draggingRackId.value !== rackId) {
-    dragOverRackId.value = rackId
-  }
-}
-
-function handleRackDragLeave() {
-  dragOverRackId.value = null
-}
-
-function handleRackDrop(event: DragEvent, targetRackId: string) {
-  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
-}
-
 // Toolbar actions
 function handleFormatChange(format: WellPlateFormat) {
   if (!editor.activeRack.value) return
@@ -281,9 +260,11 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
     <div class="mint-rack-editor__tabs">
       <div class="mint-rack-editor__tabs-inner">
         <button
-          v-for="rack in editor.racks.value"
+          v-for="(rack, rackIndex) in editor.racks.value"
           :key="rack.id"
+          :ref="(el) => setTabRef(rack.id, el)"
           :draggable="allowReorder && !readonly"
+          :title="allowReorder && !readonly ? `${rack.name} — press Alt with the arrow keys to reorder` : undefined"
           :class="[
             'mint-rack-editor__tab',
             {
@@ -293,11 +274,12 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
             },
           ]"
           @click="handleTabClick(rack.id)"
-          @dragstart="handleRackDragStart($event, rack.id)"
-          @dragover="handleRackDragOver($event, rack.id)"
-          @dragleave="handleRackDragLeave"
-          @drop="handleRackDrop($event, rack.id)"
-          @dragend="handleRackDragEnd"
+          @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"
@@ -434,9 +416,8 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
         </template>
       </WellPlate>
     </div>
+
+    <!-- Reorder announcements for screen readers -->
+    <div role="status" aria-live="polite" :style="announcerStyle">{{ reorderAnnouncement }}</div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/rack-editor.css';
-</style>

package/src/components/ReagentEditor.vue

@@ -412,7 +412,3 @@ function formatLevel(value: number): string {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/reagent-editor.css';
-</style>

package/src/components/ReagentList.story.vue

@@ -76,6 +76,8 @@ const mockReagents: Reagent[] = [
 
 function initState() {
   return {
+    loading: false,
+    error: '',
     modelValue: mockReagents,
     readonly: false,
     showStockLevel: true,
@@ -92,6 +94,8 @@ function initState() {
       <template #default="{ state }">
         <div style="padding: 2rem;">
           <ReagentList
+            :loading="state.loading"
+            :error="state.error || null"
             v-model="state.modelValue"
             :readonly="state.readonly"
             :show-stock-level="state.showStockLevel"
@@ -102,6 +106,8 @@ function initState() {
         </div>
       </template>
       <template #controls="{ state }">
+        <HstCheckbox v-model="state.loading" title="Loading" />
+        <HstText v-model="state.error" title="Error Message" />
         <HstCheckbox v-model="state.readonly" title="Readonly" />
         <HstCheckbox v-model="state.showStockLevel" title="Show Stock Level" />
         <HstSlider v-model="state.lowStockThreshold" title="Low Stock Threshold (%)" :min="0" :max="50" />
@@ -133,5 +139,17 @@ function initState() {
         <ReagentList :model-value="[]" />
       </div>
     </Variant>
+
+    <Variant title="Loading">
+      <div style="padding: 2rem;">
+        <ReagentList :model-value="[]" loading />
+      </div>
+    </Variant>
+
+    <Variant title="Error">
+      <div style="padding: 2rem;">
+        <ReagentList :model-value="[]" error="Could not load reagents." />
+      </div>
+    </Variant>
   </Story>
 </template>