@kelpie/ui 0.9.0 → 0.11.0

package/src/pages/PartnershipDetail.tsx

@@ -6,6 +6,10 @@ import { Link, useNavigate, useParams } from 'react-router'
 import { usePatch } from '../api/resource.ts'
 import type { PatchResult } from '../api/resource.ts'
 import { useCompanies, useCompany } from '../api/resources/companies.ts'
+import {
+  detailPathForPipelineKind,
+  useConvertPipelineRecord,
+} from '../api/resources/conversions.ts'
 import { useFormSubmissionsForRecord } from '../api/resources/forms.ts'
 import { useMembers } from '../api/resources/members.ts'
 import {
@@ -20,6 +24,7 @@ import { ActivitiesPanel, LatestActivity } from '../components/ActivitiesPanel.t
 import { AgentTasks } from '../components/AgentTasks.tsx'
 import { Chip } from '../components/Chip.tsx'
 import type { ChipTone } from '../components/Chip.tsx'
+import { ConvertRecordAction, ConvertRecordButton } from '../components/ConvertRecordDialog.tsx'
 import { DecisionsPanel } from '../components/DecisionsPanel.tsx'
 import { DeleteRecord } from '../components/DeleteRecord.tsx'
 import { EntitySearch } from '../components/EntitySearch.tsx'
@@ -61,10 +66,12 @@ export function PartnershipDetail(): React.JSX.Element {
   const { id } = useParams()
   const navigate = useNavigate()
   const { record, isLoading, isNotFound, error } = usePartnership(id)
+  const convertRecord = useConvertPipelineRecord('partnership')
   const deletePartnership = useDeletePartnership()
   const moduleTabs = inSlotOrder(useRecordTabs('partnership'))
   const hasCustomFields = useHasCustomFields('partnership')
   const [activeTab, setActiveTab] = useState('overview')
+  const [showConvert, setShowConvert] = useState(false)
   const formSubmissions = useFormSubmissionsForRecord('partnership', id)
 
   if (isNotFound) {
@@ -94,6 +101,7 @@ export function PartnershipDetail(): React.JSX.Element {
   ]
   const active = tabs.some((tab) => tab.id === activeTab) ? activeTab : 'overview'
   const moduleTab = moduleTabs.find((tab) => tab.id === active)
+  const convertedTo = record.convertedTo
 
   return (
     <div className="animate-fade-in mx-auto max-w-6xl">
@@ -109,6 +117,13 @@ export function PartnershipDetail(): React.JSX.Element {
           <PartnershipHeading partnership={record} />
 
           <div className="flex justify-end gap-2">
+            <ConvertRecordButton
+              convertedTo={convertedTo}
+              convert={convertRecord}
+              onOpenDialog={() => {
+                setShowConvert(true)
+              }}
+            />
             <AgentTasks targetType="partnership" targetId={record.id} targetLabel={record.name} />
             <DeleteRecord
               recordLabel="Partnership"
@@ -124,6 +139,26 @@ export function PartnershipDetail(): React.JSX.Element {
             />
           </div>
 
+          {convertRecord.error !== null && <ErrorPanel error={convertRecord.error} />}
+          <ConvertRecordAction
+            sourceKind="partnership"
+            recordId={record.id}
+            recordName={record.name}
+            companyId={record.companyId}
+            convertedTo={convertedTo}
+            convert={convertRecord}
+            showDialog={showConvert}
+            onOpenDialog={() => {
+              setShowConvert(true)
+            }}
+            onCloseDialog={() => {
+              setShowConvert(false)
+            }}
+            onConverted={(created, targetType) => {
+              navigate(detailPathForPipelineKind(targetType, created.id))
+            }}
+          />
+
           <RecordTabs
             tabs={tabs}
             active={active}

package/src/pages/RaiseDetail.tsx

@@ -6,6 +6,10 @@ import { Link, useNavigate, useParams } from 'react-router'
 import { usePatch } from '../api/resource.ts'
 import type { PatchResult } from '../api/resource.ts'
 import { useCompanies, useCompany } from '../api/resources/companies.ts'
+import {
+  detailPathForPipelineKind,
+  useConvertPipelineRecord,
+} from '../api/resources/conversions.ts'
 import { useMembers } from '../api/resources/members.ts'
 import { usePeople } from '../api/resources/people.ts'
 import { usePipelineStages } from '../api/resources/pipelineStages.ts'
@@ -15,6 +19,7 @@ import { ActivitiesPanel, LatestActivity } from '../components/ActivitiesPanel.t
 import { AgentTasks } from '../components/AgentTasks.tsx'
 import { Chip } from '../components/Chip.tsx'
 import type { ChipTone } from '../components/Chip.tsx'
+import { ConvertRecordAction, ConvertRecordButton } from '../components/ConvertRecordDialog.tsx'
 import { DecisionsPanel } from '../components/DecisionsPanel.tsx'
 import { DeleteRecord } from '../components/DeleteRecord.tsx'
 import { EntitySearch } from '../components/EntitySearch.tsx'
@@ -60,10 +65,12 @@ export function RaiseDetail(): React.JSX.Element {
   const { id } = useParams()
   const navigate = useNavigate()
   const { record, isLoading, isNotFound, error } = useRaise(id)
+  const convertRecord = useConvertPipelineRecord('raise')
   const deleteRaise = useDeleteRaise()
   const moduleTabs = inSlotOrder(useRecordTabs('raise'))
   const hasCustomFields = useHasCustomFields('raise')
   const [activeTab, setActiveTab] = useState('overview')
+  const [showConvert, setShowConvert] = useState(false)
 
   if (isNotFound) {
     return <NotFoundPanel label="Raise" backTo="/fundraising" />
@@ -89,6 +96,7 @@ export function RaiseDetail(): React.JSX.Element {
   ]
   const active = tabs.some((tab) => tab.id === activeTab) ? activeTab : 'overview'
   const moduleTab = moduleTabs.find((tab) => tab.id === active)
+  const convertedTo = record.convertedTo
 
   return (
     <div className="animate-fade-in mx-auto max-w-6xl">
@@ -104,6 +112,13 @@ export function RaiseDetail(): React.JSX.Element {
           <RaiseHeading raise={record} />
 
           <div className="flex justify-end gap-2">
+            <ConvertRecordButton
+              convertedTo={convertedTo}
+              convert={convertRecord}
+              onOpenDialog={() => {
+                setShowConvert(true)
+              }}
+            />
             <AgentTasks targetType="raise" targetId={record.id} targetLabel={record.name} />
             <DeleteRecord
               recordLabel="Raise"
@@ -119,6 +134,26 @@ export function RaiseDetail(): React.JSX.Element {
             />
           </div>
 
+          {convertRecord.error !== null && <ErrorPanel error={convertRecord.error} />}
+          <ConvertRecordAction
+            sourceKind="raise"
+            recordId={record.id}
+            recordName={record.name}
+            companyId={record.companyId}
+            convertedTo={convertedTo}
+            convert={convertRecord}
+            showDialog={showConvert}
+            onOpenDialog={() => {
+              setShowConvert(true)
+            }}
+            onCloseDialog={() => {
+              setShowConvert(false)
+            }}
+            onConverted={(created, targetType) => {
+              navigate(detailPathForPipelineKind(targetType, created.id))
+            }}
+          />
+
           <RecordTabs tabs={tabs} active={active} onChange={setActiveTab} ariaLabel="Raise sections">
             {active === 'overview' && <RaiseOverview raise={record} />}
             {active === 'fields' && <RaiseFields raise={record} />}

package/src/pages/admin/DataPage.tsx

@@ -1,5 +1,7 @@
 import {
   CONFLICT_MODE_LABELS,
+  EXPORT_OBJECT_LABELS,
+  EXPORT_OBJECTS,
   IMPORT_OBJECTS,
   IMPORT_SOURCES,
   MATCH_KEYS,
@@ -13,6 +15,7 @@ import {
   requiredColumns,
 } from '@kelpie/schemas'
 import type {
+  ExportObject,
   ImportColumnMap,
   ImportConflictMode,
   ImportJob,
@@ -65,7 +68,7 @@ const STEPS: readonly { readonly id: WizardStep; readonly label: string }[] = [
 ]
 
 export function DataPage(): ReactNode {
-  const [exportObject, setExportObject] = useState<ImportObject>('companies')
+  const [exportObject, setExportObject] = useState<ExportObject>('companies')
 
   const [step, setStep] = useState<WizardStep>('source')
   const [source, setSource] = useState<ImportSource>('custom')
@@ -133,7 +136,7 @@ export function DataPage(): ReactNode {
     setProblem(null)
   }
 
-  async function onDownload(target: ImportObject, template: boolean): Promise<void> {
+  async function onDownload(target: ExportObject, template: boolean): Promise<void> {
     setProblem(null)
     saveCsv(await exportCsv.runAsync({ object: target, template }))
   }
@@ -255,7 +258,7 @@ export function DataPage(): ReactNode {
     <div className="animate-slide-in space-y-10">
       <PageHeader
         title="Import & export"
-        description="CSV for People, Companies, Positions, and Deals. Custom files or HubSpot / Salesforce packs."
+        description="CSV for People, Companies, Positions, Deals, and other CRM objects. Custom field values export with each record; definitions export separately."
       />
 
       {failure === null ? null : (
@@ -272,20 +275,20 @@ export function DataPage(): ReactNode {
         <div>
           <h2 className="text-[15px] font-semibold text-ink">Export</h2>
           <p className="mt-1 text-[13px] text-ink-muted">
-            Download this workspace as CSV. A Kelpie export reads straight back in with no column
-            mapping.
+            Download this workspace as CSV. Importable objects round-trip through the wizard; other
+            objects and custom field definitions export for backup and analysis.
           </p>
         </div>
         <div className="flex flex-wrap items-end gap-3">
           <Field label="Object">
             <select
               value={exportObject}
-              onChange={(event) => setExportObject(event.target.value as ImportObject)}
+              onChange={(event) => setExportObject(event.target.value as ExportObject)}
               className="w-48 rounded-md border border-border bg-surface-raised px-3 py-2 text-[13px] outline-none focus:border-accent"
             >
-              {IMPORT_OBJECTS.map((item) => (
+              {EXPORT_OBJECTS.map((item) => (
                 <option key={item} value={item}>
-                  {OBJECT_LABELS[item]}
+                  {EXPORT_OBJECT_LABELS[item]}
                 </option>
               ))}
             </select>
@@ -377,7 +380,9 @@ export function DataPage(): ReactNode {
               </button>
             </div>
             <p className="text-[12px] text-ink-muted">
-              Import order for linked data: Companies → People → Positions → Deals.
+              Import order for linked data: Companies → People → Positions → pipeline records (Deals,
+              Opportunities, Enquiries, Partnerships, Fundraising). Custom field definitions can be
+              imported before the records that use them.
             </p>
             <button
               type="submit"

package/src/pages/admin/PrivacyPage.tsx

@@ -132,14 +132,14 @@ function EmptyState({ onAdd, onSeedStarters, isSeeding }: EmptyStateProps): Reac
       <p className="mt-1 text-ink-muted">
         A purpose is what a person is agreeing to — being contacted at all, marketing, research.
         Every workspace usually has at least a general <span className="font-medium">Contact</span>{' '}
-        purpose. Forms, lists, and imports that don&rsquo;t need consent don&rsquo;t need one.
+        purpose. Forms and imports that don&rsquo;t need consent don&rsquo;t need one.
       </p>
       <div className="mt-4 flex flex-wrap items-center gap-2">
         <button
           type="button"
           onClick={onSeedStarters}
           disabled={isSeeding}
-          className="rounded-md bg-accent px-3 py-1.5 text-[12px] font-medium text-white hover:bg-accent-hover disabled:opacity-50"
+          className="rounded-md bg-accent px-3 py-1.5 text-[12px] font-semibold text-accent-fg transition hover:bg-accent-hover disabled:opacity-50"
         >
           {isSeeding ? 'Adding…' : 'Add Contact & Marketing'}
         </button>
@@ -268,7 +268,7 @@ function AddPurposeForm({ onDone }: AddPurposeFormProps): React.JSX.Element {
         <button
           type="submit"
           disabled={create.isPending}
-          className="rounded-md bg-accent px-3 py-1 text-[12px] font-medium text-white hover:bg-accent-hover disabled:opacity-50"
+          className="rounded-md bg-accent px-3 py-1 text-[12px] font-semibold text-accent-fg transition hover:bg-accent-hover disabled:opacity-50"
         >
           {create.isPending ? 'Adding…' : 'Add purpose'}
         </button>
@@ -389,7 +389,7 @@ function PurposeRow({ purpose }: PurposeRowProps): React.JSX.Element {
             <button
               type="submit"
               disabled={update.isPending}
-              className="rounded-md bg-accent px-3 py-1 text-[12px] font-medium text-white hover:bg-accent-hover disabled:opacity-50"
+              className="rounded-md bg-accent px-3 py-1 text-[12px] font-semibold text-accent-fg transition hover:bg-accent-hover disabled:opacity-50"
             >
               {update.isPending ? 'Saving…' : 'Save'}
             </button>

package/src/pages/admin/TeamPage.tsx

@@ -114,8 +114,7 @@ function InviteForm(): React.JSX.Element {
       </div>
       {sendInvite.error !== null && <ErrorPanel error={sendInvite.error} />}
       <p className="text-[11px] text-ink-faint">
-        The invitation is emailed and lasts seven days. Ownership is not invited; it is given to a
-        member who has already joined.
+        The invitation is emailed and lasts seven days.
       </p>
     </form>
   )

package/src/pages/admin/WorkspaceSettingsPage.tsx

@@ -74,8 +74,6 @@ function WorkspaceSettingsForm({
   const [name, setName] = useState(workspace.name)
   const [slug, setSlug] = useState(workspace.slug)
   const [timezone, setTimezone] = useState(workspace.timezone)
-  const [tagline, setTagline] = useState(workspace.tagline ?? '')
-  const [oneLiner, setOneLiner] = useState(workspace.oneLiner ?? '')
   const [saved, setSaved] = useState(false)
 
   const canEdit = session?.role === 'owner' || session?.role === 'admin'
@@ -92,10 +90,6 @@ function WorkspaceSettingsForm({
         name: name.trim(),
         slug: slug.trim(),
         timezone,
-        // Empty is not blank text, it is no tagline. `null` clears the column;
-        // an empty string would store one and hand agents an empty identity.
-        tagline: tagline.trim().length === 0 ? null : tagline.trim(),
-        oneLiner: oneLiner.trim().length === 0 ? null : oneLiner.trim(),
       })
       .then(() => {
         setSaved(true)
@@ -107,7 +101,7 @@ function WorkspaceSettingsForm({
     <div className="animate-slide-in mx-auto max-w-4xl space-y-8">
       <PageHeader
         title="Workspace"
-        description="Name, address, timezone, and how the company introduces itself to an agent."
+        description="Name, address, and timezone."
       />
 
       <form onSubmit={save} className="space-y-4">
@@ -135,30 +129,6 @@ function WorkspaceSettingsForm({
           />
         </Field>
 
-        <Field label="Tagline" hint="The short identity an agent loads first.">
-          <input
-            value={tagline}
-            onChange={(event) => {
-              setTagline(event.target.value)
-            }}
-            placeholder="CRM and company brain for agent-native startups"
-            disabled={!canEdit}
-            className="w-full max-w-xl rounded-md border border-border bg-surface-raised px-3 py-2 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20 disabled:opacity-60"
-          />
-        </Field>
-
-        <Field label="One-liner" hint="What the company does, in a sentence.">
-          <textarea
-            value={oneLiner}
-            onChange={(event) => {
-              setOneLiner(event.target.value)
-            }}
-            rows={2}
-            disabled={!canEdit}
-            className="w-full max-w-xl rounded-md border border-border bg-surface-raised px-3 py-2 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20 disabled:opacity-60"
-          />
-        </Field>
-
         <Field label="Timezone">
           <select
             value={timezone}

package/src/pages/forms/AddFieldMenu.tsx

@@ -1,4 +1,4 @@
-import { FORM_FIELD_MAP_TARGET_LABELS } from '@kelpie/schemas'
+import { labelForMapTarget } from '@kelpie/schemas'
 import type { FormFieldInput } from '@kelpie/schemas'
 import { useEffect, useRef, useState } from 'react'
 
@@ -92,7 +92,7 @@ export function AddFieldMenu({ fields, onAdd }: AddFieldMenuProps): React.JSX.El
                 >
                   <span>{preset.label}</span>
                   <span className="shrink-0 text-[11px] text-ink-faint">
-                    {FORM_FIELD_MAP_TARGET_LABELS[preset.mapTo]}
+                    {labelForMapTarget(preset.mapTo)}
                   </span>
                 </button>
               ))}

package/src/pages/forms/FieldsEditor.tsx

@@ -9,24 +9,24 @@ import {
 import type { DragEndEvent } from '@dnd-kit/core'
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
-import { FORM_FIELD_MAP_TARGET_LABELS, FORM_OPTION_VALUE_TYPES } from '@kelpie/schemas'
+import { FORM_OPTION_VALUE_TYPES } from '@kelpie/schemas'
 import type {
   Form,
   FormFieldInput,
-  FormFieldMapTarget,
   FormFieldOptionInput,
   FormFieldType,
 } from '@kelpie/schemas'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 
 import { useConsentPurposes } from '../../api/resources/consentPurposes.ts'
+import { useCustomFields } from '../../api/resources/customFields.ts'
 import type { ConsentPurpose } from '@kelpie/schemas'
 import { useUpdateFormFields } from '../../api/resources/forms.ts'
 import { ErrorPanel } from '../../components/QueryState.tsx'
 import { AddFieldMenu } from './AddFieldMenu.tsx'
+import { MapTargetSearch } from './MapTargetSearch.tsx'
 import {
   FIELD_TYPE_OPTIONS,
-  MAP_TARGET_OPTIONS,
   editField,
   fieldsChanged,
   findProblems,
@@ -78,6 +78,17 @@ export function FieldsEditor({ form }: FieldsEditorProps): React.JSX.Element {
   const [fields, setFields] = useState<EditableField[]>(() => toEditableFields(form))
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const updateFields = useUpdateFormFields()
+  const customFields = useCustomFields()
+  const customFieldDefinitions = useMemo(
+    () =>
+      customFields.records.map((definition) => ({
+        objectType: definition.objectType,
+        key: definition.key,
+        label: definition.label,
+        type: definition.type,
+      })),
+    [customFields.records],
+  )
   const fieldsRef = useRef<readonly EditableField[]>(fields)
   fieldsRef.current = fields
   const sensors = useSensors(
@@ -104,7 +115,7 @@ export function FieldsEditor({ form }: FieldsEditorProps): React.JSX.Element {
     setFields(next)
   }, [form])
 
-  const problems = findProblems(fields, form.createDeal)
+  const problems = findProblems(fields, form.createDeal, { customFieldDefinitions })
   const changed = fieldsChanged(form, fields)
   const selected = fields.find((field) => field.id === selectedId)
 
@@ -190,6 +201,8 @@ export function FieldsEditor({ form }: FieldsEditorProps): React.JSX.Element {
         ) : (
           <FieldSettings
             field={selected}
+            fields={fields}
+            customFieldDefinitions={customFieldDefinitions}
             problem={problems.byField.get(selected.id)}
             onChange={(change) => {
               setFields((current) => editField(current, selected.id, change))
@@ -424,6 +437,13 @@ function ConsentPreview({ field }: { readonly field: EditableField }): React.JSX
 
 interface FieldSettingsProps {
   readonly field: EditableField
+  readonly fields: readonly EditableField[]
+  readonly customFieldDefinitions: readonly {
+    readonly objectType: import('@kelpie/schemas').CustomFieldObjectType
+    readonly key: string
+    readonly label: string
+    readonly type: import('@kelpie/schemas').CustomFieldType
+  }[]
   readonly problem: string | undefined
   readonly onChange: (change: Partial<FormFieldInput>) => void
   readonly onRemove: () => void
@@ -433,11 +453,21 @@ interface FieldSettingsProps {
 /** The panel a selected field's settings edit in. */
 function FieldSettings({
   field,
+  fields,
+  customFieldDefinitions,
   problem,
   onChange,
   onRemove,
   onClose,
 }: FieldSettingsProps): React.JSX.Element {
+  const usedTargets = useMemo(
+    () =>
+      new Set(
+        fields.filter((entry) => entry.id !== field.id).map((entry) => entry.mapTo),
+      ),
+    [fields, field.id],
+  )
+
   return (
     <aside className="rounded-lg border border-border bg-surface-raised p-4 lg:sticky lg:top-4">
       <div className="mb-3 flex items-center justify-between gap-2">
@@ -464,24 +494,19 @@ function FieldSettings({
           />
         </label>
 
-        <label className="block">
+        <div className="block">
           <span className="mb-1 block text-[11px] font-medium text-ink-faint">Maps to</span>
-          <select
-            className={inputClass}
+          <MapTargetSearch
             value={field.mapTo}
-            onChange={(event) => {
-              const mapTo = event.target.value as FormFieldMapTarget
-
-              onChange({ mapTo, type: typeForTarget(mapTo, field.type) })
+            usedTargets={usedTargets}
+            onChange={(mapTo) => {
+              onChange({
+                mapTo,
+                type: typeForTarget(mapTo, field.type, customFieldDefinitions),
+              })
             }}
-          >
-            {MAP_TARGET_OPTIONS.map((option) => (
-              <option key={option.value} value={option.value}>
-                {FORM_FIELD_MAP_TARGET_LABELS[option.value]}
-              </option>
-            ))}
-          </select>
-        </label>
+          />
+        </div>
 
         <label className="block">
           <span className="mb-1 block text-[11px] font-medium text-ink-faint">Type</span>

package/src/pages/forms/MapTargetSearch.tsx

@@ -0,0 +1,69 @@
+import {
+  isRepeatableMapTarget,
+  labelForMapTarget,
+  listMapTargetEntries,
+  metaForMapTargetEntry,
+} from '@kelpie/schemas'
+import type { CustomFieldDefinition } from '@kelpie/schemas'
+
+import { useCustomFields } from '../../api/resources/customFields.ts'
+import { EntitySearch } from '../../components/EntitySearch.tsx'
+import type { SearchOption } from '../../components/EntitySearch.tsx'
+
+export interface MapTargetSearchProps {
+  readonly value: string
+  readonly usedTargets: ReadonlySet<string>
+  readonly onChange: (target: string) => void
+}
+
+function toCustomRefs(
+  definitions: readonly CustomFieldDefinition[],
+): readonly { objectType: CustomFieldDefinition['objectType']; key: string; label: string; type: CustomFieldDefinition['type'] }[] {
+  return definitions.map((definition) => ({
+    objectType: definition.objectType,
+    key: definition.key,
+    label: definition.label,
+    type: definition.type,
+  }))
+}
+
+export function MapTargetSearch({
+  value,
+  usedTargets,
+  onChange,
+}: MapTargetSearchProps): React.JSX.Element {
+  const customFields = useCustomFields()
+  const customRefs = toCustomRefs(customFields.records)
+  const entries = listMapTargetEntries(customRefs)
+
+  const options: readonly SearchOption[] = entries
+    .filter((entry) => entry.target === value || !usedTargets.has(entry.target) || isRepeatableMapTarget(entry.target))
+    .map((entry) => {
+      const customType =
+        entry.fieldKind === 'custom'
+          ? customRefs.find(
+              (definition) =>
+                entry.target.endsWith(`.custom_fields.${definition.key}`) &&
+                entry.target.startsWith(`${definition.objectType}.`),
+            )?.type
+          : undefined
+
+      return {
+        id: entry.target,
+        label: labelForMapTarget(entry.target, customRefs),
+        meta: metaForMapTargetEntry(entry, customType),
+      }
+    })
+
+  return (
+    <EntitySearch
+      options={options}
+      value={value}
+      onChange={onChange}
+      placeholder="Search object and field…"
+      emptyMessage="No matching fields"
+      limit={12}
+      size="md"
+    />
+  )
+}

package/src/pages/forms/fieldList.ts

@@ -1,10 +1,19 @@
 import {
-  FORM_FIELD_MAP_TARGETS,
   FORM_FIELD_TYPES,
+  isCompatibleFormFieldType,
+  isKnownMapTarget,
+  isRepeatableMapTarget,
   PERSON_CONSENT_TARGET,
   PERSON_EMAIL_TARGET,
+  suggestedFormFieldType,
+} from '@kelpie/schemas'
+import type {
+  CustomFieldDefinitionRef,
+  Form,
+  FormFieldInput,
+  FormFieldMapTarget,
+  FormFieldType,
 } from '@kelpie/schemas'
-import type { Form, FormFieldInput, FormFieldMapTarget, FormFieldType } from '@kelpie/schemas'
 
 import { CRM_FIELD_PRESETS, NEW_SELECT_OPTIONS } from './template.ts'
 
@@ -28,10 +37,9 @@ export interface EditableField extends FormFieldInput {
 
 export const FIELD_TYPE_OPTIONS = FORM_FIELD_TYPES.map((type) => ({ value: type, label: type }))
 
-export const MAP_TARGET_OPTIONS = FORM_FIELD_MAP_TARGETS.map((target) => ({
-  value: target,
-  label: target,
-}))
+export interface FindProblemsOptions {
+  readonly customFieldDefinitions?: readonly CustomFieldDefinitionRef[]
+}
 
 /** Reads a saved form into the shape the builder edits. */
 export function toEditableFields(form: Form): EditableField[] {
@@ -92,8 +100,7 @@ export function editField(
       // that may repeat — consent's uniqueness is per purpose, not per
       // target, and is enforced when the purpose is picked.
       return change.mapTo !== undefined &&
-        change.mapTo !== 'submission' &&
-        change.mapTo !== PERSON_CONSENT_TARGET &&
+        !isRepeatableMapTarget(change.mapTo) &&
         field.mapTo === change.mapTo
         ? { ...field, mapTo: 'submission' }
         : field
@@ -182,11 +189,13 @@ export interface FieldListProblems {
 export function findProblems(
   fields: readonly EditableField[],
   createsDeal: boolean,
+  options: FindProblemsOptions = {},
 ): FieldListProblems {
   const list: string[] = []
   const byField = new Map<string, string>()
-  const seen = new Set<FormFieldMapTarget>()
+  const seen = new Set<string>()
   const usedConsentPurposes = new Set<string>()
+  const customFieldDefinitions = options.customFieldDefinitions ?? []
 
   if (!fields.some((field) => field.mapTo === PERSON_EMAIL_TARGET)) {
     list.push(`One field must map to ${PERSON_EMAIL_TARGET}, or no submission can be processed.`)
@@ -197,6 +206,15 @@ export function findProblems(
   }
 
   for (const field of fields) {
+    if (!isKnownMapTarget(field.mapTo, customFieldDefinitions)) {
+      byField.set(field.id, `Unknown map target ${field.mapTo}.`)
+    } else if (
+      field.mapTo !== PERSON_CONSENT_TARGET &&
+      !isCompatibleFormFieldType(field.type, field.mapTo, customFieldDefinitions)
+    ) {
+      byField.set(field.id, `A ${field.type} field cannot map to ${field.mapTo}.`)
+    }
+
     if (field.mapTo === PERSON_CONSENT_TARGET) {
       const purposes = field.consentPurposeIds ?? []
       if (field.type === 'notice' && (field.statement ?? '').trim().length === 0) {
@@ -224,7 +242,7 @@ export function findProblems(
           }
         }
       }
-    } else if (field.mapTo !== 'submission') {
+    } else if (!isRepeatableMapTarget(field.mapTo)) {
       if (seen.has(field.mapTo)) {
         byField.set(field.id, `Another field already maps to ${field.mapTo}.`)
       }
@@ -252,12 +270,12 @@ export function isUsable(problems: FieldListProblems): boolean {
 }
 
 /** The types a mapping can sensibly render as. */
-export function typeForTarget(target: FormFieldMapTarget, current: FormFieldType): FormFieldType {
-  if (target === PERSON_EMAIL_TARGET) return 'email'
-  if (target === PERSON_CONSENT_TARGET) {
-    return current === 'notice' ? 'notice' : 'consent'
-  }
-  return current === 'consent' || current === 'notice' ? 'text' : current
+export function typeForTarget(
+  target: FormFieldMapTarget,
+  current: FormFieldType,
+  customFieldDefinitions: readonly CustomFieldDefinitionRef[] = [],
+): FormFieldType {
+  return suggestedFormFieldType(target, customFieldDefinitions, current)
 }
 
 /**