@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

package/src/components/PluginWorkspaceView.vue

@@ -2,21 +2,27 @@
 /**
  * Standard plugin workspace shell that combines AppLayout, AppTopBar, and AppSidebar with LEAF-style defaults.
  *
+ * The structure is one `:spec` built with `definePluginWorkspaceView()`: title,
+ * top bar, sidebar (a `defineControlModel()` result generates its sections),
+ * the experiment chip and its save action. The active pill, view, sidebar
+ * values and collapse state are `v-model`s. It renders the toast container
+ * unless `spec.toasts` is false.
+ *
  * @example Recommended
  * ```vue
- * <PluginWorkspaceView title="Analysis" experiment-shell>
+ * <PluginWorkspaceView :spec="workspace" v-model:pill="tab">
  *   <router-view />
  * </PluginWorkspaceView>
  * ```
  */
-import { computed, useSlots } from 'vue'
+import { computed, toValue, useSlots } from 'vue'
 import type {
-  AccountMenuItem,
   PillNavItem,
   PillNavOption,
 } from '../types'
 import { useAppExperiment } from '../composables/useAppExperiment'
 import { usePluginWorkspace } from '../composables/usePluginWorkspace'
+import AppToastContainer from './AppToastContainer.vue'
 import WorkspaceControlsInternal from './internal/WorkspaceControlsInternal.vue'
 import WorkspaceShellInternal from './internal/WorkspaceShellInternal.vue'
 import WorkspaceSidebarInternal from './internal/WorkspaceSidebarInternal.vue'
@@ -28,70 +34,14 @@ import type {
 } from './PluginWorkspaceView.props'
 
 const props = withDefaults(defineProps<PluginWorkspaceViewProps>(), {
-  title: 'Workspace',
-  subtitle: undefined,
-  topBarVariant: 'card',
-  homePath: '/',
-  showLogo: true,
-  pageSelector: undefined,
-  currentPageSelectorId: 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,
+  spec: () => ({}),
+  pill: undefined,
+  view: undefined,
   values: undefined,
-  formEnhancements: undefined,
-  showFormActions: false,
+  sidebarCollapsed: undefined,
   formLoading: false,
   formDisabled: false,
   formReadonly: false,
-  formSize: 'sm',
-  sidebarCollapsed: undefined,
-  defaultSidebarCollapsed: false,
-  sidebarToggleLabel: 'Open workspace sidebar',
-  sidebarCloseLabel: 'Close workspace sidebar',
 })
 
 const emit = defineEmits<PluginWorkspaceViewEmits>()
@@ -102,13 +52,9 @@ defineSlots<{
   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
@@ -118,13 +64,15 @@ defineSlots<{
 
 const slots = useSlots()
 
-if (props.experimentShell) {
+// The experiment chip is setup-time structure, like the rest of the spec.
+if (props.spec.experiment) {
+  const save = props.spec.save
   useAppExperiment({
     onSelect: experiment => emit('experiment-select', experiment),
-    onSave: props.experimentSave,
+    onSave: save ? async () => (await save.handler()) ?? null : undefined,
     onDetach: () => emit('experiment-detach'),
-    saveDisabled: computed(() => props.experimentSaveDisabled),
-    saveDisabledMessage: computed(() => props.experimentSaveDisabledMessage),
+    saveDisabled: computed(() => toValue(save?.disabled) ?? false),
+    saveDisabledMessage: computed(() => toValue(save?.reason)),
   })
 }
 
@@ -133,7 +81,6 @@ const {
   sidebar,
   controls,
   handleControlValuesUpdate,
-  handlePageSelectorSelect,
   handlePillSelect,
 } = usePluginWorkspace({
   props,
@@ -158,14 +105,9 @@ function handleFormCancel(sectionId: string) {
 <template>
   <WorkspaceShellInternal
     :shell="shell"
-    @page-selector-select="handlePageSelectorSelect"
     @pill-select="handlePillSelect"
     @pill-option-select="(option: PillNavOption, item: PillNavItem) => emit('pill-option-select', option, item)"
-    @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 v-if="slots.topbar" #topbar="scope">
       <slot name="topbar" v-bind="scope" />
@@ -187,7 +129,7 @@ function handleFormCancel(sectionId: string) {
       <slot name="sidebar" v-bind="scope">
         <WorkspaceSidebarInternal
           :sidebar="sidebar"
-          @update:model-value="handleControlValuesUpdate"
+          @update:values="handleControlValuesUpdate"
           @update:collapsed="emit('update:sidebarCollapsed', $event)"
           @update:toggle="handleToggle"
           @section-action="(sectionId: string, actionId: string) => emit('section-action', sectionId, actionId)"
@@ -215,6 +157,7 @@ function handleFormCancel(sectionId: string) {
           <slot v-bind="controlsScope" />
         </template>
       </WorkspaceControlsInternal>
+      <AppToastContainer v-if="spec.toasts !== false" />
     </template>
   </WorkspaceShellInternal>
 </template>

package/src/components/PresenceAvatars.story.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import BaseButton from './BaseButton.vue'
+import PresenceAvatars from './PresenceAvatars.vue'
+import type { PresenceActivity } from '../composables/usePresence'
+import type { PresencePerson } from '../utils/presenceAvatars'
+
+const team: PresencePerson[] = [
+  { id: '2', name: 'Chen Li', activity: 'viewing_design' },
+  { id: '3', name: 'Dana Weber', activity: 'viewing_results' },
+  { id: '4', name: 'Eli Morgan', activity: 'viewing_design' },
+  { id: '1', name: 'Alice Chen', activity: 'editing' },
+  { id: '5', name: 'Fatima Rahman', activity: 'viewing_results' },
+  { id: '6', name: 'Gao Wei', activity: 'viewing_results' },
+  { id: '9', name: 'You', activity: 'viewing' },
+]
+
+const activities: PresenceActivity[] = ['viewing', 'viewing_design', 'viewing_results', 'editing']
+
+function initState() {
+  return {
+    others: 6,
+    aliceActivity: 'editing' as PresenceActivity,
+    max: 4,
+  }
+}
+
+function people(state: ReturnType<typeof initState>): PresencePerson[] {
+  return [
+    ...team
+      .filter(person => person.id !== '9')
+      .slice(0, state.others)
+      .map(person => (person.id === '1' ? { ...person, activity: state.aliceActivity } : person)),
+    team[team.length - 1],
+  ]
+}
+</script>
+
+<template>
+  <Story title="Data Display/PresenceAvatars">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <div style="display: flex; justify-content: flex-end; padding: 0.75rem 1rem; border-radius: 0.75rem; background: var(--bg-secondary); border: 1px solid var(--border-color);">
+            <PresenceAvatars :people="people(state)" self-id="9" :max="state.max" label="People on this experiment" />
+          </div>
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstSlider v-model="state.others" title="Other people" :min="0" :max="6" />
+        <HstSelect
+          v-model="state.aliceActivity"
+          title="Alice's activity"
+          :options="activities.map(value => ({ label: value, value }))"
+        />
+        <HstNumber v-model="state.max" title="Most avatars" />
+      </template>
+    </Variant>
+
+    <Variant title="Header actions (option A)">
+      <div style="padding: 2rem; max-width: 600px; min-height: 22rem;">
+        <div style="display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 0.8125rem 1rem; border-radius: 0.75rem; background: var(--bg-secondary); border: 1px solid var(--border-color);">
+          <PresenceAvatars :people="team" self-id="9" label="People on this experiment" />
+          <span aria-hidden="true" style="width: 1px; align-self: stretch; margin: 0.25rem 0.125rem; background: var(--border-color);" />
+          <BaseButton variant="secondary" size="sm">Edit</BaseButton>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Capped list">
+      <div style="padding: 2rem; max-width: 600px;">
+        <PresenceAvatars :people="team.slice(0, 3)" :count="24" self-id="9" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/PresenceAvatars.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+/** Who else is on a presence topic: at most `max` avatars (editing first), then `+N`; one button opens the list of each person and activity. */
+import { computed, useId, useTemplateRef, watch, type Component } from 'vue'
+import { ChartColumn, Eye, FlaskConical, Pencil } from 'lucide-vue-next'
+import Avatar from './Avatar.vue'
+import { useDropdownState } from '../composables/useDropdownState'
+import { useEventListener } from '../composables/useEventListener'
+import type { PresenceActivity } from '../composables/usePresence'
+import {
+  PRESENCE_ACTIVITY_LABELS,
+  arrangePresence,
+  presenceSummary,
+  type PresencePerson,
+} from '../utils/presenceAvatars'
+
+interface Props {
+  /** The people on the topic, for example `usePresence().viewers` with names. */
+  people: PresencePerson[]
+  /** The current user; never shown. */
+  selfId?: string | null
+  /** All people on the topic (`usePresence().count`), when the list is capped. */
+  count?: number
+  /** Accessible name of the list. */
+  label?: string
+  /** Most avatars before `+N`. */
+  max?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  selfId: null,
+  count: undefined,
+  label: 'People here',
+  max: 4,
+})
+
+const ACTIVITY_ICONS: Record<PresenceActivity, Component> = {
+  viewing: Eye,
+  viewing_design: FlaskConical,
+  viewing_results: ChartColumn,
+  editing: Pencil,
+}
+
+const arrangement = computed(() => arrangePresence(props.people, {
+  selfId: props.selfId,
+  count: props.count,
+  max: props.max,
+}))
+const summary = computed(() => presenceSummary(arrangement.value))
+const unlisted = computed(() => arrangement.value.total - arrangement.value.others.length)
+
+const root = useTemplateRef<HTMLElement>('root')
+const { isOpen, toggle, close } = useDropdownState({
+  rootRef: root,
+  triggerRef: useTemplateRef<HTMLElement>('trigger'),
+  closeOnEscape: false,
+})
+// Escape closes the list from anywhere, but takes the focus back to the button only from within it.
+useEventListener(() => document, 'keydown', (event) => {
+  if (event.key === 'Escape') close(root.value?.contains(event.target as Node) ?? false)
+})
+// The root unmounts when nobody else is here; the list must not reopen on its own when someone comes back.
+watch(() => arrangement.value.total, (total) => { if (total === 0) close() })
+const panelId = `mint-presence-${useId()}`
+</script>
+
+<template>
+  <div v-if="arrangement.total > 0" ref="root" class="mint-presence">
+    <button
+      ref="trigger"
+      type="button"
+      class="mint-presence__trigger"
+      :aria-expanded="isOpen"
+      :aria-controls="isOpen ? panelId : undefined"
+      :aria-label="summary"
+      @click="toggle"
+    >
+      <span class="mint-presence__stack" aria-hidden="true">
+        <span
+          v-for="person in arrangement.shown"
+          :key="person.id"
+          :class="['mint-presence__avatar', { 'mint-presence__avatar--editing': person.activity === 'editing' }]"
+        >
+          <Avatar :name="person.name" size="xs" />
+          <span v-if="person.activity === 'editing'" class="mint-presence__badge"><Pencil /></span>
+        </span>
+        <span v-if="arrangement.overflow > 0" class="mint-presence__more">+{{ arrangement.overflow }}</span>
+      </span>
+    </button>
+
+    <div v-if="isOpen" :id="panelId" class="mint-popover mint-presence__panel">
+      <div class="mint-presence__head">Here now <span class="mint-presence__count">{{ arrangement.total }}</span></div>
+      <ul class="mint-presence__list" :aria-label="label">
+        <li v-for="person in arrangement.others" :key="person.id" class="mint-presence__row">
+          <span
+            :class="['mint-presence__avatar', { 'mint-presence__avatar--editing': person.activity === 'editing' }]"
+            aria-hidden="true"
+          >
+            <Avatar :name="person.name" size="xs" />
+            <span v-if="person.activity === 'editing'" class="mint-presence__badge"><Pencil /></span>
+          </span>
+          <span class="mint-presence__name">{{ person.name }}</span>
+          <span :class="['mint-presence__activity', { 'mint-presence__activity--editing': person.activity === 'editing' }]">
+            <component :is="ACTIVITY_ICONS[person.activity]" aria-hidden="true" />
+            {{ PRESENCE_ACTIVITY_LABELS[person.activity] }}
+          </span>
+        </li>
+      </ul>
+      <p v-if="unlisted > 0" class="mint-presence__rest">and {{ unlisted }} more</p>
+      <p class="mint-presence__foot">
+        <slot name="footer">Editing is a hint, not a lock. You can still edit.</slot>
+      </p>
+    </div>
+  </div>
+</template>

package/src/components/ProgressBar.story.vue

@@ -32,7 +32,7 @@ onUnmounted(() => {
         <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
           <ProgressBar
             :value="state.value"
-            :color="state.color"
+            :tone="state.color"
             :size="state.size"
             :label="state.showLabel ? state.label : undefined"
             :show-value="state.showValue"
@@ -66,7 +66,7 @@ onUnmounted(() => {
           <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" />
+          <ProgressBar :value="65" :tone="color" />
         </div>
       </div>
     </Variant>
@@ -84,15 +84,15 @@ onUnmounted(() => {
 
     <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" />
+        <ProgressBar :value="75" label="Processing plates..." :show-value="true" tone="primary" />
+        <ProgressBar :value="100" label="Analysis complete" :show-value="true" tone="success" />
+        <ProgressBar :value="33" label="Uploading data..." :show-value="true" tone="info" />
       </div>
     </Variant>
 
     <Variant title="Indeterminate">
       <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <ProgressBar :indeterminate="true" label="Loading..." color="primary" />
+        <ProgressBar :indeterminate="true" label="Loading..." tone="primary" />
       </div>
     </Variant>
 
@@ -109,7 +109,7 @@ onUnmounted(() => {
           :value="animatedValue"
           label="Processing..."
           :show-value="true"
-          :color="animatedValue >= 100 ? 'success' : 'primary'"
+          :tone="animatedValue >= 100 ? 'success' : 'primary'"
         />
       </div>
     </Variant>

package/src/components/ProgressBar.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 /** Displays progress as a filled rail, with an indeterminate mode. */
 import { computed } from 'vue'
+import type { Tone } from '../types'
 
 interface Props {
   value?: number
-  color?: 'primary' | 'success' | 'warning' | 'error' | 'info'
+  tone?: Tone
   size?: 'sm' | 'md' | 'lg'
   label?: string
   showValue?: boolean
@@ -14,7 +15,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   value: 0,
-  color: 'primary',
+  tone: 'primary',
   size: 'md',
   label: undefined,
   showValue: false,
@@ -53,7 +54,7 @@ const barStyle = computed(() => {
       <div
         :class="[
           'mint-progress__bar',
-          `mint-progress__bar--${color}`,
+          `mint-progress__bar--${tone}`,
           indeterminate ? 'mint-progress__bar--indeterminate' : '',
         ]"
         :style="barStyle"

package/src/components/ProtocolStep.presentation.ts

@@ -11,17 +11,6 @@ export const PROTOCOL_STEP_TYPE_ICONS: Record<ProtocolStepType, string> = {
   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`

package/src/components/ProtocolStepEditor.vue

@@ -12,10 +12,9 @@ import {
 } from './ProtocolStep.presentation'
 import BaseButton from './BaseButton.vue'
 import BaseInput from './BaseInput.vue'
-import BaseTextarea from './BaseTextarea.vue'
 import FormField from './FormField.vue'
 import ProtocolStepParameterField from './ProtocolStepParameterField.vue'
-import SearchableSelect from './SearchableSelect.vue'
+import BaseSelect from './BaseSelect.vue'
 import {
   buildCustomProtocolTemplate,
   buildProtocolPreviewParams,
@@ -204,7 +203,8 @@ watch(
     <!-- Form -->
     <div class="mint-protocol-editor__form">
       <FormField label="Template" :field-id="`${fieldId}-template`" layout="row">
-        <SearchableSelect
+        <BaseSelect
+          searchable
           size="sm"
           :aria-labelledby="`${fieldId}-template-label`"
           :model-value="selectedTemplateId ?? undefined"
@@ -221,7 +221,7 @@ watch(
           v-model="stepName"
           size="sm"
           placeholder="Enter step name"
-          :error="!!validationErrors.name"
+          :invalid="!!validationErrors.name"
         />
       </FormField>
 
@@ -238,7 +238,8 @@ watch(
       </template>
 
       <FormField label="Description" :html-for="`${fieldId}-description`" layout="row">
-        <BaseTextarea
+        <BaseInput
+          type="textarea"
           :id="`${fieldId}-description`"
           v-model="stepDescription"
           placeholder="Optional step description"

package/src/components/ProtocolStepParameterField.vue

@@ -5,6 +5,7 @@ import type { ParameterDefinition } from '../composables/useProtocolTemplates'
 import type { ConcentrationValue } from '../composables/useConcentrationUnits'
 import BaseInput from './BaseInput.vue'
 import BaseSelect from './BaseSelect.vue'
+import NumberInput from './NumberInput.vue'
 import ConcentrationInput from './ConcentrationInput.vue'
 import FormField from './FormField.vue'
 
@@ -25,7 +26,11 @@ const controlId = useId()
 const isNumeric = computed(() => ['number', 'temperature', 'duration'].includes(props.parameter.type))
 
 const scalarValue = computed(() => (
-  props.modelValue as string | number | undefined
+  props.modelValue as string | undefined
+))
+
+const numericValue = computed(() => (
+  typeof props.modelValue === 'number' ? props.modelValue : null
 ))
 
 const concentrationValue = computed(() => (
@@ -35,7 +40,7 @@ const concentrationValue = computed(() => (
 const placeholder = computed(() => props.parameter.placeholder
   || (props.parameter.type === 'reagent' ? 'Enter reagent name' : `Enter ${props.parameter.label.toLowerCase()}`))
 
-/** BaseInput reports an empty number field as null; an empty parameter is undefined. */
+/** NumberInput reports an empty field as null; an empty parameter is undefined. */
 function handleInput(value: string | number | null) {
   emit('update:modelValue', value ?? undefined)
 }
@@ -49,20 +54,18 @@ function handleInput(value: string | number | null) {
     :html-for="controlId"
     layout="row"
   >
-    <BaseInput
+    <NumberInput
       v-if="isNumeric"
       :id="controlId"
-      type="number"
       size="sm"
-      :model-value="scalarValue"
+      :model-value="numericValue"
       :min="parameter.min"
       :max="parameter.max"
+      :unit="parameter.unit"
       :placeholder="placeholder"
-      :error="!!error"
+      :invalid="!!error"
       @update:model-value="handleInput"
-    >
-      <template v-if="parameter.unit" #suffix>{{ parameter.unit }}</template>
-    </BaseInput>
+    />
 
     <BaseSelect
       v-else-if="parameter.type === 'select'"
@@ -71,14 +74,14 @@ function handleInput(value: string | number | null) {
       :model-value="scalarValue"
       :options="parameter.options ?? []"
       :placeholder="`Select ${parameter.label.toLowerCase()}`"
-      :error="!!error"
+      :invalid="!!error"
       @update:model-value="emit('update:modelValue', $event)"
     />
 
     <ConcentrationInput
       v-else-if="parameter.type === 'concentration'"
       :model-value="concentrationValue"
-      :error="!!error"
+      :invalid="!!error"
       size="sm"
       @update:model-value="emit('update:modelValue', $event)"
     />
@@ -89,7 +92,7 @@ function handleInput(value: string | number | null) {
       size="sm"
       :model-value="scalarValue"
       :placeholder="placeholder"
-      :error="!!error"
+      :invalid="!!error"
       @update:model-value="handleInput"
     />
   </FormField>

package/src/components/RuntimeUpdateNotice.vue

@@ -41,7 +41,7 @@ const emit = defineEmits<{
 
 .mint-runtime-update button {
   padding: 5px 9px;
-  color: #fff;
+  color: var(--text-on-accent);
   background: var(--color-primary);
   border: 0;
   border-radius: 6px;

package/src/components/SampleSelector.colors.ts

@@ -1,4 +1,4 @@
-import { DEFAULT_COLORS } from '../composables/useAutoGroup'
+import { DEFAULT_COLORS } from './internal/autoGroup/colors'
 import type { SampleGroup } from '../types'
 
 export type ColorEdit =

package/src/components/SampleSelector.story.vue

@@ -135,7 +135,7 @@ function handleSmartGroup(result: AutoGroupResult, state: { groups: SampleGroup[
       </div>
     </Variant>
 
-    <Variant title="Narrow Action Bar">
+    <Variant title="Narrow Header">
       <div style="padding: 2rem; width: 320px;">
         <SampleSelector
           :model-value="['Control_Rep1']"