@nextlyhq/plugin-form-builder 0.0.2-alpha.4 → 0.0.2-alpha.40

package/README.md

@@ -46,15 +46,14 @@ export default defineConfig({
 
 > A `formBuilderPlugin` default-instance shortcut is also exported for cases where no customization is needed. See [the plugin docs](https://nextlyhq.com/docs/plugins/form-builder) for the full options reference.
 
-## Admin styling
+## Admin components
 
-The plugin's admin UI requires three imports in your admin route page so the builder and submissions filter render correctly:
+The plugin's admin UI needs one import in your admin route page (a side effect
+that registers the builder and submissions views):
 
 ```tsx
 // app/admin/[[...params]]/page.tsx
 import "@nextlyhq/plugin-form-builder/admin";
-import "@nextlyhq/plugin-form-builder/styles/builder.css";
-import "@nextlyhq/plugin-form-builder/styles/submissions-filter.css";
 ```
 
 ## What this plugin adds
@@ -94,7 +93,7 @@ See the [Field types reference](https://nextlyhq.com/docs/plugins/form-builder#f
 - Server helpers: `submitForm`, `validateSubmission`, `getFormSubmissionStats`, `createFormConfig`, `validateFormConfig`, `assertValidFormConfig`
 - Export utilities: `exportToCSV`, `exportToJSON`, `exportAndDownload`, `downloadFile`, `generateExportFilename`
 - Collections: `formsCollection`, `submissionsCollection`
-- Type exports: `FormDocument`, `SubmissionDocument`, `FormSubmission`, `EmailConfig`, `WebhookConfig`, `WebhookEvent`, `FormFieldOption`, `SubmissionListProps`, `SubmissionDetailProps`
+- Type exports: `FormDocument`, `SubmissionDocument`, `FormSubmission`, `FormNotification`, `EmailConfig`, `WebhookConfig`, `WebhookEvent`, `FormFieldOption`
 
 ## Compatibility
 

package/dist/admin/index.d.ts

@@ -1,7 +1,7 @@
-import { ComponentPath } from '@nextlyhq/admin/lib/component-registry';
+import { ComponentPath } from '@nextlyhq/plugin-sdk/admin';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { i as FormField, p as FormFieldType } from '../index-C0kBvYjm.js';
-export { J as SubmissionDetail, t as SubmissionDetailProps, K as SubmissionList, u as SubmissionListProps } from '../index-C0kBvYjm.js';
+import { q as FormField, s as FormFieldTypeId, A as AnyFormField, b as FormSettings, v as FormNotification } from '../types-r8uBeB0u.js';
+import { FormFieldCatalogType, FieldTypeCatalogEntry } from 'nextly/field-catalog';
 import { ReactNode } from 'react';
 import 'nextly';
 
@@ -27,50 +27,85 @@ interface FormBuilderViewProps {
 }
 declare function FormBuilderView({ id, entryId, collection, collectionSlug, isCreating, initialData, onSave, onSuccess, onCancel, }: FormBuilderViewProps): react_jsx_runtime.JSX.Element;
 
-interface SubmissionsFilterProps {
-    /** Collection slug (should be "form-submissions") */
-    collectionSlug: string;
-    /** Collection configuration */
-    collection: Record<string, unknown>;
+interface SubmissionRow {
+    id: string;
+    form: string | {
+        id: string;
+        name?: string;
+    };
+    data: Record<string, unknown>;
+    status: string;
+    spamReason?: string | null;
+    notes?: string | null;
+    ipAddress?: string | null;
+    userAgent?: string | null;
+    submittedAt?: string | null;
+    editedAt?: string | null;
+    editedBy?: string | null;
 }
-/**
- * SubmissionsFilter - Filter submissions by form
- *
- * Displays a dropdown of all forms. When a form is selected,
- * updates the URL query params to filter the submissions list.
- */
-declare function SubmissionsFilter({ collectionSlug, }: SubmissionsFilterProps): React.ReactElement | null;
+interface FormOption {
+    id: string;
+    name: string;
+    fields: FormField[];
+}
+interface SubmissionsViewProps {
+    collectionSlug?: string;
+}
+declare function SubmissionsView({ collectionSlug }: SubmissionsViewProps): react_jsx_runtime.JSX.Element;
 
-/**
- * FieldLibrary — Right-sidebar field type palette
- *
- * Mirrors the Collection Builder's FieldPalette:
- * - Search bar at top
- * - Accordion categories (Basic / Advanced)
- * - Blue icon boxes with draggable rows
- * - Click or drag to add a field
- */
-declare function FieldLibrary(): react_jsx_runtime.JSX.Element;
+interface SubmissionSheetProps {
+    submission: SubmissionRow;
+    form: FormOption;
+    canUpdate: boolean;
+    onClose: () => void;
+    onPrev?: () => void;
+    onNext?: () => void;
+    onSave: (changes: Record<string, unknown>) => Promise<void>;
+}
+declare function SubmissionSheet({ submission, form, canUpdate, onClose, onPrev, onNext, onSave, }: SubmissionSheetProps): react_jsx_runtime.JSX.Element;
 
-interface FormCanvasProps {
-    fields: FormField[];
-    selectedFieldId: string | null;
-    onFieldSelect: (fieldName: string | null) => void;
-    onFieldDelete: (fieldName: string) => void;
+interface FieldCardsProps {
+    /**
+     * Form-surface types the host has NOT excluded (the plugin's field
+     * enable/disable option). `null` while the host configuration is still
+     * loading — the Add dialog waits rather than flashing the unfiltered set.
+     * Types outside this set stay renderable on existing fields but cannot be
+     * added.
+     */
+    enabledTypes: readonly FormFieldCatalogType[] | null;
+    /**
+     * Type ids the host disabled (`config.fields[type] === false`). Applied to
+     * plugin field types too, so the host exclude layer is not bypassed for
+     * contributed types.
+     */
+    disabledFieldTypes?: ReadonlySet<string>;
+    /** Creates a field of the given type and returns it (context helper). */
+    onAddField: (type: FormFieldTypeId) => void;
 }
-declare function FormCanvas({ fields, selectedFieldId, onFieldSelect, onFieldDelete, }: FormCanvasProps): react_jsx_runtime.JSX.Element;
+declare function FieldCards({ enabledTypes, disabledFieldTypes, onAddField, }: FieldCardsProps): react_jsx_runtime.JSX.Element;
+
+interface AddFieldDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /**
+     * The form surface's catalog — built-ins already filtered by the host's
+     * excludes plus any plugin field types that opted into the forms surface;
+     * `null` while the host configuration is still loading. `type` is the open
+     * `FormFieldTypeId` so a plugin entry shares this shape with the built-ins.
+     */
+    entries: readonly FieldTypeCatalogEntry<FormFieldTypeId>[] | null;
+    /** Called with the chosen type; the parent creates and selects the field. */
+    onAdd: (type: FormFieldTypeId) => void;
+}
+declare function AddFieldDialog({ open, onOpenChange, entries, onAdd, }: AddFieldDialogProps): react_jsx_runtime.JSX.Element;
 
 interface FieldEditorProps {
-    /** The field being edited */
-    field: FormField;
+    /** The field being edited (built-in or plugin-contributed). */
+    field: AnyFormField;
     /** All fields in the form (for conditional logic references) */
-    allFields: FormField[];
+    allFields: AnyFormField[];
     /** Callback when field is updated */
-    onUpdate: (updates: Partial<FormField>) => void;
-    /** Callback when field is deleted */
-    onDelete: () => void;
-    /** Callback when field is duplicated */
-    onDuplicate?: () => void;
+    onUpdate: (updates: Partial<AnyFormField>) => void;
 }
 /**
  * FieldEditor - Field properties configuration panel
@@ -91,268 +126,23 @@ interface FieldEditorProps {
  * />
  * ```
  */
-declare function FieldEditor({ field, allFields, onUpdate, onDelete, onDuplicate, }: FieldEditorProps): react_jsx_runtime.JSX.Element;
+declare function FieldEditor({ field, allFields, onUpdate }: FieldEditorProps): react_jsx_runtime.JSX.Element;
 
 interface FormPreviewProps {
-    /** Array of form fields to preview */
-    fields: FormField[];
+    /** Array of form fields to preview (built-in or plugin-contributed). */
+    fields: AnyFormField[];
     /** Form metadata */
     formData?: {
         name?: string;
         slug?: string;
         description?: string;
-        status?: string;
     };
 }
-/**
- * FormPreview - Visual form preview
- *
- * This is a stub component that shows a preview of the form.
- * The full implementation will include:
- * - Rendered form fields with proper styling
- * - Responsive preview modes (desktop, tablet, mobile)
- * - Theme preview options
- * - Conditional logic simulation
- *
- * @example
- * ```tsx
- * <FormPreview fields={fields} formData={formData} />
- * ```
- */
 declare function FormPreview({ fields, formData }: FormPreviewProps): react_jsx_runtime.JSX.Element;
 
-interface FormFieldListProps {
-    /**
-     * Array of form fields to display.
-     */
-    fields: FormField[];
-    /**
-     * Callback when fields are reordered via drag-and-drop.
-     * Receives the new array with fields in updated order.
-     */
-    onFieldsChange: (fields: FormField[]) => void;
-    /**
-     * Callback when a field is selected for editing.
-     * Receives the field name (unique identifier).
-     */
-    onEditField: (fieldName: string) => void;
-    /**
-     * Callback when a field should be deleted.
-     * Receives the field name (unique identifier).
-     */
-    onDeleteField: (fieldName: string) => void;
-    /**
-     * Currently selected field name for highlighting.
-     */
-    selectedFieldName?: string | null;
-    /**
-     * Whether the list is disabled (no interactions allowed).
-     * @default false
-     */
-    disabled?: boolean;
-}
-/**
- * FormFieldList provides a drag-and-drop sortable container for form fields.
- *
- * This component wraps fields with DndContext and SortableContext from @dnd-kit,
- * enabling drag-and-drop reordering with full keyboard accessibility.
- *
- * The component follows the pattern established by ArrayInput.tsx in the
- * Nextly admin package:
- * - PointerSensor with 8px activation distance (prevents accidental drags)
- * - KeyboardSensor with sortableKeyboardCoordinates (arrow key navigation)
- * - closestCenter collision detection
- * - verticalListSortingStrategy for vertical lists
- *
- * @example
- * ```tsx
- * <FormFieldList
- *   fields={formFields}
- *   onFieldsChange={setFormFields}
- *   onEditField={(name) => setSelectedField(name)}
- *   onDeleteField={(name) => handleDeleteField(name)}
- *   selectedFieldName={selectedField}
- * />
- * ```
- */
-declare function FormFieldList({ fields, onFieldsChange, onEditField, onDeleteField, selectedFieldName, disabled, }: FormFieldListProps): react_jsx_runtime.JSX.Element;
-
-interface SortableFieldRowProps {
-    /**
-     * The form field to display.
-     */
-    field: FormField;
-    /**
-     * Whether this row is currently selected for editing.
-     */
-    isSelected: boolean;
-    /**
-     * Callback when the row is clicked/selected.
-     */
-    onSelect: () => void;
-    /**
-     * Callback when the delete button is clicked.
-     */
-    onDelete: () => void;
-    /**
-     * Whether the row is disabled (no interactions allowed).
-     * @default false
-     */
-    disabled?: boolean;
-}
-/**
- * SortableFieldRow renders a single draggable field row in the form builder.
- *
- * Uses @dnd-kit's useSortable hook to enable drag-and-drop reordering.
- * The component displays:
- * - A drag handle (GripVertical icon) for reordering
- * - The field type icon
- * - The field label (or name as fallback) with required indicator
- * - The field type badge
- * - A delete button
- *
- * Visual feedback is provided during drag operations:
- * - Reduced opacity (50%)
- * - Primary color ring (2px)
- * - Elevated shadow
- * - Higher z-index
- *
- * @example
- * ```tsx
- * <SortableFieldRow
- *   field={field}
- *   isSelected={selectedFieldName === field.name}
- *   onSelect={() => setSelectedFieldName(field.name)}
- *   onDelete={() => handleDeleteField(field.name)}
- * />
- * ```
- */
-declare function SortableFieldRow({ field, isSelected, onSelect, onDelete, disabled, }: SortableFieldRowProps): react_jsx_runtime.JSX.Element;
-
-interface AddFieldButtonProps {
-    /**
-     * Callback when a new field is created.
-     * Receives the newly created FormField instance.
-     */
-    onAddField: (field: FormField) => void;
-    /**
-     * Whether the button is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Additional CSS class names for the button.
-     */
-    className?: string;
-}
-/**
- * AddFieldButton renders a button that opens a modal for selecting field types.
- *
- * When a field type is selected, a new field instance is created with default
- * configuration and passed to the onAddField callback. The modal automatically
- * closes after selection.
- *
- * @example
- * ```tsx
- * <AddFieldButton
- *   onAddField={(field) => {
- *     setFields([...fields, field]);
- *   }}
- * />
- * ```
- */
-declare function AddFieldButton({ onAddField, disabled, className, }: AddFieldButtonProps): react_jsx_runtime.JSX.Element;
-
-interface FieldEditorPanelProps {
-    /**
-     * The field being edited.
-     */
-    field: FormField;
-    /**
-     * All fields in the form (for references, e.g., conditional logic).
-     */
-    allFields: FormField[];
-    /**
-     * Callback when field properties are updated.
-     * Receives partial updates to merge with current field.
-     */
-    onUpdate: (updates: Partial<FormField>) => void;
-    /**
-     * Callback when the panel should be closed.
-     */
-    onClose: () => void;
-}
-/**
- * FieldEditorPanel - Right-side panel for editing field properties
- *
- * This component dynamically loads the appropriate field editor based on
- * the field type. Each field type has its own editor component that handles
- * the specific configuration options for that type.
- *
- * The panel displays:
- * - Header with field type icon, type label, and field label
- * - Close button to dismiss the panel
- * - Lazy-loaded editor content with loading skeleton
- *
- * @example
- * ```tsx
- * <FieldEditorPanel
- *   field={selectedField}
- *   allFields={allFields}
- *   onUpdate={(updates) => updateField(selectedField.name, updates)}
- *   onClose={() => setSelectedField(null)}
- * />
- * ```
- */
-declare function FieldEditorPanel({ field, allFields, onUpdate, onClose, }: FieldEditorPanelProps): react_jsx_runtime.JSX.Element;
-
-/** Form settings configuration */
-interface FormSettings {
-    /** Submit button text */
-    submitButtonText: string;
-    /** Show reset button */
-    showResetButton: boolean;
-    /** Reset button text */
-    resetButtonText: string;
-    /** Success message after submission */
-    confirmationMessage: string;
-    /** Redirect URL after submission (optional) */
-    redirectUrl?: string;
-    /** Enable honeypot spam protection */
-    honeypotEnabled: boolean;
-    /** Enable CAPTCHA */
-    captchaEnabled: boolean;
-    /** Store submissions in database */
-    storeSubmissions: boolean;
-    /** Limit submissions per user/IP */
-    submissionLimit?: number;
-}
-/** Email notification configuration */
-interface FormNotification {
-    /** Unique ID for this notification */
-    id: string;
-    /** Notification name */
-    name: string;
-    /** Whether this notification is enabled */
-    enabled: boolean;
-    /** ID of the email provider to use; undefined = system default */
-    providerId?: string;
-    /** Sender email override; undefined = use provider's configured address */
-    senderEmail?: string;
-    /** How the recipient address is determined */
-    recipientType: "static" | "field";
-    /** Recipient address: static email or a {{fieldName}} reference */
-    to: string;
-    /** CC email addresses */
-    cc: string[];
-    /** BCC email addresses */
-    bcc: string[];
-    /** Slug of the email template to use */
-    templateSlug?: string;
-}
 interface FormBuilderState {
     /** Form fields array */
-    fields: FormField[];
+    fields: AnyFormField[];
     /** Currently selected field ID (name) */
     selectedFieldId: string | null;
     /** Active tab: builder, preview, settings, or notifications */
@@ -374,11 +164,11 @@ interface FormBuilderState {
 }
 interface FormBuilderActions {
     /** Set all fields */
-    setFields: (fields: FormField[]) => void;
+    setFields: (fields: AnyFormField[]) => void;
     /** Add a new field */
-    addField: (field: FormField, index?: number) => void;
+    addField: (field: AnyFormField, index?: number) => void;
     /** Update a field by name */
-    updateField: (fieldName: string, updates: Partial<FormField>) => void;
+    updateField: (fieldName: string, updates: Partial<AnyFormField>) => void;
     /** Delete a field by name */
     deleteField: (fieldName: string) => void;
     /** Move a field from one index to another */
@@ -395,10 +185,14 @@ interface FormBuilderActions {
     updateSettings: (updates: Partial<FormSettings>) => void;
     /** Add a notification */
     addNotification: (notification: FormNotification) => void;
+    /** Duplicate a notification (the copy starts disabled) */
+    duplicateNotification: (id: string) => void;
     /** Update a notification */
     updateNotification: (id: string, updates: Partial<FormNotification>) => void;
     /** Delete a notification */
     deleteNotification: (id: string) => void;
+    /** Seed default notifications into an empty list without dirtying the form */
+    seedNotifications: (rules: FormNotification[]) => void;
     /** Mark form as saved (clears dirty flag) */
     markAsSaved: () => void;
 }
@@ -412,29 +206,34 @@ interface FormBuilderProviderProps {
         slug?: string;
         description?: string;
         status?: "draft" | "published" | "closed";
-        fields?: FormField[];
+        fields?: AnyFormField[];
         settings?: Partial<FormSettings>;
         notifications?: FormNotification[];
     };
     /** Child components */
     children: ReactNode;
 }
-/** Default form settings */
+/** Default form settings (the canonical defaults from the settings reader) */
 declare const DEFAULT_SETTINGS: FormSettings;
-/** Create a new email integration with default values */
+/** Create a new notification rule with default values */
 declare function createNotification(): FormNotification;
 /**
- * Generate a unique field name based on type and timestamp.
+ * Generate a readable unique field name: the type itself for the first
+ * field of that type, then a numeric suffix (`email`, `email_2`, ...).
+ * Names key submission data, so they should read like keys a developer
+ * would have chosen, not timestamps.
  */
-declare function generateFieldName(type: FormFieldType): string;
+declare function generateFieldName(type: FormFieldTypeId, existingNames?: readonly string[]): string;
 /**
- * Generate a human-readable label from field type.
+ * Generate a human-readable label from field type, using the shared catalog
+ * so a new field's default label matches what the picker called the type. A
+ * plugin type not in the built-in catalog falls back to a title-cased id.
  */
-declare function generateFieldLabel(type: FormFieldType): string;
+declare function generateFieldLabel(type: FormFieldTypeId): string;
 /**
  * Create a new field from a field type with default values.
  */
-declare function createFieldFromType(type: FormFieldType): FormField;
+declare function createFieldFromType(type: FormFieldTypeId, existingNames?: readonly string[]): AnyFormField;
 /**
  * FormBuilderProvider - Provides form builder state to child components
  *
@@ -487,24 +286,32 @@ declare function useFormBuilder(): FormBuilderContextValue;
  */
 declare function useOptionalFormBuilder(): FormBuilderContextValue | null;
 
-/**
- * FormSettingsTab - Form settings configuration panel
- *
- * Refined for Antigravity standard:
- * - Two-column layout for better space utilization.
- * - Title Case headings with improved hierarchy.
- * - Robust state management for action tabs.
- */
-declare function FormSettingsTab(): react_jsx_runtime.JSX.Element;
+interface SpamDefaults {
+    honeypot?: boolean;
+    recaptchaEnabled?: boolean;
+}
+interface FormSettingsTabProps {
+    /** Plugin-level spam defaults (from builder-config); null while loading. */
+    spamDefaults: SpamDefaults | null;
+}
+declare function FormSettingsTab({ spamDefaults }: FormSettingsTabProps): react_jsx_runtime.JSX.Element;
 
+/** Host-level notification defaults surfaced by the builder-config route. */
+interface NotificationDefaults {
+    defaultFrom?: string;
+    defaultToEmail?: string;
+}
+interface FormNotificationsTabProps {
+    /** `null` while the builder-config request is still settling. */
+    defaults: NotificationDefaults | null;
+}
 /**
- * FormNotificationsTab - Email integrations configuration
+ * FormNotificationsTab - the form's notification rules.
  *
- * Allows users to configure email integrations that trigger when a form is
- * submitted. Each integration references an existing email provider and
- * template rather than duplicating provider credentials.
+ * Each rule references an existing email provider and template rather than
+ * duplicating provider credentials or embedding a second template editor.
  */
-declare function FormNotificationsTab(): react_jsx_runtime.JSX.Element;
+declare function FormNotificationsTab({ defaults }: FormNotificationsTabProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Form Builder Admin Components
@@ -526,22 +333,7 @@ declare function FormNotificationsTab(): react_jsx_runtime.JSX.Element;
 
 /** Component path for FormBuilderView */
 declare const FORM_BUILDER_VIEW_PATH: ComponentPath;
-/** Component path for SubmissionsFilter */
-declare const SUBMISSIONS_FILTER_PATH: ComponentPath;
-/**
- * Register Form Builder admin components with the Nextly admin panel.
- *
- * @deprecated This function is no longer needed. Components are auto-registered
- * when the admin detects the Form Builder plugin's component paths in collection configs.
- *
- * @example
- * ```typescript
- * // No manual registration needed! Just add the plugin to your config:
- * export default defineConfig({
- *   plugins: [formBuilderPlugin.plugin],
- * });
- * ```
- */
-declare function registerFormBuilderAdminComponents(): void;
+/** Component path for SubmissionsView */
+declare const SUBMISSIONS_VIEW_PATH: ComponentPath;
 
-export { AddFieldButton, type AddFieldButtonProps, DEFAULT_SETTINGS, FORM_BUILDER_VIEW_PATH, FieldEditor, FieldEditorPanel, type FieldEditorPanelProps, type FieldEditorProps, FieldLibrary, type FormBuilderActions, type FormBuilderContextValue, FormBuilderProvider, type FormBuilderProviderProps, type FormBuilderState, FormBuilderView, type FormBuilderViewProps, FormCanvas, type FormCanvasProps, FormFieldList, type FormFieldListProps, type FormNotification, FormNotificationsTab, FormPreview, type FormPreviewProps, type FormSettings, FormSettingsTab, SUBMISSIONS_FILTER_PATH, SortableFieldRow, type SortableFieldRowProps, SubmissionsFilter, type SubmissionsFilterProps, createFieldFromType, createNotification, generateFieldLabel, generateFieldName, registerFormBuilderAdminComponents, useFormBuilder, useOptionalFormBuilder };
+export { AddFieldDialog, type AddFieldDialogProps, DEFAULT_SETTINGS, FORM_BUILDER_VIEW_PATH, FieldCards, type FieldCardsProps, FieldEditor, type FieldEditorProps, type FormBuilderActions, type FormBuilderContextValue, FormBuilderProvider, type FormBuilderProviderProps, type FormBuilderState, FormBuilderView, type FormBuilderViewProps, FormNotification, FormNotificationsTab, FormPreview, type FormPreviewProps, FormSettings, FormSettingsTab, SUBMISSIONS_VIEW_PATH, SubmissionSheet, SubmissionsView, createFieldFromType, createNotification, generateFieldLabel, generateFieldName, useFormBuilder, useOptionalFormBuilder };