@jini-ai/admin 0.4.2 → 0.4.3

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useFormFieldsBodyView } from "../hooks/forms-view.hooks.js";
+import { agentHandle } from '@jini-ai/agentic';
+import { FormFieldsEditor } from "./FormFieldsEditor.js";
+export function FormEditorFieldsBody(props, _optional = {}) {
+    const handlers = useFormFieldsBodyView(props);
+    const { name, onNameChange, slug, onSlugChange, isNew, fields, existingFieldIds, onFieldsChange, form, saving, onStatusToggle, onSave, t, mode, onModeChange, html, onHtmlChange, onCopyEmbed, copyFeedback, } = props;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "field-group", children: _jsxs("div", { className: "field-row", children: [_jsxs("div", { className: "field", children: [_jsx("label", { className: "field-label", htmlFor: "form-name", children: t("Name") }), _jsx("input", { id: "form-name", value: name, onChange: handlers.onName, ...agentHandle({ handle: "form-editor-name" }, { role: "field", label: "This form's display name" }) })] }), _jsxs("div", { className: "field", children: [_jsx("label", { className: "field-label", htmlFor: "form-slug", children: t("Slug") }), _jsx("input", { id: "form-slug", value: slug, disabled: !isNew, onChange: handlers.onSlug, ...agentHandle({ handle: "form-editor-slug" }, {
+                                        role: "field",
+                                        label: "This form's URL slug — only editable while creating a new form",
+                                    }) })] })] }) }), _jsxs("div", { className: "field-group", children: [_jsxs("div", { className: "segmented", role: "group", "aria-label": t("Form authoring mode"), children: [_jsx("button", { type: "button", className: mode === "builder" ? "is-active" : "", "aria-pressed": mode === "builder", onClick: handlers.onBuilder, children: t("Builder") }), _jsx("button", { type: "button", className: mode === "html" ? "is-active" : "", "aria-pressed": mode === "html", onClick: handlers.onHtmlMode, children: t("HTML") })] }), mode === "html" ? (_jsx("textarea", { className: "page-html-source", value: html, onChange: handlers.onHtml, spellCheck: false, "aria-label": t("Form HTML") })) : (_jsx("div", { className: "table-scroll", children: _jsx(FormFieldsEditor, { fields: fields, existingFieldIds: existingFieldIds, onChange: onFieldsChange, t: t }) }))] }), _jsxs("div", { className: "editor-actions form-actions", children: [form ? _jsx("button", { type: "button", className: "btn-secondary", onClick: onCopyEmbed, children: t("Copy HTML embed") }) : null, copyFeedback ? _jsx("span", { role: "status", children: copyFeedback }) : null, !isNew && form ? (
+                    // Reversible-but-access-affecting (turns off the live site's ability to accept
+                    // submissions through this form) — `.btn-warning`, not `.btn-danger`: nothing is
+                    // deleted, and the same control flips right back to "Enable". Re-enabling is the safe
+                    // direction, so it stays `.btn-secondary` rather than inheriting the warning look.
+                    _jsx("button", { type: "button", className: form.status === "active" ? "btn-warning" : "btn-secondary", disabled: saving, onClick: onStatusToggle, ...agentHandle({ handle: "form-editor-status-toggle" }, {
+                            role: "button",
+                            label: "Disable or re-enable this form — disabling stops it accepting new submissions without deleting it",
+                        }), children: form.status === "active" ? t("Disable") : t("Enable") })) : null, _jsx("button", { type: "button", disabled: saving, onClick: onSave, ...agentHandle({ handle: "form-editor-save" }, {
+                            role: "button",
+                            label: "Save this form's name, slug, fields and notification settings",
+                        }), children: isNew ? t("Create form") : t("Save") })] })] }));
+}
+//# sourceMappingURL=FormEditorFieldsBody.js.map

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

@@ -0,0 +1,7 @@
+export declare function FormEditorHeaderText(props: {
+    isNew: boolean;
+    name: string;
+    t: (key: string) => string;
+}, _optional?: Record<string, never>): import("react").JSX.Element;
+/** The Fields/Submissions tab strip — renders only for an existing, loaded form (`showTabs`). */
+//# sourceMappingURL=FormEditorHeaderText.d.ts.map

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function FormEditorHeaderText(props, _optional = {}) {
+    const { isNew, name, t } = props;
+    return (_jsxs("div", { className: "page-header-text", children: [_jsx("p", { className: "page-kicker", children: t("Content") }), _jsx("h1", { className: "page-title", children: isNew ? t("New form") : name || t("Form") }), _jsx("p", { className: "page-description", children: isNew
+                    ? t("Configure a new form's fields and email notifications.")
+                    : t("Configure this form's fields and notifications, or review its submissions.") })] }));
+}
+//# sourceMappingURL=FormEditorHeaderText.js.map

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

@@ -0,0 +1,12 @@
+import type * as React from 'react';
+import type { FormAnswerColumn } from '../../html-rules.js';
+export declare function FormEditorMainPanel(props: {
+    isNew: boolean;
+    tab: "fields" | "submissions";
+    formId: string;
+    fieldsBody: React.ReactNode;
+    /** Translator closure — see `FormEditor()`'s own `t`. */
+    t: (key: string) => string;
+    answerColumns: FormAnswerColumn[];
+}, _optional?: Record<string, never>): React.JSX.Element;
+//# sourceMappingURL=FormEditorMainPanel.d.ts.map

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormSubmissions } from "./FormSubmissions.js";
+export function FormEditorMainPanel(props, _optional = {}) {
+    const { isNew, tab, formId, fieldsBody, t, answerColumns } = props;
+    if (isNew) {
+        return _jsx("div", { className: "form-editor-panel", children: fieldsBody });
+    }
+    if (tab === "fields") {
+        return (_jsx("div", { className: "form-editor-panel", role: "tabpanel", id: "form-panel-fields", "aria-labelledby": "form-tab-fields", children: fieldsBody }));
+    }
+    return (_jsx("div", { className: "form-editor-panel", role: "tabpanel", id: "form-panel-submissions", "aria-labelledby": "form-tab-submissions", children: _jsx(FormSubmissions, { formId: formId, t: t, answerColumns: answerColumns }) }));
+}
+//# sourceMappingURL=FormEditorMainPanel.js.map

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

@@ -0,0 +1,13 @@
+import type * as React from 'react';
+export declare function FormEditorTabStrip(props: {
+    showTabs: boolean;
+    tab: "fields" | "submissions";
+    onTabChange: (tab: "fields" | "submissions") => void;
+    tabRefs: React.MutableRefObject<Array<HTMLButtonElement | null>>;
+    onTabsKeyDown: (e: React.KeyboardEvent) => void;
+    /** Translator closure — see `FormEditor()`'s own `t`. */
+    t: (key: string) => string;
+}, _optional?: Record<string, never>): React.JSX.Element | null;
+/** Which card is showing below the tab strip: the fields form (always for `isNew`, or when the
+ * Fields tab is active) or the submissions table. */
+//# sourceMappingURL=FormEditorTabStrip.d.ts.map

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFormTabStripView } from "../hooks/forms-view.hooks.js";
+import { agentHandle } from '@jini-ai/agentic';
+export function FormEditorTabStrip(props, _optional = {}) {
+    const { showTabs, tab, onTabChange, tabRefs, onTabsKeyDown, t } = props;
+    const tabs = useFormTabStripView({ onTabChange, tabRefs });
+    if (!showTabs)
+        return null;
+    return (_jsx("div", { className: "form-tabs", role: "tablist", "aria-label": t("Form sections"), onKeyDown: onTabsKeyDown, children: tabs.map((formTab) => (_jsx("button", { ref: formTab.ref, type: "button", role: "tab", id: `form-tab-${formTab.id}`, className: "form-tab", "aria-selected": tab === formTab.id, "aria-controls": `form-panel-${formTab.id}`, tabIndex: tab === formTab.id ? 0 : -1, onClick: formTab.onClick, ...agentHandle({ handle: `form-tab-${formTab.id}` }, {
+                role: "button",
+                label: formTab.id === "fields" ? "Switch to this form's Fields tab" : "Switch to this form's Submissions tab",
+            }), children: t(formTab.label) }, formTab.id))) }));
+}
+//# sourceMappingURL=FormEditorTabStrip.js.map

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

@@ -0,0 +1,13 @@
+import type { AdminFormField } from '../../models.js';
+import { useFormFieldsEditor } from '../hooks/use-form-fields-editor.hooks.js';
+export interface FormFieldsEditorProps {
+    fields: AdminFormField[];
+    existingFieldIds?: string[];
+    onChange: (fields: AdminFormField[]) => void;
+    /** Dependency injection seam for tests — see `PostsProps.usePostsHook` for the convention. */
+    useFormFieldsEditorHook?: typeof useFormFieldsEditor;
+    /** Translator closure — see `FormEditor()`'s own `t`. */
+    t: (key: string) => string;
+}
+export declare function FormFieldsEditor({ fields, existingFieldIds, onChange, useFormFieldsEditorHook, t, }: FormFieldsEditorProps, _optional?: Record<string, never>): import("react").JSX.Element;
+//# sourceMappingURL=FormFieldsEditor.d.ts.map

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

@@ -0,0 +1,39 @@
+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 = {}) {
+    const controller = useFormFieldsEditorHook({ fields, onChange });
+    const { editingAttrsIndex, closeAttrsDialog, addField } = controller;
+    // Field ids are the form's own field vocabulary and are unique once saved, but a freshly-added
+    // row starts with an empty id (see `rules.ts`'s `blankField`) — `buildAgentListHandles`'s
+    // position fallback covers that case the same way it covers any other unsluggable id. Not
+    // `useMemo`d: one form's own field list is small and this is an O(n) pass, cheap enough that
+    // memoizing it was not judged worth the added indirection.
+    const { rows, editingField, saveAttributes } = useFormFieldsView({ fields, existingFieldIds, controller });
+    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` }, {
+                                            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` }, {
+                                            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` }, {
+                                            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` }, {
+                                            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` }, {
+                                            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` }, {
+                                            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] }));
+}
+//# sourceMappingURL=FormFieldsEditor.js.map

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

@@ -0,0 +1,8 @@
+export declare function FormSubmissionDate({ date }: {
+    date: {
+        text: string;
+        full: string;
+        dateTime: string | undefined;
+    };
+}, _optional?: Record<string, never>): import("react").JSX.Element;
+//# sourceMappingURL=FormSubmissionDate.d.ts.map

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FormSubmissionDate({ date }, _optional = {}) {
+    return _jsx("time", { dateTime: date.dateTime, title: date.full, children: date.text });
+}
+//# sourceMappingURL=FormSubmissionDate.js.map

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

@@ -0,0 +1,13 @@
+import { useWiredFormSubmissionDetail } from '../hooks/use-form-submission-detail.hooks.js';
+export interface FormSubmissionDetailProps {
+    formId: string;
+    submissionId: string;
+    onBack: () => void;
+    onDeleted: () => void;
+    /** Dependency injection seam for tests — see `PostsProps.usePostsHook` for the convention. */
+    useFormSubmissionDetailHook?: typeof useWiredFormSubmissionDetail;
+    /** Translator closure — see `FormEditor()`'s own `t`. */
+    t: (key: string) => string;
+}
+export declare function FormSubmissionDetail({ formId, submissionId, onBack, onDeleted, useFormSubmissionDetailHook, t, }: FormSubmissionDetailProps, _optional?: Record<string, never>): import("react").JSX.Element;
+//# sourceMappingURL=FormSubmissionDetail.d.ts.map

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ConfirmDialog } from '../../../react/components/ConfirmDialog/ConfirmDialog.js';
+import { agentHandle } from '@jini-ai/agentic';
+import { useWiredFormSubmissionDetail } from '../hooks/use-form-submission-detail.hooks.js';
+import { useFormSubmissionDate } from '../hooks/use-form-submission-date.hooks.js';
+import { FormSubmissionDate } from "./FormSubmissionDate.js";
+export function FormSubmissionDetail({ formId, submissionId, onBack, onDeleted, useFormSubmissionDetailHook = useWiredFormSubmissionDetail, t, }, _optional = {}) {
+    const formatDate = useFormSubmissionDate({});
+    const { submission, error, confirmOpen, deleting, requestDelete, cancelDelete, confirmDelete } = useFormSubmissionDetailHook({
+        formId,
+        submissionId,
+        onDeleted,
+    });
+    if (error && !submission)
+        return _jsx("div", { className: "notice error", children: error });
+    if (!submission)
+        return _jsx("div", { className: "notice", children: t("Loading submission…") });
+    return (
+    // `form-submission-detail` (`styles/forms.css`) — the back button, table, and Delete button
+    // were flush siblings with no gap between them (owner: "pad the buttons"), so the back
+    // 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 })] }), Object.entries(submission.data).map(([key, value]) => (_jsxs("tr", { children: [_jsx("th", { children: key }), _jsx("td", { children: String(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 })] }));
+}
+//# sourceMappingURL=FormSubmissionDetail.js.map

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

@@ -0,0 +1,12 @@
+import type { FormAnswerColumn } from '../../html-rules.js';
+import { useWiredFormSubmissions } from '../hooks/use-form-submissions.hooks.js';
+export interface FormSubmissionsProps {
+    formId: string;
+    /** Dependency injection seam for tests — see `PostsProps.usePostsHook` for the convention. */
+    useFormSubmissionsHook?: typeof useWiredFormSubmissions;
+    /** Translator closure — see `FormEditor()`'s own `t`. */
+    t: (key: string) => string;
+    answerColumns?: FormAnswerColumn[];
+}
+export declare function FormSubmissions({ formId, useFormSubmissionsHook, t, answerColumns }: FormSubmissionsProps, _optional?: Record<string, never>): import("react").JSX.Element;
+//# sourceMappingURL=FormSubmissions.d.ts.map

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSubmissionsView } from "../hooks/forms-view.hooks.js";
+import { DataTable } from '../../../react/components/DataTable.js';
+import { agentHandle } from '@jini-ai/agentic';
+import { useWiredFormSubmissions } from '../hooks/use-form-submissions.hooks.js';
+import { useFormSubmissionDate } from '../hooks/use-form-submission-date.hooks.js';
+import { FormSubmissionDetail } from "./FormSubmissionDetail.js";
+import { FormSubmissionDate } from "./FormSubmissionDate.js";
+export function FormSubmissions({ formId, useFormSubmissionsHook = useWiredFormSubmissions, t, answerColumns = [] }, _optional = {}) {
+    const formatDate = useFormSubmissionDate({});
+    const controller = useFormSubmissionsHook({ formId });
+    const { submissions, nextCursor, error, selectedId, loadingMore } = controller;
+    const { rows, back, loadMore } = useSubmissionsView({ controller });
+    if (selectedId) {
+        return (_jsx(FormSubmissionDetail, { formId: formId, submissionId: selectedId, onBack: back, onDeleted: back, t: t }));
+    }
+    if (error && !submissions)
+        return _jsx("div", { className: "notice error", children: error });
+    if (!submissions)
+        return _jsx("div", { className: "notice", children: t("Loading submissions…") });
+    if (submissions.length === 0)
+        return _jsx("div", { className: "empty-state", children: t("No submissions yet.") });
+    // Submission ids are stable and unique, so they're what disambiguates one row's "View" button
+    // from another's — same reasoning as every other list on this workstream. Not `useMemo`d:
+    // computed after the three early returns above, so a `useMemo` here would need hoisting above
+    // them to keep hook order stable across renders — same constraint `Media.tsx` documents for its
+    // own post-early-return computation. `submissions` grows only on an explicit "Load more" click
+    // (`use-form-submissions.hooks.ts`'s cursor-append), so this O(n) pass tracks real data changes,
+    // not incidental re-renders.
+    return (_jsxs("div", { children: [error ? _jsx("div", { className: "notice error", children: error }) : null, _jsx(DataTable, { rows: rows, rowKey: (s) => s.id, columns: [
+                    { key: "submitted-at", header: t("Submitted at"), cell: (s) => _jsx(FormSubmissionDate, { date: formatDate({ iso: s.submittedAt }) }) },
+                    { key: "source-ip", header: t("Source IP"), cell: (s) => s.sourceIp },
+                    ...answerColumns,
+                    {
+                        key: "view",
+                        cell: (s, index) => (_jsx("button", { type: "button", onClick: s.view, ...agentHandle({ handle: s.handle }, {
+                                role: "button",
+                                label: "Open this submission's full details",
+                            }), children: t("View") })),
+                    },
+                ] }), nextCursor ? (_jsx("button", { type: "button", className: "btn-secondary", disabled: loadingMore, onClick: loadMore, ...agentHandle({ handle: "form-submissions-load-more" }, {
+                    role: "button",
+                    label: "Load the next page of submissions",
+                }), children: loadingMore ? t("Loading…") : t("Load more") })) : null] }));
+}
+//# sourceMappingURL=FormSubmissions.js.map

package/dist/forms/react/hooks/FormsPorts.hooks.d.ts

@@ -0,0 +1,41 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { AdminFormsPort, FormsTrashPort, FormsEventsPort, FormsNavigationPort } from '../../ports.js';
+import type { FormsTranslator } from '../../models.js';
+export interface FormsPorts {
+    readonly formsApi: AdminFormsPort;
+    readonly formsTrash: FormsTrashPort;
+    readonly formsEvents?: FormsEventsPort;
+    readonly formsNavigation?: FormsNavigationPort;
+}
+export interface FormsReactOptions {
+    t?: FormsTranslator;
+    locale?: string;
+    adminBase?: string;
+    clipboard?: {
+        writeText(text: string): Promise<void>;
+    };
+    headerActions?: ReactNode;
+    slots?: {
+        RecipientLabel?: ComponentType<{
+            count: number;
+        }>;
+    };
+}
+export declare const FormsPortsContext: import("react").Context<FormsPorts | null>;
+export declare const FormsOptionsContext: import("react").Context<FormsReactOptions>;
+export declare function useFormsPorts(_required?: Record<string, never>, _optional?: {}): FormsPorts;
+export declare function useFormsOptions(_required?: Record<string, never>, _optional?: {}): {
+    t: FormsTranslator;
+    locale: string;
+    adminBase: string;
+    clipboard?: {
+        writeText(text: string): Promise<void>;
+    };
+    headerActions?: ReactNode;
+    slots?: {
+        RecipientLabel?: ComponentType<{
+            count: number;
+        }>;
+    };
+};
+//# sourceMappingURL=FormsPorts.hooks.d.ts.map

package/dist/forms/react/hooks/FormsPorts.hooks.js

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+import { AdminConfigError } from '../../../core/module/create-admin.js';
+import { translateForms } from '../../messages.en.js';
+export const FormsPortsContext = createContext(null);
+export const FormsOptionsContext = createContext({});
+export function useFormsPorts(_required = {}, _optional = {}) {
+    const ports = useContext(FormsPortsContext);
+    if (!ports)
+        throw new AdminConfigError({ issues: ['React scope unavailable: forms'] });
+    return ports;
+}
+export function useFormsOptions(_required = {}, _optional = {}) {
+    const options = useContext(FormsOptionsContext);
+    return { ...options, t: options.t ?? translateForms, locale: options.locale ?? 'en', adminBase: options.adminBase ?? '/admin' };
+}
+//# sourceMappingURL=FormsPorts.hooks.js.map

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

@@ -0,0 +1,122 @@
+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 { FormSubmissionsController } from './use-form-submissions.hooks.js';
+import type { FormEditorFieldsBodyProps } from '../components/FormEditorFieldsBody.js';
+import type { AdminFormDefinition, AdminFormField } from '../../models.js';
+/** Host recipient labels and publication actions keep their original DOM at typed slots. */
+export declare function useFormsListView({ forms, t, formatFormDates, toggleStatus, setPendingDelete }: {
+    forms: AdminFormDefinition[] | null;
+    t: (key: string) => string;
+    formatFormDates: (form: AdminFormDefinition) => FormDateLine[];
+    toggleStatus: (form: AdminFormDefinition) => Promise<void>;
+    setPendingDelete: (form: AdminFormDefinition | null) => void;
+}, _optional?: {}): {
+    rows: {
+        rowHandle: string;
+        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;
+        createdAt: string;
+        updatedAt: string;
+        slug: string;
+        workspaceId?: string;
+        fields: AdminFormField[];
+        notify: import("../../models.js").AdminFormNotify;
+    }[];
+    cancelDelete: () => void;
+    RecipientLabel: import("react").ComponentType<{
+        count: number;
+    }> | (({ count }: {
+        count: number;
+    }) => string);
+    headerActions: import("react").ReactNode;
+};
+/** Bind every field-row callback and focus ref outside the markup. */
+export declare function useFormFieldsView({ fields, existingFieldIds, controller }: {
+    fields: AdminFormField[];
+    existingFieldIds: string[];
+    controller: FormFieldsEditorController;
+}, _optional?: {}): {
+    editingField: AdminFormField | null;
+    saveAttributes: (patch: Partial<AdminFormField>) => void;
+    rows: {
+        field: AdminFormField;
+        index: number;
+        base: string;
+        isExisting: boolean;
+        displayName: string;
+        onId: (e: ChangeEvent<HTMLInputElement>) => void;
+        onLabel: (e: ChangeEvent<HTMLInputElement>) => void;
+        onType: (e: ChangeEvent<HTMLSelectElement>) => void;
+        onRequired: (e: ChangeEvent<HTMLInputElement>) => void;
+        onMaxLength: (e: ChangeEvent<HTMLInputElement>) => void;
+        ref: (el: HTMLButtonElement | null) => void;
+        onAttributes: () => void;
+        onRemove: () => void;
+    }[];
+};
+export declare function useFieldAttributesView({ field, fieldIndex, controller, onCancel }: {
+    field: AdminFormField;
+    fieldIndex: number;
+    controller: FieldAttributesDialogController;
+    onCancel: () => void;
+}, _optional?: {}): {
+    displayName: string;
+    onClose: () => void;
+    onClassName: (e: ChangeEvent<HTMLInputElement>) => void;
+    rows: {
+        handle: string;
+        onName: (e: ChangeEvent<HTMLInputElement>) => void;
+        onValue: (e: ChangeEvent<HTMLInputElement>) => void;
+        onRemove: () => void;
+        _rowId: number;
+        name: string;
+        value: string;
+    }[];
+};
+export declare function useSubmissionsView({ controller }: {
+    controller: FormSubmissionsController;
+}, _optional?: {}): {
+    back: () => void;
+    loadMore: () => void;
+    rows: {
+        handle: string;
+        view: () => void;
+        id: string;
+        status?: "active" | "trash";
+        formDefinitionId: string;
+        sourceIp: string;
+        submittedAt: string;
+        workspaceId?: string;
+        data: Record<string, string | boolean>;
+    }[];
+};
+export declare function useFormFieldsBodyView(props: FormEditorFieldsBodyProps, _optional?: {}): {
+    onName: (e: ChangeEvent<HTMLInputElement>) => void;
+    onSlug: (e: ChangeEvent<HTMLInputElement>) => void;
+    onHtml: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    onBuilder: () => void;
+    onHtmlMode: () => void;
+};
+export declare function useFormTabStripView({ onTabChange, tabRefs }: {
+    onTabChange: (tab: 'fields' | 'submissions') => void;
+    tabRefs: MutableRefObject<Array<HTMLButtonElement | null>>;
+}, _optional?: {}): ({
+    ref: (el: HTMLButtonElement | null) => void;
+    onClick: () => void;
+    id: "fields";
+    label: "Fields";
+} | {
+    ref: (el: HTMLButtonElement | null) => void;
+    onClick: () => void;
+    id: "submissions";
+    label: "Submissions";
+})[];
+//# sourceMappingURL=forms-view.hooks.d.ts.map

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

@@ -0,0 +1,79 @@
+import { buildAgentListHandles } from '@jini-ai/agentic';
+import { fieldDisplayName, formRowMenuItems, FORM_TABS } from '../../rules.js';
+import { useFormsOptions, FormsPortsContext } from './FormsPorts.hooks.js';
+import { useContext } from 'react';
+/** Host recipient labels and publication actions keep their original DOM at typed slots. */
+export function useFormsListView({ forms, t, formatFormDates, toggleStatus, setPendingDelete }, _optional = {}) {
+    const ports = useContext(FormsPortsContext);
+    const { slots, headerActions, adminBase } = useFormsOptions();
+    const RecipientLabel = slots?.RecipientLabel ?? (({ count }) => t(count === 1 ? 'recipient' : 'recipients'));
+    const rowHandles = buildAgentListHandles({ prefix: 'forms-row', ids: (forms ?? []).map(form => form.id) });
+    const onEdit = (form) => {
+        if (!ports?.formsNavigation)
+            throw new Error('Missing forms navigation port');
+        ports.formsNavigation.navigate({ base: adminBase, routePath: `/forms/${form.slug}` });
+    };
+    return {
+        rows: (forms ?? []).map((form, index) => ({ ...form, rowHandle: rowHandles[index], dates: formatFormDates(form),
+            menuLabel: t('Actions for form "{name}"').replace('{name}', form.name),
+            menuItems: formRowMenuItems({ form, handlers: { onEdit, onToggleStatus: form => { void toggleStatus(form); }, onDelete: setPendingDelete }, t }), })),
+        cancelDelete: () => setPendingDelete(null), RecipientLabel, headerActions,
+    };
+}
+/** Bind every field-row callback and focus ref outside the markup. */
+export function useFormFieldsView({ fields, existingFieldIds, controller }, _optional = {}) {
+    const handles = buildAgentListHandles({ prefix: 'form-field', ids: fields.map(field => field.id) });
+    const index = controller.editingAttrsIndex;
+    return {
+        editingField: index === null ? null : fields[index] ?? null,
+        saveAttributes: (patch) => {
+            if (index === null)
+                return;
+            controller.updateField(index, patch);
+            controller.closeAttrsDialog();
+        },
+        rows: fields.map((field, index) => ({ field, index, base: handles[index], isExisting: existingFieldIds.includes(field.id), displayName: fieldDisplayName({ field, index }),
+            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 }),
+            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; },
+            onAttributes: () => controller.openAttrsDialog(index), onRemove: () => controller.removeField(index), })),
+    };
+}
+export function useFieldAttributesView({ field, fieldIndex, controller, onCancel }, _optional = {}) {
+    const handles = buildAgentListHandles({ prefix: 'form-field-attrs-row', ids: controller.rows.map(row => String(row._rowId)) });
+    return {
+        displayName: fieldDisplayName({ field, index: fieldIndex }), onClose: () => onCancel(),
+        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 }),
+            onValue: (e) => controller.updateRow(row._rowId, { value: e.target.value }),
+            onRemove: () => controller.removeRow(row._rowId), })),
+    };
+}
+export function useSubmissionsView({ controller }, _optional = {}) {
+    const handles = buildAgentListHandles({ prefix: 'form-submission-view', ids: (controller.submissions ?? []).map(submission => submission.id) });
+    return {
+        // Successful removal invalidates its own query; this callback only exits the detail view.
+        back: () => controller.setSelectedId(null),
+        loadMore: () => { if (controller.nextCursor)
+            controller.load(controller.nextCursor); },
+        rows: (controller.submissions ?? []).map((submission, index) => ({ ...submission, handle: handles[index], view: () => controller.setSelectedId(submission.id) })),
+    };
+}
+export function useFormFieldsBodyView(props, _optional = {}) {
+    return {
+        onName: (e) => props.onNameChange(e.target.value),
+        onSlug: (e) => props.onSlugChange(e.target.value),
+        onHtml: (e) => props.onHtmlChange(e.target.value),
+        onBuilder: () => props.onModeChange('builder'), onHtmlMode: () => props.onModeChange('html'),
+    };
+}
+export function useFormTabStripView({ onTabChange, tabRefs }, _optional = {}) {
+    return FORM_TABS.map((tab, index) => ({ ...tab,
+        ref: (el) => { tabRefs.current[index] = el; },
+        onClick: () => onTabChange(tab.id), }));
+}
+//# sourceMappingURL=forms-view.hooks.js.map

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

@@ -0,0 +1,31 @@
+import type { AdminFormField } from "../../models.js";
+import { type AttrRow } from "../../rules.js";
+/**
+ * @file `FieldAttributesDialog`'s own state and submit action (per-field CSS classes + HTML
+ * attributes), so the dialog in `FormEditor.tsx` is only markup.
+ *
+ * Moved from the host — same state, same validation, same error strings. Draft-row editing and the
+ * validate/shape step now live in `rules.ts` (`updateAttrRow`/`removeAttrRow`/`addAttrRow`,
+ * `buildFieldAttributesPatch`).
+ *
+ * Naming follows `hooks/use-settings-slice.hooks.ts`: `use-<thing>.hooks.ts`. Feature-local because
+ * nothing outside `features/forms` needs it. The former Escape helper was likewise feature-local
+ * because only this dialog needed it; Jini now owns that shared modal behavior, so the helper
+ * and its document subscription are superseded rather than promoted to another local owner.
+ */
+export interface FieldAttributesDialogController {
+    className: string;
+    setClassName: (value: string) => void;
+    rows: AttrRow[];
+    updateRow: (rowId: number, patch: Partial<AttrRow>) => void;
+    removeRow: (rowId: number) => void;
+    addRow: () => void;
+    error: string | null;
+    submit: (e: React.FormEvent) => void;
+}
+export declare function useFieldAttributesDialog(props: {
+    field: AdminFormField;
+    onSave: (patch: Partial<AdminFormField>) => void;
+    onCancel: () => void;
+}, _optional?: Record<string, never>): FieldAttributesDialogController;
+//# sourceMappingURL=use-field-attributes-dialog.hooks.d.ts.map

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

@@ -0,0 +1,22 @@
+import { useController } from "../../../core/react/use-controller.js";
+import { createFieldAttributesDialogController } from "../../controllers/field-attributes-dialog.controller.js";
+import {} from "../../rules.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 className = state.className;
+    const setClassName = (value) => stateController?.update({ key: "className", value });
+    const rows = state.rows;
+    const error = state.error;
+    function updateRow(rowId, patch) { stateController?.updateRow({ rowId, patch }); }
+    function removeRow(rowId) { stateController?.removeRow({ rowId }); }
+    function addRow() { stateController?.addRow({}); }
+    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 };
+}
+//# sourceMappingURL=use-field-attributes-dialog.hooks.js.map