@jini-ai/admin 0.4.5 → 0.4.6

package/dist/forms/react/components/FormSubmissionDetail.js

@@ -7,7 +7,7 @@ import { FormSubmissionDate } from "./FormSubmissionDate.js";
 import { formSubmissionRows } from '../../html-rules.js';
 export function FormSubmissionDetail({ formId, submissionId, onBack, onDeleted, useFormSubmissionDetailHook = useWiredFormSubmissionDetail, t, answerColumns = [], }, _optional = {}) {
     const formatDate = useFormSubmissionDate({});
-    const { submission, error, confirmOpen, deleting, requestDelete, cancelDelete, confirmDelete } = useFormSubmissionDetailHook({
+    const { submission, error, confirmOpen, deleting, requestDelete, cancelDelete, confirmDelete, fileUrl } = useFormSubmissionDetailHook({
         formId,
         submissionId,
         onDeleted,
@@ -22,7 +22,10 @@ export function FormSubmissionDetail({ formId, submissionId, onBack, onDeleted,
     // button sat right on top of the table and Delete sat right underneath it. Same
     // flex-column-plus-gap idiom `.field-group` already uses elsewhere for vertical rhythm,
     // rather than one-off margins on each button.
-    _jsxs("div", { className: "form-submission-detail", children: [_jsxs("button", { type: "button", className: "btn-secondary", onClick: onBack, "aria-label": t("Back to submissions"), ...agentHandle({ handle: "form-submission-back" }, { role: "link", label: "Back to this form's list of submissions" }), children: ["\u2190 ", t("Back")] }), error ? _jsx("div", { className: "notice error", children: error }) : null, _jsx("div", { className: "table-scroll", children: _jsx("table", { className: "list-table", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("th", { children: t("Submitted at") }), _jsx("td", { children: _jsx(FormSubmissionDate, { date: formatDate({ iso: submission.submittedAt }) }) })] }), _jsxs("tr", { children: [_jsx("th", { children: t("Source IP") }), _jsx("td", { children: submission.sourceIp })] }), formSubmissionRows({ data: submission.data, answerColumns }, { unknownFieldLabel: t("Unknown field") }).map(({ key, label, value }) => (_jsxs("tr", { children: [_jsx("th", { className: "jini-submission-field-label", children: label }), _jsx("td", { children: value })] }, key)))] }) }) }), _jsx("button", { type: "button", className: "btn-danger", disabled: deleting, onClick: requestDelete, ...agentHandle({ handle: "form-submission-delete" }, {
+    _jsxs("div", { className: "form-submission-detail", children: [_jsxs("button", { type: "button", className: "btn-secondary", onClick: onBack, "aria-label": t("Back to submissions"), ...agentHandle({ handle: "form-submission-back" }, { role: "link", label: "Back to this form's list of submissions" }), children: ["\u2190 ", t("Back")] }), error ? _jsx("div", { className: "notice error", children: error }) : null, _jsx("div", { className: "table-scroll", children: _jsx("table", { className: "list-table", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("th", { children: t("Submitted at") }), _jsx("td", { children: _jsx(FormSubmissionDate, { date: formatDate({ iso: submission.submittedAt }) }) })] }), _jsxs("tr", { children: [_jsx("th", { children: t("Source IP") }), _jsx("td", { children: submission.sourceIp })] }), formSubmissionRows({ data: submission.data, answerColumns }, { unknownFieldLabel: t("Unknown field") }).map(({ key, label, value, file }) => {
+                                const href = file ? fileUrl(file) : null;
+                                return (_jsxs("tr", { children: [_jsx("th", { className: "jini-submission-field-label", children: label }), _jsx("td", { children: href && file ? _jsx("a", { href: href, download: file.filename, ...agentHandle({ handle: `form-submission-file-${key}` }, { role: "link", label: `Download the uploaded file ${file.filename}` }), children: value }) : value })] }, key));
+                            })] }) }) }), _jsx("button", { type: "button", className: "btn-danger", disabled: deleting, onClick: requestDelete, ...agentHandle({ handle: "form-submission-delete" }, {
                     role: "button",
                     label: "Move this submission to the trash. Opens a confirmation dialog first.",
                 }), children: t("Delete submission") }), _jsx(ConfirmDialog, { open: confirmOpen, agentHandle: "form-submission-delete-confirm", title: t("Move to trash?"), body: _jsx("p", { children: t("It will disappear from this list. You can restore it from the Trash.") }), confirmLabel: t("Move to trash"), destructive: true, pending: deleting, onConfirm: confirmDelete, onCancel: cancelDelete })] }));

package/dist/forms/react/hooks/forms-view.hooks.d.ts

@@ -2,6 +2,7 @@ import type { ChangeEvent, MutableRefObject } from 'react';
 import { type FormDateLine } from '../../rules.js';
 import type { FormFieldsEditorController } from './use-form-fields-editor.hooks.js';
 import type { FieldAttributesDialogController } from './use-field-attributes-dialog.hooks.js';
+import type { FieldSettingsForm } from '../../field-settings.js';
 import type { FormSubmissionsController } from './use-form-submissions.hooks.js';
 import type { FormEditorFieldsBodyProps } from '../components/FormEditorFieldsBody.js';
 import type { AdminFormDefinition, AdminFormField } from '../../models.js';
@@ -18,14 +19,14 @@ export declare function useFormsListView({ forms, t, formatFormDates, toggleStat
         dates: FormDateLine[];
         menuLabel: string;
         menuItems: import("../../../react/index.js").RowMenuItem[];
-        id: string;
-        name: string;
         html?: string | undefined;
         status: import("../../../core/index.js").FormDefinitionStatus;
-        mode?: "builder" | "html" | undefined;
+        id: string;
+        slug: string;
         createdAt: string;
         updatedAt: string;
-        slug: string;
+        name: string;
+        mode?: "builder" | "html" | undefined;
         workspaceId?: string;
         fields: AdminFormField[];
         notify: import("../../models.js").AdminFormNotify;
@@ -47,6 +48,14 @@ export declare function useFormFieldsView({ fields, existingFieldIds, controller
         base: string;
         isExisting: boolean;
         displayName: string;
+        typeGroups: {
+            group: import("../../field-settings.js").FieldTypeGroup;
+            types: Array<{
+                type: string;
+                label: string;
+            }>;
+        }[];
+        hasLength: boolean;
         onId: (e: ChangeEvent<HTMLInputElement>) => void;
         onLabel: (e: ChangeEvent<HTMLInputElement>) => void;
         onType: (e: ChangeEvent<HTMLSelectElement>) => void;
@@ -65,6 +74,7 @@ export declare function useFieldAttributesView({ field, fieldIndex, controller,
 }, _optional?: {}): {
     displayName: string;
     onClose: () => void;
+    hasStyling: boolean;
     onClassName: (e: ChangeEvent<HTMLInputElement>) => void;
     rows: {
         handle: string;
@@ -76,6 +86,66 @@ export declare function useFieldAttributesView({ field, fieldIndex, controller,
         value: string;
     }[];
 };
+/** Bind the settings section's controls; which ones render comes from the field's registry kind. */
+export declare function useFieldSettingsView({ field, controller, t }: {
+    field: AdminFormField;
+    controller: FieldAttributesDialogController;
+    t: (key: string) => string;
+}, _optional?: {}): {
+    settings: import("../../field-settings.js").FieldSettings;
+    form: FieldSettingsForm;
+    boundsType: import("../../field-settings.js").FieldBounds;
+    boundsClass: string;
+    /** `<input type>` for a typed default, or `null` when the default is a box or a choice. */
+    defaultInputType: string | null;
+    defaultClass: string | undefined;
+    onPlaceholder: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+    onHelpText: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+    onDefaultText: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+    onMinLength: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+    onMaxLength: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+    onPattern: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+    onMin: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+    onMax: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+    onStep: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+    onMaxFileSize: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+    onDefaultChecked: (e: ChangeEvent<HTMLInputElement>) => void;
+    onDefaultChoice: (e: ChangeEvent<HTMLSelectElement>) => void;
+    addOption: () => void;
+    defaultChoices: {
+        key: number;
+        value: string;
+        label: string;
+    }[];
+    options: {
+        handle: string;
+        isFirst: boolean;
+        isLast: boolean;
+        isDefault: boolean;
+        labelAria: string;
+        valueAria: string;
+        defaultAria: string;
+        upAria: string;
+        downAria: string;
+        removeAria: string;
+        onLabel: (e: ChangeEvent<HTMLInputElement>) => void;
+        onValue: (e: ChangeEvent<HTMLInputElement>) => void;
+        onDefault: (e: ChangeEvent<HTMLInputElement>) => void;
+        onUp: () => void;
+        onDown: () => void;
+        onRemove: () => void;
+        _rowId: number;
+        value: string;
+        label: string;
+    }[];
+    uploads: {
+        checked: boolean;
+        handle: string;
+        onToggle: (e: ChangeEvent<HTMLInputElement>) => void;
+        value: string;
+        label: string;
+    }[];
+};
 export declare function useSubmissionsView({ controller }: {
     controller: FormSubmissionsController;
 }, _optional?: {}): {
@@ -84,8 +154,8 @@ export declare function useSubmissionsView({ controller }: {
     rows: {
         handle: string;
         view: () => void;
-        id: string;
         status?: "active" | "trash";
+        id: string;
         formDefinitionId: string;
         sourceIp: string;
         submittedAt: string;

package/dist/forms/react/hooks/forms-view.hooks.js

@@ -1,5 +1,6 @@
 import { buildAgentListHandles } from '@jini-ai/agentic';
 import { fieldDisplayName, formRowMenuItems, FORM_TABS } from '../../rules.js';
+import { fieldSettingsFor, fieldTypeGroups, labelChangePatch, retypeField, UPLOAD_CHOICES } from '../../field-settings.js';
 import { useFormsOptions, FormsPortsContext } from './FormsPorts.hooks.js';
 import { useContext } from 'react';
 /** Publication actions keep their original DOM at the host slot. */
@@ -32,9 +33,11 @@ export function useFormFieldsView({ fields, existingFieldIds, controller }, _opt
             controller.closeAttrsDialog();
         },
         rows: fields.map((field, index) => ({ field, index, base: handles[index], isExisting: existingFieldIds.includes(field.id), displayName: fieldDisplayName({ field, index }),
+            // Registry-driven: the type picker's groups and whether this type has a text length.
+            typeGroups: fieldTypeGroups({ current: field.type }), hasLength: fieldSettingsFor({ type: field.type }).length,
             onId: (e) => controller.updateField(index, { id: e.target.value }),
-            onLabel: (e) => controller.updateField(index, { label: e.target.value }),
-            onType: (e) => controller.updateField(index, { type: e.target.value }),
+            onLabel: (e) => controller.updateField(index, labelChangePatch({ field, label: e.target.value, isExisting: existingFieldIds.includes(field.id) })),
+            onType: (e) => controller.replaceField(index, retypeField({ field, type: e.target.value })),
             onRequired: (e) => controller.updateField(index, { required: e.target.checked }),
             onMaxLength: (e) => controller.updateField(index, { maxLength: e.target.value ? Number(e.target.value) : null }),
             ref: (el) => { controller.kebabRefs.current[index] = el; },
@@ -45,6 +48,7 @@ export function useFieldAttributesView({ field, fieldIndex, controller, onCancel
     const handles = buildAgentListHandles({ prefix: 'form-field-attrs-row', ids: controller.rows.map(row => String(row._rowId)) });
     return {
         displayName: fieldDisplayName({ field, index: fieldIndex }), onClose: () => onCancel(),
+        hasStyling: Boolean(field.className) || Object.keys(field.attributes ?? {}).length > 0,
         onClassName: (e) => controller.setClassName(e.target.value),
         rows: controller.rows.map((row, index) => ({ ...row, handle: handles[index],
             onName: (e) => controller.updateRow(row._rowId, { name: e.target.value }),
@@ -52,6 +56,46 @@ export function useFieldAttributesView({ field, fieldIndex, controller, onCancel
             onRemove: () => controller.removeRow(row._rowId), })),
     };
 }
+/** Bind the settings section's controls; which ones render comes from the field's registry kind. */
+export function useFieldSettingsView({ field, controller, t }, _optional = {}) {
+    const settings = fieldSettingsFor({ type: field.type });
+    const form = controller.settings;
+    const value = (key) => (e) => controller.setSettings({ [key]: e.target.value });
+    const optionHandles = buildAgentListHandles({ prefix: 'form-field-option', ids: form.options.map(row => String(row._rowId)) });
+    const numbered = (key, n) => t(key).replace('{n}', String(n));
+    const kind = settings.defaultKind;
+    const boundsType = settings.bounds ?? 'number';
+    return {
+        settings, form, boundsType,
+        boundsClass: settings.bounds === 'number' ? 'field-settings-num' : 'field-settings-compact',
+        /** `<input type>` for a typed default, or `null` when the default is a box or a choice. */
+        defaultInputType: kind === 'temporal' ? boundsType : kind === 'number' ? 'number' : kind === 'text' || kind === 'textarea' ? 'text' : null,
+        defaultClass: kind === 'number' || kind === 'temporal' ? 'field-settings-compact' : undefined,
+        onPlaceholder: value('placeholder'), onHelpText: value('helpText'), onDefaultText: value('defaultText'),
+        onMinLength: value('minLength'), onMaxLength: value('maxLength'), onPattern: value('pattern'),
+        onMin: value('min'), onMax: value('max'), onStep: value('step'), onMaxFileSize: value('maxFileSizeMb'),
+        onDefaultChecked: (e) => controller.setSettings({ defaultChecked: e.target.checked }),
+        onDefaultChoice: (e) => controller.toggleDefaultChoice(e.target.value, true, true),
+        addOption: () => controller.addOption(),
+        defaultChoices: form.options.filter(row => row.value).map(row => ({ key: row._rowId, value: row.value, label: row.label || row.value })),
+        options: form.options.map((row, index) => ({ ...row, handle: optionHandles[index],
+            isFirst: index === 0, isLast: index === form.options.length - 1,
+            // Multi-choice defaults are ticked per option; a single default uses one select instead.
+            isDefault: form.defaultChoices.includes(row.value),
+            labelAria: numbered('Option {n} label', index + 1), valueAria: numbered('Option {n} value', index + 1),
+            defaultAria: numbered('Option {n} selected by default', index + 1),
+            upAria: numbered('Move option {n} up', index + 1), downAria: numbered('Move option {n} down', index + 1),
+            removeAria: numbered('Remove option {n}', index + 1),
+            onLabel: (e) => controller.updateOption(row._rowId, { label: e.target.value }),
+            onValue: (e) => controller.updateOption(row._rowId, { value: e.target.value }),
+            onDefault: (e) => controller.toggleDefaultChoice(row.value, e.target.checked, false),
+            onUp: () => controller.moveOption(row._rowId, -1), onDown: () => controller.moveOption(row._rowId, 1),
+            onRemove: () => controller.removeOption(row._rowId), })),
+        uploads: UPLOAD_CHOICES.map(choice => ({ ...choice, checked: form.accept.includes(choice.value),
+            handle: `form-field-settings-accept-${choice.label.toLowerCase()}`,
+            onToggle: (e) => controller.toggleAccept(choice.value, e.target.checked) })),
+    };
+}
 export function useSubmissionsView({ controller }, _optional = {}) {
     const handles = buildAgentListHandles({ prefix: 'form-submission-view', ids: (controller.submissions ?? []).map(submission => submission.id) });
     return {

package/dist/forms/react/hooks/use-field-attributes-dialog.hooks.d.ts

@@ -1,5 +1,6 @@
 import type { AdminFormField } from "../../models.js";
 import { type AttrRow } from "../../rules.js";
+import { type FieldSettingsForm, type OptionRow } from "../../field-settings.js";
 /**
  * @file `FieldAttributesDialog`'s own state and submit action (per-field CSS classes + HTML
  * attributes), so the dialog in `FormEditor.tsx` is only markup.
@@ -20,6 +21,15 @@ export interface FieldAttributesDialogController {
     updateRow: (rowId: number, patch: Partial<AttrRow>) => void;
     removeRow: (rowId: number) => void;
     addRow: () => void;
+    /** The field type's builder settings draft (`field-settings.ts`). */
+    settings: FieldSettingsForm;
+    setSettings: (patch: Partial<FieldSettingsForm>) => void;
+    toggleDefaultChoice: (value: string, on: boolean, single: boolean) => void;
+    toggleAccept: (value: string, on: boolean) => void;
+    updateOption: (rowId: number, patch: Partial<Pick<OptionRow, "value" | "label">>) => void;
+    addOption: () => void;
+    removeOption: (rowId: number) => void;
+    moveOption: (rowId: number, offset: -1 | 1) => void;
     error: string | null;
     submit: (e: React.FormEvent) => void;
 }

package/dist/forms/react/hooks/use-field-attributes-dialog.hooks.js

@@ -1,9 +1,10 @@
 import { useController } from "../../../core/react/use-controller.js";
 import { createFieldAttributesDialogController } from "../../controllers/field-attributes-dialog.controller.js";
 import {} from "../../rules.js";
+import { settingsFormFromField } from "../../field-settings.js";
 export function useFieldAttributesDialog(props, _optional = {}) {
     const { controller: stateController, snapshot: stateSnapshot } = useController({ create: () => createFieldAttributesDialogController({ field: props.field }), dependencies: [] });
-    const state = stateSnapshot ?? { className: props.field.className ?? "", rows: [], error: null };
+    const state = stateSnapshot ?? { className: props.field.className ?? "", rows: [], settings: settingsFormFromField({ field: props.field }), error: null };
     const className = state.className;
     const setClassName = (value) => stateController?.update({ key: "className", value });
     const rows = state.rows;
@@ -11,12 +12,21 @@ export function useFieldAttributesDialog(props, _optional = {}) {
     function updateRow(rowId, patch) { stateController?.updateRow({ rowId, patch }); }
     function removeRow(rowId) { stateController?.removeRow({ rowId }); }
     function addRow() { stateController?.addRow({}); }
+    const settingsActions = {
+        setSettings: (patch) => stateController?.setSettings({ patch }),
+        toggleDefaultChoice: (value, on, single) => stateController?.toggleDefaultChoice({ value, on, single }),
+        toggleAccept: (value, on) => stateController?.toggleAccept({ value, on }),
+        updateOption: (rowId, patch) => stateController?.updateOption({ rowId, patch }),
+        addOption: () => stateController?.addOption({}),
+        removeOption: (rowId) => stateController?.removeOption({ rowId }),
+        moveOption: (rowId, offset) => stateController?.moveOption({ rowId, offset }),
+    };
     function submit(e) {
         e.preventDefault();
         const result = stateController?.submit({});
         if (result?.ok)
             props.onSave(result.patch);
     }
-    return { className, setClassName, rows, updateRow, removeRow, addRow, error, submit };
+    return { className, setClassName, rows, updateRow, removeRow, addRow, settings: state.settings, ...settingsActions, error, submit };
 }
 //# sourceMappingURL=use-field-attributes-dialog.hooks.js.map

package/dist/forms/react/hooks/use-form-editor.hooks.d.ts

@@ -96,6 +96,17 @@ export interface FormEditorController {
     onTabsKeyDown: (e: React.KeyboardEvent) => void;
     handleSave: () => void;
     handleStatusToggle: () => void;
+    /** Back with unsaved edits opens an app confirm modal instead of discarding them silently
+     *  (Chrome check, 2026-10-11). `onBack` routes through the injected navigation port;
+     *  only a dirty draft requires confirmation. */
+    leave: {
+        confirmOpen: boolean;
+        onBack: (event: {
+            preventDefault: () => void;
+        }) => void;
+        confirm: () => void;
+        cancel: () => void;
+    };
     /** Bound translator — see this file's own header for why it arrives via the hook rather than
      *  `FormEditor.tsx` calling `useAdminLocale()`/`FORMS_DICT` directly. */
     t: (key: string) => string;

package/dist/forms/react/hooks/use-form-editor.hooks.js

@@ -3,7 +3,9 @@ import { useFormsPorts, useFormsOptions } from "./FormsPorts.hooks.js";
 import { useController } from "../../../core/react/use-controller.js";
 import { createFormEditorController, initialFormEditorState } from "../../controllers/form-editor.controller.js";
 import { formHtmlEmbed, formAnswerColumns } from "../../html-rules.js";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
+import { useDirtyGuard } from "@jini-ai/ui/panel-kit";
+import { formEditorBaseline, formEditorDraft } from "../../form-editor-dirty.js";
 import { useFetchMutation, useFetchQuery } from "@jini-ai/ui/fetch-query";
 import { FORM_TABS, KEYS, existingFieldIdsOf, nextTabIndex, visibleFormEditorError } from "../../rules.js";
 export function useFormEditor(props, { clipboard } = {}) {
@@ -145,6 +147,26 @@ export function useFormEditor(props, { clipboard } = {}) {
             // already surfaced through statusMutation.error -> error below
         }
     }
+    // Same guard as the post and widget editors (reload/close prompt included); the in-app Back
+    // gets the admin's confirm modal rather than `confirmLeave`'s `window.confirm`.
+    const { isDirty } = useDirtyGuard({ current: formEditorDraft({ name, slug, fields, mode, html }), original: formEditorBaseline({ form, isNew }) });
+    const [leaveConfirmOpen, setLeaveConfirmOpen] = useState(false);
+    const leave = {
+        confirmOpen: leaveConfirmOpen,
+        onBack(event) {
+            event.preventDefault();
+            if (!isDirty) {
+                navigate("/forms");
+                return;
+            }
+            setLeaveConfirmOpen(true);
+        },
+        confirm() {
+            setLeaveConfirmOpen(false);
+            navigate("/forms");
+        },
+        cancel: () => setLeaveConfirmOpen(false),
+    };
     const saving = updateMutation.status === "pending" || createMutation.status === "pending" || statusMutation.status === "pending";
     const error = visibleFormEditorError({
         updateError: updateMutation.error,
@@ -175,7 +197,7 @@ export function useFormEditor(props, { clipboard } = {}) {
         isNew,
         form,
         mode, onModeChange, html, setHtml, copyEmbed, copyFeedback,
-        answerColumns: formAnswerColumns({ fields: form?.fields ?? [] }),
+        answerColumns: formAnswerColumns({ fields: form?.fields ?? [] }, { yes: t("Yes"), no: t("No") }),
         name,
         setName,
         slug,
@@ -192,6 +214,7 @@ export function useFormEditor(props, { clipboard } = {}) {
         onTabsKeyDown,
         handleSave,
         handleStatusToggle,
+        leave,
         t,
     };
 }

package/dist/forms/react/hooks/use-form-fields-editor.hooks.d.ts

@@ -24,6 +24,8 @@ export interface FormFieldsEditorController {
      *  callback in the view. */
     kebabRefs: React.MutableRefObject<Array<HTMLButtonElement | null>>;
     updateField: (index: number, patch: Partial<AdminFormField>) => void;
+    /** Replaces the whole field, so keys absent from `field` are dropped (a type change). */
+    replaceField: (index: number, field: AdminFormField) => void;
     addField: () => void;
     removeField: (index: number) => void;
 }

package/dist/forms/react/hooks/use-form-fields-editor.hooks.js

@@ -1,7 +1,7 @@
 import { useController } from "../../../core/react/use-controller.js";
 import { createFormFieldsEditorController, initialFormFieldsEditorState } from "../../controllers/form-fields-editor.controller.js";
 import { useRef } from "react";
-import { addFormField, removeFormField, updateFormField } from "../../rules.js";
+import { addFormField, removeFormField, replaceFormField, updateFormField } from "../../rules.js";
 export function useFormFieldsEditor(props, _optional = {}) {
     const { controller: stateController, snapshot: stateSnapshot } = useController({ create: () => createFormFieldsEditorController({}), dependencies: [] });
     const state = stateSnapshot ?? initialFormFieldsEditorState({});
@@ -17,6 +17,9 @@ export function useFormFieldsEditor(props, _optional = {}) {
     function updateField(index, patch) {
         props.onChange(updateFormField({ fields: props.fields, index, patch }));
     }
+    function replaceField(index, field) {
+        props.onChange(replaceFormField({ fields: props.fields, index, field }));
+    }
     function addField() {
         props.onChange(addFormField({ fields: props.fields }));
     }
@@ -29,6 +32,7 @@ export function useFormFieldsEditor(props, _optional = {}) {
         closeAttrsDialog,
         kebabRefs,
         updateField,
+        replaceField,
         addField,
         removeField,
     };

package/dist/forms/react/hooks/use-form-submission-detail.hooks.d.ts

@@ -48,6 +48,10 @@ export interface FormSubmissionDetailController {
      *  either way, so a failed delete doesn't leave the operator stuck behind it — the failure is
      *  still visible via `error` below. */
     confirmDelete: () => Promise<void>;
+    /** Download URL for a file answer, or `null` when the host wired no media path. */
+    fileUrl: (file: {
+        mediaId: string;
+    }) => string | null;
 }
 export declare function useFormSubmissionDetail(props: {
     port: AdminFormsPort;

package/dist/forms/react/hooks/use-form-submission-detail.hooks.js

@@ -71,6 +71,7 @@ export function useFormSubmissionDetail(props, _optional = {}) {
         requestDelete,
         cancelDelete,
         confirmDelete,
+        fileUrl: ({ mediaId }) => port.submissionFileUrl?.({ mediaId }) ?? null,
     };
 }
 export function useWiredFormSubmissionDetail(props, _optional = {}) {