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

package/src/components/FormBuilder.vue

@@ -1,17 +1,11 @@
 <script setup lang="ts">
 /**
- * Schema-driven form component that renders flat or multi-step wizard forms.
+ * Generated form for a control model built with `defineControlModel()`.
  *
- * Pass a `FormSchema` with either `sections` (flat) or `steps` (wizard), or
- * pass a compact `controls` schema for standard generated forms.
- * Use `v-model` for two-way binding of the form data; the `submit` event
- * carries only the data for currently-visible fields. Supply `enhancements`
- * for dynamic options, custom validators, a submit handler, and field-change
- * callbacks that cannot be expressed in JSON.
- * Compact control schemas can be bound directly:
- * `<FormBuilder :controls="controls" v-model="values" />`.
- * Complete control models can also be bound directly:
- * `<FormBuilder :model="workspaceModel" v-model="values" />`.
+ * The control model holds the controls, sections, columns, the submit / cancel
+ * bar (`actions`) and `enhancements` (dynamic options, validators, a submit
+ * handler and field callbacks). Bind the values with `v-model`; the `submit`
+ * event carries only the values of the visible fields.
  *
  * Exposes `form`, `validate`, `reset`, `updateSchema`, `goNext`, `goBack`,
  * `goToStep`, and `builder` for imperative control via template refs.
@@ -20,62 +14,39 @@
  * - `field:<name>` — override a single field's input component
  * - `section:<id>` — replace an entire section body
  * - `section:<id>:after` — inject content after a section
- * - `actions` — replace the default FormActions bar when `showActions` is true
+ * - `actions` — replace the default action bar when the model sets `actions`
  *
  * @example Recommended
  * ```vue
- * <FormBuilder v-model="values" :model="formModel" />
+ * <FormBuilder v-model="values" :spec="formModel" />
  * ```
  */
-import { ref, computed, watch } from 'vue'
-import type { FormSchema, FormEnhancements, UseFormBuilderReturn } from '../types/form-builder'
-import type { WizardStep } from '../types'
+import { computed, ref } from 'vue'
+import type { FormSchema } from '../types/form-builder'
 import {
   controlsToFormSchema,
   getControlDefaults,
-  mergeControlWorkspaceOptions,
-  resolveControlModel,
-  type ControlModel,
   type ControlModelBinding,
-  type ControlSchema,
-  type ControlWorkspaceOptions,
 } from '../composables/useControlSchema'
-import { useFormBuilder } from '../composables/useFormBuilder'
-import {
-  formSchemaFieldNames,
-  pickExistingRecordKeys,
-  recordValuesEqualForKeys,
-} from '../utils/formModelSync'
-import StepWizard from './StepWizard.vue'
-import FormSectionRenderer from './internal/FormSectionRenderer.vue'
-import FormActions from './FormActions.vue'
+import FormSchemaInternal from './internal/FormSchemaInternal.vue'
 
 interface Props {
-  /** Full form or wizard schema. Takes precedence when `controls` is also provided. */
-  schema?: FormSchema
-  /** Model returned by defineControlModel(), or a raw nested ControlModel for one-step form generation. */
-  model?: ControlModel | ControlModelBinding
-  /** Compact control schema used to generate a flat FormSchema. */
-  controls?: ControlSchema
-  /** Options passed to compact control schema generation, including shared initialValues. */
-  controlOptions?: ControlWorkspaceOptions
+  /** Control model built with defineControlModel(). Optional: without it the form is empty. */
+  spec?: ControlModelBinding
   modelValue?: Record<string, unknown>
-  enhancements?: FormEnhancements<Record<string, unknown>>
   loading?: boolean
   disabled?: boolean
   size?: 'sm' | 'md' | 'lg'
   readonly?: boolean
-  /** Show the default or slotted form actions. */
-  showActions?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  model: undefined,
-  controlOptions: () => ({}),
+  spec: undefined,
+  modelValue: undefined,
   loading: false,
   disabled: false,
+  size: undefined,
   readonly: false,
-  showActions: true,
 })
 
 const emit = defineEmits<{
@@ -84,224 +55,46 @@ const emit = defineEmits<{
   cancel: []
 }>()
 
-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 schema = computed<FormSchema>(() =>
+  props.spec ? controlsToFormSchema(props.spec.controls, props.spec.controlOptions) : { sections: [] },
 )
 
-const resolvedSchema = computed<FormSchema>(() => {
-  if (props.schema) return props.schema
-  if (resolvedControls.value) return controlsToFormSchema(resolvedControls.value, resolvedControlOptions.value)
-  return { sections: [] }
-})
-
-const resolvedModelValue = computed<Record<string, unknown>>(() => ({
-  ...(resolvedControls.value ? getControlDefaults(resolvedControls.value) : {}),
-  ...(resolvedControlOptions.value.initialValues ?? {}),
-  ...(props.modelValue ?? {}),
+const defaults = computed<Record<string, unknown>>(() => ({
+  ...(props.spec ? getControlDefaults(props.spec.controls) : {}),
+  ...(props.spec?.controlOptions.initialValues ?? {}),
 }))
 
-const builder = useFormBuilder(
-  resolvedSchema.value,
-  resolvedModelValue.value,
-  props.enhancements,
-)
-
-// Sync schema/control changes into the internal builder so generated forms stay coherent.
-watch(
-  resolvedSchema,
-  (schema) => {
-    const fieldNames = formSchemaFieldNames(schema)
-    const schemaValues = pickExistingRecordKeys(resolvedModelValue.value, fieldNames)
-    const existingValues = pickExistingRecordKeys(
-      builder.form.data as Record<string, unknown>,
-      fieldNames,
-    )
-    const nextValues = props.modelValue === undefined
-      ? { ...schemaValues, ...existingValues }
-      : schemaValues
-
-    builder.updateSchema(schema, nextValues)
-  },
-  { deep: true },
-)
-
-// Sync external modelValue changes into the internal form without resetting on no-op echo updates.
-watch(
-  () => props.modelValue,
-  () => {
-    const data = resolvedModelValue.value
-    const fieldNames = builderFieldNames()
-    if (recordValuesEqualForKeys(data, builder.form.data as Record<string, unknown>, fieldNames)) return
-    builder.reset(pickExistingRecordKeys(data, fieldNames))
-  },
-  { deep: true },
-)
-
-// Sync modelValue changes back to parent
-watch(
-  () => ({ ...builder.form.data }),
-  (data) => emit('update:modelValue', data as Record<string, unknown>),
-  { deep: true },
-)
-
-// Wizard support
-const isWizard = computed(() => !!resolvedSchema.value.steps)
-const wizardRef = ref<InstanceType<typeof StepWizard> | null>(null)
-
-const wizardSteps = computed<WizardStep[]>(() => {
-  if (!resolvedSchema.value.steps) return []
-  return resolvedSchema.value.steps.map((step) => ({
-    id: step.id,
-    label: step.label,
-    description: step.description,
-    icon: step.icon,
-    optional: step.optional,
-  }))
-})
-
-// Sync step validation state with StepWizard
-watch(
-  () => builder.isCurrentStepValid.value,
-  (valid) => {
-    wizardRef.value?.setStepValid(builder.currentStep.value, valid)
-  },
-)
-
-function handleNext() {
-  const success = builder.goNext()
-  if (success) {
-    wizardRef.value?.setStepValid(builder.currentStep.value - 1, true)
-  }
-}
-
-async function handleSubmit() {
-  await builder.submit()
-  const formData = builder.form.data as Record<string, unknown>
-  const visibleData = Object.fromEntries(
-    builder.fields
-      .filter((f) => builder.isFieldVisible(f.name))
-      .map((f) => [f.name, formData[f.name]]),
-  )
-  emit('submit', visibleData)
-}
-
-function handleCancel() {
-  emit('cancel')
-}
-
-function builderFieldNames(): string[] {
-  return builder.fields.map(field => field.name)
-}
+const inner = ref<InstanceType<typeof FormSchemaInternal> | null>(null)
 
 defineExpose({
-  form: builder.form,
-  validate: builder.validate,
-  reset: builder.reset,
-  updateSchema: builder.updateSchema,
-  goNext: builder.goNext,
-  goBack: builder.goBack,
-  goToStep: builder.goToStep,
-  builder,
+  get form() { return inner.value?.form },
+  get builder() { return inner.value?.builder },
+  validate: () => inner.value?.validate(),
+  reset: (...args: Parameters<InstanceType<typeof FormSchemaInternal>['reset']>) => inner.value?.reset(...args),
+  updateSchema: (...args: Parameters<InstanceType<typeof FormSchemaInternal>['updateSchema']>) => inner.value?.updateSchema(...args),
+  goNext: () => inner.value?.goNext(),
+  goBack: () => inner.value?.goBack(),
+  goToStep: (step: number) => inner.value?.goToStep(step),
 })
 </script>
 
 <template>
-  <div :class="['mint-form-builder', size ? `mint-form-builder--${size}` : '']">
-    <!-- Wizard mode -->
-    <template v-if="isWizard && resolvedSchema.steps">
-      <StepWizard
-        ref="wizardRef"
-        :steps="wizardSteps"
-        :model-value="builder.currentStep.value"
-        @update:model-value="builder.goToStep($event)"
-      >
-        <template v-for="step in resolvedSchema.steps" :key="step.id" #[`step-${step.id}`]>
-          <div class="mint-form-builder__step">
-            <template v-for="section in step.sections" :key="section.id">
-              <FormSectionRenderer
-                v-if="builder.isSectionVisible(section.id)"
-                :section="section"
-                :builder="(builder as UseFormBuilderReturn<Record<string, unknown>>)"
-              >
-                <!-- Forward field slots -->
-                <template v-for="field in section.fields" :key="field.name" #[`field:${field.name}`]="slotProps">
-                  <slot :name="`field:${field.name}`" v-bind="slotProps" />
-                </template>
-                <!-- Forward section slots -->
-                <template #[`section:${section.id}`]="slotProps">
-                  <slot :name="`section:${section.id}`" v-bind="slotProps" />
-                </template>
-                <template #[`section:${section.id}:after`]="slotProps">
-                  <slot :name="`section:${section.id}:after`" v-bind="slotProps" />
-                </template>
-              </FormSectionRenderer>
-            </template>
-          </div>
-        </template>
-
-        <template v-if="showActions" #navigation="{ isFirst, isLast }">
-          <slot name="actions" :form="builder.form" :builder="builder">
-            <FormActions
-              is-wizard
-              :is-first="isFirst"
-              :is-last="isLast"
-              :can-proceed="builder.isCurrentStepValid.value"
-              :loading="loading || builder.form.isSubmitting.value"
-              :disabled="disabled"
-              :submit-label="resolvedSchema.submitLabel ?? 'Submit'"
-              :cancel-label="resolvedSchema.cancelLabel ?? 'Cancel'"
-              :show-cancel="resolvedSchema.showCancel ?? false"
-              @next="handleNext"
-              @back="builder.goBack"
-              @submit="handleSubmit"
-              @cancel="handleCancel"
-            />
-          </slot>
-        </template>
-      </StepWizard>
-    </template>
-
-    <!-- Flat mode -->
-    <template v-else-if="resolvedSchema.sections">
-      <template v-for="section in resolvedSchema.sections" :key="section.id">
-        <FormSectionRenderer
-          v-if="builder.isSectionVisible(section.id)"
-          :section="section"
-          :builder="(builder as UseFormBuilderReturn<Record<string, unknown>>)"
-        >
-          <!-- Forward field slots -->
-          <template v-for="field in section.fields" :key="field.name" #[`field:${field.name}`]="slotProps">
-            <slot :name="`field:${field.name}`" v-bind="slotProps" />
-          </template>
-          <!-- Forward section slots -->
-          <template #[`section:${section.id}`]="slotProps">
-            <slot :name="`section:${section.id}`" v-bind="slotProps" />
-          </template>
-          <template #[`section:${section.id}:after`]="slotProps">
-            <slot :name="`section:${section.id}:after`" v-bind="slotProps" />
-          </template>
-        </FormSectionRenderer>
-      </template>
-
-      <slot v-if="showActions" name="actions" :form="builder.form" :builder="builder">
-        <FormActions
-          :loading="loading || builder.form.isSubmitting.value"
-          :disabled="disabled"
-          :submit-label="resolvedSchema.submitLabel ?? 'Submit'"
-          :cancel-label="resolvedSchema.cancelLabel ?? 'Cancel'"
-          :show-cancel="resolvedSchema.showCancel ?? false"
-          @submit="handleSubmit"
-          @cancel="handleCancel"
-        />
-      </slot>
+  <FormSchemaInternal
+    ref="inner"
+    :schema="schema"
+    :defaults="defaults"
+    :model-value="modelValue"
+    :enhancements="spec?.controlOptions.enhancements"
+    :loading="loading"
+    :disabled="disabled"
+    :size="size"
+    :readonly="readonly"
+    @update:model-value="emit('update:modelValue', $event)"
+    @submit="emit('submit', $event)"
+    @cancel="emit('cancel')"
+  >
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps ?? {}" />
     </template>
-  </div>
+  </FormSchemaInternal>
 </template>

package/src/components/FormField.story.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import FormField from './FormField.vue'
 import BaseInput from './BaseInput.vue'
-import BaseTextarea from './BaseTextarea.vue'
 </script>
 
 <template>
@@ -16,12 +15,7 @@ import BaseTextarea from './BaseTextarea.vue'
             :required="state.required"
             :html-for="state.htmlFor"
           >
-            <input
-              :id="state.htmlFor"
-              type="text"
-              placeholder="Enter value..."
-              style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-            />
+            <BaseInput :id="state.htmlFor" placeholder="Enter value..." />
           </FormField>
         </div>
       </template>
@@ -40,12 +34,7 @@ import BaseTextarea from './BaseTextarea.vue'
     <Variant title="With Label">
       <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
         <FormField label="Sample Name" html-for="sample-name">
-          <input
-            id="sample-name"
-            type="text"
-            placeholder="e.g., SAMPLE-001"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
+          <BaseInput id="sample-name" placeholder="e.g., SAMPLE-001" />
         </FormField>
       </div>
     </Variant>
@@ -53,12 +42,7 @@ import BaseTextarea from './BaseTextarea.vue'
     <Variant title="Required Field">
       <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
         <FormField label="Experiment ID" :required="true" html-for="exp-id">
-          <input
-            id="exp-id"
-            type="text"
-            placeholder="Required field"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
+          <BaseInput id="exp-id" placeholder="Required field" />
         </FormField>
       </div>
     </Variant>
@@ -66,12 +50,7 @@ import BaseTextarea from './BaseTextarea.vue'
     <Variant title="With Hint">
       <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
         <FormField label="Concentration" hint="Enter value in micromolar (uM)" html-for="conc">
-          <input
-            id="conc"
-            type="number"
-            placeholder="0.00"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
+          <BaseInput id="conc" inputmode="decimal" placeholder="0.00" />
         </FormField>
       </div>
     </Variant>
@@ -79,12 +58,7 @@ import BaseTextarea from './BaseTextarea.vue'
     <Variant title="With Error">
       <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
         <FormField label="Plate Barcode" error="Barcode format is invalid. Expected: PLT-XXXX-XXXX" html-for="barcode">
-          <input
-            id="barcode"
-            type="text"
-            value="invalid"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #ef4444; border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
+          <BaseInput id="barcode" model-value="invalid" invalid />
         </FormField>
       </div>
     </Variant>
@@ -92,28 +66,13 @@ import BaseTextarea from './BaseTextarea.vue'
     <Variant title="Form Example">
       <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
         <FormField label="Experiment Name" :required="true" html-for="form-name">
-          <input
-            id="form-name"
-            type="text"
-            placeholder="Enter experiment name"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
+          <BaseInput id="form-name" placeholder="Enter experiment name" />
         </FormField>
         <FormField label="Description" hint="Optional description for this experiment" html-for="form-desc">
-          <textarea
-            id="form-desc"
-            placeholder="Describe the experiment..."
-            rows="3"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); resize: vertical; box-sizing: border-box;"
-          />
+          <BaseInput id="form-desc" type="textarea" placeholder="Describe the experiment..." :rows="3" />
         </FormField>
         <FormField label="Plate Count" :required="true" error="Must be between 1 and 50" html-for="form-count">
-          <input
-            id="form-count"
-            type="number"
-            value="100"
-            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #ef4444; border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-          />
+          <BaseInput id="form-count" inputmode="numeric" model-value="100" invalid />
         </FormField>
       </div>
     </Variant>
@@ -124,7 +83,7 @@ import BaseTextarea from './BaseTextarea.vue'
           <BaseInput model-value="Dose-response screen · Oncology" />
         </FormField>
         <FormField label="Notes" :show-optional="true" hint="Add any context future you will thank present you for.">
-          <BaseTextarea model-value="" placeholder="Anything worth remembering…" />
+          <BaseInput type="textarea" model-value="" placeholder="Anything worth remembering…" />
         </FormField>
       </div>
     </Variant>

package/src/components/FormulaInput.story.vue

@@ -16,7 +16,7 @@ const sizes: ('sm' | 'md' | 'lg')[] = ['sm', 'md', 'lg']
             :show-preview="state.showPreview"
             :show-m-w="state.showMW"
             :placeholder="state.placeholder"
-            :error="state.error"
+            :invalid="state.error"
             :disabled="state.disabled"
             :size="state.size"
           />
@@ -83,7 +83,7 @@ const sizes: ('sm' | 'md' | 'lg')[] = ['sm', 'md', 'lg']
 
     <Variant title="Error State">
       <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <FormulaInput model-value="H2O" error />
+        <FormulaInput model-value="H2O" invalid />
       </div>
     </Variant>
 

package/src/components/FormulaInput.vue

@@ -5,14 +5,14 @@
  * the field in the error state and names the symbol.
  */
 import { computed, ref } from 'vue'
-import { useChemicalFormula } from '../composables/useChemicalFormula'
+import { calculateMW, parseFormula, renderFormulaParts } from '../utils/formula'
 
 interface Props {
   modelValue?: string
   showPreview?: boolean
   showMW?: boolean
   placeholder?: string
-  error?: boolean
+  invalid?: boolean
   disabled?: boolean
   size?: 'sm' | 'md' | 'lg'
 }
@@ -22,7 +22,7 @@ const props = withDefaults(defineProps<Props>(), {
   showPreview: true,
   showMW: true,
   placeholder: 'e.g. Ca(OH)2',
-  error: false,
+  invalid: false,
   disabled: false,
   size: 'md',
 })
@@ -32,7 +32,6 @@ const emit = defineEmits<{
   'mw': [mw: number | null]
 }>()
 
-const { parseFormula, calculateMW, renderFormulaParts } = useChemicalFormula()
 
 const focused = ref(false)
 
@@ -61,7 +60,7 @@ function handleInput(event: Event) {
   <div
     :class="[
       'mint-formula-input',
-      error || analysis.error ? 'mint-formula-input--error' : '',
+      invalid || analysis.error ? 'mint-formula-input--error' : '',
       disabled ? 'mint-formula-input--disabled' : '',
     ]"
   >
@@ -72,7 +71,7 @@ function handleInput(event: Event) {
           :value="modelValue"
           :placeholder="placeholder"
           :disabled="disabled"
-          :aria-invalid="error || Boolean(analysis.error) || undefined"
+          :aria-invalid="invalid || Boolean(analysis.error) || undefined"
           spellcheck="false"
           autocomplete="off"
           :class="['mint-formula-input__input', showRendered ? 'mint-formula-input__input--masked' : '']"

package/src/components/GeneratedPathInput.vue

@@ -3,11 +3,9 @@ import { computed, inject, ref, watch } from 'vue'
 
 import { mintApiErrorFromResponse } from '../apiErrors'
 import { formatExperimentDate } from '../composables/experiment-utils'
-import { createGeneratedAnalysisTransport } from '../composables/useGeneratedAnalysis'
-import {
-  getInjectedPlatformContext,
-  resolveCurrentExperimentId,
-} from '../composables/platformContextHelpers'
+import { createGeneratedAnalysisTransport } from '../composables/useJobsEndpoint'
+import { getInjectedPlatformContext } from '../composables/platformContextHelpers'
+import { useExperimentStore } from '../stores/experiment'
 import type { AnalysisArtifactSummary } from '../types/analysisArtifactTypes'
 import type {
   PluginJobArtifactPathInput,
@@ -55,9 +53,9 @@ const artifactRows = ref<ReadableArtifact[]>([])
 const artifactLoading = ref(false)
 const artifactError = ref<string | null>(null)
 const platform = getInjectedPlatformContext()
-const experimentId = resolveCurrentExperimentId(platform)
+const experimentStore = useExperimentStore()
 const jobsApi = inject(GENERATED_JOBS_API_KEY, null)
-const canSelectArtifact = computed(() => Boolean(platform?.isIntegrated && experimentId && jobsApi))
+const canSelectArtifact = computed(() => Boolean(platform?.isIntegrated && experimentStore.currentId !== null && jobsApi))
 const visibleArtifactRows = computed(() => {
   const query = artifactSearch.value.trim().toLowerCase()
   return query
@@ -121,7 +119,8 @@ function emitSelections(next: PluginJobPathSelection[]): void {
 let artifactRequest = 0
 
 async function openArtifactPicker(): Promise<void> {
-  if (!jobsApi || !experimentId) return
+  const experimentId = experimentStore.currentId
+  if (!jobsApi || experimentId === null) return
   const request = ++artifactRequest
   artifactOpen.value = true
   artifactSearch.value = ''
@@ -243,7 +242,7 @@ function selectArtifact(row: ReadableArtifact): void {
 
     <BaseModal
       v-if="canSelectArtifact"
-      v-model="artifactOpen"
+      v-model:open="artifactOpen"
       title="Select a file artifact"
       size="lg"
     >

package/src/components/GeneratedPluginView.story.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import GeneratedPluginView from './GeneratedPluginView.vue'
-import type { GeneratedAnalysisTransport } from '../composables/useGeneratedAnalysis'
+import type { GeneratedAnalysisTransport } from '../composables/useJobsEndpoint'
 import type { GeneratedAnalysisManifest } from '../types/generated-ui'
 
 const manifest: GeneratedAnalysisManifest = {