@jini-ai/admin 0.4.5 → 0.4.6

package/dist/forms/html-rules.d.ts

@@ -3,13 +3,44 @@ export interface FormAnswerColumn {
     key: string;
     header: string;
     cell: (submission: AdminFormSubmission) => string;
+    /** Formats one stored answer for this field; detail rows reuse it so they match the table. */
+    format?: (value: unknown) => string;
 }
-/** Persisted descriptors, including those derived from HTML, are the submission table's columns. */
+/** Display options for answers: translated boolean labels and the date-formatting locale (default: runtime's). */
+export type FormAnswerDisplay = {
+    yes?: string;
+    no?: string;
+    locale?: string;
+};
+/** Persisted descriptors, including those derived from HTML, supply column headers, choice labels and field types. */
 export declare function formAnswerColumns({ fields }: {
     fields: readonly AdminFormField[];
-}, _optional?: {}): FormAnswerColumn[];
+}, display?: FormAnswerDisplay): FormAnswerColumn[];
+/** The stored shape of a file-field answer (`FormFileReference` in `@jini-ai/cms/forms`). */
+export interface FormAnswerFile {
+    mediaId: string;
+    filename: string;
+    byteSize?: number;
+}
+/** Narrows a stored answer to an uploaded-file reference.
+ * @complexity O(1). */
+export declare function formAnswerFile({ value }: {
+    value: unknown;
+}, _optional?: {}): FormAnswerFile | null;
+/** One answer as display text. Multi-choice answers are arrays and file answers are objects;
+ * `String()` turned those into `a,b` and `[object Object]` (2026-10-11).
+ * Options resolve stored choice values to visitor-facing labels; removed options retain raw values.
+ * Booleans read Yes/No and date/time/datetime answers read in the locale's short form instead of
+ * `true` and `2026-11-02T10:15` (2026-10-11); stored data is unchanged.
+ * @complexity O(n * (o + 1)) time for n answer items and o options; O(n) output space, no I/O. */
+export declare function formatFormAnswer({ value, options, type }: {
+    value: unknown;
+    options?: AdminFormField["options"];
+    type?: string | undefined;
+}, display?: FormAnswerDisplay): string;
 /** Detail rows reuse the table's persisted field labels, including HTML-derived descriptors.
  * Removed fields retain their answers with a plain fallback instead of exposing their IDs.
+ * A file answer also carries its reference so the view can link the download.
  * @complexity O(c + a) time and space for c columns and a submitted answers; no I/O.
  */
 export declare function formSubmissionRows({ data, answerColumns }: {
@@ -21,8 +52,15 @@ export declare function formSubmissionRows({ data, answerColumns }: {
     key: string;
     label: string;
     value: string;
+    file: FormAnswerFile | null;
 }>;
-/** Editable form BODY only: the server supplies the transport and spam-protection wrapper. */
+/**
+ * Editable form BODY only: the server supplies the transport and spam-protection wrapper. Each
+ * field's markup follows its registry kind (`tel` for phone, a `<select>` with its options, radio
+ * and checkbox groups, `role="switch"` for a toggle), so switching to HTML mode keeps every field
+ * type; the CMS derives the same types back from this markup on save.
+ * @complexity O(f + o) for fields and their options; no I/O.
+ */
 export declare function formHtmlStarter({ fields }: {
     fields: readonly AdminFormField[];
 }, { submitLabel }?: {

package/dist/forms/html-rules.js

@@ -1,31 +1,132 @@
-/** Persisted descriptors, including those derived from HTML, are the submission table's columns. */
-export function formAnswerColumns({ fields }, _optional = {}) {
-    return fields.map((field) => ({
-        key: `answer:${field.id}`,
-        header: field.label,
-        cell: (submission) => submission.data[field.id] === undefined ? "" : String(submission.data[field.id]),
-    }));
+import { FIELD_TYPE_REGISTRY } from "@jini-ai/cms/forms";
+/** Persisted descriptors, including those derived from HTML, supply column headers, choice labels and field types. */
+export function formAnswerColumns({ fields }, display = {}) {
+    return fields.map((field) => {
+        const format = (value) => formatFormAnswer({ value, options: field.options, type: field.type }, display);
+        return { key: `answer:${field.id}`, header: field.label, cell: (submission) => format(submission.data[field.id]), format };
+    });
+}
+/** Narrows a stored answer to an uploaded-file reference.
+ * @complexity O(1). */
+export function formAnswerFile({ value }, _optional = {}) {
+    if (typeof value !== "object" || value === null || Array.isArray(value))
+        return null;
+    const { mediaId, filename, byteSize } = value;
+    if (typeof mediaId !== "string" || typeof filename !== "string")
+        return null;
+    return { mediaId, filename, ...(typeof byteSize === "number" ? { byteSize } : {}) };
+}
+/** One answer as display text. Multi-choice answers are arrays and file answers are objects;
+ * `String()` turned those into `a,b` and `[object Object]` (2026-10-11).
+ * Options resolve stored choice values to visitor-facing labels; removed options retain raw values.
+ * Booleans read Yes/No and date/time/datetime answers read in the locale's short form instead of
+ * `true` and `2026-11-02T10:15` (2026-10-11); stored data is unchanged.
+ * @complexity O(n * (o + 1)) time for n answer items and o options; O(n) output space, no I/O. */
+export function formatFormAnswer({ value, options, type }, display = {}) {
+    if (value === undefined || value === null)
+        return "";
+    if (Array.isArray(value))
+        return value.map(item => formatFormAnswer({ value: item, options, type }, display)).join(", ");
+    if (typeof value === "boolean")
+        return value ? display.yes ?? "Yes" : display.no ?? "No";
+    if (typeof value === "string" && type !== undefined && type in TEMPORAL_STYLES)
+        return formatTemporal({ value, type }, display);
+    if (typeof value === "string")
+        return options?.find(option => option.value === value)?.label ?? value;
+    const file = formAnswerFile({ value });
+    if (file)
+        return file.byteSize === undefined ? file.filename : `${file.filename} (${formatByteSize({ bytes: file.byteSize })})`;
+    return typeof value === "object" ? JSON.stringify(value) : String(value);
+}
+const TEMPORAL_STYLES = {
+    date: { dateStyle: "medium" },
+    time: { timeStyle: "short" },
+    datetime: { dateStyle: "medium", timeStyle: "short" },
+};
+const TEMPORAL_VALUE = /^(?:(\d{4})-(\d{2})-(\d{2}))?T?(?:(\d{2}):(\d{2})(?::(\d{2}))?)?$/;
+/** Stored temporal answers are zone-less wall-clock values, so they format in UTC to show exactly
+ * what the visitor entered; unparseable values stay raw. */
+function formatTemporal({ value, type }, { locale }) {
+    const match = TEMPORAL_VALUE.exec(value);
+    if (!match || (match[1] === undefined && match[4] === undefined))
+        return value;
+    const [, y = "1970", mo = "01", d = "01", h = "00", mi = "00", sec = "00"] = match;
+    const date = new Date(Date.UTC(Number(y), Number(mo) - 1, Number(d), Number(h), Number(mi), Number(sec)));
+    return new Intl.DateTimeFormat(locale, { ...TEMPORAL_STYLES[type], timeZone: "UTC" }).format(date);
+}
+function formatByteSize({ bytes }) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${Math.round(bytes / 1024)} KB`;
+    return `${Math.round((bytes / 1024 / 1024) * 10) / 10} MB`;
 }
 /** Detail rows reuse the table's persisted field labels, including HTML-derived descriptors.
  * Removed fields retain their answers with a plain fallback instead of exposing their IDs.
+ * A file answer also carries its reference so the view can link the download.
  * @complexity O(c + a) time and space for c columns and a submitted answers; no I/O.
  */
 export function formSubmissionRows({ data, answerColumns }, { unknownFieldLabel = "Unknown field" } = {}) {
-    const labels = new Map(answerColumns.map(column => [column.key, column.header]));
-    return Object.entries(data).map(([key, value]) => ({
-        key, label: labels.get(`answer:${key}`)?.trim() || unknownFieldLabel, value: String(value),
-    }));
+    const columns = new Map(answerColumns.map(column => [column.key, column]));
+    return Object.entries(data).map(([key, value]) => {
+        const column = columns.get(`answer:${key}`);
+        const formatted = column?.format ? column.format(value) : formatFormAnswer({ value });
+        return { key, label: column?.header.trim() || unknownFieldLabel, value: formatted, file: formAnswerFile({ value }) };
+    });
 }
 function escapeHtml(value) {
     return value.replace(/[&<>"']/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[char]);
 }
-/** Editable form BODY only: the server supplies the transport and spam-protection wrapper. */
+const kindOf = (type) => Object.hasOwn(FIELD_TYPE_REGISTRY, type) ? FIELD_TYPE_REGISTRY[type] : { control: "input", htmlType: "text" };
+const isDefault = (field, value) => Array.isArray(field.default) ? field.default.includes(value) : field.default === value;
+/** Name, required and the stored constraints, as authored HTML attributes the CMS reads back. */
+function starterAttributes(field, kind) {
+    const constraints = [
+        ["placeholder", kind.control === "select" ? undefined : field.placeholder], ["minlength", field.minLength], ["maxlength", field.maxLength],
+        ["pattern", field.pattern], ["min", field.min], ["max", field.max], ["step", field.step], ["accept", field.accept?.join(",")],
+    ];
+    return `name="${escapeHtml(field.id)}"${field.required ? " required" : ""}` +
+        constraints.filter(([, value]) => value != null && value !== "").map(([name, value]) => ` ${name}="${escapeHtml(String(value))}"`).join("");
+}
+/** One field's starter markup; every control comes from the registry kind, as the public render does. */
+function starterField(field) {
+    const kind = kindOf(field.type);
+    const label = escapeHtml(field.label);
+    const attrs = starterAttributes(field, kind);
+    const options = field.options ?? [];
+    if (kind.control === "group") {
+        // One box per option under a shared name; the CMS collects them back into this choice field.
+        // Native `required` on every checkbox would demand ALL of them, so a checkbox group leaves it
+        // off (the server still enforces one-or-more); a radio group's `required` means "pick one".
+        const boxAttrs = kind.multiple ? starterAttributes({ ...field, required: false }, kind) : attrs;
+        const boxes = options.map((option) => `  <label><input type="${kind.htmlType}" ${boxAttrs} value="${escapeHtml(option.value)}"${isDefault(field, option.value) ? " checked" : ""}> ${escapeHtml(option.label)}</label>`);
+        return `<fieldset>\n  <legend>${label}</legend>\n${boxes.join("\n")}\n</fieldset>`;
+    }
+    if (kind.control === "select") {
+        const empty = kind.multiple ? [] : [`    <option value="">${escapeHtml(field.placeholder ?? "Choose an option")}</option>`];
+        const choices = options.map((option) => `    <option value="${escapeHtml(option.value)}"${isDefault(field, option.value) ? " selected" : ""}>${escapeHtml(option.label)}</option>`);
+        return `<label>${label}\n  <select ${attrs}${kind.multiple ? " multiple" : ""}>\n${[...empty, ...choices].join("\n")}\n  </select>\n</label>`;
+    }
+    if (kind.control === "textarea")
+        return `<label>${label}\n  <textarea ${attrs}></textarea>\n</label>`;
+    if (kind.htmlType === "hidden")
+        return `<input type="hidden" ${attrs} value="${escapeHtml(String(field.default ?? ""))}" aria-label="${label}">`;
+    if (kind.htmlType === "checkbox") {
+        const value = field.checkboxValue !== undefined ? ` value="${escapeHtml(field.checkboxValue)}"` : "";
+        const checked = field.default === true || (field.checkboxValue !== undefined && field.default === field.checkboxValue) ? " checked" : "";
+        return `<label><input type="checkbox"${field.type === "toggle" ? ' role="switch"' : ""} ${attrs}${value}${checked}> ${label}</label>`;
+    }
+    return `<label>${label}\n  <input type="${kind.htmlType}" ${attrs}>\n</label>`;
+}
+/**
+ * Editable form BODY only: the server supplies the transport and spam-protection wrapper. Each
+ * field's markup follows its registry kind (`tel` for phone, a `<select>` with its options, radio
+ * and checkbox groups, `role="switch"` for a toggle), so switching to HTML mode keeps every field
+ * type; the CMS derives the same types back from this markup on save.
+ * @complexity O(f + o) for fields and their options; no I/O.
+ */
 export function formHtmlStarter({ fields }, { submitLabel = "Send" } = {}) {
-    return fields.map((field) => {
-        const attrs = `name="${escapeHtml(field.id)}"${field.required ? " required" : ""}${field.maxLength != null ? ` maxlength="${field.maxLength}"` : ""}`;
-        const control = field.type === "textarea" ? `<textarea ${attrs}></textarea>` : `<input type="${field.type}" ${attrs}>`;
-        return `<label>${escapeHtml(field.label)}\n  ${control}\n</label>`;
-    }).join("\n\n") + `\n\n<button type="submit">${escapeHtml(submitLabel)}</button>`;
+    return fields.map(starterField).join("\n\n") + `\n\n<button type="submit">${escapeHtml(submitLabel)}</button>`;
 }
 export function formHtmlEmbed({ slug }, _optional = {}) {
     const config = JSON.stringify({ type: "form", id: slug, mode: "html" }).replace(/'/g, "&#39;");

package/dist/forms/messages.en.d.ts

@@ -59,6 +59,8 @@ export declare const formsMessagesEn: {
     readonly "Load more": "Load more";
     readonly "Loading\u2026": "Loading…";
     readonly "No submissions yet.": "No submissions yet.";
+    readonly Yes: "Yes";
+    readonly No: "No";
     readonly "Create form": "Create form";
     readonly Form: "Form";
     readonly "Configure a new form's fields.": "Configure a new form's fields.";
@@ -95,6 +97,76 @@ export declare const formsMessagesEn: {
     readonly "failed to load submission": "failed to load submission";
     readonly "delete failed": "delete failed";
     readonly "Unknown field": "Unknown field";
+    readonly "Short text": "Short text";
+    readonly Paragraph: "Paragraph";
+    readonly Email: "Email";
+    readonly Phone: "Phone";
+    readonly "Website address": "Website address";
+    readonly Number: "Number";
+    readonly Slider: "Slider";
+    readonly Date: "Date";
+    readonly Time: "Time";
+    readonly "Date and time": "Date and time";
+    readonly Dropdown: "Dropdown";
+    readonly "Multi-select list": "Multi-select list";
+    readonly "Radio buttons": "Radio buttons";
+    readonly Checkbox: "Checkbox";
+    readonly Checkboxes: "Checkboxes";
+    readonly "Toggle switch": "Toggle switch";
+    readonly "File upload": "File upload";
+    readonly "Hidden value": "Hidden value";
+    readonly Text: "Text";
+    readonly Choices: "Choices";
+    readonly "Numbers and dates": "Numbers and dates";
+    readonly Other: "Other";
+    readonly "Field settings \u2014": "Field settings —";
+    readonly "Settings for field \"{name}\"": "Settings for field \"{name}\"";
+    readonly "CSS classes and HTML attributes": "CSS classes and HTML attributes";
+    readonly Required: "Required";
+    readonly Settings: "Settings";
+    readonly Placeholder: "Placeholder";
+    readonly "Help text": "Help text";
+    readonly "Shown under the field and read out by screen readers.": "Shown under the field and read out by screen readers.";
+    readonly Options: "Options";
+    readonly "The label is what visitors see. The value is what the submission stores; it follows the label until you edit it.": "The label is what visitors see. The value is what the submission stores; it follows the label until you edit it.";
+    readonly "Option {n} label": "Option {n} label";
+    readonly "Option {n} value": "Option {n} value";
+    readonly "Option {n} selected by default": "Option {n} selected by default";
+    readonly "Move option {n} up": "Move option {n} up";
+    readonly "Move option {n} down": "Move option {n} down";
+    readonly "Remove option {n}": "Remove option {n}";
+    readonly "Add option": "Add option";
+    readonly Default: "Default";
+    readonly "Checked by default": "Checked by default";
+    readonly None: "None";
+    readonly Length: "Length";
+    readonly "Min length": "Min length";
+    readonly Min: "Min";
+    readonly Max: "Max";
+    readonly Pattern: "Pattern";
+    readonly "Optional. The whole answer must match it, e.g. [0-9]+ for digits only. Groups, | and repeating more than once are not supported.": "Optional. The whole answer must match it, e.g. [0-9]+ for digits only. Groups, | and repeating more than once are not supported.";
+    readonly Range: "Range";
+    readonly Step: "Step";
+    readonly Files: "Files";
+    readonly "Leave all unticked to accept every safe type: images, video and PDF.": "Leave all unticked to accept every safe type: images, video and PDF.";
+    readonly Images: "Images";
+    readonly Videos: "Videos";
+    readonly PDF: "PDF";
+    readonly "Max size (MB)": "Max size (MB)";
+    readonly "Length must be a whole number.": "Length must be a whole number.";
+    readonly "Minimum must not be above maximum.": "Minimum must not be above maximum.";
+    readonly "That pattern isn't supported.": "That pattern isn't supported.";
+    readonly "Enter numbers for min, max and step.": "Enter numbers for min, max and step.";
+    readonly "Step must be above 0.": "Step must be above 0.";
+    readonly "Add at least one option.": "Add at least one option.";
+    readonly "Each option needs a label and a unique value.": "Each option needs a label and a unique value.";
+    readonly "Default must be a number.": "Default must be a number.";
+    readonly "Max size must be up to 10 MB.": "Max size must be up to 10 MB.";
+    readonly "Discard unsaved changes?": "Discard unsaved changes?";
+    readonly "Your changes to this form have not been saved.": "Your changes to this form have not been saved.";
+    readonly "Discard changes": "Discard changes";
+    readonly "Keep editing": "Keep editing";
+    readonly "Classes are unrestricted, e.g. Tailwind md:col-span-2. Attribute names must be aria-*, data-* or a safe layout attribute; event handlers like onclick are rejected.": "Classes are unrestricted, e.g. Tailwind md:col-span-2. Attribute names must be aria-*, data-* or a safe layout attribute; event handlers like onclick are rejected.";
 };
 /** Host translators may replace any key; the default preserves the original English bytes. */
 export declare const translateForms: FormsTranslator;

package/dist/forms/messages.en.js

@@ -58,6 +58,8 @@ export const formsMessagesEn = {
     "Load more": "Load more",
     "Loading…": "Loading…",
     "No submissions yet.": "No submissions yet.",
+    "Yes": "Yes",
+    "No": "No",
     "Create form": "Create form",
     "Form": "Form",
     "Configure a new form's fields.": "Configure a new form's fields.",
@@ -94,6 +96,77 @@ export const formsMessagesEn = {
     "failed to load submission": "failed to load submission",
     "delete failed": "delete failed",
     "Unknown field": "Unknown field",
+    // Field builder settings for the registry field types (2026-10-11).
+    "Short text": "Short text",
+    "Paragraph": "Paragraph",
+    "Email": "Email",
+    "Phone": "Phone",
+    "Website address": "Website address",
+    "Number": "Number",
+    "Slider": "Slider",
+    "Date": "Date",
+    "Time": "Time",
+    "Date and time": "Date and time",
+    "Dropdown": "Dropdown",
+    "Multi-select list": "Multi-select list",
+    "Radio buttons": "Radio buttons",
+    "Checkbox": "Checkbox",
+    "Checkboxes": "Checkboxes",
+    "Toggle switch": "Toggle switch",
+    "File upload": "File upload",
+    "Hidden value": "Hidden value",
+    "Text": "Text",
+    "Choices": "Choices",
+    "Numbers and dates": "Numbers and dates",
+    "Other": "Other",
+    "Field settings —": "Field settings —",
+    "Settings for field \"{name}\"": "Settings for field \"{name}\"",
+    "CSS classes and HTML attributes": "CSS classes and HTML attributes",
+    "Required": "Required",
+    "Settings": "Settings",
+    "Placeholder": "Placeholder",
+    "Help text": "Help text",
+    "Shown under the field and read out by screen readers.": "Shown under the field and read out by screen readers.",
+    "Options": "Options",
+    "The label is what visitors see. The value is what the submission stores; it follows the label until you edit it.": "The label is what visitors see. The value is what the submission stores; it follows the label until you edit it.",
+    "Option {n} label": "Option {n} label",
+    "Option {n} value": "Option {n} value",
+    "Option {n} selected by default": "Option {n} selected by default",
+    "Move option {n} up": "Move option {n} up",
+    "Move option {n} down": "Move option {n} down",
+    "Remove option {n}": "Remove option {n}",
+    "Add option": "Add option",
+    "Default": "Default",
+    "Checked by default": "Checked by default",
+    "None": "None",
+    "Length": "Length",
+    "Min length": "Min length",
+    "Min": "Min",
+    "Max": "Max",
+    "Pattern": "Pattern",
+    "Optional. The whole answer must match it, e.g. [0-9]+ for digits only. Groups, | and repeating more than once are not supported.": "Optional. The whole answer must match it, e.g. [0-9]+ for digits only. Groups, | and repeating more than once are not supported.",
+    "Range": "Range",
+    "Step": "Step",
+    "Files": "Files",
+    "Leave all unticked to accept every safe type: images, video and PDF.": "Leave all unticked to accept every safe type: images, video and PDF.",
+    "Images": "Images",
+    "Videos": "Videos",
+    "PDF": "PDF",
+    "Max size (MB)": "Max size (MB)",
+    "Length must be a whole number.": "Length must be a whole number.",
+    "Minimum must not be above maximum.": "Minimum must not be above maximum.",
+    "That pattern isn't supported.": "That pattern isn't supported.",
+    "Enter numbers for min, max and step.": "Enter numbers for min, max and step.",
+    "Step must be above 0.": "Step must be above 0.",
+    "Add at least one option.": "Add at least one option.",
+    "Each option needs a label and a unique value.": "Each option needs a label and a unique value.",
+    "Default must be a number.": "Default must be a number.",
+    "Max size must be up to 10 MB.": "Max size must be up to 10 MB.",
+    "Discard unsaved changes?": "Discard unsaved changes?",
+    "Your changes to this form have not been saved.": "Your changes to this form have not been saved.",
+    "Discard changes": "Discard changes",
+    "Keep editing": "Keep editing",
+    "Classes are unrestricted, e.g. Tailwind md:col-span-2. Attribute names must be aria-*, data-* or a safe layout attribute; event handlers like onclick are rejected.": "Classes are unrestricted, e.g. Tailwind md:col-span-2. Attribute names must be aria-*, data-* or a safe layout attribute; event handlers like onclick are rejected.",
 };
 /** Host translators may replace any key; the default preserves the original English bytes. */
 export const translateForms = (key, vars = {}) => {

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFieldAttributesView } from "../hooks/forms-view.hooks.js";
 import { Dialog } from '@jini-ai/ui-kit/react';
-import { SeeMore } from '@jini-ai/ui/admin-widgets';
+import { InfoTip } from '@jini-ai/ui/admin-widgets';
 import { agentHandle } from '@jini-ai/agentic';
 import { ATTRIBUTE_NAME_SUGGESTIONS } from '../../rules.js';
 import { useFieldAttributesDialog } from '../hooks/use-field-attributes-dialog.hooks.js';
+import { FieldSettingsSection } from './FieldSettingsSection.js';
 export function FieldAttributesDialog({ field, fieldIndex, onSave, onCancel, useFieldAttributesDialogHook = useFieldAttributesDialog, t, }, _optional = {}) {
     const controller = useFieldAttributesDialogHook({
         field,
@@ -17,26 +18,26 @@ export function FieldAttributesDialog({ field, fieldIndex, onSave, onCancel, use
     // one field's own CSS-class/HTML-attribute rows (a handful at most), cheap enough that memoizing
     // it was not judged worth the added indirection.
     const { className, addRow, error, submit } = controller;
-    const { rows, displayName, onClose, onClassName } = useFieldAttributesView({ field, fieldIndex, controller, onCancel });
-    return (_jsx(Dialog, { open: true, title: `${t("Field attributes —")} ${displayName}`, onClose: onClose, className: "settings-dialog tovu-domain-dialog field-attrs-dialog", children: _jsxs("form", { onSubmit: submit, ...agentHandle({ handle: "form-field-attrs-dialog" }, {
+    const { rows, displayName, onClose, onClassName, hasStyling } = useFieldAttributesView({ field, fieldIndex, controller, onCancel });
+    return (_jsx(Dialog, { open: true, title: `${t("Field settings —")} ${displayName}`, onClose: onClose, className: "settings-dialog tovu-domain-dialog field-attrs-dialog", children: _jsxs("form", { onSubmit: submit, ...agentHandle({ handle: "form-field-attrs-dialog" }, {
                 role: "region",
-                label: "Field attributes dialog — CSS classes and HTML attributes for one form field",
-            }), children: [_jsxs(SeeMore, { lines: 2, textClassName: "field-attrs-hint", toggleAriaLabel: t("See more about field attributes"), children: [t("Add CSS classes and HTML attributes to this field’s input. Classes are unrestricted — Tailwind utility classes like "), _jsx("code", { children: "md:col-span-2" }), " ", t("or "), _jsx("code", { children: "w-1/2" }), t(" work as expected. Attribute names are limited to a safe allowlist ("), _jsx("code", { children: "aria-*" }), t(", "), _jsx("code", { children: "data-*" }), t(", and a fixed list of layout/behavior attributes) — anything else, including event handlers like "), _jsx("code", { children: "onclick" }), t(", is rejected.")] }), _jsxs("div", { className: "field", children: [_jsx("label", { className: "field-label", htmlFor: "field-attrs-classname", children: t("CSS classes") }), _jsx("input", { id: "field-attrs-classname", "data-jini-autofocus": "", value: className, placeholder: "e.g. md:col-span-2 w-1/2 focus:ring-2", onChange: onClassName, ...agentHandle({ handle: "form-field-attrs-classname" }, {
-                                role: "field",
-                                label: "CSS classes to add to this form field's input",
-                            }) })] }), _jsxs("div", { className: "field-attrs-rows", children: [_jsx("span", { className: "field-label", children: t("HTML attributes") }), _jsx("datalist", { id: "field-attrs-name-suggestions", children: ATTRIBUTE_NAME_SUGGESTIONS.map((name) => (_jsx("option", { value: name }, name))) }), rows.map((row, index) => (_jsxs("fieldset", { className: "collections-field-row", children: [_jsxs("legend", { children: [t("Attribute"), " ", index + 1] }), _jsxs("div", { className: "field", children: [_jsx("label", { className: "field-label", htmlFor: `field-attrs-name-${row._rowId}`, children: t("Name") }), _jsx("input", { id: `field-attrs-name-${row._rowId}`, list: "field-attrs-name-suggestions", value: row.name, placeholder: "e.g. aria-label", onChange: row.onName, ...agentHandle({ handle: `${row.handle}-name` }, {
-                                                role: "field",
-                                                label: "This attribute's name — must be on the allowlisted set (aria-*, data-*, and a few others)",
-                                            }) })] }), _jsxs("div", { className: "field", children: [_jsx("label", { className: "field-label", htmlFor: `field-attrs-value-${row._rowId}`, children: t("Value") }), _jsx("input", { id: `field-attrs-value-${row._rowId}`, value: row.value, placeholder: t("e.g. Enter your work email"), onChange: row.onValue, ...agentHandle({ handle: `${row.handle}-value` }, {
-                                                role: "field",
-                                                label: "This attribute's value",
-                                            }) })] }), _jsx("button", { type: "button", className: "btn-secondary", onClick: row.onRemove, ...agentHandle({ handle: `${row.handle}-remove` }, {
+                label: "Field settings dialog — type-specific settings, CSS classes and HTML attributes for one form field",
+            }), children: [_jsx(FieldSettingsSection, { field: field, controller: controller, t: t }), _jsxs("details", { className: "field-settings-advanced", open: hasStyling, children: [_jsx("summary", { children: t("CSS classes and HTML attributes") }), _jsxs("div", { className: "field", children: [_jsxs("span", { className: "field-settings-label", children: [_jsx("label", { className: "field-label", htmlFor: "field-attrs-classname", children: t("CSS classes") }), _jsx(InfoTip, { label: t("Classes are unrestricted, e.g. Tailwind md:col-span-2. Attribute names must be aria-*, data-* or a safe layout attribute; event handlers like onclick are rejected.") })] }), _jsx("input", { id: "field-attrs-classname", value: className, placeholder: "e.g. md:col-span-2 w-1/2 focus:ring-2", onChange: onClassName, ...agentHandle({ handle: "form-field-attrs-classname" }, {
+                                        role: "field",
+                                        label: "CSS classes to add to this form field's input",
+                                    }) })] }), _jsxs("div", { className: "field-attrs-rows", children: [_jsx("span", { className: "field-label", children: t("HTML attributes") }), _jsx("datalist", { id: "field-attrs-name-suggestions", children: ATTRIBUTE_NAME_SUGGESTIONS.map((name) => (_jsx("option", { value: name }, name))) }), rows.map((row, index) => (_jsxs("fieldset", { className: "collections-field-row", children: [_jsxs("legend", { children: [t("Attribute"), " ", index + 1] }), _jsxs("div", { className: "field", children: [_jsx("label", { className: "field-label", htmlFor: `field-attrs-name-${row._rowId}`, children: t("Name") }), _jsx("input", { id: `field-attrs-name-${row._rowId}`, list: "field-attrs-name-suggestions", value: row.name, placeholder: "e.g. aria-label", onChange: row.onName, ...agentHandle({ handle: `${row.handle}-name` }, {
+                                                        role: "field",
+                                                        label: "This attribute's name — must be on the allowlisted set (aria-*, data-*, and a few others)",
+                                                    }) })] }), _jsxs("div", { className: "field", children: [_jsx("label", { className: "field-label", htmlFor: `field-attrs-value-${row._rowId}`, children: t("Value") }), _jsx("input", { id: `field-attrs-value-${row._rowId}`, value: row.value, placeholder: t("e.g. Enter your work email"), onChange: row.onValue, ...agentHandle({ handle: `${row.handle}-value` }, {
+                                                        role: "field",
+                                                        label: "This attribute's value",
+                                                    }) })] }), _jsx("button", { type: "button", className: "btn-secondary", onClick: row.onRemove, ...agentHandle({ handle: `${row.handle}-remove` }, {
+                                                role: "button",
+                                                label: "Remove this CSS-class/HTML-attribute row",
+                                            }), children: t("Remove") })] }, row._rowId))), _jsx("button", { type: "button", className: "btn-secondary", onClick: addRow, ...agentHandle({ handle: "form-field-attrs-add-row" }, {
                                         role: "button",
-                                        label: "Remove this CSS-class/HTML-attribute row",
-                                    }), children: t("Remove") })] }, row._rowId))), _jsx("button", { type: "button", className: "btn-secondary", onClick: addRow, ...agentHandle({ handle: "form-field-attrs-add-row" }, {
-                                role: "button",
-                                label: "Add another HTML attribute row to this field",
-                            }), children: t("Add attribute") })] }), error ? (_jsx("span", { className: "save-error", role: "alert", children: error })) : null, _jsxs("span", { className: "editor-actions", children: [_jsx("button", { type: "submit", ...agentHandle({ handle: "form-field-attrs-save" }, {
+                                        label: "Add another HTML attribute row to this field",
+                                    }), children: t("Add attribute") })] })] }), error ? (_jsx("span", { className: "save-error", role: "alert", children: t(error) })) : null, _jsxs("span", { className: "editor-actions", children: [_jsx("button", { type: "submit", ...agentHandle({ handle: "form-field-attrs-save" }, {
                                 role: "button",
                                 label: "Save this field's CSS classes and HTML attributes",
                             }), children: t("Save") }), _jsx("button", { type: "button", className: "btn-secondary", onClick: onCancel, ...agentHandle({ handle: "form-field-attrs-cancel" }, {

package/dist/forms/react/components/FieldSettingsSection.d.ts

@@ -0,0 +1,19 @@
+import type { AdminFormField } from '../../models.js';
+import type { FieldAttributesDialogController } from '../hooks/use-field-attributes-dialog.hooks.js';
+export interface FieldSettingsSectionProps {
+    field: AdminFormField;
+    controller: FieldAttributesDialogController;
+    t: (key: string) => string;
+}
+/**
+ * The settings half of the field dialog: one label-beside-control row per setting the field's
+ * registry kind supports (`field-settings.ts` decides which). Markup only; every handler comes from
+ * `useFieldSettingsView`. Explanations are ⓘ tips so the rows stay one line each.
+ *
+ * Initial focus: the native dialog focuses the first `[data-jini-autofocus]`, so the first of the
+ * placeholder, help-text and default inputs this type renders gets it. Without it, types with no
+ * placeholder (slider, file…) focused the Help text ⓘ, whose tip opened half behind the dialog
+ * (Chrome check, 2026-10-11). Focus must land on an input, never on an ⓘ.
+ */
+export declare function FieldSettingsSection({ field, controller, t }: FieldSettingsSectionProps, _optional?: Record<string, never>): import("react").JSX.Element;
+//# sourceMappingURL=FieldSettingsSection.d.ts.map

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { agentHandle } from '@jini-ai/agentic';
+import { InfoTip } from '@jini-ai/ui/admin-widgets';
+import { MAX_UPLOAD_MB } from '../../field-settings.js';
+import { useFieldSettingsView } from '../hooks/forms-view.hooks.js';
+/**
+ * The settings half of the field dialog: one label-beside-control row per setting the field's
+ * registry kind supports (`field-settings.ts` decides which). Markup only; every handler comes from
+ * `useFieldSettingsView`. Explanations are ⓘ tips so the rows stay one line each.
+ *
+ * Initial focus: the native dialog focuses the first `[data-jini-autofocus]`, so the first of the
+ * placeholder, help-text and default inputs this type renders gets it. Without it, types with no
+ * placeholder (slider, file…) focused the Help text ⓘ, whose tip opened half behind the dialog
+ * (Chrome check, 2026-10-11). Focus must land on an input, never on an ⓘ.
+ */
+export function FieldSettingsSection({ field, controller, t }, _optional = {}) {
+    const view = useFieldSettingsView({ field, controller, t });
+    const { settings, form } = view;
+    return (_jsxs("div", { className: "field-settings", ...agentHandle({ handle: 'form-field-settings' }, { role: 'region', label: "This field's type-specific settings" }), children: [settings.placeholder ? (_jsxs("div", { className: "field-settings-row", children: [_jsx("label", { className: "field-label", htmlFor: "field-settings-placeholder", children: t('Placeholder') }), _jsx("input", { id: "field-settings-placeholder", "data-jini-autofocus": "", value: form.placeholder, onChange: view.onPlaceholder, ...agentHandle({ handle: 'form-field-settings-placeholder' }, { role: 'field', label: 'Hint text shown inside the empty control' }) })] })) : null, settings.helpText ? (_jsxs("div", { className: "field-settings-row", children: [_jsxs("span", { className: "field-settings-label", children: [_jsx("label", { className: "field-label", htmlFor: "field-settings-help", children: t('Help text') }), _jsx(InfoTip, { label: t('Shown under the field and read out by screen readers.') })] }), _jsx("input", { id: "field-settings-help", "data-jini-autofocus": "", value: form.helpText, onChange: view.onHelpText, ...agentHandle({ handle: 'form-field-settings-help' }, { role: 'field', label: 'Help text shown under this field' }) })] })) : null, settings.options ? (_jsxs("div", { className: "field-settings-row field-settings-row--top", children: [_jsxs("span", { className: "field-settings-label", children: [_jsx("span", { className: "field-label", id: "field-settings-options-label", children: t('Options') }), _jsx(InfoTip, { label: t('The label is what visitors see. The value is what the submission stores; it follows the label until you edit it.') })] }), _jsxs("div", { className: "field-options", role: "group", "aria-labelledby": "field-settings-options-label", children: [_jsx("ol", { className: "field-options-list", children: view.options.map((row) => (_jsxs("li", { className: "field-option-row", children: [_jsx("input", { className: "field-option-label", "aria-label": row.labelAria, placeholder: t('Label'), value: row.label, onChange: row.onLabel, ...agentHandle({ handle: `${row.handle}-label` }, { role: 'field', label: 'Option text visitors see' }) }), _jsx("input", { className: "field-option-value", "aria-label": row.valueAria, placeholder: t('Value'), value: row.value, onChange: row.onValue, ...agentHandle({ handle: `${row.handle}-value` }, { role: 'field', label: 'Option value stored with each submission' }) }), view.settings.multiple ? (_jsx("label", { className: "field-option-default", children: _jsx("input", { type: "checkbox", checked: row.isDefault, disabled: !row.value, onChange: row.onDefault, "aria-label": row.defaultAria }) })) : null, _jsxs("span", { className: "field-option-actions", children: [_jsx("button", { type: "button", className: "btn-ghost field-option-btn", disabled: row.isFirst, onClick: row.onUp, "aria-label": row.upAria, children: "\u2191" }), _jsx("button", { type: "button", className: "btn-ghost field-option-btn", disabled: row.isLast, onClick: row.onDown, "aria-label": row.downAria, children: "\u2193" }), _jsx("button", { type: "button", className: "btn-ghost field-option-btn", onClick: row.onRemove, "aria-label": row.removeAria, ...agentHandle({ handle: `${row.handle}-remove` }, { role: 'button', label: 'Remove this option' }), children: "\u00D7" })] })] }, row._rowId))) }), _jsx("button", { type: "button", className: "btn-secondary field-settings-add", onClick: view.addOption, ...agentHandle({ handle: 'form-field-options-add' }, { role: 'button', label: 'Add another option to this choice field' }), children: t('Add option') })] })] })) : null, settings.defaultKind === 'boolean' ? (_jsxs("div", { className: "field-settings-row", children: [_jsx("span", { className: "field-label", children: t('Default') }), _jsxs("label", { className: "form-checkbox-field", children: [_jsx("input", { type: "checkbox", checked: form.defaultChecked, onChange: view.onDefaultChecked, ...agentHandle({ handle: 'form-field-settings-default-checked' }, { role: 'checkbox', label: 'Whether this box starts checked' }) }), t('Checked by default')] })] })) : null, settings.defaultKind === 'choice' ? (_jsxs("div", { className: "field-settings-row", children: [_jsx("label", { className: "field-label", htmlFor: "field-settings-default", children: t('Default') }), _jsxs("select", { id: "field-settings-default", className: "field-settings-compact", value: form.defaultChoices[0] ?? '', onChange: view.onDefaultChoice, ...agentHandle({ handle: 'form-field-settings-default' }, { role: 'field', label: 'Which option starts selected — set with page.select_option' }), children: [_jsx("option", { value: "", children: t('None') }), view.defaultChoices.map((choice) => _jsx("option", { value: choice.value, children: choice.label }, choice.key))] })] })) : null, view.defaultInputType ? (_jsxs("div", { className: "field-settings-row", children: [_jsx("label", { className: "field-label", htmlFor: "field-settings-default", children: t('Default') }), _jsx("input", { id: "field-settings-default", "data-jini-autofocus": "", className: view.defaultClass, type: view.defaultInputType, value: form.defaultText, onChange: view.onDefaultText, ...agentHandle({ handle: 'form-field-settings-default' }, { role: 'field', label: 'The value this field starts with' }) })] })) : null, settings.length ? (_jsxs("div", { className: "field-settings-row", children: [_jsx("span", { className: "field-label", id: "field-settings-length-label", children: t('Length') }), _jsxs("span", { className: "field-settings-pair", role: "group", "aria-labelledby": "field-settings-length-label", children: [_jsx("input", { type: "number", min: 0, className: "field-settings-num", "aria-label": t('Min length'), placeholder: t('Min'), value: form.minLength, onChange: view.onMinLength, ...agentHandle({ handle: 'form-field-settings-min-length' }, { role: 'field', label: 'Fewest characters accepted' }) }), _jsx("span", { "aria-hidden": "true", children: "\u2013" }), _jsx("input", { type: "number", min: 1, className: "field-settings-num", "aria-label": t('Max length'), placeholder: t('Max'), value: form.maxLength, onChange: view.onMaxLength, ...agentHandle({ handle: 'form-field-settings-max-length' }, { role: 'field', label: 'Most characters accepted; blank means the default limit' }) })] })] })) : null, settings.pattern ? (_jsxs("div", { className: "field-settings-row", children: [_jsxs("span", { className: "field-settings-label", children: [_jsx("label", { className: "field-label", htmlFor: "field-settings-pattern", children: t('Pattern') }), _jsx(InfoTip, { label: t('Optional. The whole answer must match it, e.g. [0-9]+ for digits only. Groups, | and repeating more than once are not supported.') })] }), _jsx("input", { id: "field-settings-pattern", className: "field-settings-code", value: form.pattern, onChange: view.onPattern, spellCheck: false, ...agentHandle({ handle: 'form-field-settings-pattern' }, { role: 'field', label: 'Regular expression the whole answer must match' }) })] })) : null, settings.bounds ? (_jsxs("div", { className: "field-settings-row", children: [_jsx("span", { className: "field-label", id: "field-settings-bounds-label", children: t('Range') }), _jsxs("span", { className: "field-settings-pair", role: "group", "aria-labelledby": "field-settings-bounds-label", children: [_jsx("input", { type: view.boundsType, className: view.boundsClass, "aria-label": t('Min'), placeholder: t('Min'), value: form.min, onChange: view.onMin, ...agentHandle({ handle: 'form-field-settings-min' }, { role: 'field', label: 'Lowest value or earliest date/time accepted' }) }), _jsx("span", { "aria-hidden": "true", children: "\u2013" }), _jsx("input", { type: view.boundsType, className: view.boundsClass, "aria-label": t('Max'), placeholder: t('Max'), value: form.max, onChange: view.onMax, ...agentHandle({ handle: 'form-field-settings-max' }, { role: 'field', label: 'Highest value or latest date/time accepted' }) }), settings.step ? (_jsx("input", { type: "number", min: 0, step: "any", className: "field-settings-num", "aria-label": t('Step'), placeholder: t('Step'), value: form.step, onChange: view.onStep, ...agentHandle({ handle: 'form-field-settings-step' }, { role: 'field', label: 'Increment between accepted values' }) })) : null] })] })) : null, settings.upload ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "field-settings-row", children: [_jsxs("span", { className: "field-settings-label", children: [_jsx("span", { className: "field-label", id: "field-settings-files-label", children: t('Files') }), _jsx(InfoTip, { label: t('Leave all unticked to accept every safe type: images, video and PDF.') })] }), _jsx("span", { className: "field-settings-checks", role: "group", "aria-labelledby": "field-settings-files-label", children: view.uploads.map((choice) => (_jsxs("label", { className: "form-checkbox-field", children: [_jsx("input", { type: "checkbox", checked: choice.checked, onChange: choice.onToggle, ...agentHandle({ handle: choice.handle }, { role: 'checkbox', label: `Accept ${choice.label} uploads` }) }), t(choice.label)] }, choice.value))) })] }), _jsxs("div", { className: "field-settings-row", children: [_jsx("label", { className: "field-label", htmlFor: "field-settings-max-size", children: t('Max size (MB)') }), _jsx("input", { id: "field-settings-max-size", type: "number", min: 0, max: MAX_UPLOAD_MB, step: "any", className: "field-settings-num", placeholder: String(MAX_UPLOAD_MB), value: form.maxFileSizeMb, onChange: view.onMaxFileSize, ...agentHandle({ handle: 'form-field-settings-max-size' }, { role: 'field', label: 'Largest upload accepted, in megabytes' }) })] })] })) : null] }));
+}
+//# sourceMappingURL=FieldSettingsSection.js.map

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useFormFieldsView } from "../hooks/forms-view.hooks.js";
 import { agentHandle } from '@jini-ai/agentic';
-import { FIELD_TYPES } from '../../rules.js';
 import { useFormFieldsEditor } from '../hooks/use-form-fields-editor.hooks.js';
 import { FieldAttributesDialog } from "./FieldAttributesDialog.js";
 export function FormFieldsEditor({ fields, existingFieldIds = [], onChange, useFormFieldsEditorHook = useFormFieldsEditor, t, }, _optional = {}) {
@@ -16,22 +15,22 @@ export function FormFieldsEditor({ fields, existingFieldIds = [], onChange, useF
     return (_jsxs(_Fragment, { children: [_jsxs("table", { className: "list-table form-fields-table", ...agentHandle({ handle: "form-fields-table" }, {
                     role: "region",
                     label: "This form's field definitions — one row per field, in the order they render on the live form",
-                }), children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: "14%" } }), _jsx("col", { style: { width: "17%" } }), _jsx("col", { style: { width: "17%" } }), _jsx("col", { style: { width: "8%" } }), _jsx("col", { style: { width: "18%" } }), _jsx("col", { style: { width: "8%" } }), _jsx("col", { style: { width: "18%" } })] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: t("ID") }), _jsx("th", { children: t("Label") }), _jsx("th", { children: t("Type") }), _jsx("th", { children: t("Req") }), _jsx("th", { children: t("Max length") }), _jsx("th", { children: t("More") }), _jsx("th", {})] }) }), _jsx("tbody", { children: rows.map(({ field, index, isExisting, base, displayName, onId, onLabel, onType, onRequired, onMaxLength, ref, onAttributes, onRemove }) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx("input", { "aria-label": `Field ${index + 1} id`, value: field.id, disabled: isExisting, onChange: onId, ...agentHandle({ handle: `${base}-id` }, {
+                }), children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: "14%" } }), _jsx("col", { style: { width: "17%" } }), _jsx("col", { style: { width: "21%" } }), _jsx("col", { style: { width: "8%" } }), _jsx("col", { style: { width: "14%" } }), _jsx("col", { style: { width: "8%" } }), _jsx("col", { style: { width: "18%" } })] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: t("ID") }), _jsx("th", { children: t("Label") }), _jsx("th", { children: t("Type") }), _jsx("th", { children: t("Req") }), _jsx("th", { children: t("Max length") }), _jsx("th", { children: t("More") }), _jsx("th", {})] }) }), _jsx("tbody", { children: rows.map(({ field, index, isExisting, base, displayName, typeGroups, hasLength, onId, onLabel, onType, onRequired, onMaxLength, ref, onAttributes, onRemove }) => (_jsxs("tr", { children: [_jsx("td", { "data-label": t("ID"), children: _jsx("input", { "aria-label": `Field ${index + 1} id`, value: field.id, disabled: isExisting, onChange: onId, ...agentHandle({ handle: `${base}-id` }, {
                                             role: "field",
                                             label: "This field's unique id — the key its value is submitted under. Locked once saved.",
-                                        }) }) }), _jsx("td", { children: _jsx("input", { "aria-label": `Field ${index + 1} label`, value: field.label, onChange: onLabel, ...agentHandle({ handle: `${base}-label` }, { role: "field", label: "This field's on-page label" }) }) }), _jsx("td", { children: _jsx("select", { "aria-label": `Field ${index + 1} type`, value: field.type, onChange: onType, ...agentHandle({ handle: `${base}-type` }, {
+                                        }) }) }), _jsx("td", { "data-label": t("Label"), children: _jsx("input", { "aria-label": `Field ${index + 1} label`, value: field.label, onChange: onLabel, ...agentHandle({ handle: `${base}-label` }, { role: "field", label: "This field's on-page label" }) }) }), _jsx("td", { "data-label": t("Type"), children: _jsx("select", { "aria-label": `Field ${index + 1} type`, value: field.type, onChange: onType, ...agentHandle({ handle: `${base}-type` }, {
                                             role: "field",
                                             label: "This field's input type — set with page.select_option, not click",
-                                        }), children: FIELD_TYPES.map((t) => (_jsx("option", { value: t, children: t }, t))) }) }), _jsx("td", { children: _jsx("input", { type: "checkbox", "aria-label": `Field ${index + 1} required`, checked: field.required, onChange: onRequired, ...agentHandle({ handle: `${base}-required` }, {
+                                        }), children: typeGroups.map(({ group, types }) => (_jsx("optgroup", { label: t(group), children: types.map((type) => (_jsx("option", { value: type.type, children: t(type.label) }, type.type))) }, group))) }) }), _jsx("td", { "data-label": t("Required"), children: _jsx("input", { type: "checkbox", "aria-label": `Field ${index + 1} required`, checked: field.required, onChange: onRequired, ...agentHandle({ handle: `${base}-required` }, {
                                             role: "checkbox",
                                             label: "Whether this field must be filled in before the form can be submitted",
-                                        }) }) }), _jsx("td", { children: field.type === "checkbox" ? (_jsx("span", { "aria-hidden": "true", children: "\u2014" })) : (_jsx("input", { type: "number", "aria-label": `Field ${index + 1} max length`, value: field.maxLength ?? "", onChange: onMaxLength, ...agentHandle({ handle: `${base}-max-length` }, {
+                                        }) }) }), _jsx("td", { "data-label": t("Max length"), children: !hasLength ? (_jsx("span", { "aria-hidden": "true", children: "\u2014" })) : (_jsx("input", { type: "number", "aria-label": `Field ${index + 1} max length`, value: field.maxLength ?? "", onChange: onMaxLength, ...agentHandle({ handle: `${base}-max-length` }, {
                                             role: "field",
                                             label: "The maximum number of characters this field accepts — blank means no limit",
-                                        }) })) }), _jsx("td", { children: _jsx("button", { ref: ref, type: "button", className: "row-menu-trigger", "aria-label": `Attributes for field "${displayName}"`, onClick: onAttributes, ...agentHandle({ handle: `${base}-attributes` }, {
+                                        }) })) }), _jsx("td", { "data-label": t("Settings"), children: _jsx("button", { ref: ref, type: "button", className: "row-menu-trigger", "aria-label": t('Settings for field "{name}"').replace("{name}", displayName), onClick: onAttributes, ...agentHandle({ handle: `${base}-attributes` }, {
                                             role: "button",
-                                            label: "Open this field's CSS classes and HTML attributes dialog",
-                                        }), children: _jsxs("svg", { viewBox: "0 0 18 18", fill: "currentColor", "aria-hidden": "true", children: [_jsx("circle", { cx: "9", cy: "4.5", r: "1.5" }), _jsx("circle", { cx: "9", cy: "9", r: "1.5" }), _jsx("circle", { cx: "9", cy: "13.5", r: "1.5" })] }) }) }), _jsx("td", { children: _jsx("button", { type: "button", disabled: isExisting, title: isExisting ? t("Existing fields cannot be removed once created") : undefined, onClick: onRemove, ...agentHandle({ handle: `${base}-remove` }, {
+                                            label: "Open this field's settings dialog: placeholder, help text, default, options, limits, CSS classes and HTML attributes",
+                                        }), children: _jsxs("svg", { viewBox: "0 0 18 18", fill: "currentColor", "aria-hidden": "true", children: [_jsx("circle", { cx: "9", cy: "4.5", r: "1.5" }), _jsx("circle", { cx: "9", cy: "9", r: "1.5" }), _jsx("circle", { cx: "9", cy: "13.5", r: "1.5" })] }) }) }), _jsx("td", { className: "form-field-remove-cell", children: _jsx("button", { type: "button", disabled: isExisting, title: isExisting ? t("Existing fields cannot be removed once created") : undefined, onClick: onRemove, ...agentHandle({ handle: `${base}-remove` }, {
                                             role: "button",
                                             label: "Remove this field from the form. Refused once the field has been saved.",
                                         }), children: t("Remove") }) })] }, index))) }), _jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { colSpan: 7, children: _jsx("button", { type: "button", className: "btn-secondary", onClick: addField, ...agentHandle({ handle: "form-fields-add" }, { role: "button", label: "Add a new field to this form" }), children: t("Add field") }) }) }) })] }), editingAttrsIndex !== null && editingField ? (_jsx(FieldAttributesDialog, { field: editingField, fieldIndex: editingAttrsIndex, onSave: saveAttributes, onCancel: closeAttrsDialog, t: t })) : null] }));