@pilotiq/pilotiq 0.6.2 → 0.7.0

package/src/react/cells/EditableCell.tsx

@@ -33,6 +33,11 @@ export interface EditableCellProps {
   value:    unknown
   /** Disabled = static `disabled()` OR per-row `_cellDisabled[col]`. */
   disabled: boolean
+  /** Row-scoped option override stamped by `loadTableRecords` when the
+   *  column is a `SelectColumn` with a per-row `.options(record => …)`
+   *  resolver. Wins over `col.selectOptions`; absent when the resolver
+   *  threw or the column has only static options. */
+  rowOptions?: Array<{ value: string; label: string }>
 }
 
 interface PatchResultOk {
@@ -283,9 +288,13 @@ export function CellToggle(props: EditableCellProps): React.ReactElement {
 // ─── Select cell ───────────────────────────────────────
 
 export function CellSelect(props: EditableCellProps): React.ReactElement {
-  const { url, value, disabled, col } = props
+  const { url, value, disabled, col, rowOptions } = props
+  // Per-row resolver wins over the column's static options. Both can be
+  // present: a column may set static options as a fallback that the
+  // resolver overrides per row.
   const opts: Array<{ value: string; label: string }> =
-    Array.isArray(col['selectOptions']) ? col['selectOptions'] as Array<{ value: string; label: string }> : []
+    rowOptions ??
+    (Array.isArray(col['selectOptions']) ? col['selectOptions'] as Array<{ value: string; label: string }> : [])
   const nullable    = col['selectNullable'] === true
   const showPlaceholderOnce = col['selectablePlaceholder'] !== false  // default true (keep showing)
   const confirmMsg  = col['confirm'] as string | undefined

package/src/react/fields/CheckboxListInput.tsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react'
-import { useFieldState } from '../FormStateContext.js'
+import React, { useContext, useEffect, useRef, useState } from 'react'
+import { useFieldState, FormIdContext } from '../FormStateContext.js'
+import { registerPendingSuggestionApplier, type PendingSuggestionApplier } from '../PendingSuggestionApplierRegistry.js'
 import { Checkbox } from '../ui/checkbox.js'
 
 /**
@@ -39,6 +40,26 @@ export function CheckboxListInput({
     else { setLocalValue(next); fs.triggerLive(next) }
   }
 
+  // Cross-tree applier — the visible checkboxes are React-controlled
+  // (Base UI `<Checkbox checked={…}>`); the per-option hidden mirrors
+  // share the `[name]` attribute, so FieldShell's generic applier would
+  // overwrite every one of them with the suggestion's stringified value
+  // instead of replacing the array. FieldShell skips its generic
+  // registration for fieldType === 'checkboxList'.
+  const fsRef = useRef(fs)
+  useEffect(() => { fsRef.current = fs }, [fs])
+  const formId = useContext(FormIdContext) || undefined
+  useEffect(() => {
+    if (name.includes('.')) return
+    const applier: PendingSuggestionApplier = (suggestion) => {
+      const next = toArray(suggestion.suggestedValue)
+      const cur = fsRef.current
+      if (cur.controlled) { cur.setValue(next); cur.triggerLive(next) }
+      else { setLocalValue(next); cur.triggerLive(next) }
+    }
+    return registerPendingSuggestionApplier(formId, name, applier)
+  }, [name, formId])
+
   const layout = columns > 1
     ? `grid grid-cols-${columns} gap-2`
     : 'flex flex-col gap-2'

package/src/react/fields/ColorInput.tsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react'
-import { useFieldState } from '../FormStateContext.js'
+import React, { useContext, useEffect, useRef, useState } from 'react'
+import { useFieldState, FormIdContext } from '../FormStateContext.js'
+import { registerPendingSuggestionApplier, type PendingSuggestionApplier } from '../PendingSuggestionApplierRegistry.js'
 import { Input } from '../ui/input.js'
 
 /**
@@ -27,6 +28,25 @@ export function ColorInput({
     else { setLocalValue(v); fs.triggerLive(v) }
   }
 
+  // Cross-tree applier — color/text inputs are React-controlled (`value`,
+  // not `defaultValue`), so a DOM-write to the hidden mirror wouldn't
+  // reach them. FieldShell skips its generic registration for
+  // fieldType === 'color'.
+  const fsRef = useRef(fs)
+  useEffect(() => { fsRef.current = fs }, [fs])
+  const formId = useContext(FormIdContext) || undefined
+  useEffect(() => {
+    if (name.includes('.')) return
+    const applier: PendingSuggestionApplier = (suggestion) => {
+      const raw = suggestion.suggestedValue
+      const next = typeof raw === 'string' && raw ? raw : '#000000'
+      const cur = fsRef.current
+      if (cur.controlled) { cur.setValue(next); cur.triggerLive(next) }
+      else { setLocalValue(next); cur.triggerLive(next) }
+    }
+    return registerPendingSuggestionApplier(formId, name, applier)
+  }, [name, formId])
+
   return (
     <div className="flex items-center gap-2">
       <input type="hidden" name={name} value={value} />

package/src/react/fields/DateTimeInput.tsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react'
-import { useFieldState } from '../FormStateContext.js'
+import React, { useContext, useEffect, useRef, useState } from 'react'
+import { useFieldState, FormIdContext } from '../FormStateContext.js'
+import { registerPendingSuggestionApplier, type PendingSuggestionApplier } from '../PendingSuggestionApplierRegistry.js'
 import { Input } from '../ui/input.js'
 
 /**
@@ -28,6 +29,25 @@ export function DateTimeInput({
     else { setLocalValue(v); fs.triggerLive(v) }
   }
 
+  // Cross-tree applier — the visible `<input type="datetime-local">` is
+  // React-controlled (`value`, not `defaultValue`), so a DOM-write to
+  // it bypasses the controller. FieldShell skips its generic
+  // registration for fieldType === 'dateTime'.
+  const fsRef = useRef(fs)
+  useEffect(() => { fsRef.current = fs }, [fs])
+  const formId = useContext(FormIdContext) || undefined
+  useEffect(() => {
+    if (name.includes('.')) return
+    const applier: PendingSuggestionApplier = (suggestion) => {
+      const v = suggestion.suggestedValue
+      const next = v == null || v === '' ? '' : String(v)
+      const cur = fsRef.current
+      if (cur.controlled) { cur.setValue(next); cur.triggerLive(next) }
+      else { setLocalValue(next); cur.triggerLive(next) }
+    }
+    return registerPendingSuggestionApplier(formId, name, applier)
+  }, [name, formId])
+
   return (
     <Input
       type="datetime-local"

package/src/react/fields/FieldShell.tsx

@@ -1,6 +1,31 @@
-import React from 'react'
+import React, { useContext, useEffect, useRef } from 'react'
 import type { ElementMeta } from '../../schema/Element.js'
 import { getIcon } from '../../icons/registry.js'
+import { usePendingSuggestions, usePendingSuggestionsForField, type PendingSuggestion } from '../PendingSuggestionsContext.js'
+import { getPendingSuggestionOverlay } from '../PendingSuggestionOverlayRegistry.js'
+import { registerPendingSuggestionApplier, type PendingSuggestionApplier } from '../PendingSuggestionApplierRegistry.js'
+import { FormIdContext, useFieldState } from '../FormStateContext.js'
+
+/**
+ * Field types whose visible state is driven by React (not by a matching
+ * `[name]` DOM input). Each registers its own applier inside the field
+ * renderer; FieldShell skips its generic DOM-write applier for these so
+ * the field-owned applier stays last-write-wins in the registry. Keep in
+ * sync with the per-field `useEffect(registerPendingSuggestionApplier…)`
+ * blocks under `react/fields/`.
+ */
+const SELF_APPLIER_FIELD_TYPES = new Set<string>([
+  'select',
+  'toggle',
+  'slider',
+  'color',
+  'keyValue',
+  'fileUpload',
+  'tagsInput',
+  'dateTime',
+  'radio',
+  'checkboxList',
+])
 
 /**
  * Shared chrome around every field input — label + required asterisk +
@@ -41,6 +66,77 @@ export function FieldShell({ el, name, label, required, children, before, after,
   const hiddenLabel = el['hiddenLabel'] === true
   const wrapperAttrs = pickWrapperAttrs(el)
 
+  // Pending-suggestion overlay (Plan 6/7). RichText fields render the diff
+  // inline inside the editor instead — they opt out via the hidden marker
+  // below. Other field types pick up the slot whenever a plugin (e.g.
+  // `@pilotiq-pro/ai`) has registered a renderer AND there's a matching
+  // suggestion in the queue.
+  const fieldType = el['fieldType'] as string | undefined
+  const isRichText = fieldType === 'richtext'
+  // Field types that drive their visible state from React (not from a
+  // matching `[name]` DOM input) register their own applier — see
+  // `SelectFieldInput` for the canonical example. FieldShell's generic
+  // DOM-write applier would silently no-op on these, and (since parent
+  // effects run AFTER children) would overwrite the field-owned applier
+  // in the registry. Skip registration here so the field-owned applier
+  // stays the winner.
+  const ownsApplier = fieldType !== undefined && SELF_APPLIER_FIELD_TYPES.has(fieldType)
+  const { list: pending, dismiss } = usePendingSuggestionsForField(name)
+  const { approve } = usePendingSuggestions()
+  const Overlay = isRichText ? null : getPendingSuggestionOverlay()
+  const overlaySuggestion = pending[0] ?? null
+  // Approve routes through the cross-tree applier registry (Phase 8.5)
+  // so field types that own their visible state (Select / Toggle / Slider /
+  // Color / etc.) get their registered applier — not the overlay's
+  // hardcoded `field.setValue` + DOM-write fallback, which would silently
+  // miss the React state of those custom components. Reject just dismisses
+  // and restores focus to the input so the user can keep typing without
+  // a stray click.
+  const onReject = (): void => {
+    dismiss(overlaySuggestion!.id)
+    if (typeof document === 'undefined') return
+    queueMicrotask(() => {
+      const el = document.getElementsByName(name)[0]
+      if (el instanceof HTMLElement) el.focus()
+    })
+  }
+  const overlayNode = Overlay && overlaySuggestion ? (
+    <Overlay
+      suggestion={overlaySuggestion}
+      onApprove={() => approve(overlaySuggestion.id)}
+      onReject={onReject}
+      {...(fieldType !== undefined ? { fieldType } : {})}
+      el={el}
+    />
+  ) : null
+
+  // Cross-tree applier registration (Phase 8.5). Lets aggregate consumers
+  // (e.g. a chat-sidebar pending-pill living outside the form's React
+  // tree) reach this field's mutator via
+  // `PendingSuggestionApplierRegistry`. Skipped for richtext — the
+  // Tiptap bridge registers its own editor-command applier. Skipped for
+  // dotted-path fields (Repeater inner rows) since `useFieldState` is
+  // a no-op for them; pill-driven approve falls back to `dismiss` which
+  // is the right semantics (pill cannot reach into row state).
+  const fieldState = useFieldState(name)
+  const fieldStateRef = useRef(fieldState)
+  useEffect(() => { fieldStateRef.current = fieldState }, [fieldState])
+  const formId = useContext(FormIdContext) || undefined
+  useEffect(() => {
+    if (isRichText) return
+    if (ownsApplier) return
+    if (name.includes('.')) return
+    const applier: PendingSuggestionApplier = (suggestion) => {
+      const fs = fieldStateRef.current
+      if (fs.controlled) {
+        fs.setValue(suggestion.suggestedValue)
+      } else {
+        applyToUncontrolledInputs(name, suggestion.suggestedValue)
+      }
+    }
+    return registerPendingSuggestionApplier(formId, name, applier)
+  }, [isRichText, ownsApplier, name, formId])
+
   const labelClass = hiddenLabel
     ? 'sr-only'
     : 'text-sm font-medium leading-none'
@@ -64,12 +160,29 @@ export function FieldShell({ el, name, label, required, children, before, after,
     )
     : children
 
+  // When a suggestion is pending we hide the real input visually but
+  // keep it in the DOM — both so the applier's DOM-write fallback can
+  // resolve `[name="…"]` and so the input doesn't unmount + lose its
+  // typed value. The wrapper div is rendered unconditionally (just
+  // toggling a class) — switching between bare input and wrapped input
+  // would unmount the uncontrolled `<input>`, resetting its value to
+  // `defaultValue` and silently undoing the approved write right after
+  // the overlay closes.
+  const inputBlock = (
+    <>
+      <div className={overlayNode !== null ? 'hidden' : 'contents'} aria-hidden={overlayNode !== null}>
+        {input}
+      </div>
+      {overlayNode}
+    </>
+  )
+
   if (inline) {
     return (
       <div className="flex items-baseline gap-3" {...wrapperAttrs}>
         {labelEl && <div className="min-w-32 pt-2">{labelEl}</div>}
         <div className="min-w-0 flex-1">
-          {input}
+          {inputBlock}
           {helperText && (
             <p className="mt-1 text-xs text-muted-foreground">{helperText}</p>
           )}
@@ -81,7 +194,7 @@ export function FieldShell({ el, name, label, required, children, before, after,
   return (
     <div className="flex flex-col gap-1.5" {...wrapperAttrs}>
       {labelEl}
-      {input}
+      {inputBlock}
       {helperText && (
         <p className="text-xs text-muted-foreground">{helperText}</p>
       )}
@@ -89,6 +202,57 @@ export function FieldShell({ el, name, label, required, children, before, after,
   )
 }
 
+/**
+ * Best-effort DOM apply for forms without a `<FormStateProvider>` (i.e.
+ * forms whose fields aren't `live()`). Walks every `[name="…"]` input,
+ * uses React's internal value-setter (`Object.getOwnPropertyDescriptor`)
+ * so the change is visible to `onChange` handlers + uncontrolled
+ * `defaultValue` paths. Coercion is intentionally minimal — `String()`
+ * for primitives, `JSON.stringify` for objects/arrays.
+ *
+ * Used by FieldShell's pending-suggestion applier and exposed for
+ * plugins that need the same fallback.
+ */
+function applyToUncontrolledInputs(fieldName: string, value: unknown): void {
+  if (typeof document === 'undefined') return
+  const stringValue = typeof value === 'string'
+    ? value
+    : typeof value === 'number' || typeof value === 'boolean'
+      ? String(value)
+      : safeStringify(value)
+
+  const elements = document.getElementsByName(fieldName)
+  for (const el of Array.from(elements)) {
+    if (el instanceof HTMLInputElement) {
+      if (el.type === 'checkbox') {
+        const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'checked')?.set
+        setter?.call(el, Boolean(value))
+      } else {
+        setNativeValue(HTMLInputElement.prototype, el, stringValue)
+      }
+    } else if (el instanceof HTMLTextAreaElement) {
+      setNativeValue(HTMLTextAreaElement.prototype, el, stringValue)
+    } else if (el instanceof HTMLSelectElement) {
+      setNativeValue(HTMLSelectElement.prototype, el, stringValue)
+    } else {
+      continue
+    }
+    el.dispatchEvent(new Event('input', { bubbles: true }))
+    el.dispatchEvent(new Event('change', { bubbles: true }))
+  }
+}
+
+function setNativeValue(proto: object, el: HTMLElement, value: string): void {
+  const desc = Object.getOwnPropertyDescriptor(proto, 'value')
+  desc?.set?.call(el, value)
+}
+
+function safeStringify(value: unknown): string {
+  if (value === null || value === undefined) return ''
+  try { return JSON.stringify(value) ?? '' }
+  catch { return '' }
+}
+
 /**
  * Merge `extraAttributes` (Filament-parity short name) and
  * `extraFieldWrapperAttributes` (verbose alias) into one record. Latter

package/src/react/fields/FileUploadInput.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import {
   UploadIcon, XIcon, FileIcon, Loader2Icon,
   GripVerticalIcon, DownloadIcon,
@@ -7,7 +7,8 @@ import ReactCrop, {
   type Crop, type PixelCrop,
   centerCrop, makeAspectCrop, convertToPixelCrop,
 } from 'react-image-crop'
-import { useFieldState } from '../FormStateContext.js'
+import { useFieldState, FormIdContext } from '../FormStateContext.js'
+import { registerPendingSuggestionApplier, type PendingSuggestionApplier } from '../PendingSuggestionApplierRegistry.js'
 import { useToast } from '../Toaster.js'
 import { Button } from '../ui/button.js'
 import {
@@ -104,6 +105,24 @@ export function FileUploadInput({
     }
   }
 
+  // Cross-tree applier — FileUpload state lives in `urls` (React); the
+  // hidden mirror input is write-only. FieldShell skips its generic
+  // registration for fieldType === 'fileUpload'.
+  const fsRef = useRef(fs)
+  useEffect(() => { fsRef.current = fs }, [fs])
+  const formId = useContext(FormIdContext) || undefined
+  useEffect(() => {
+    if (name.includes('.')) return
+    const applier: PendingSuggestionApplier = (suggestion) => {
+      const next = toUrls(suggestion.suggestedValue)
+      const stored = multiple ? next : (next[0] ?? null)
+      const cur = fsRef.current
+      if (cur.controlled) { cur.setValue(stored); cur.triggerLive(stored) }
+      else { setLocalUrls(next); cur.triggerLive(stored) }
+    }
+    return registerPendingSuggestionApplier(formId, name, applier)
+  }, [name, formId, multiple])
+
   // ── Image editor helpers ──────────────────────────────────────────────────
 
   const onImgLoad = (e: React.SyntheticEvent<HTMLImageElement>): void => {

package/src/react/fields/KeyValueInput.tsx

@@ -1,6 +1,7 @@
-import React, { useMemo, useState } from 'react'
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { Trash2Icon, PlusIcon, ArrowUpIcon, ArrowDownIcon } from 'lucide-react'
-import { useFieldState } from '../FormStateContext.js'
+import { useFieldState, FormIdContext } from '../FormStateContext.js'
+import { registerPendingSuggestionApplier, type PendingSuggestionApplier } from '../PendingSuggestionApplierRegistry.js'
 import { Input } from '../ui/input.js'
 import { Button } from '../ui/button.js'
 
@@ -70,6 +71,35 @@ export function KeyValueInput({
   const addRow = (): void => {
     setRows([...rows, { id: newId(), key: '', value: '' }])
   }
+  // Cross-tree applier — KeyValue rows are React-controlled; the JSON in
+  // the hidden input below is a write-only serialization. FieldShell skips
+  // its generic registration for fieldType === 'keyValue'.
+  const fsRef = useRef(fs)
+  useEffect(() => { fsRef.current = fs }, [fs])
+  const localRowsRef = useRef(localRows)
+  useEffect(() => { localRowsRef.current = localRows }, [localRows])
+  const formId = useContext(FormIdContext) || undefined
+  useEffect(() => {
+    if (name.includes('.')) return
+    const applier: PendingSuggestionApplier = (suggestion) => {
+      const obj = parseToObject(suggestion.suggestedValue)
+      const entries = Object.entries(obj)
+      const fallback = localRowsRef.current
+      const nextRows: Row[] = entries.length > 0
+        ? entries.map(([k, v], i) => ({ id: fallback[i]?.id ?? newId(), key: k, value: v }))
+        : [{ id: newId(), key: '', value: '' }]
+      const cur = fsRef.current
+      if (cur.controlled) {
+        cur.setValue(obj)
+        setLocalRows(nextRows)
+      } else {
+        setLocalRows(nextRows)
+      }
+      cur.triggerLive(obj)
+    }
+    return registerPendingSuggestionApplier(formId, name, applier)
+  }, [name, formId])
+
   const moveRow = (id: number, dir: -1 | 1): void => {
     const idx = rows.findIndex(r => r.id === id)
     if (idx < 0) return

package/src/react/fields/RadioInput.tsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react'
-import { useFieldState } from '../FormStateContext.js'
+import React, { useContext, useEffect, useRef, useState } from 'react'
+import { useFieldState, FormIdContext } from '../FormStateContext.js'
+import { registerPendingSuggestionApplier, type PendingSuggestionApplier } from '../PendingSuggestionApplierRegistry.js'
 
 /**
  * Single-choice field rendered as a vertical (or `inline:true` horizontal)
@@ -24,6 +25,26 @@ export function RadioInput({
     if (fs.controlled) { fs.setValue(next); fs.triggerLive(next) }
     else { setLocalValue(next); fs.triggerLive(next) }
   }
+
+  // Cross-tree applier — the visible radios live under a
+  // `${name}__radio`-named group (separate from the `[name]` hidden
+  // mirror), and they're React-controlled via `checked={value === o.value}`.
+  // FieldShell skips its generic registration for fieldType === 'radio'.
+  const fsRef = useRef(fs)
+  useEffect(() => { fsRef.current = fs }, [fs])
+  const formId = useContext(FormIdContext) || undefined
+  useEffect(() => {
+    if (name.includes('.')) return
+    const applier: PendingSuggestionApplier = (suggestion) => {
+      const v = suggestion.suggestedValue
+      const next = v == null ? '' : String(v)
+      const cur = fsRef.current
+      if (cur.controlled) { cur.setValue(next); cur.triggerLive(next) }
+      else { setLocalValue(next); cur.triggerLive(next) }
+    }
+    return registerPendingSuggestionApplier(formId, name, applier)
+  }, [name, formId])
+
   const layout = inline ? 'flex flex-row flex-wrap gap-4' : 'flex flex-col gap-2'
   return (
     <div role="radiogroup" className={layout}>

package/src/react/fields/SelectFieldInput.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import { PlusIcon } from 'lucide-react'
 import type { ElementMeta } from '../../schema/Element.js'
-import { useFieldState } from '../FormStateContext.js'
+import { useFieldState, FormIdContext } from '../FormStateContext.js'
+import { registerPendingSuggestionApplier, type PendingSuggestionApplier } from '../PendingSuggestionApplierRegistry.js'
 import { useToast } from '../Toaster.js'
 import { renderFormChild } from '../SchemaRenderer.js'
 import {
@@ -74,6 +75,28 @@ export function SelectFieldInput({
     else { setLocalValue(option.value); fs.triggerLive(option.value) }
   }
 
+  // Cross-tree applier registration. FieldShell's generic applier writes
+  // to the matching `[name]` input via the React prototype-descriptor
+  // setter — but Base UI Select isn't driven by the hidden `<input>` in
+  // this component, it's driven by `value`/`localValue` React state. So
+  // a DOM write moves the hidden input but leaves the visible select
+  // unchanged. Register a Select-aware applier that writes to local
+  // state instead. FieldShell skips the generic registration for
+  // fieldType === 'select' so this one stays the winner.
+  const fsRef = useRef(fs)
+  useEffect(() => { fsRef.current = fs }, [fs])
+  const formId = useContext(FormIdContext) || undefined
+  useEffect(() => {
+    if (name.includes('.')) return
+    const applier: PendingSuggestionApplier = (suggestion) => {
+      const next = suggestion.suggestedValue == null ? '' : String(suggestion.suggestedValue)
+      const cur = fsRef.current
+      if (cur.controlled) { cur.setValue(next); cur.triggerLive(next) }
+      else { setLocalValue(next); cur.triggerLive(next) }
+    }
+    return registerPendingSuggestionApplier(formId, name, applier)
+  }, [name, formId])
+
   const showCreateTrigger = createOption !== undefined
     && typeof createOption.url === 'string'
     && createOption.url.length > 0

package/src/react/fields/SliderInput.tsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react'
-import { useFieldState } from '../FormStateContext.js'
+import React, { useContext, useEffect, useRef, useState } from 'react'
+import { useFieldState, FormIdContext } from '../FormStateContext.js'
+import { registerPendingSuggestionApplier, type PendingSuggestionApplier } from '../PendingSuggestionApplierRegistry.js'
 import { Slider } from '../ui/slider.js'
 
 /**
@@ -40,6 +41,23 @@ export function SliderInput({
     else { setLocalValue(v); fs.triggerLive(v) }
   }
 
+  // Cross-tree applier — Base UI Slider drives via the `value` prop, not
+  // the hidden mirror input below. FieldShell skips its generic registration
+  // for fieldType === 'slider'.
+  const fsRef = useRef(fs)
+  useEffect(() => { fsRef.current = fs }, [fs])
+  const formId = useContext(FormIdContext) || undefined
+  useEffect(() => {
+    if (name.includes('.')) return
+    const applier: PendingSuggestionApplier = (suggestion) => {
+      const v = toNumber(suggestion.suggestedValue)
+      const cur = fsRef.current
+      if (cur.controlled) { cur.setValue(v); cur.triggerLive(v) }
+      else { setLocalValue(v); cur.triggerLive(v) }
+    }
+    return registerPendingSuggestionApplier(formId, name, applier)
+  }, [name, formId])
+
   return (
     <div className="flex items-center gap-3">
       <input type="hidden" name={name} value={String(value)} />

package/src/react/fields/TagsInput.tsx

@@ -1,6 +1,7 @@
-import React, { useMemo, useRef, useState } from 'react'
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { GripVerticalIcon, XIcon } from 'lucide-react'
-import { useFieldState } from '../FormStateContext.js'
+import { useFieldState, FormIdContext } from '../FormStateContext.js'
+import { registerPendingSuggestionApplier, type PendingSuggestionApplier } from '../PendingSuggestionApplierRegistry.js'
 import { reorderRows } from './RepeaterInput.js'
 
 /**
@@ -48,6 +49,23 @@ export function TagsInput({
     else                { setLocalTags(next); fs.triggerLive(next) }
   }
 
+  // Cross-tree applier — chip set lives in React; hidden mirror is a
+  // write-only JSON serialization. FieldShell skips its generic
+  // registration for fieldType === 'tagsInput'.
+  const fsRef = useRef(fs)
+  useEffect(() => { fsRef.current = fs }, [fs])
+  const formId = useContext(FormIdContext) || undefined
+  useEffect(() => {
+    if (name.includes('.')) return
+    const applier: PendingSuggestionApplier = (suggestion) => {
+      const next = toArray(suggestion.suggestedValue)
+      const cur = fsRef.current
+      if (cur.controlled) { cur.setValue(next); cur.triggerLive(next) }
+      else { setLocalTags(next); cur.triggerLive(next) }
+    }
+    return registerPendingSuggestionApplier(formId, name, applier)
+  }, [name, formId])
+
   const canAddMore = maxTags == null || tags.length < maxTags
 
   const addTag = (raw: string): void => {

package/src/react/fields/ToggleFieldInput.tsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react'
-import { useFieldState } from '../FormStateContext.js'
+import React, { useContext, useEffect, useRef, useState } from 'react'
+import { useFieldState, FormIdContext } from '../FormStateContext.js'
+import { registerPendingSuggestionApplier, type PendingSuggestionApplier } from '../PendingSuggestionApplierRegistry.js'
 import { Switch } from '../ui/switch.js'
 
 export function ToggleFieldInput({
@@ -21,6 +22,26 @@ export function ToggleFieldInput({
     if (fs.controlled) { fs.setValue(next); fs.triggerLive(next) }
     else { setLocalChecked(next); fs.triggerLive(next) }
   }
+
+  // Cross-tree applier — Switch state lives in React, not in the hidden
+  // mirror input below. FieldShell's generic DOM-write applier would
+  // dispatch a change on the hidden input, but the visible Switch has
+  // no listener for it, so the toggle wouldn't flip. FieldShell skips
+  // its generic registration for fieldType === 'toggle'.
+  const fsRef = useRef(fs)
+  useEffect(() => { fsRef.current = fs }, [fs])
+  const formId = useContext(FormIdContext) || undefined
+  useEffect(() => {
+    if (name.includes('.')) return
+    const applier: PendingSuggestionApplier = (suggestion) => {
+      const v = suggestion.suggestedValue
+      const next = v === true || v === 'true' || v === 1 || v === '1'
+      const cur = fsRef.current
+      if (cur.controlled) { cur.setValue(next); cur.triggerLive(next) }
+      else { setLocalChecked(next); cur.triggerLive(next) }
+    }
+    return registerPendingSuggestionApplier(formId, name, applier)
+  }, [name, formId])
   return (
     <div className="flex items-center gap-2">
       <input type="hidden" name={name} value={checked ? 'true' : 'false'} />

package/src/react/index.ts

@@ -14,6 +14,24 @@ export {
 } from './SchemaRenderer.js'
 export { registerFieldRenderer, getFieldRenderer, type FieldRendererProps } from './registry.js'
 export { registerFieldLabelSlot, getFieldLabelSlot, type FieldLabelSlotProps } from './FieldLabelSlotRegistry.js'
+export {
+  registerPendingSuggestionOverlay,
+  getPendingSuggestionOverlay,
+  type PendingSuggestionOverlayProps,
+} from './PendingSuggestionOverlayRegistry.js'
+export {
+  PendingSuggestionsContext,
+  usePendingSuggestions,
+  usePendingSuggestionsForField,
+  type PendingSuggestion,
+  type PendingSuggestionOrigin,
+  type PendingSuggestionsApi,
+} from './PendingSuggestionsContext.js'
+export {
+  registerPendingSuggestionApplier,
+  getPendingSuggestionApplier,
+  type PendingSuggestionApplier,
+} from './PendingSuggestionApplierRegistry.js'
 export {
   registerWidgetRenderer,
   getWidgetRenderer,