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

package/src/components/SettingsModal.vue

@@ -2,8 +2,8 @@
 /**
  * Tabbed settings modal with three usage modes:
  *
- *   1. Schema-driven (recommended) — pass `schema`, compact `controls`, or a
- *      complete `defineControlModel()` result plus `v-model:values`. Each
+ *   1. Schema-driven (recommended) — pass a `defineControlModel()` result or a
+ *      `SettingsModalSchema` as `spec`, plus `v-model:values`. Each
  *      group/section becomes a tab; fields auto-render via the SDK form field
  *      registry (text, select, number, toggle, molecule, concentration, …).
  *      Conditional visibility, validation, and dynamic options come for free.
@@ -22,12 +22,12 @@
  *
  * Schema-driven settings also get a search across groups (label + hint), a
  * modified-from-default marker with a per-row reset for every field with a
- * non-null `defaultValue` (every `controls`/`model` field gets one), and a "Restore group defaults" action. Changes
+ * non-null `defaultValue` (every control model field gets one), and a "Restore group defaults" action. Changes
  * apply immediately; the default footer says so and closes with "Done".
  *
  * @example Recommended
  * ```vue
- * <SettingsModal v-model="open" v-model:values="values" :model="settingsModel" />
+ * <SettingsModal v-model:open="open" v-model:values="values" :spec="settingsModel" />
  * ```
  */
 import { ref, computed, watch } from 'vue'
@@ -40,16 +40,12 @@ import SettingsPaneHeadInternal from './internal/SettingsPaneHeadInternal.vue'
 import { useFormBuilder } from '../composables/useFormBuilder'
 import {
   controlsToSettingsSchema,
-  mergeControlWorkspaceOptions,
-  resolveControlModel,
-  type ControlModel,
+  isControlModelBinding,
   type ControlModelBinding,
-  type ControlSchema,
-  type ControlWorkspaceOptions,
 } from '../composables/useControlSchema'
 import { useSettingsStore, colorPalettes } from '../stores/settings'
 import { useAuthStore } from '../stores/auth'
-import { usePlatformContext } from '../composables/usePlatformContext'
+import { usePlatform } from '../composables/usePlatform'
 import { canAccessByPolicy } from '../permissions'
 import {
   formSchemaFieldNames,
@@ -70,7 +66,6 @@ import type {
   SettingsModalLayout,
   SettingsModalSchema,
   SettingsUserType,
-  FormEnhancements,
   FormFieldSchema,
 } from '../types'
 import type { AccessControlled, PermissionUser } from '../permissions'
@@ -85,27 +80,19 @@ import {
 } from './SettingsModal.schema'
 
 interface Props {
-  modelValue: boolean
+  open: boolean
   title?: string
-  /** Manual tab descriptors. Ignored when `schema` is set (groups become tabs). */
+  /** Manual tab descriptors. Ignored when `spec` is set (groups become tabs). */
   tabs?: SettingsTabInput[]
   showAppearance?: boolean
   /** List Appearance before the other tabs and open on it. */
   appearanceFirst?: boolean
   size?: 'md' | 'lg' | 'xl'
   layout?: SettingsModalLayout
-  /** Declarative schema — fields auto-render via SDK form components. */
-  schema?: SettingsModalSchema
-  /** Model returned by defineControlModel(), or a raw nested ControlModel for one-step settings generation. */
-  model?: ControlModel | ControlModelBinding
-  /** Compact controls model — converted to `schema` when `schema` is not set. */
-  controls?: ControlSchema
-  /** Conversion options for `controls`, such as section labels, columns, and shared initialValues. */
-  controlOptions?: ControlWorkspaceOptions
-  /** Two-way bound values when `schema`, `model`, or `controls` is set. */
+  /** Control model built with defineControlModel(), or a SettingsModalSchema (e.g. the generated `settingsForm`). Fields auto-render via SDK form components. */
+  spec?: ControlModelBinding | SettingsModalSchema
+  /** Two-way bound values when `spec` is set. */
   values?: Record<string, unknown>
-  /** Optional dynamic enhancements (validators, dynamic options, callbacks). */
-  enhancements?: FormEnhancements<Record<string, unknown>>
   /** Optional user type override for permission-filtered settings content. Defaults to SDK auth/platform context. */
   userType?: SettingsUserType
 }
@@ -116,43 +103,38 @@ const props = withDefaults(defineProps<Props>(), {
   showAppearance: true,
   size: 'lg',
   layout: undefined,
-  model: undefined,
+  spec: undefined,
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
+  'update:open': [value: boolean]
   'update:values': [data: Record<string, unknown>]
   close: []
 }>()
 
 const settings = useSettingsStore()
 const auth = useAuthStore()
-const { user: platformUser } = usePlatformContext()
+const { user: platformUser, integrated, isAdmin: platformIsAdmin } = usePlatform()
+// With sign-in turned off (`authRequired: false`) every caller of an integrated page is the
+// implicit administrator, and usePlatform reports a page with no user as admin.
+const implicitPlatformAdmin = computed(() => integrated.value && !platformUser.value && platformIsAdmin.value)
 
-const resolvedModel = computed<ControlModelBinding | undefined>(() => {
-  return resolveControlModel(props.model)
-})
-const resolvedControls = computed<ControlSchema | undefined>(() =>
-  props.controls ?? resolvedModel.value?.controls,
-)
-const resolvedControlOptions = computed<ControlWorkspaceOptions>(() =>
-  mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, props.controlOptions)
+const resolvedModel = computed<ControlModelBinding | undefined>(() =>
+  isControlModelBinding(props.spec) ? props.spec : undefined,
 )
 const sourceSettingsSchema = computed<SettingsModalSchema | undefined>(() =>
-  props.schema ?? (
-    resolvedControls.value
-      ? controlsToSettingsSchema(resolvedControls.value, resolvedControlOptions.value)
-      : undefined
-  ),
+  resolvedModel.value
+    ? controlsToSettingsSchema(resolvedModel.value.controls, resolvedModel.value.controlOptions)
+    : props.spec as SettingsModalSchema | undefined,
 )
 const currentAccessUser = computed<PermissionUser | null>(() => {
   if (props.userType) {
     return { role: props.userType === 'admin' ? 'admin' : 'user' }
   }
-  return auth.userInfo ?? platformUser.value ?? null
+  return auth.userInfo ?? platformUser.value ?? (implicitPlatformAdmin.value ? { role: 'admin' } : null)
 })
 const isAccessUserAuthenticated = computed(() =>
-  props.userType !== undefined || auth.isAuthenticated || !!platformUser.value,
+  props.userType !== undefined || auth.isAuthenticated || !!platformUser.value || implicitPlatformAdmin.value,
 )
 const settingsSchema = computed<SettingsModalSchema | undefined>(() => {
   if (!sourceSettingsSchema.value) return undefined
@@ -160,7 +142,7 @@ const settingsSchema = computed<SettingsModalSchema | undefined>(() => {
 })
 const isSchemaDriven = computed(() => !!settingsSchema.value)
 const resolvedValues = computed<Record<string, unknown>>(() => ({
-  ...(resolvedControlOptions.value.initialValues ?? {}),
+  ...(resolvedModel.value?.controlOptions.initialValues ?? {}),
   ...(props.values ?? {}),
 }))
 
@@ -169,7 +151,7 @@ const resolvedValues = computed<Record<string, unknown>>(() => ({
 const builder = useFormBuilder(
   settingsSchema.value ? buildFlatSettingsSchema(settingsSchema.value) : { sections: [] },
   resolvedValues.value,
-  props.enhancements,
+  resolvedModel.value?.controlOptions.enhancements,
 )
 
 watch(
@@ -402,7 +384,7 @@ watch(
 )
 
 function handleClose() {
-  emit('update:modelValue', false)
+  emit('update:open', false)
   emit('close')
 }
 
@@ -421,14 +403,14 @@ function canShowForCurrentUser(item: AccessControlled): boolean {
 
 <template>
   <BaseModal
-    :model-value="modelValue"
+    :open="open"
     :title="title"
     :size="size"
     :layout="baseLayout"
     :tabs="modalTabs"
     :active-tab="isSearching ? '' : activeTab"
     @update:active-tab="selectTab"
-    @update:model-value="emit('update:modelValue', $event)"
+    @update:open="emit('update:open', $event)"
     @close="handleClose"
   >
     <template #header>
@@ -609,8 +591,8 @@ function canShowForCurrentUser(item: AccessControlled): boolean {
 
         <div class="mint-settings-modal__setting mint-settings-modal__setting--inline">
           <div class="mint-settings-modal__setting-text">
-            <span class="mint-settings-modal__setting-label">Table density</span>
-            <span class="mint-settings-modal__setting-hint">Adjusts row height in data tables</span>
+            <span class="mint-settings-modal__setting-label">Density</span>
+            <span class="mint-settings-modal__setting-hint">Adjusts control and table row height</span>
           </div>
           <SegmentedControl
             :model-value="settings.tableDensity"

package/src/components/SmartGroup.types.ts

@@ -1,7 +1,7 @@
 /**
- * Shared prop and payload types for the Smart Group — Full View components
- * (`SmartGroupModal` shell + `SmartGroupFieldRecipe` auto mode +
- * `SmartGroupManual` manual mode).
+ * Shared prop and payload types for the private Smart Group components
+ * (`SmartGroupFieldRecipe` auto mode + `SmartGroupManual` manual mode) that
+ * `AutoGroupModalInternal` drives. They are not SDK exports.
  */
 import type {
   FieldRecipeGroup,
@@ -11,8 +11,6 @@ import type {
 } from './SmartGroupFieldRecipe.groups'
 import type { ManualSample } from './SmartGroupManual.cohorts'
 
-export type SmartGroupMode = 'auto' | 'manual'
-
 /** A colour swatch in the manual assignment bar. */
 export interface ManualPaletteEntry {
   /** CSS colour value (e.g. `var(--mint-sample-1)`). */
@@ -63,7 +61,7 @@ export interface SmartGroupFieldRecipeProps {
   /** Colour of the QC pool's count bar. The QC dot is always the neutral QC marker (3a). */
   qcColor?: string
 
-  // ── Controlled mode (driven by AutoGroupModal over the useAutoGroup engine).
+  // ── Controlled mode (driven by AutoGroupModalInternal over the useAutoGroup engine).
   // When these are provided the component renders the supplied data and emits
   // events instead of running its own fixture grouping logic.
   /** Controls the field toggles; when set, clicking a toggle emits `toggle`. */

package/src/components/SmartGroupFieldRecipe.story.vue

@@ -51,7 +51,7 @@ import type { FieldRecipeApplyPayload } from './SmartGroup.types'
 }
 .sg-story__log {
   margin: 0;
-  font-family: 'Fira Code', monospace;
+  font-family: var(--font-mono);
   font-size: 0.8125rem;
   color: var(--text-secondary, #64748b);
 }

package/src/components/SmartGroupFieldRecipe.vue

@@ -46,7 +46,7 @@ import { sampleTypeMarker } from '../utils/sampleTypeMarker'
 import { useListReorder } from '../composables/useListReorder'
 import ActionMenu from './ActionMenu.vue'
 import BaseButton from './BaseButton.vue'
-import BaseToggle from './BaseToggle.vue'
+import BaseCheckbox from './BaseCheckbox.vue'
 import LoadingSpinner from './LoadingSpinner.vue'
 import SegmentedControl from './SegmentedControl.vue'
 import type { ActionMenuItem } from '../types/components'
@@ -119,7 +119,7 @@ const MAX_BAR = 44
 const QC_DOT_STYLE = sampleTypeMarker('qc', '').style
 
 // CSV upload (presentational): the component only surfaces the control and
-// emits the chosen/dropped File; AutoGroupModal parses it into the engine.
+// emits the chosen/dropped File; AutoGroupModalInternal parses it into the engine.
 const fileInput = ref<HTMLInputElement | null>(null)
 const dragOver = ref(false)
 let dragDepth = 0
@@ -173,7 +173,7 @@ const QC_ROUTE_OPTIONS: { value: QcRoute; label: string }[] = [
 ]
 
 // Uncontrolled fallback state (used by the standalone story). In controlled
-// mode AutoGroupModal supplies `enabled` / `layers` / `groups` / `route` +
+// mode AutoGroupModalInternal supplies `enabled` / `layers` / `groups` / `route` +
 // `qcChip` and the `toggle` / `move` / `update:route` events drive the engine
 // instead of this local state. `orderInner` tracks the uncontrolled layer
 // order: field indices in toggle order, first entry = hierarchy layer 1.
@@ -506,7 +506,8 @@ function onApply() {
               </template>
               <span class="sg-field__vals">{{ card.field.vals }}</span>
               <span v-if="hints?.[card.index]" class="fr-row__hint">{{ hints[card.index] }}</span>
-              <BaseToggle
+              <BaseCheckbox
+                type="switch"
                 size="sm"
                 :model-value="true"
                 :aria-label="'Group by ' + card.field.key"
@@ -529,7 +530,8 @@ function onApply() {
                 <span class="sg-field__name">{{ card.field.key }}</span>
                 <span class="sg-field__role" :class="{ 'sg-field__role--rep': card.field.rep }">{{ card.field.role }}</span>
                 <span class="sg-field__vals">{{ card.field.vals }}</span>
-                <BaseToggle
+                <BaseCheckbox
+                  type="switch"
                   size="sm"
                   :model-value="false"
                   :aria-label="'Group by ' + card.field.key"

package/src/components/SmartGroupManual.story.vue

@@ -48,7 +48,7 @@ import type { ManualDonePayload } from './SmartGroup.types'
 }
 .sg-story__log {
   margin: 0;
-  font-family: 'Fira Code', monospace;
+  font-family: var(--font-mono);
   font-size: 0.8125rem;
   color: var(--text-secondary, #64748b);
 }

package/src/components/StaleFormBanner.story.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import StaleFormBanner from './StaleFormBanner.vue'
+import BaseModal from './BaseModal.vue'
+import BaseButton from './BaseButton.vue'
+import BaseInput from './BaseInput.vue'
+
+const lastAction = ref('')
+const modalOpen = ref(true)
+const notes = ref('72 h exposure, n = 3 per dose. Plate 2 edge wells excluded.')
+const twelveSecondsAgo = () => new Date(Date.now() - 12_000).toISOString()
+
+function initPlayground() {
+  return {
+    actors: 'Alice Chen',
+    fields: 'Notes, Status',
+    reviewHref: '#',
+  }
+}
+
+function list(text: string): string[] {
+  return text.split(',').map(item => item.trim()).filter(Boolean)
+}
+</script>
+
+<template>
+  <Story title="Experiment/StaleFormBanner">
+    <Variant title="Playground" :init-state="initPlayground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <div style="border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-secondary); overflow: hidden;">
+            <StaleFormBanner
+              :change="{ actors: list(state.actors), fields: list(state.fields), at: twelveSecondsAgo() }"
+              :review-href="state.reviewHref"
+              entity-noun="this experiment"
+              @reload="lastAction = 'reload'"
+              @dismiss="lastAction = 'dismiss'"
+            />
+            <div style="padding: 1rem; font-size: 0.8125rem; color: var(--text-secondary);">Form fields</div>
+          </div>
+          <div v-if="lastAction" style="margin-top: 1rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted);">
+            Last event: <code>{{ lastAction }}</code>
+          </div>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.actors" title="Writers (comma list)" />
+        <HstText v-model="state.fields" title="Changed fields (comma list)" />
+        <HstText v-model="state.reviewHref" title="Review link (empty: no Review)" />
+      </template>
+    </Variant>
+
+    <Variant title="In the Edit form" :init-state="() => ({})">
+      <div style="padding: 2rem; max-width: 600px;">
+        <BaseButton variant="secondary" @click="modalOpen = true">Edit experiment</BaseButton>
+        <BaseModal v-model:open="modalOpen" title="Edit experiment" size="lg">
+          <div style="margin: -1.125rem -1.25rem 1rem;">
+            <StaleFormBanner
+              :change="{ actors: ['Alice Chen'], fields: ['Notes', 'Status'], at: twelveSecondsAgo() }"
+              review-href="#"
+              @reload="modalOpen = false"
+              @dismiss="lastAction = 'dismiss'"
+            />
+          </div>
+          <label style="display: flex; flex-direction: column; gap: 0.3125rem; font-size: 0.75rem; color: var(--text-secondary);">
+            Notes
+            <BaseInput v-model="notes" type="textarea" :rows="3" />
+          </label>
+          <template #footer>
+            <BaseButton variant="secondary" size="sm" @click="modalOpen = false">Cancel</BaseButton>
+            <BaseButton variant="primary" size="sm">Save changes</BaseButton>
+          </template>
+        </BaseModal>
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+## StaleFormBanner
+
+The strip at the top of a form when someone else saved the entity while the
+form holds unsaved edits (RFC #439). `useVersionedSave()` from
+`@morscherlab/mint-sdk/data` sets `stale` from the realtime stream; show the
+banner while it is set. Several writes merge into one banner. **Reload form**
+calls `reload()`, the close button calls `dismissStale()`, and **Review** opens
+`reviewHref` in a new tab. There is no Overwrite: a save on the older version
+gets `VersionConflictDialog`.
+</docs>

package/src/components/StaleFormBanner.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+/**
+ * The strip at the top of a form whose entity someone else changed while the
+ * form held unsaved edits (RFC #439). Show it while `useVersionedSave().stale`
+ * is set. It offers Reload and Review, not Overwrite: a save that would
+ * overwrite gets the 412 dialog.
+ */
+import { computed, onBeforeUnmount, ref } from 'vue'
+import { TriangleAlert, X } from 'lucide-vue-next'
+import type { StaleChange } from '../composables/useVersionedSave'
+
+interface Props {
+  change: StaleChange
+  /** The entity's page; Review opens it in a new tab. Without it, there is no Review. */
+  reviewHref?: string
+  /** What the form edits, for a write that names no fields. */
+  entityNoun?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  reviewHref: '',
+  entityNoun: 'this record',
+})
+
+const emit = defineEmits<{
+  reload: []
+  dismiss: []
+}>()
+
+/** "A", "A and B", "A, B and C". */
+function list(items: readonly string[]): string {
+  if (items.length <= 1) return items[0] ?? ''
+  return `${items.slice(0, -1).join(', ')} and ${items[items.length - 1]}`
+}
+
+const summary = computed(() => {
+  const { actors, fields } = props.change
+  // Up to two named fields read as a list; more read as a count.
+  const what = fields.length === 0
+    ? props.entityNoun
+    : fields.length <= 2 ? list(fields) : `${fields.length} fields`
+  return `${list(actors)} changed ${what}`
+})
+
+const now = ref(Date.now())
+const timer = setInterval(() => { now.value = Date.now() }, 5_000)
+onBeforeUnmount(() => clearInterval(timer))
+
+const ago = computed(() => {
+  const seconds = Math.max(0, Math.round((now.value - Date.parse(props.change.at)) / 1000))
+  if (seconds < 60) return `${seconds} s ago`
+  const minutes = Math.round(seconds / 60)
+  if (minutes < 60) return `${minutes} min ago`
+  return `${Math.round(minutes / 60)} h ago`
+})
+</script>
+
+<template>
+  <div class="mint-stale-banner" role="status">
+    <TriangleAlert class="mint-stale-banner__icon" aria-hidden="true" />
+    <p class="mint-stale-banner__text">
+      <strong>{{ summary }}</strong>
+      {{ ' ' }}<time class="mint-stale-banner__time" :datetime="change.at">{{ ago }}</time>.
+      This form shows the older version.
+    </p>
+    <a
+      v-if="reviewHref"
+      class="mint-stale-banner__action"
+      :href="reviewHref"
+      target="_blank"
+      rel="noopener"
+    >Review</a>
+    <button type="button" class="mint-stale-banner__action" @click="emit('reload')">Reload form</button>
+    <button
+      type="button"
+      class="mint-stale-banner__dismiss"
+      aria-label="Dismiss until the next change"
+      @click="emit('dismiss')"
+    >
+      <X aria-hidden="true" />
+    </button>
+  </div>
+</template>

package/src/components/StepWizard.story.vue

@@ -23,6 +23,7 @@ function initState() {
     showProgress: true,
     showStepNumbers: true,
     size: 'md' as const,
+    orientation: 'horizontal' as const,
   }
 }
 </script>
@@ -39,6 +40,7 @@ function initState() {
             :show-progress="state.showProgress"
             :show-step-numbers="state.showStepNumbers"
             :size="state.size"
+            :orientation="state.orientation"
           >
             <template #step-setup>
               <div style="padding: 1.5rem;">
@@ -72,6 +74,14 @@ function initState() {
         <HstCheckbox v-model="state.linear" title="Linear" />
         <HstCheckbox v-model="state.showProgress" title="Show Progress" />
         <HstCheckbox v-model="state.showStepNumbers" title="Show Step Numbers" />
+        <HstSelect
+          v-model="state.orientation"
+          title="Orientation"
+          :options="[
+            { value: 'horizontal', label: 'Horizontal' },
+            { value: 'vertical', label: 'Vertical' },
+          ]"
+        />
         <HstSelect
           v-model="state.size"
           title="Size"
@@ -129,6 +139,29 @@ function initState() {
       </div>
     </Variant>
 
+    <Variant title="Vertical">
+      <div style="padding: 2rem; max-width: 700px;">
+        <StepWizard
+          :steps="mockSteps"
+          :model-value="2"
+          orientation="vertical"
+        >
+          <template #step-setup>
+            <div style="padding: 1.5rem;">Setup</div>
+          </template>
+          <template #step-samples>
+            <div style="padding: 1.5rem;">Samples</div>
+          </template>
+          <template #step-protocol>
+            <div style="padding: 1.5rem;">Protocol (active)</div>
+          </template>
+          <template #step-review>
+            <div style="padding: 1.5rem;">Review</div>
+          </template>
+        </StepWizard>
+      </div>
+    </Variant>
+
     <Variant title="Small">
       <div style="padding: 2rem; max-width: 500px;">
         <StepWizard

package/src/components/StepWizard.vue

@@ -11,6 +11,8 @@ export interface Props {
   showProgress?: boolean
   showStepNumbers?: boolean
   size?: 'sm' | 'md' | 'lg'
+  /** `vertical` stacks the steps in a rail beside the step content. */
+  orientation?: 'horizontal' | 'vertical'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -19,6 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
   showProgress: true,
   showStepNumbers: true,
   size: 'md',
+  orientation: 'horizontal',
 })
 
 const emit = defineEmits<{
@@ -114,7 +117,11 @@ defineExpose({ setStepValid })
 
 <template>
   <div
-    :class="['mint-wizard', `mint-wizard--${props.size}`]"
+    :class="[
+      'mint-wizard',
+      `mint-wizard--${props.size}`,
+      { 'mint-wizard--vertical': props.orientation === 'vertical' },
+    ]"
     tabindex="0"
     @keydown="handleKeydown"
   >

package/src/components/TagsInput.story.vue

@@ -27,7 +27,7 @@ function categorizedState() {
             v-model="state.tags"
             :placeholder="state.placeholder"
             :disabled="state.disabled"
-            :error="state.error"
+            :invalid="state.error"
             :size="state.size"
             :max-tags="state.useMaxTags ? state.maxTags : undefined"
             :allow-duplicates="state.allowDuplicates"
@@ -97,7 +97,7 @@ function categorizedState() {
       <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
         <TagsInput
           :model-value="['invalid-tag']"
-          error
+          invalid
           placeholder="Fix the tags..."
         />
       </div>
@@ -143,11 +143,11 @@ function categorizedState() {
             v-model:active-category="state.activeCategory"
             placeholder="Pick a category and type..."
             :categories="[
-              { name: 'role', prefix: 'role', color: 'primary' },
-              { name: 'status', prefix: 'status', color: 'success' },
-              { name: 'type', prefix: 'type', color: 'info' },
-              { name: 'qc', prefix: 'qc', color: 'warning' },
-              { name: 'ref', prefix: 'ref', color: 'neutral' },
+              { name: 'role', prefix: 'role', tone: 'primary' },
+              { name: 'status', prefix: 'status', tone: 'success' },
+              { name: 'type', prefix: 'type', tone: 'info' },
+              { name: 'qc', prefix: 'qc', tone: 'warning' },
+              { name: 'ref', prefix: 'ref', tone: 'neutral' },
             ]"
           />
           <p style="margin: 0; font-size: 0.75rem; color: var(--text-muted);">

package/src/components/TagsInput.vue

@@ -3,6 +3,7 @@
 import { ref, computed, useTemplateRef } from 'vue'
 import { useSelectionLimit } from '../composables/useSelectionLimit'
 import { useDropdownState } from '../composables/useDropdownState'
+import type { Tone } from '../types'
 
 interface TagSuggestion {
   value: string
@@ -12,14 +13,14 @@ interface TagSuggestion {
 interface TagCategory {
   name: string
   prefix: string
-  color?: 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral'
+  tone?: Tone
 }
 
 interface Props {
   modelValue?: string[]
   placeholder?: string
   disabled?: boolean
-  error?: boolean
+  invalid?: boolean
   size?: 'sm' | 'md' | 'lg'
   maxTags?: number
   allowDuplicates?: boolean
@@ -31,7 +32,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   modelValue: () => [],
   disabled: false,
-  error: false,
+  invalid: false,
   size: 'md',
   allowDuplicates: false,
   suggestions: () => [],
@@ -201,7 +202,7 @@ function onInputEvent() {
     :class="[
       'mint-tags-input',
       `mint-tags-input--${size}`,
-      error ? 'mint-tags-input--error' : '',
+      invalid ? 'mint-tags-input--error' : '',
       disabled ? 'mint-tags-input--disabled' : '',
       categories.length ? 'mint-tags-input--categorized' : '',
     ]"
@@ -214,7 +215,7 @@ function onInputEvent() {
         type="button"
         :class="[
           'mint-tags-input__category',
-          `mint-tags-input__category--${cat.color ?? 'neutral'}`,
+          `mint-tags-input__category--${cat.tone ?? 'neutral'}`,
           activeCategory === cat.prefix ? 'mint-tags-input__category--active' : '',
         ]"
         :disabled="disabled"
@@ -232,7 +233,7 @@ function onInputEvent() {
         :class="[
           'mint-tags-input__tag',
           `mint-tags-input__tag--${size}`,
-          categoryFor(tag) ? `mint-tags-input__tag--${categoryFor(tag)?.color ?? 'neutral'}` : '',
+          categoryFor(tag) ? `mint-tags-input__tag--${categoryFor(tag)?.tone ?? 'neutral'}` : '',
         ]"
       >
         <span