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

package/src/components/PluginWorkspaceView.vue

@@ -0,0 +1,395 @@
+<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

@@ -0,0 +1,148 @@
+<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

@@ -0,0 +1,117 @@
+<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

@@ -0,0 +1,31 @@
+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`
+}