@verbb/formie-browser 1.0.13 → 1.0.15

package/src/js/modules/fields/date-picker.ts

@@ -2,8 +2,8 @@ import flatpickr from 'flatpickr';
 import * as flatpickrLocales from 'flatpickr/dist/l10n/index.js';
 import flatpickrCss from 'flatpickr/dist/flatpickr.css?inline';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
-import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
+import type { BrowserModuleDefinition } from '#contracts/modules';
+import { bindConditionalClear, dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
 import { createDebug } from '#utils/debug';
 
@@ -30,6 +30,8 @@ type DatePickerOptions = {
 
 type FlatpickrInstanceLike = {
     destroy: () => void;
+    selectedDates: Date[];
+    setDate: (dates: Date[], triggerChange?: boolean) => void;
 };
 
 type FlatpickrInput = HTMLInputElement & {
@@ -43,6 +45,7 @@ type FlatpickrChangeInstance = {
 
 function attributesPlugin() {
     return (instance: { input: HTMLInputElement; altInput?: HTMLInputElement | undefined; loadedPlugins: string[] }) => {
+        const originalAttributes = new Map<string, string>();
         return {
             onReady: () => {
                 if (!instance.altInput) {
@@ -60,6 +63,7 @@ function attributesPlugin() {
 
                     const value = instance.input.getAttribute(attribute);
                     if (value !== null) {
+                        originalAttributes.set(attribute, value);
                         instance.altInput?.setAttribute(attribute, value);
                     }
 
@@ -68,6 +72,15 @@ function attributesPlugin() {
 
                 instance.loadedPlugins.push('formie-attributes');
             },
+            onDestroy: () => {
+                // Conditional fields and page navigation can mount this input again.
+                // Restore the markers and labels moved onto the temporary alt input.
+                originalAttributes.forEach((value, attribute) => {
+                    if (!instance.input.hasAttribute(attribute)) {
+                        instance.input.setAttribute(attribute, value);
+                    }
+                });
+            },
         };
     };
 }
@@ -77,8 +90,9 @@ function normalizeOffsetDate(input: string | null | undefined, type: 'min' | 'ma
         return null;
     }
 
-    if (!Number.isNaN(Date.parse(input))) {
-        return new Date(input);
+    const absoluteDate = parseSubmissionDate(input);
+    if (absoluteDate) {
+        return absoluteDate;
     }
 
     // Form config may express relative min/max bounds like "+2 weeks", which are
@@ -196,7 +210,9 @@ function formatSubmissionDate(date: Date, options: DatePickerOptions): string {
 }
 
 function parseSubmissionDate(value: string): Date | null {
-    const parsed = new Date(value);
+    // Date-only field values represent a local calendar day. JavaScript otherwise
+    // parses YYYY-MM-DD as UTC and shifts the picker to yesterday west of UTC.
+    const parsed = new Date(/^\d{4}-\d{2}-\d{2}$/.test(value) ? `${value}T00:00:00` : value);
 
     if (Number.isNaN(parsed.getTime())) {
         return null;
@@ -309,6 +325,19 @@ function initDatePicker(input: FlatpickrInput, options: DatePickerOptions): () =
 
     const instance = flatpickr(input, mergedOptions) as FlatpickrInstanceLike;
     input._formieFlatpickr = instance;
+    const initialDates = instance.selectedDates.map((date) => new Date(date.getTime()));
+    const form = input.form;
+    const onReset = (event: Event) => {
+        // Flatpickr uses hidden transport inputs, whose values survive native reset.
+        // Restore the picker and its range inputs together after the native controls.
+        queueMicrotask(() => {
+            if (!event.defaultPrevented) {
+                instance.setDate(initialDates, true);
+            }
+        });
+    };
+    form?.addEventListener('reset', onReset);
+    const unbindConditionalClear = bindConditionalClear(input, () => instance.setDate([], true));
     debug.log('Initialized.', {
         inputName: input.name,
         isRange,
@@ -320,6 +349,8 @@ function initDatePicker(input: FlatpickrInput, options: DatePickerOptions): () =
     });
 
     return () => {
+        unbindConditionalClear();
+        form?.removeEventListener('reset', onReset);
         instance.destroy();
         delete input._formieFlatpickr;
         debug.log('Destroyed.', {
@@ -328,8 +359,10 @@ function initDatePicker(input: FlatpickrInput, options: DatePickerOptions): () =
     };
 }
 
-export const datePickerModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const datePickerModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return !!ctx.target.querySelector(INPUT_SELECTOR);

package/src/js/modules/fields/file-upload.ts

@@ -1,6 +1,6 @@
 import fileUploadCss from '#theme-css/fields/_file.css?inline';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
 import { getFieldModuleEventName, getFileUploadEventName, getFormStateEventName } from '#utils/event-names';
@@ -13,6 +13,7 @@ const FILE_UPLOAD_KEY_ATTR = 'data-formie-file-upload-key';
 const HYDRATE_ENDPOINT_ATTR = 'data-formie-file-upload-hydrate-endpoint';
 const HIDDEN_INPUT_ANCHOR_ATTR = 'data-formie-file-upload-anchor';
 const HIDDEN_INPUT_VALUE_ATTR = 'data-formie-file-upload-asset-id';
+const HIDDEN_INPUT_ENTRY_ATTR = 'data-formie-file-upload-entry';
 const FILE_VALIDATORS = [
     'fileLimit',
     'fileSizeMinLimit',
@@ -29,6 +30,9 @@ type UploadedAsset = {
     assetId: number | null;
     filename: string;
     url?: string | null;
+    uploadUid?: string | null;
+    attachToken?: string | null;
+    viewToken?: string | null;
 };
 
 type FileUploadHydrateResponse = {
@@ -93,7 +97,8 @@ function getUploadedAssetInputs(field: HTMLElement, input: HTMLInputElement): HT
     const assetInputName = getUploadedAssetInputName(input);
 
     return getHiddenInputs(field).filter((hiddenInput) => {
-        return hiddenInput.name === assetInputName && hiddenInput.value.trim() !== '';
+        return hiddenInput.hasAttribute(HIDDEN_INPUT_VALUE_ATTR)
+            || (hiddenInput.name === assetInputName && hiddenInput.value.trim() !== '');
     });
 }
 
@@ -149,6 +154,9 @@ function normalizeUploadedAsset(candidate: unknown): UploadedAsset | null {
         assetId,
         filename,
         url,
+        uploadUid: toTrimmedString(candidate.uploadUid) || null,
+        attachToken: toTrimmedString(candidate.attachToken) || null,
+        viewToken: toTrimmedString(candidate.viewToken ?? candidate.uploadToken) || null,
     };
 }
 
@@ -186,8 +194,11 @@ function readSummaryItems(summaryRoot: HTMLElement | null): UploadedAsset[] {
 function readUploadedAssetsFromHiddenInputs(field: HTMLElement, input: HTMLInputElement): UploadedAsset[] {
     return getUploadedAssetInputs(field, input).map((hiddenInput) => {
         return {
-            assetId: toPositiveInt(hiddenInput.value),
+            assetId: toPositiveInt(hiddenInput.getAttribute(HIDDEN_INPUT_VALUE_ATTR)) ?? toPositiveInt(hiddenInput.value),
             filename: '',
+            viewToken: hiddenInput.getAttribute('data-formie-file-upload-token'),
+            uploadUid: hiddenInput.name.endsWith('[uploadUid]') ? hiddenInput.value : null,
+            attachToken: getHiddenInputs(field).find((entry) => entry.name === hiddenInput.name.replace(/\[uploadUid\]$/, '[attachToken]'))?.value,
         };
     }).filter((asset) => {
         return asset.assetId !== null;
@@ -201,6 +212,7 @@ function mergeUploadedAssets(assetIds: UploadedAsset[], summaryItems: UploadedAs
 
     return assetIds.map((asset, index) => {
         return {
+            ...asset,
             assetId: asset.assetId,
             filename: summaryItems[index]?.filename || '',
         };
@@ -246,8 +258,8 @@ function registerValidators(form: HTMLFormElement | null): void {
         });
 
         validator.addValidator('fileSizeMinLimit', ({ input }) => {
-            const sizeLimit = parseFloat(input.getAttribute('data-formie-size-min-limit') || '');
-            const sizeBytes = sizeLimit * 1000 * 1000;
+            const maxFileSize = parseFloat(input.getAttribute('data-formie-size-min-limit') || '');
+            const sizeBytes = maxFileSize * 1000 * 1000;
 
             if (input.type !== 'file' || !sizeBytes || !('files' in input) || !input.files?.length) {
                 return true;
@@ -264,8 +276,8 @@ function registerValidators(form: HTMLFormElement | null): void {
         });
 
         validator.addValidator('fileSizeMaxLimit', ({ input }) => {
-            const sizeLimit = parseFloat(input.getAttribute('data-formie-size-max-limit') || '');
-            const sizeBytes = sizeLimit * 1000 * 1000;
+            const maxFileSize = parseFloat(input.getAttribute('data-formie-size-max-limit') || '');
+            const sizeBytes = maxFileSize * 1000 * 1000;
 
             if (input.type !== 'file' || !sizeBytes || !('files' in input) || !input.files?.length) {
                 return true;
@@ -349,23 +361,41 @@ function updateUploadedAssetInputs(field: HTMLElement, input: HTMLInputElement,
     let insertionPoint: HTMLInputElement = anchor;
     // The upload event returns persisted asset ids; convert those back into the
     // hidden-input shape the backend expects on subsequent submit/save actions.
-    const anchorName = getUploadedAssetInputName(input);
-    getUploadedAssetInputs(field, input).forEach((hiddenInput) => {
+    const baseName = getFileValueName(input);
+    getHiddenInputs(field).filter((hiddenInput) => {
+        return hiddenInput.hasAttribute(HIDDEN_INPUT_ENTRY_ATTR)
+            || (hiddenInput.name === `${baseName}[]` && hiddenInput.value.trim() !== '');
+    }).forEach((hiddenInput) => {
         hiddenInput.remove();
     });
 
-    uploadedAssets.forEach((asset) => {
+    uploadedAssets.forEach((asset, index) => {
         if (!asset.assetId) {
             return;
         }
 
         const hiddenInput = document.createElement('input');
         hiddenInput.type = 'hidden';
-        hiddenInput.name = anchorName;
-        hiddenInput.value = String(asset.assetId);
-        hiddenInput.setAttribute(HIDDEN_INPUT_VALUE_ATTR, 'true');
+        const hasCapability = asset.uploadUid && asset.attachToken;
+        hiddenInput.name = `${baseName}[${index}][${hasCapability ? 'uploadUid' : 'assetId'}]`;
+        hiddenInput.value = hasCapability ? asset.uploadUid! : String(asset.assetId);
+        hiddenInput.setAttribute(HIDDEN_INPUT_ENTRY_ATTR, 'true');
+        hiddenInput.setAttribute(HIDDEN_INPUT_VALUE_ATTR, String(asset.assetId));
+        if (asset.viewToken) {
+            hiddenInput.setAttribute('data-formie-file-upload-token', asset.viewToken);
+        }
         insertionPoint.insertAdjacentElement('afterend', hiddenInput);
         insertionPoint = hiddenInput;
+
+        if (hasCapability) {
+            const tokenInput = document.createElement('input');
+            tokenInput.type = 'hidden';
+            tokenInput.name = `${baseName}[${index}][attachToken]`;
+            tokenInput.value = asset.attachToken!;
+            tokenInput.setAttribute(HIDDEN_INPUT_ENTRY_ATTR, 'true');
+            insertionPoint.insertAdjacentElement('afterend', tokenInput);
+            insertionPoint = tokenInput;
+        }
     });
 
     input.value = '';
@@ -385,7 +415,7 @@ function getFormHandle(form: HTMLFormElement | null): string {
     return form.getAttribute('data-formie-handle')?.trim() || '';
 }
 
-function buildHydrateFormData(field: HTMLElement, input: HTMLInputElement, assetIds: number[]): FormData {
+function buildHydrateFormData(field: HTMLElement, input: HTMLInputElement, assets: UploadedAsset[]): FormData {
     const form = input.form;
     const body = new FormData();
     const handle = getFormHandle(form);
@@ -405,8 +435,13 @@ function buildHydrateFormData(field: HTMLElement, input: HTMLInputElement, asset
         body.append('submissionUid', submissionUidInput.value.trim());
     }
 
-    assetIds.forEach((assetId) => {
-        body.append('assetIds[]', String(assetId));
+    assets.forEach((asset) => {
+        if (asset.assetId) {
+            body.append('assetIds[]', String(asset.assetId));
+            if (asset.viewToken) {
+                body.append(`uploadTokens[${asset.assetId}]`, asset.viewToken);
+            }
+        }
     });
 
     return body;
@@ -425,8 +460,9 @@ async function hydrateUploadedAssets(field: HTMLElement, input: HTMLInputElement
 
     const hydrateEndpoint = input.getAttribute(HYDRATE_ENDPOINT_ATTR)?.trim() || '/actions/formie/file-upload/hydrate';
     const response = await requestJson<FileUploadHydrateResponse>(hydrateEndpoint, {
+        profile: field.closest('form')?.dataset.formieRequestProfile as import('@verbb/formie-core').BrowserRequestOptions['profile'],
         method: 'POST',
-        body: buildHydrateFormData(field, input, assetIds),
+        body: buildHydrateFormData(field, input, uploadedAssets),
     });
     const hydratedAssets = normalizeUploadedAssets(response.assets);
 
@@ -445,6 +481,7 @@ async function hydrateUploadedAssets(field: HTMLElement, input: HTMLInputElement
 
         const hydratedAsset = hydratedMap.get(asset.assetId)!;
         return {
+            ...asset,
             assetId: asset.assetId,
             filename: hydratedAsset.filename || asset.filename,
             url: hydratedAsset.url ?? asset.url,
@@ -473,24 +510,24 @@ function getUploadedAssetsFromEvent(event: Event, matcher: FileUploadEventMatche
 
     if (detailInputKey !== '' && detailInputKey === matcher.inputKey) {
         matchedByInputKey = true;
-        candidates.push(detail.assets, detail.assetIds, detail.data);
+        candidates.push(detail.uploadedAssets, detail.assets, detail.assetIds, detail.data);
     }
 
     if (detailInputName !== '' && detailInputName === matcher.inputName) {
         matchedByInputName = true;
-        candidates.push(detail.assets, detail.assetIds, detail.data);
+        candidates.push(detail.uploadedAssets, detail.assets, detail.assetIds, detail.data);
     }
 
     if (detailFieldHandle === matcher.fieldHandle) {
         matchedByFieldHandle = true;
-        candidates.push(detail.assets, detail.assetIds, detail.data);
+        candidates.push(detail.uploadedAssets, detail.assets, detail.assetIds, detail.data);
     }
 
     if (nestedData) {
         const nestedAssetCandidates = [
+            nestedData.uploadedAssets,
             nestedData.assets,
             nestedData.assetIds,
-            nestedData.uploadedAssets,
             nestedData.data,
         ];
 
@@ -657,8 +694,10 @@ function bindFileUploadInput(field: HTMLElement, input: HTMLInputElement, form:
     };
 }
 
-export const fileUploadModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const fileUploadModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return !!ctx.target.querySelector(INPUT_SELECTOR);

package/src/js/modules/fields/hidden.ts

@@ -1,4 +1,4 @@
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { getModuleFieldContainers } from '#modules/fields/shared';
 
 const INPUT_SELECTOR = 'input[data-formie-hidden-input]';
@@ -22,8 +22,10 @@ function getCookieValue(name: string): string | null {
     return null;
 }
 
-export const hiddenModule: FormieModuleDefinition = {
-    id: 'hidden',
+export const hiddenModule: BrowserModuleDefinition = {
+    moduleId: 'formie:hidden',
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return !!ctx.target.querySelector(INPUT_SELECTOR);

package/src/js/modules/fields/index.ts

@@ -1,6 +1,6 @@
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 
-export const builtinFieldModuleLoaders: Record<string, () => Promise<FormieModuleDefinition>> = {
+export const builtinFieldModuleLoaders: Record<string, () => Promise<BrowserModuleDefinition>> = {
     // Keep the builtin map flat and explicit so manifest ids remain the source of
     // truth for lazy-loading first-party field enhancements.
     'calculations': () => import('#modules/fields/calculations').then((module) => module.calculationsModule),

package/src/js/modules/fields/password-validation.ts

@@ -1,6 +1,6 @@
 import { getTextLimitMetrics } from '@verbb/formie-core';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { getModuleFieldTarget, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
 
 const INPUT_SELECTOR = 'input[data-formie-password-input]';
@@ -104,8 +104,10 @@ function unregisterValidators(form: HTMLFormElement | null): void {
     releaseFormValidators(form, VALIDATOR_SCOPE, PASSWORD_VALIDATORS);
 }
 
-export const passwordValidationModule: FormieModuleDefinition = {
-    id: 'password-validation',
+export const passwordValidationModule: BrowserModuleDefinition = {
+    moduleId: 'formie:password-validation',
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return !!ctx.target.querySelector(`${INPUT_SELECTOR}[data-formie-password-min-length], ${INPUT_SELECTOR}[data-formie-password-require-uppercase], ${INPUT_SELECTOR}[data-formie-password-require-lowercase], ${INPUT_SELECTOR}[data-formie-password-require-special-character]`);

package/src/js/modules/fields/phone-country.ts

@@ -1,7 +1,7 @@
 import intlTelInput from 'intl-tel-input';
 import intlTelInputCss from 'intl-tel-input/styles?inline';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getModuleFieldContainers, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
 import { createGeoIpLookup } from '#utils/country-from-ip';
@@ -18,7 +18,7 @@ ensureModuleStyles(MODULE_ID, [intlTelInputCss]);
 
 type PhoneCountryOptions = {
     countryDefaultValue?: string;
-    countryAllowed?: string[];
+    allowedCountryCodes?: string[];
     countryPreselectFromIp?: boolean;
     countryFromIpAction?: string;
     language?: string;
@@ -81,7 +81,7 @@ function unregisterValidators(form: HTMLFormElement | null): void {
     releaseFormValidators(form, VALIDATOR_SCOPE, [PHONE_COUNTRY_VALIDATOR]);
 }
 
-function buildOptions(options: PhoneCountryOptions): Record<string, unknown> {
+function buildOptions(options: PhoneCountryOptions, form: HTMLFormElement | null): Record<string, unknown> {
     const intlOptions: Record<string, unknown> = {
         allowDropdown: true,
         nationalMode: false,
@@ -93,7 +93,7 @@ function buildOptions(options: PhoneCountryOptions): Record<string, unknown> {
         loadUtils: () => import('intl-tel-input/utils'),
     };
 
-    const allowedCountries = (options.countryAllowed || [])
+    const allowedCountries = (options.allowedCountryCodes || [])
         .map((item) => {
             return item.toLowerCase();
         })
@@ -116,7 +116,7 @@ function buildOptions(options: PhoneCountryOptions): Record<string, unknown> {
         intlOptions.initialCountry = options.countryDefaultValue.toLowerCase();
     } else if (options.countryPreselectFromIp) {
         intlOptions.initialCountry = 'auto';
-        intlOptions.geoIpLookup = createGeoIpLookup(options.countryFromIpAction);
+        intlOptions.geoIpLookup = createGeoIpLookup(options.countryFromIpAction, form);
     }
 
     if (Array.isArray(intlOptions.onlyCountries) && typeof intlOptions.initialCountry === 'string') {
@@ -130,7 +130,7 @@ function buildOptions(options: PhoneCountryOptions): Record<string, unknown> {
 }
 
 function initPhoneField(phoneInput: PhoneInput, countryInput: HTMLInputElement, options: PhoneCountryOptions): () => void {
-    const intlOptions = buildOptions(options);
+    const intlOptions = buildOptions(options, phoneInput.closest('form'));
 
     dispatchFieldEvent(phoneInput, MODULE_ID, 'before-init', {
         phoneCountry: phoneInput,
@@ -163,6 +163,30 @@ function initPhoneField(phoneInput: PhoneInput, countryInput: HTMLInputElement,
     phoneInput.addEventListener('countrychange', syncCountry);
     phoneInput.addEventListener('blur', syncCountry);
     syncCountry();
+
+    // Keep the country dropdown button in sync when the tel input is enabled/disabled after
+    // init (multi-page page-hidden, or conditions). intl-tel-input disables the button to match
+    // a disabled input at init, but won't re-enable it when `disabled` is later removed.
+    const syncCountryButton = () => {
+        const button = phoneInput.closest('.iti')?.querySelector('.iti__selected-country');
+
+        if (!(button instanceof HTMLElement)) {
+            return;
+        }
+
+        if (phoneInput.disabled) {
+            button.setAttribute('disabled', 'true');
+        } else {
+            button.removeAttribute('disabled');
+        }
+    };
+
+    syncCountryButton();
+    const countryButtonObserver = new MutationObserver(() => {
+        syncCountryButton();
+    });
+    countryButtonObserver.observe(phoneInput, { attributes: true, attributeFilter: ['disabled'] });
+
     debug.log('Initialized.', {
         inputName: phoneInput.name,
         restrictedCountries: phoneInput.restrictedCountries,
@@ -177,6 +201,7 @@ function initPhoneField(phoneInput: PhoneInput, countryInput: HTMLInputElement,
     return () => {
         phoneInput.removeEventListener('countrychange', syncCountry);
         phoneInput.removeEventListener('blur', syncCountry);
+        countryButtonObserver.disconnect();
         validator.destroy();
         delete phoneInput.allowedCountries;
         delete phoneInput.validator;
@@ -188,8 +213,10 @@ function initPhoneField(phoneInput: PhoneInput, countryInput: HTMLInputElement,
     };
 }
 
-export const phoneCountryModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const phoneCountryModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return !!ctx.target.querySelector(PHONE_SELECTOR);

package/src/js/modules/fields/repeater.ts

@@ -1,6 +1,6 @@
 import repeaterCss from '#theme-css/fields/_repeater.css?inline';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getTemplateSource, getTemplateSourceHtml } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
 import { sleep } from '#utils/async';
@@ -32,6 +32,18 @@ function getRowCount(field: HTMLElement): number {
     return field.querySelectorAll(ROW_SELECTOR).length;
 }
 
+function focusRow(row: Element | null): boolean {
+    const control = Array.from(row?.querySelectorAll<HTMLElement>(
+        'input:not([type="hidden"]), select, textarea, button, a[href], [role="button"], [role="combobox"], [role="textbox"], [contenteditable="true"]',
+    ) || []).find((element) => {
+        return element.tabIndex >= 0 && !element.matches(':disabled')
+            && !element.closest('[hidden], [inert]') && element.getClientRects().length > 0;
+    });
+
+    control?.focus();
+    return !!control;
+}
+
 function syncAddButton(addButton: HTMLButtonElement | null, rowCount: number): void {
     if (!addButton) {
         return;
@@ -46,7 +58,7 @@ function syncAddButton(addButton: HTMLButtonElement | null, rowCount: number): v
     addButton.disabled = false;
 }
 
-function bindRepeaterField(field: HTMLElement): () => void {
+function bindRepeaterField(field: HTMLElement, isCpEdit: boolean): () => void {
     const container = field.matches(CONTAINER_SELECTOR)
         ? field
         : field.querySelector(CONTAINER_SELECTOR);
@@ -57,6 +69,9 @@ function bindRepeaterField(field: HTMLElement): () => void {
         return () => {};
     }
 
+    const form = field.closest('form');
+    let disposed = false;
+    let generation = 0;
     const removeHandlers = new Map<HTMLElement, EventListener>();
     // Start after the highest existing row id so SSR rows and client-added rows
     // keep producing unique `__ROW__` replacements across one repeater instance.
@@ -84,8 +99,17 @@ function bindRepeaterField(field: HTMLElement): () => void {
                     return;
                 }
 
+                const restoreFocus = row.contains(document.activeElement)
+                    && (!isCpEdit || (event instanceof MouseEvent && event.detail === 0));
+                const nextRow = row.nextElementSibling;
+                const previousRow = row.previousElementSibling;
                 row.remove();
                 syncAddButton(addButton instanceof HTMLButtonElement ? addButton : null, getRowCount(field));
+                // Removing the focused control otherwise sends keyboard users back
+                // to the document body. Keep them in the nearest surviving row.
+                if (restoreFocus && !focusRow(nextRow) && !focusRow(previousRow)) {
+                    if (addButton instanceof HTMLButtonElement) addButton.focus();
+                }
                 debug.log('Row removed.', {
                     rowCount: getRowCount(field),
                 });
@@ -100,7 +124,7 @@ function bindRepeaterField(field: HTMLElement): () => void {
         });
     };
 
-    const addRow = async() => {
+    const addRow = async(focusNewRow = false) => {
         if (!(addButton instanceof HTMLButtonElement)) {
             return;
         }
@@ -130,11 +154,16 @@ function bindRepeaterField(field: HTMLElement): () => void {
             return;
         }
 
+        const addedGeneration = generation;
         container.appendChild(row);
         // Give downstream field modules a tick to see the new row before we emit
         // the public append/init-row lifecycle events used for nested enhancements.
         await sleep(50);
+        if (disposed || addedGeneration !== generation || !row.isConnected) return;
         bindRemoveButtons();
+        // Rows are inserted before Add, so leaving focus there skips the new
+        // inputs on Tab. Do not steal focus if the user moved on while mounting.
+        if (focusNewRow && document.activeElement === addButton) focusRow(row);
         syncAddButton(addButton, getRowCount(field));
         debug.log('Row appended.', {
             rowCount: getRowCount(field),
@@ -151,7 +180,10 @@ function bindRepeaterField(field: HTMLElement): () => void {
 
     const addHandler = (event: Event) => {
         event.preventDefault();
-        void addRow();
+        // Pointer additions in the CP should not focus Craft's field wrappers
+        // and show a focus ring around the newly inserted field.
+        const focusNewRow = !isCpEdit || (event instanceof MouseEvent && event.detail === 0);
+        void addRow(focusNewRow);
     };
 
     if (addButton instanceof HTMLButtonElement) {
@@ -170,6 +202,23 @@ function bindRepeaterField(field: HTMLElement): () => void {
         }
     }
 
+    const initialRows = Array.from(container.children).map((row) => row.cloneNode(true));
+
+    const onReset = (event: Event) => {
+        queueMicrotask(() => {
+            if (event.defaultPrevented || disposed) return;
+            generation++;
+            removeHandlers.forEach((handler, button) => button.removeEventListener('click', handler));
+            removeHandlers.clear();
+            // Replace rows so removed initial rows return and added rows disappear.
+            // The module loader disposes old controls and hydrates the new rows.
+            container.replaceChildren(...initialRows.map((row) => row.cloneNode(true)));
+            bindRemoveButtons();
+            syncAddButton(addButton instanceof HTMLButtonElement ? addButton : null, getRowCount(field));
+        });
+    };
+    form?.addEventListener('reset', onReset);
+
     dispatchFieldEvent(field, MODULE_ID, 'init', {
         repeater: field,
     });
@@ -178,6 +227,8 @@ function bindRepeaterField(field: HTMLElement): () => void {
     });
 
     return () => {
+        disposed = true;
+        form?.removeEventListener('reset', onReset);
         if (addButton instanceof HTMLButtonElement) {
             addButton.removeEventListener('click', addHandler);
         }
@@ -188,8 +239,10 @@ function bindRepeaterField(field: HTMLElement): () => void {
     };
 }
 
-export const repeaterModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const repeaterModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return ctx.target instanceof HTMLElement && (
@@ -209,7 +262,7 @@ export const repeaterModule: FormieModuleDefinition = {
             });
 
         const destroyBindings = fields.map((field) => {
-            return bindRepeaterField(field);
+            return bindRepeaterField(field, ctx.surface === 'cp-edit');
         });
         debug.log('Module setup.', { fieldCount: fields.length });