@seed-ship/mcp-ui-solid 4.2.2 → 4.3.0

package/dist/types.d.ts

@@ -275,6 +275,14 @@ export interface FormFieldParams {
     source?: PrefillSource;
     /** If true, field is visually muted (but still editable on click/focus). */
     muted?: boolean;
+    /** How to handle prefill for autocomplete fields.
+     *  - "exact" (default): prefill is the final value (code), use as-is
+     *  - "resolve": prefill is a display name, call apiUrl to resolve to valueField */
+    prefillMode?: 'exact' | 'resolve';
+    /** Regex pattern the submitted value MUST match. Prevents submit if invalid. */
+    valueFormat?: string;
+    /** Human-readable hint shown when valueFormat validation fails. */
+    valueFormatHint?: string;
     minLength?: number;
     maxLength?: number;
     pattern?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-ship/mcp-ui-solid",
-  "version": "4.2.2",
+  "version": "4.3.0",
   "description": "SolidJS components for rendering MCP-generated UI resources",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/FormFieldRenderer.tsx

@@ -500,6 +500,7 @@ const AutocompleteField: Component<{
   const [suggestions, setSuggestions] = createSignal<Array<{ label: string; value: string }>>([])
   const [isOpen, setIsOpen] = createSignal(false)
   const [selectedLabels, setSelectedLabels] = createSignal<Map<string, string>>(new Map())
+  const [resolving, setResolving] = createSignal(false)
   let debounceTimer: ReturnType<typeof setTimeout> | null = null
 
   const isMultiple = () => props.field.multiple === true
@@ -535,6 +536,72 @@ const AutocompleteField: Component<{
     }
   }
 
+  // Proposal 1: prefillMode "resolve" — call apiUrl to resolve display name → code
+  const resolvePrefill = async (prefillValues: string[]) => {
+    if (!props.field.apiUrl || !props.field.searchParam) return
+    setResolving(true)
+    const labelField = props.field.labelField || 'label'
+    const valueField = props.field.valueField || 'value'
+
+    try {
+      const resolvedValues: string[] = []
+      for (const pv of prefillValues) {
+        const params = new URLSearchParams({ [props.field.searchParam]: pv, limit: '1' })
+        if (props.field.extraParams) {
+          for (const [k, v] of Object.entries(props.field.extraParams)) params.set(k, v)
+        }
+        const res = await fetch(`${props.field.apiUrl}?${params}`)
+        if (!res.ok) { resolvedValues.push(pv); continue }
+        const data = await res.json()
+        const items = Array.isArray(data) ? data : data.results || data.features || []
+        if (items.length > 0) {
+          const code = String(items[0][valueField] || pv)
+          const label = items[0][labelField] || pv
+          resolvedValues.push(code)
+          setSelectedLabels((prev) => new Map(prev).set(code, label))
+        } else {
+          resolvedValues.push(pv)
+          setSelectedLabels((prev) => new Map(prev).set(pv, pv))
+        }
+      }
+      if (isMultiple()) {
+        props.onChange(resolvedValues)
+      } else {
+        props.onChange(resolvedValues[0] || '')
+        const label = selectedLabels().get(resolvedValues[0])
+        if (label) setQuery(label)
+      }
+    } catch {
+      // Fallback: use raw prefill values
+    } finally {
+      setResolving(false)
+    }
+  }
+
+  // On mount: handle prefill
+  createEffect(() => {
+    const prefill = props.field.prefill
+    if (!prefill) return
+    const values = Array.isArray(prefill) ? prefill : [prefill]
+    if (values.length === 0) return
+
+    if (props.field.prefillMode === 'resolve') {
+      // Proposal 1: resolve display names to codes via API
+      resolvePrefill(values)
+    } else {
+      // Proposal 2 + 6: exact mode — prefill is a code, show displayHint or label as tag
+      for (const v of values) {
+        if (!selectedLabels().has(v)) {
+          setSelectedLabels((prev) => new Map(prev).set(v, props.field.displayHint || v))
+        }
+      }
+      if (!isMultiple() && values[0]) {
+        const label = props.field.displayHint || values[0]
+        setQuery(label)
+      }
+    }
+  })
+
   const handleInput = (value: string) => {
     setQuery(value)
     // Only clear the stored value if user is actively changing the text
@@ -567,6 +634,7 @@ const AutocompleteField: Component<{
       setSuggestions([])
       setIsOpen(false)
     } else {
+      // Proposal 6: always store valueField (item.value), display labelField
       props.onChange(item.value)
       setSelectedLabels((prev) => new Map(prev).set(item.value, item.label))
       setQuery(item.label)
@@ -575,6 +643,17 @@ const AutocompleteField: Component<{
     }
   }
 
+  // Proposal 6: on blur without selection, auto-resolve typed text to first API result
+  const handleBlur = () => {
+    setTimeout(() => {
+      setIsOpen(false)
+      // If user typed but didn't select, and field has valueField, resolve first match
+      if (!isMultiple() && query() && !props.value && props.field.valueField && suggestions().length > 0) {
+        selectSuggestion(suggestions()[0])
+      }
+    }, 200)
+  }
+
   const removeChip = (val: string) => {
     props.onChange(selectedValues().filter((v) => v !== val))
     setSelectedLabels((prev) => { const m = new Map(prev); m.delete(val); return m })
@@ -586,6 +665,14 @@ const AutocompleteField: Component<{
 
   return (
     <div class="relative">
+      {/* Resolving indicator */}
+      <Show when={resolving()}>
+        <div class="flex items-center gap-1 mb-1 text-xs text-gray-400">
+          <span class="animate-spin h-3 w-3 border border-gray-400 border-t-transparent rounded-full" />
+          Resolving...
+        </div>
+      </Show>
+
       {/* Multi chips */}
       <Show when={isMultiple() && selectedValues().length > 0}>
         <div class="flex flex-wrap gap-1 mb-1">
@@ -612,11 +699,11 @@ const AutocompleteField: Component<{
         value={query()}
         onInput={(e) => handleInput(e.currentTarget.value)}
         onFocus={() => { if (suggestions().length) setIsOpen(true) }}
-        onBlur={() => setTimeout(() => setIsOpen(false), 200)}
+        onBlur={handleBlur}
         placeholder={isMultiple() && selectedValues().length
           ? 'Add more...'
           : props.field.placeholder}
-        disabled={props.disabled}
+        disabled={props.disabled || resolving()}
         class={props.baseClass}
         autocomplete="off"
       />

package/src/components/FormRenderer.tsx

@@ -234,6 +234,18 @@ export const FormRenderer: Component<FormRendererProps> = (props) => {
       </Show>
 
       <form id={`form-${props.component.id}`} onSubmit={handleSubmit} noValidate>
+        {/* Proposal 3: prefill summary */}
+        <Show when={params().fields.some((f) => f.prefill != null)}>
+          {(() => {
+            const prefilled = params().fields.filter((f) => f.prefill != null).length
+            const total = params().fields.length
+            return (
+              <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
+                {prefilled} champ{prefilled > 1 ? 's' : ''} pré-rempli{prefilled > 1 ? 's' : ''} sur {total}
+              </p>
+            )
+          })()}
+        </Show>
         <div class={layoutClass()}>
           <For each={params().fields}>
             {(field) => (

package/src/components/ScratchpadPanel.tsx

@@ -654,8 +654,42 @@ const EmbeddedFormSection: Component<{
     }
   }
 
+  // Proposal 3: prefill confidence summary
+  const prefillSummary = () => {
+    const fields = config().fields
+    const total = fields.length
+    const prefilled = fields.filter((f: any) => f.prefill != null).length
+    return { total, prefilled }
+  }
+
+  // Proposal 4: auto-submit toast mode — compact view when ALL fields prefilled
+  const [expanded, setExpanded] = createSignal(false)
+  const allFieldsPrefilled = () => {
+    const fields = config().fields
+    return fields.length > 0 && fields.every((f: any) => f.prefill != null)
+  }
+  const showToast = () => allFieldsPrefilled() && !userInteracted() && !expanded() && countdown() != null
+
   return (
+    <Show when={!showToast()} fallback={
+      <div class="flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg text-sm">
+        <span class="flex-1 text-blue-800 dark:text-blue-200 font-medium">
+          {config().fields.map((f: any) => f.displayHint || f.prefill).join(', ')}
+        </span>
+        <span class="text-blue-600 dark:text-blue-300">{countdown()}s...</span>
+        <button type="button" onClick={() => { setExpanded(true); cancelCountdown(); setUserInteracted(true) }}
+          class="text-blue-600 dark:text-blue-400 underline text-xs">Modifier</button>
+        <button type="button" onClick={() => { cancelCountdown(); setUserInteracted(true) }}
+          class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">&times;</button>
+      </div>
+    }>
     <form id={`scratchpad-form-${props.sectionId}`} onSubmit={handleSubmit} class="flex flex-col gap-3">
+      {/* Proposal 3: prefill summary */}
+      <Show when={prefillSummary().prefilled > 0}>
+        <p class="text-xs text-gray-500 dark:text-gray-400">
+          {prefillSummary().prefilled} champ{prefillSummary().prefilled > 1 ? 's' : ''} pré-rempli{prefillSummary().prefilled > 1 ? 's' : ''} sur {prefillSummary().total}
+        </p>
+      </Show>
       <For each={config().fields}>
         {(field) => (
           <FormFieldRenderer
@@ -686,6 +720,7 @@ const EmbeddedFormSection: Component<{
         </button>
       </div>
     </form>
+    </Show>
   )
 }
 

package/src/services/validation.ts

@@ -939,6 +939,16 @@ export function validateFieldValue(
       break
   }
 
+  // valueFormat validation (v4.3.0) — runs after type-specific checks
+  if (field.valueFormat && value !== undefined && value !== null && value !== '') {
+    const vals = Array.isArray(value) ? value : [String(value)]
+    for (const v of vals) {
+      if (!new RegExp(field.valueFormat).test(v)) {
+        return { valid: false, error: field.valueFormatHint || `Invalid format (expected: ${field.valueFormat})` }
+      }
+    }
+  }
+
   return { valid: true }
 }
 

package/src/types/index.ts

@@ -345,6 +345,14 @@ export interface FormFieldParams {
   source?: PrefillSource
   /** If true, field is visually muted (but still editable on click/focus). */
   muted?: boolean
+  /** How to handle prefill for autocomplete fields.
+   *  - "exact" (default): prefill is the final value (code), use as-is
+   *  - "resolve": prefill is a display name, call apiUrl to resolve to valueField */
+  prefillMode?: 'exact' | 'resolve'
+  /** Regex pattern the submitted value MUST match. Prevents submit if invalid. */
+  valueFormat?: string
+  /** Human-readable hint shown when valueFormat validation fails. */
+  valueFormatHint?: string
 
   // Text/textarea specific
   minLength?: number