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

package/src/components/PluginWorkspaceView.vue

@@ -1,395 +0,0 @@
-<script setup lang="ts">
-/**
- * Standard plugin workspace shell that combines AppLayout, AppTopBar, and AppSidebar with LEAF-style defaults.
- *
- * @example Recommended
- * ```vue
- * <PluginWorkspaceView title="Analysis" experiment-shell>
- *   <router-view />
- * </PluginWorkspaceView>
- * ```
- */
-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 type {
-  PluginWorkspaceForwardedSlotProps,
-  PluginWorkspaceSlotProps,
-  PluginWorkspaceViewProps,
-} from './PluginWorkspaceView.props'
-
-const props = withDefaults(defineProps<PluginWorkspaceViewProps>(), {
-  title: 'Workspace',
-  subtitle: undefined,
-  topBarVariant: 'card',
-  homePath: '/',
-  showLogo: true,
-  pageSelector: undefined,
-  currentPageSelectorId: undefined,
-  pluginSwitcher: undefined,
-  pillNav: undefined,
-  currentPillId: undefined,
-  showThemeToggle: true,
-  showSettings: true,
-  settingsConfig: undefined,
-  showStandaloneLabel: false,
-  standaloneLabel: 'Standalone',
-  accountMenu: undefined,
-  showNotifications: false,
-  hasNotificationDot: false,
-  showAdmin: false,
-  adminPath: '/admin',
-  userName: undefined,
-  userInitial: undefined,
-  userEmail: undefined,
-  experimentShell: false,
-  experimentSave: undefined,
-  experimentSaveDisabled: false,
-  experimentSaveDisabledMessage: undefined,
-  activeView: undefined,
-  defaultActiveView: undefined,
-  panels: () => ({}),
-  forms: () => ({}),
-  sidebarTitle: undefined,
-  sidebarSubtitle: undefined,
-  sidebarBadge: undefined,
-  sidebarVariant: 'analysis',
-  sidebarWidth: undefined,
-  sidebarPosition: 'left',
-  responsiveSidebar: true,
-  showSidebarWhenEmpty: false,
-  showSidebar: true,
-  sidebarContentId: undefined,
-  dense: true,
-  sidebarCollapsible: undefined,
-  sidebarCollapsedWidth: '3rem',
-  sidebarCollapseButtonLabel: 'Collapse sidebar',
-  sidebarExpandButtonLabel: 'Expand sidebar',
-  floating: true,
-  model: undefined,
-  controls: undefined,
-  controlOptions: () => ({}),
-  componentBindings: undefined,
-  componentProps: undefined,
-  componentPropsById: undefined,
-  modelValue: undefined,
-  values: undefined,
-  formEnhancements: undefined,
-  showFormActions: false,
-  formLoading: false,
-  formDisabled: false,
-  formReadonly: false,
-  formSize: 'sm',
-  sidebarCollapsed: undefined,
-  defaultSidebarCollapsed: false,
-  sidebarToggleLabel: 'Open workspace sidebar',
-  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]
-}>()
-
-defineSlots<{
-  default?: (props: PluginWorkspaceSlotProps) => unknown
-  topbar?: (props: PluginWorkspaceSlotProps) => unknown
-  sidebar?: (props: PluginWorkspaceSlotProps) => unknown
-  icon?: (props: PluginWorkspaceForwardedSlotProps) => unknown
-  logo?: (props: PluginWorkspaceForwardedSlotProps) => unknown
-  'page-selector-icon'?: (props: PluginWorkspaceForwardedSlotProps) => unknown
-  'page-selector-item-icon'?: (props: PluginWorkspaceForwardedSlotProps) => unknown
-  nav?: (props: PluginWorkspaceForwardedSlotProps) => unknown
-  center?: (props: PluginWorkspaceForwardedSlotProps) => unknown
-  actions?: (props: PluginWorkspaceForwardedSlotProps) => unknown
-  'account-menu-items'?: (props: PluginWorkspaceForwardedSlotProps) => unknown
-  'account-menu-item-icon'?: (props: PluginWorkspaceForwardedSlotProps) => unknown
-  'settings-appearance'?: (props: PluginWorkspaceForwardedSlotProps) => unknown
-  header?: (props: PluginWorkspaceForwardedSlotProps) => unknown
-  collapsed?: (props: PluginWorkspaceForwardedSlotProps) => unknown
-  'collapsed-footer'?: (props: PluginWorkspaceForwardedSlotProps) => unknown
-  footer?: (props: PluginWorkspaceForwardedSlotProps) => unknown
-}>()
-
-const slots = useSlots()
-
-if (props.experimentShell) {
-  useAppExperiment({
-    onSelect: experiment => emit('experiment-select', experiment),
-    onSave: props.experimentSave,
-    onDetach: () => emit('experiment-detach'),
-    saveDisabled: computed(() => props.experimentSaveDisabled),
-    saveDisabledMessage: computed(() => props.experimentSaveDisabledMessage),
-  })
-}
-
-const topBarSlotNames = computed<string[]>(() =>
-  getPluginWorkspaceTopBarSlotNames(slots),
-)
-
-const sidebarSlotNames = computed<string[]>(() =>
-  getPluginWorkspaceSidebarSlotNames(slots),
-)
-
-const {
-  generatedPillNav,
-  generatedDefaultView,
-  internalControlValues,
-  resolvedComponentBindings,
-  resolvedComponentBindingsById,
-  resolvedComponentProps,
-  resolvedComponentPropsById,
-  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),
-})
-
-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)
-}
-
-function handleFormSubmit(sectionId: string, values: Record<string, unknown>) {
-  emit('form-submit', sectionId, values)
-}
-
-function handleFormCancel(sectionId: string) {
-  emit('form-cancel', sectionId)
-}
-
-</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"
-  >
-    <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>
-
-    <template v-if="hasSidebarSurface" #sidebar>
-      <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"
-          @update:model-value="handleControlValuesUpdate"
-          @update:collapsed="emit('update:sidebarCollapsed', $event)"
-          @update:toggle="handleToggle"
-          @section-action="(sectionId, actionId) => emit('section-action', sectionId, actionId)"
-          @form-submit="handleFormSubmit"
-          @form-cancel="handleFormCancel"
-        >
-          <template
-            v-for="slotName in sidebarSlotNames"
-            :key="slotName"
-            #[slotName]="slotProps"
-          >
-            <!-- @vue-ignore dynamic SDK slot forwarding for AppSidebar section-* passthrough slots -->
-            <slot
-              :name="slotName"
-              v-bind="slotProps ?? {}"
-            />
-          </template>
-        </AppSidebar>
-      </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>

package/src/components/ProgressBar.story.vue

@@ -1,148 +0,0 @@
-<script setup lang="ts">
-import { ref, onUnmounted } from 'vue'
-import ProgressBar from './ProgressBar.vue'
-import type { ProgressSize } from '../types'
-
-const progressColors = ['primary', 'success', 'warning', 'error', 'info'] as const
-const progressVariants = ['rail', 'segmented'] as const
-const sizes: ProgressSize[] = ['sm', 'md', 'lg']
-
-const animatedValue = ref(0)
-let interval: ReturnType<typeof setInterval> | null = null
-
-function startAnimation() {
-  animatedValue.value = 0
-  if (interval) clearInterval(interval)
-  interval = setInterval(() => {
-    animatedValue.value += 2
-    if (animatedValue.value >= 100) {
-      if (interval) clearInterval(interval)
-    }
-  }, 100)
-}
-
-onUnmounted(() => {
-  if (interval) clearInterval(interval)
-})
-</script>
-
-<template>
-  <Story title="Feedback/ProgressBar">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-          <ProgressBar
-            :value="state.value"
-            :variant="state.variant"
-            :color="state.color"
-            :size="state.size"
-            :label="state.showLabel ? state.label : undefined"
-            :show-value="state.showValue"
-            :indeterminate="state.indeterminate"
-          />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstSlider v-model="state.value" title="Value" :min="0" :max="100" :step="1" />
-        <HstSelect
-          v-model="state.variant"
-          title="Variant"
-          :options="progressVariants.map(v => ({ label: v, value: v }))"
-        />
-        <HstSelect
-          v-model="state.color"
-          title="Color"
-          :options="progressColors.map(c => ({ label: c, value: c }))"
-        />
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="sizes.map(s => ({ label: s, value: s }))"
-        />
-        <HstCheckbox v-model="state.showLabel" title="Show Label" />
-        <HstText v-model="state.label" title="Label" />
-        <HstCheckbox v-model="state.showValue" title="Show Value" />
-        <HstCheckbox v-model="state.indeterminate" title="Indeterminate" />
-      </template>
-    </Variant>
-
-    <Variant title="All Colors">
-      <div style="padding: 2rem; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
-        <div v-for="color in progressColors" :key="color">
-          <p style="margin: 0 0 0.25rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
-            {{ color }}
-          </p>
-          <ProgressBar :value="65" :color="color" />
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="All Sizes">
-      <div style="padding: 2rem; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
-        <div v-for="size in sizes" :key="size">
-          <p style="margin: 0 0 0.25rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
-            {{ size }}
-          </p>
-          <ProgressBar :value="50" :size="size" />
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="With Label and Value">
-      <div style="padding: 2rem; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
-        <ProgressBar :value="75" label="Processing plates..." :show-value="true" color="primary" />
-        <ProgressBar :value="100" label="Analysis complete" :show-value="true" color="success" />
-        <ProgressBar :value="33" label="Uploading data..." :show-value="true" color="info" />
-      </div>
-    </Variant>
-
-    <Variant title="Indeterminate">
-      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <ProgressBar :indeterminate="true" label="Loading..." color="primary" />
-      </div>
-    </Variant>
-
-    <Variant title="Animated">
-      <div style="padding: 2rem; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;">
-        <button
-          type="button"
-          style="padding: 0.5rem 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer; font-size: 0.875rem;"
-          @click="startAnimation"
-        >
-          Start Progress
-        </button>
-        <ProgressBar
-          :value="animatedValue"
-          label="Processing..."
-          :show-value="true"
-          :color="animatedValue >= 100 ? 'success' : 'primary'"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Segmented — pipeline steps">
-      <div style="padding: 2rem; max-width: 640px; display: flex; flex-direction: column; gap: 2rem;">
-        <div>
-          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;">Active step 3 — analyzing</p>
-          <ProgressBar
-            variant="segmented"
-            :steps="['Ingest', 'Align', 'Pick', 'Annotate', 'Score', 'Export', 'Done']"
-            :current-step="2"
-            color="primary"
-            show-value
-          />
-        </div>
-        <div>
-          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;">Complete</p>
-          <ProgressBar
-            variant="segmented"
-            :steps="['Ingest', 'Align', 'Pick', 'Annotate', 'Score', 'Export', 'Done']"
-            :current-step="7"
-            color="success"
-          />
-        </div>
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/ProgressBar.vue

@@ -1,117 +0,0 @@
-<script setup lang="ts">
-/** Displays progress as a filled rail or discrete labeled segments, with indeterminate mode. */
-import { computed } from 'vue'
-
-interface Props {
-  value?: number
-  variant?: 'rail' | 'segmented'
-  color?: 'primary' | 'success' | 'warning' | 'error' | 'info'
-  size?: 'sm' | 'md' | 'lg'
-  label?: string
-  showValue?: boolean
-  indeterminate?: boolean
-  steps?: string[]
-  currentStep?: number
-  ariaLabel?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  value: 0,
-  variant: 'rail',
-  color: 'primary',
-  size: 'md',
-  label: undefined,
-  showValue: false,
-  indeterminate: false,
-  steps: () => [],
-  currentStep: 0,
-})
-
-const clampedValue = computed(() => Math.min(100, Math.max(0, props.value)))
-
-const barStyle = computed(() => {
-  if (props.indeterminate) return undefined
-  return { width: `${clampedValue.value}%` }
-})
-
-const segmentCount = computed(() => props.steps.length || 0)
-</script>
-
-<template>
-  <div class="mint-progress" :class="`mint-progress--${variant}`">
-    <div
-      v-if="label || showValue"
-      class="mint-progress__header"
-    >
-      <span v-if="label" class="mint-progress__label">{{ label }}</span>
-      <span v-if="showValue && !indeterminate && variant === 'rail'" class="mint-progress__value">{{ clampedValue }}%</span>
-      <span v-if="showValue && variant === 'segmented' && segmentCount" class="mint-progress__value">{{ currentStep }} / {{ segmentCount }}</span>
-    </div>
-
-    <!-- Rail variant: single filled track -->
-    <div
-      v-if="variant === 'rail'"
-      :class="[
-        'mint-progress__track',
-        `mint-progress__track--${size}`,
-      ]"
-      role="progressbar"
-      :aria-valuenow="indeterminate ? undefined : clampedValue"
-      :aria-valuemin="indeterminate ? undefined : 0"
-      :aria-valuemax="indeterminate ? undefined : 100"
-      :aria-label="ariaLabel ?? label"
-    >
-      <div
-        :class="[
-          'mint-progress__bar',
-          `mint-progress__bar--${color}`,
-          indeterminate ? 'mint-progress__bar--indeterminate' : '',
-        ]"
-        :style="barStyle"
-      />
-    </div>
-
-    <!-- Segmented variant: discrete step segments -->
-    <div
-      v-else
-      :class="['mint-progress__segments', `mint-progress__segments--${size}`]"
-      role="progressbar"
-      :aria-valuenow="currentStep"
-      :aria-valuemin="0"
-      :aria-valuemax="segmentCount"
-      :aria-label="ariaLabel ?? label"
-    >
-      <span
-        v-for="(_step, i) in steps"
-        :key="i"
-        :class="[
-          'mint-progress__segment',
-          i < currentStep ? `mint-progress__segment--done mint-progress__segment--${color}` : '',
-          i === currentStep ? `mint-progress__segment--active mint-progress__segment--${color}` : '',
-        ]"
-      />
-    </div>
-
-    <!-- Segmented step labels -->
-    <div
-      v-if="variant === 'segmented' && steps.length"
-      class="mint-progress__step-labels"
-    >
-      <span
-        v-for="(step, i) in steps"
-        :key="i"
-        :class="[
-          'mint-progress__step-label',
-          i === currentStep ? 'mint-progress__step-label--active' : '',
-          i < currentStep ? 'mint-progress__step-label--done' : '',
-        ]"
-      >
-        {{ step }}
-      </span>
-    </div>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/progress-bar.css';
-</style>

package/src/components/ProtocolStep.presentation.ts

@@ -1,31 +0,0 @@
-import type { ProtocolStepType } from '../types'
-
-export const PROTOCOL_STEP_TYPE_ICONS: Record<ProtocolStepType, string> = {
-  incubation: 'M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z',
-  wash: 'M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z',
-  addition: 'M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z',
-  measurement: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z',
-  transfer: 'M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4',
-  centrifuge: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15',
-  mix: 'M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z',
-  custom: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z',
-}
-
-export const PROTOCOL_STEP_TYPE_COLORS: Record<ProtocolStepType, string> = {
-  incubation: '#F59E0B',
-  wash: '#06B6D4',
-  addition: '#10B981',
-  measurement: '#8B5CF6',
-  transfer: '#3B82F6',
-  centrifuge: '#6B7280',
-  mix: '#F97316',
-  custom: '#EC4899',
-}
-
-export function formatProtocolDuration(minutes: number | undefined): string {
-  if (minutes === undefined) return ''
-  if (minutes < 60) return `${minutes}m`
-  const hours = Math.floor(minutes / 60)
-  const mins = minutes % 60
-  return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`
-}