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

package/src/components/GeneratedPluginView.vue

@@ -18,9 +18,9 @@ import type {
 } from '../types/generated-ui'
 import type { PillNavItem, SidebarToolSection } from '../types'
 import {
-  useGeneratedAnalysis,
+  useJobsEndpoint,
   type GeneratedAnalysisTransport,
-} from '../composables/useGeneratedAnalysis'
+} from '../composables/useJobsEndpoint'
 import AlertBox from './AlertBox.vue'
 import EmptyState from './EmptyState.vue'
 import GeneratedResultRenderer from './GeneratedResultRenderer.vue'
@@ -28,6 +28,8 @@ import JobsStatusTray from './JobsStatusTray.vue'
 import LoadingSpinner from './LoadingSpinner.vue'
 import PluginWorkspaceView from './PluginWorkspaceView.vue'
 import { GENERATED_JOBS_API_KEY } from './internal/generatedJobsApi'
+import { definePluginWorkspaceView } from '../composables/componentSpecs'
+import { providePluginIdentity } from '../composables/pluginIdentity'
 
 interface Props {
   baseUrl: string
@@ -39,9 +41,10 @@ const props = withDefaults(defineProps<Props>(), {
   showStandaloneLabel: false,
 })
 
-const generated = useGeneratedAnalysis({
+const generated = useJobsEndpoint({
   baseUrl: props.baseUrl,
   transport: props.transport,
+  manifest: true,
 })
 provide(GENERATED_JOBS_API_KEY, { baseUrl: props.baseUrl, transport: props.transport })
 const activeDefinitionId = ref('')
@@ -70,6 +73,24 @@ const forms = computed<Record<string, FormSchema>>(() => Object.fromEntries(
   definitions.value.map(definition => [definition.id, generatedJobFormSchema(definition)]),
 ))
 
+const workspace = computed(() => definePluginWorkspaceView({
+  title: generated.manifest.value?.ui.title ?? 'Analysis',
+  subtitle: generated.manifest.value?.ui.subtitle || generated.manifest.value?.ui.description,
+  // The platform shell renders the toasts around this view.
+  toasts: false,
+  topBar: {
+    pills: pillNav.value,
+    settings: false,
+    standaloneLabel: props.showStandaloneLabel ? 'Standalone' : false,
+  },
+  sidebar: { title: 'Parameters', panels: panels.value, forms: forms.value },
+}))
+
+// Seeds the standalone top bar icon; the title and subtitle above win over the seeded text.
+watch(() => generated.manifest.value?.ui, (ui) => {
+  if (ui) providePluginIdentity({ plugin: { name: ui.title, subtitle: ui.subtitle, description: ui.description, icon: ui.icon } })
+}, { immediate: true })
+
 const currentValues = computed(() => valuesByDefinition[activeDefinitionId.value] ?? {})
 const currentJob = computed(() => {
   const currentSessionId = generated.session.value?.id
@@ -101,7 +122,7 @@ watch(definitions, (nextDefinitions) => {
 }, { immediate: true })
 
 watch(currentJob, (job) => {
-  if (job) void generated.loadResult(job)
+  if (job) void generated.result(job)
 }, { immediate: true })
 
 function updateValues(values: Record<string, unknown>): void {
@@ -132,27 +153,17 @@ function resourceSummary(definition: GeneratedJobDefinition): string {
 }
 
 onMounted(() => {
-  void generated.initialize().catch(() => undefined)
+  void generated.refresh().catch(() => undefined)
 })
 </script>
 
 <template>
   <PluginWorkspaceView
-    :title="generated.manifest.value?.ui.title ?? 'Analysis'"
-    :subtitle="generated.manifest.value?.ui.description"
-    :show-standalone-label="showStandaloneLabel"
-    :show-settings="false"
-    :pill-nav="pillNav"
-    :active-view="activeDefinitionId"
-    :panels="panels"
-    :forms="forms"
-    sidebar-title="Parameters"
-    sidebar-position="left"
+    v-model:view="activeDefinitionId"
+    :spec="workspace"
     :values="currentValues"
-    :show-form-actions="true"
     :form-loading="generated.isSubmitting.value"
     :form-disabled="generated.isSubmitting.value"
-    @update:active-view="activeDefinitionId = $event"
     @update:values="updateValues"
     @form-submit="submitJob"
   >
@@ -163,11 +174,7 @@ onMounted(() => {
       </div>
 
       <template v-else>
-        <AlertBox
-          v-if="generated.error.value"
-          type="error"
-          :message="generated.error.value"
-        />
+        <AlertBox v-if="generated.error.value" tone="error">{{ generated.error.value }}</AlertBox>
 
         <header v-if="activeDefinition" class="mint-generated-workspace__header">
           <div>

package/src/components/GeneratedResultRenderer.vue

@@ -10,9 +10,9 @@
 import { computed } from 'vue'
 
 import { mintApiErrorFromResponse } from '../apiErrors'
-import { createGeneratedAnalysisTransport } from '../composables/useGeneratedAnalysis'
-import { downloadBlob } from '../composables/usePluginClient'
-import type { DataFrameColumn } from '../types'
+import { createGeneratedAnalysisTransport } from '../composables/useJobsEndpoint'
+import { downloadBlob } from '../composables/createClient'
+import { defineDataFrame } from '../composables/componentSpecs'
 import type { GeneratedAnalysisResult } from '../types/generated-ui'
 import ChartContainer from './ChartContainer.vue'
 import DataFrame from './DataFrame.vue'
@@ -20,18 +20,21 @@ import GeneratedPlotlyResult from './GeneratedPlotlyResult.vue'
 
 interface Props {
   result: GeneratedAnalysisResult
+  /** Show the search box above a table result. */
+  searchable?: boolean
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), { searchable: true })
 
-const tableColumns = computed<DataFrameColumn[]>(() => {
-  if (props.result.kind !== 'table') return []
-  return props.result.columns.map(key => ({
-    key,
-    label: humanize(key),
-    sortable: true,
-  }))
-})
+const table = computed(() => defineDataFrame({
+  columns: props.result.kind === 'table'
+    ? props.result.columns.map(key => ({ key, label: humanize(key), sortable: true }))
+    : [],
+  sortable: true,
+  searchable: props.searchable,
+  stickyHeader: true,
+  maxHeight: '32rem',
+}))
 
 const formattedJson = computed(() => (
   props.result.kind === 'json'
@@ -77,12 +80,8 @@ function humanize(value: string): string {
 
     <DataFrame
       v-else-if="result.kind === 'table'"
+      :spec="table"
       :data="result.rows"
-      :columns="tableColumns"
-      sortable
-      searchable
-      sticky-header
-      max-height="32rem"
     />
 
     <ChartContainer v-else-if="result.kind === 'image'" title="Analysis chart">

package/src/components/InstrumentStateBadge.vue

@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const stateConfig: Record<InstrumentBadgeState, { label: string; tone: string }> = {
-  running: { label: 'Running', tone: 'info' },
+  running: { label: 'Running', tone: 'success' },
   standby: { label: 'Standby', tone: 'warning' },
   idle: { label: 'Idle', tone: 'muted' },
   error: { label: 'Error', tone: 'error' },

package/src/components/InstrumentStatusPanels.story.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import InstrumentStatusPanels from './InstrumentStatusPanels.vue'
+import type { StatusPanel } from '../types'
+
+const panels: StatusPanel[] = [
+  {
+    kind: 'kv',
+    title: 'Pumps',
+    items: [['Pressure', '412 bar'], ['Flow', '0.30 mL/min'], ['Solvent B', '38 %'], ['Degasser', null]],
+  },
+  {
+    kind: 'bar',
+    title: 'Pressure per sample',
+    categories: ['S11', 'S12', 'S13', 'S14', 'S15', 'S16'],
+    series: [
+      { name: 'Max pressure', unit: 'bar', values: [402, 410, 415, 420, 431, null] },
+      { name: 'Min pressure', unit: 'bar', values: [180, 182, 179, 185, 188, null] },
+    ],
+  },
+  {
+    kind: 'table',
+    title: 'Column oven',
+    columns: ['zone', 'set_c', 'actual_c'],
+    rows: [{ zone: 'Left', set_c: 40, actual_c: 40.1 }, { zone: 'Right', set_c: 40, actual_c: 39.8 }],
+  },
+  { kind: 'text', title: 'Notes', text: 'Column replaced on 2026-10-14.\nEquilibrated for 30 min.' },
+  { kind: 'json', title: 'Raw', value: { firmware: '3.2.1', tune: { spray_voltage: 3500 } } },
+]
+
+function initState() {
+  return {
+    title: 'Live data',
+    meta: 'from MS Planner · 12 s ago',
+    panelCount: panels.length,
+  }
+}
+</script>
+
+<template>
+  <Story title="Instruments/InstrumentStatusPanels">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <InstrumentStatusPanels
+            :panels="panels.slice(0, state.panelCount)"
+            :title="state.title"
+            :meta="state.meta || undefined"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstText v-model="state.title" title="Title" />
+        <HstText v-model="state.meta" title="Meta" />
+        <HstSlider v-model="state.panelCount" title="Panels" :min="1" :max="panels.length" :step="1" />
+      </template>
+    </Variant>
+
+    <Variant title="Bar panel">
+      <div style="padding: 2rem; max-width: 600px;">
+        <InstrumentStatusPanels :panels="panels.slice(1, 2)" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/InstrumentStatusPanels.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+/**
+ * Renders the typed panels of an instrument's live status in one card, one tab per panel.
+ *
+ * `kv` panels render as a key/value list, `table`, `text` and `json` through
+ * `GeneratedResultRenderer`, and `bar` as a Plotly bar chart that shows one series at a
+ * time. The selected tab and series are kept by title and name across live updates; tabs
+ * are keyed by position, so panels that share a title stay separate.
+ *
+ * @example
+ * ```vue
+ * <InstrumentStatusPanels :panels="status.panels" meta="from MS Planner · 12 s ago" />
+ * ```
+ */
+import { computed, ref } from 'vue'
+import type { StatusPanel } from '../types'
+import type { GeneratedAnalysisResult } from '../types/generated-ui'
+import BaseTabs from './BaseTabs.vue'
+import GeneratedResultRenderer from './GeneratedResultRenderer.vue'
+import PlotlyChart from './PlotlyChart.vue'
+import SectionCard from './SectionCard.vue'
+import SegmentedControl from './SegmentedControl.vue'
+
+interface Props {
+  panels: StatusPanel[]
+  title?: string
+  /** Monospace meta next to the title, e.g. the reporting plugin and report age. */
+  meta?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: 'Live data',
+  meta: undefined,
+})
+
+/** The selected panel's title and, among panels with that title, its occurrence. */
+const selected = ref<{ title: string, occurrence: number } | null>(null)
+const selectedSeries = ref('')
+
+const tabs = computed(() => props.panels.map((item, index) => ({ value: index, label: item.title })))
+const panelIndex = computed(() => {
+  const pick = selected.value
+  const matching = props.panels.flatMap((item, index) => (item.title === pick?.title ? [index] : []))
+  return matching[pick?.occurrence ?? 0] ?? 0
+})
+const panel = computed(() => props.panels[panelIndex.value])
+
+function selectTab(index: number) {
+  const title = props.panels[index]?.title ?? ''
+  selected.value = { title, occurrence: props.panels.slice(0, index).filter(item => item.title === title).length }
+}
+
+const result = computed<GeneratedAnalysisResult | null>(() => {
+  const current = panel.value
+  if (current?.kind === 'table') return { kind: 'table', columns: current.columns, rows: current.rows }
+  if (current?.kind === 'text') return { kind: 'text', text: current.text }
+  if (current?.kind === 'json') return { kind: 'json', value: current.value }
+  return null
+})
+
+const bar = computed(() => (panel.value?.kind === 'bar' ? panel.value : null))
+const series = computed(() => bar.value?.series.find(item => item.name === selectedSeries.value) ?? bar.value?.series[0])
+const traces = computed(() => (bar.value && series.value
+  ? [{ type: 'bar' as const, x: bar.value.categories, y: series.value.values, name: series.value.name }]
+  : []))
+const layout = computed(() => ({
+  showlegend: false,
+  colorway: ['var(--color-primary)'],
+  margin: { t: 8, r: 8, b: 32, l: 56 },
+  yaxis: { title: { text: [series.value?.name, series.value?.unit && `(${series.value.unit})`].filter(Boolean).join(' ') } },
+}))
+
+function formatValue(value: string | number | boolean | null): string {
+  return value === null ? '—' : String(value)
+}
+</script>
+
+<template>
+  <SectionCard :title="title" :count="meta" divider="light" class="mint-status-panels">
+    <BaseTabs
+      :model-value="panelIndex" :options="tabs" class="mint-status-panels__tabs"
+      @update:model-value="selectTab(Number($event))"
+    />
+
+    <dl v-if="panel?.kind === 'kv'" class="mint-status-panels__kv">
+      <div v-for="([key, value], index) in panel.items" :key="index" class="mint-status-panels__kv-row">
+        <dt class="mint-status-panels__kv-key">{{ key }}</dt>
+        <dd class="mint-status-panels__kv-value">{{ formatValue(value) }}</dd>
+      </div>
+    </dl>
+
+    <div v-else-if="result" class="mint-status-panels__body">
+      <GeneratedResultRenderer :result="result" :searchable="false" />
+    </div>
+
+    <div v-else-if="bar" class="mint-status-panels__body mint-status-panels__bar">
+      <SegmentedControl
+        v-if="bar.series.length > 1" class="mint-status-panels__series"
+        :model-value="series?.name ?? ''" :options="bar.series.map(item => item.name)" size="sm"
+        @update:model-value="selectedSeries = String($event)"
+      />
+      <PlotlyChart :data="traces" :layout="layout" variant="frame" :height="240" :header-legend="false" :aria-label="bar.title" />
+    </div>
+  </SectionCard>
+</template>
+
+<style scoped>
+.mint-status-panels__tabs { padding: 0 1rem; }
+.mint-status-panels__body { padding: 0.75rem 1rem; }
+.mint-status-panels__bar { display: flex; flex-direction: column; gap: 0.5rem; }
+.mint-status-panels__series { align-self: flex-end; }
+.mint-status-panels__kv { margin: 0; padding: 0.25rem 1rem 0.5rem; }
+.mint-status-panels__kv-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.4375rem 0;
+  border-bottom: 1px solid var(--border-light);
+}
+.mint-status-panels__kv-row:last-child { border-bottom: 0; }
+.mint-status-panels__kv-key { font-size: 0.75rem; color: var(--text-secondary); }
+.mint-status-panels__kv-value {
+  margin: 0;
+  min-width: 0;
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  font-size: 0.75rem;
+  color: var(--text-primary);
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+</style>

package/src/components/JobsStatusTray.story.vue

@@ -76,7 +76,7 @@ function initState() {
         <div style="padding: 2rem; min-height: 520px;">
           <JobsStatusTray
             :title="state.title"
-            :source="{ jobs: state.jobs, cancelJob, deleteJob }"
+            :source="{ jobs: state.jobs, cancel: cancelJob, delete: deleteJob }"
             :load-on-mount="false"
             :teleport-to="false"
           >
@@ -106,7 +106,7 @@ function initState() {
     <Variant title="Explicit actions">
       <div style="padding: 2rem; min-height: 520px;">
         <JobsStatusTray
-          :source="{ jobs: explicitActionJobs, cancelJob, deleteJob }"
+          :source="{ jobs: explicitActionJobs, cancel: cancelJob, delete: deleteJob }"
           :load-on-mount="false"
           :teleport-to="false"
         />

package/src/components/JobsStatusTray.vue

@@ -14,25 +14,13 @@ import {
   normalizeJobPercent,
 } from '../jobs'
 import {
-  usePluginJobCenter,
-  type JobsStatusTrayAdapter,
+  useJobCenter,
   type PluginJobCenterSource,
-} from '../composables/useJobsStatusTray'
-import type { UsePluginEventStreamReturn } from '../composables/usePluginClient'
-import type {
-  JobState,
-  JobStateInput,
-  JobStreamData,
-} from '../types/jobs'
+} from '../composables/useJobCenter'
+import type { JobState } from '../types/jobs'
 
 interface Props {
   source?: PluginJobCenterSource
-  /** @deprecated Removed in MINT 1.4; pass a source instead. */
-  jobs?: readonly JobStateInput[]
-  /** @deprecated Removed in MINT 1.4; pass source actions instead. */
-  adapter?: JobsStatusTrayAdapter
-  /** @deprecated Removed in MINT 1.4; event streams belong to the source runtime. */
-  eventStream?: UsePluginEventStreamReturn<JobStreamData>
   loadOnMount?: boolean
   title?: string
   teleportTo?: string | HTMLElement | false
@@ -59,11 +47,8 @@ const titleId = `${panelId}-title`
 const triggerRef = ref<HTMLButtonElement | null>(null)
 const panelRef = ref<HTMLElement | null>(null)
 const teleportTarget = computed(() => props.teleportTo || 'body')
-const tray = usePluginJobCenter({
+const tray = useJobCenter({
   source: toRef(props, 'source'),
-  jobs: toRef(props, 'jobs'),
-  adapter: toRef(props, 'adapter'),
-  eventStream: toRef(props, 'eventStream'),
   loadOnMount: props.loadOnMount,
 })
 // 2f: a job waiting for input is the only one that needs a person — pin it first.
@@ -233,7 +218,7 @@ async function clearFinished(): Promise<void> {
           <header class="mint-jobs-tray__header">
             <div>
               <h2 :id="titleId" class="mint-jobs-tray__title">{{ title }}</h2>
-              <p class="mint-jobs-tray__subtitle">{{ subtitle }}</p>
+              <p class="mint-jobs-tray__subtitle" :title="subtitle">{{ subtitle }}</p>
             </div>
             <div class="mint-jobs-tray__header-actions">
               <button

package/src/components/LoadingSpinner.story.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import LoadingSpinner from './LoadingSpinner.vue'
-import type { SpinnerSize, SpinnerVariant } from '../types'
+import type { SpinnerSize, Tone } from '../types'
 
 const sizes: SpinnerSize[] = ['xs', 'sm', 'md', 'lg']
-const variants: SpinnerVariant[] = ['primary', 'cta', 'muted']
+const tones: (Tone | 'inherit')[] = ['primary', 'cta', 'success', 'warning', 'error', 'info', 'neutral', 'inherit']
 </script>
 
 <template>
@@ -13,7 +13,7 @@ const variants: SpinnerVariant[] = ['primary', 'cta', 'muted']
         <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
           <LoadingSpinner
             :size="state.size"
-            :variant="state.variant"
+            :tone="state.tone"
             :label="state.label"
           />
         </div>
@@ -26,9 +26,9 @@ const variants: SpinnerVariant[] = ['primary', 'cta', 'muted']
           :options="sizes.map(s => ({ label: s, value: s }))"
         />
         <HstSelect
-          v-model="state.variant"
-          title="Variant"
-          :options="variants.map(v => ({ label: v, value: v }))"
+          v-model="state.tone"
+          title="Tone"
+          :options="tones.map(t => ({ label: t, value: t }))"
         />
         <HstText v-model="state.label" title="Label" />
       </template>
@@ -43,11 +43,11 @@ const variants: SpinnerVariant[] = ['primary', 'cta', 'muted']
       </div>
     </Variant>
 
-    <Variant title="All Variants">
+    <Variant title="All Tones">
       <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: center;">
-        <div v-for="variant in variants" :key="variant" style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-          <LoadingSpinner :variant="variant" size="md" />
-          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">{{ variant }}</span>
+        <div v-for="tone in tones" :key="tone" style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <LoadingSpinner :tone="tone" size="md" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">{{ tone }}</span>
         </div>
       </div>
     </Variant>
@@ -55,7 +55,7 @@ const variants: SpinnerVariant[] = ['primary', 'cta', 'muted']
     <Variant title="Custom Labels">
       <div style="padding: 2rem; display: flex; flex-direction: column; gap: 2rem; align-items: center;">
         <LoadingSpinner size="md" label="Loading experiments..." />
-        <LoadingSpinner size="sm" label="Processing plates..." variant="cta" />
+        <LoadingSpinner size="sm" label="Processing plates..." tone="cta" />
         <LoadingSpinner size="lg" label="Analyzing data..." />
       </div>
     </Variant>

package/src/components/LoadingSpinner.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
-/** Animated SVG spinner with size and color variants, and a visually hidden status label for screen readers. */
+/** Animated SVG spinner with size and tone, and a visually hidden status label for screen readers. `tone="inherit"` takes the parent's text color. */
+import type { Tone } from '../types'
+
 interface Props {
   size?: 'xs' | 'sm' | 'md' | 'lg'
-  variant?: 'primary' | 'cta' | 'muted'
+  tone?: Tone | 'inherit'
   label?: string
 }
 
 withDefaults(defineProps<Props>(), {
   size: 'md',
-  variant: 'primary',
+  tone: 'primary',
   label: 'Loading',
 })
 </script>
@@ -18,7 +20,7 @@ withDefaults(defineProps<Props>(), {
     :class="[
       'mint-spinner',
       `mint-spinner--${size}`,
-      `mint-spinner--${variant}`,
+      `mint-spinner--${tone}`,
     ]"
     role="status"
   >
@@ -38,7 +40,7 @@ withDefaults(defineProps<Props>(), {
       <path
         style="opacity: 0.75"
         fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
       />
     </svg>
     <span class="mint-spinner__label">{{ label }}</span>

package/src/components/MoleculeInput.story.vue

@@ -27,7 +27,7 @@ function initState() {
             :height="state.height"
             :show-smiles="state.showSmiles"
             :placeholder="state.placeholder"
-            :error="state.error"
+            :invalid="state.error"
           />
         </div>
       </template>
@@ -59,7 +59,7 @@ function initState() {
 
     <Variant title="Error State">
       <div style="padding: 2rem; max-width: 600px;">
-        <MoleculeInput error :height="250" />
+        <MoleculeInput invalid :height="250" />
       </div>
     </Variant>
   </Story>

package/src/components/MoleculeInput.vue

@@ -10,7 +10,7 @@ interface Props {
   height?: number
   showSmiles?: boolean
   placeholder?: string
-  error?: boolean
+  invalid?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
   height: 300,
   showSmiles: true,
   placeholder: 'Draw a chemical structure',
-  error: false,
+  invalid: false,
 })
 
 const emit = defineEmits<{
@@ -292,7 +292,7 @@ onUnmounted(() => {
       'mint-molecule-input',
       disabled ? 'mint-molecule-input--disabled' : '',
       readonly ? 'mint-molecule-input--readonly' : '',
-      error ? 'mint-molecule-input--error' : '',
+      invalid ? 'mint-molecule-input--error' : '',
     ]"
   >
     <!-- Loading state -->