@verbb/formie-browser 1.0.12 → 1.0.14

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);
+                    }
+                });
+            },
         };
     };
 }
@@ -285,6 +298,12 @@ function initDatePicker(input: FlatpickrInput, options: DatePickerOptions): () =
         if (startDate) {
             defaultOptions.defaultDate = endDate ? [startDate, endDate] : [startDate];
         }
+    } else if (input.value) {
+        const defaultDate = parseSubmissionDate(input.value);
+
+        if (defaultDate) {
+            defaultOptions.defaultDate = defaultDate;
+        }
     }
 
     const mergedOptions = {
@@ -303,6 +322,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,
@@ -314,6 +346,8 @@ function initDatePicker(input: FlatpickrInput, options: DatePickerOptions): () =
     });
 
     return () => {
+        unbindConditionalClear();
+        form?.removeEventListener('reset', onReset);
         instance.destroy();
         delete input._formieFlatpickr;
         debug.log('Destroyed.', {
@@ -322,8 +356,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',
@@ -93,7 +94,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() !== '');
     });
 }
 
@@ -186,7 +188,7 @@ 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: '',
         };
     }).filter((asset) => {
@@ -349,21 +351,25 @@ 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.name = `${baseName}[${index}][assetId]`;
         hiddenInput.value = String(asset.assetId);
-        hiddenInput.setAttribute(HIDDEN_INPUT_VALUE_ATTR, 'true');
+        hiddenInput.setAttribute(HIDDEN_INPUT_ENTRY_ATTR, 'true');
+        hiddenInput.setAttribute(HIDDEN_INPUT_VALUE_ATTR, String(asset.assetId));
         insertionPoint.insertAdjacentElement('afterend', hiddenInput);
         insertionPoint = hiddenInput;
     });
@@ -425,6 +431,7 @@ 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),
     });
@@ -657,8 +664,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';
@@ -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,
@@ -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';
@@ -188,8 +188,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 && (

package/src/js/modules/fields/rich-text.ts

@@ -21,7 +21,7 @@ import strikethroughIcon from '#icons/rich-text/strikethrough.svg?raw';
 import ulistIcon from '#icons/rich-text/ulist.svg?raw';
 import underlineIcon from '#icons/rich-text/underline.svg?raw';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
 
@@ -141,7 +141,9 @@ function initRichTextField(container: HTMLElement, input: RichTextInput, options
         actions: getActions(options.buttons),
         onChange: (html: string) => {
             const emptyParagraph = '<p><br></p>';
-            input.value = input.placeholder && html === emptyParagraph ? '' : html;
+            // Treat Pell's empty document as blank so required validation matches
+            // a never-touched textarea (and so clearing the editor can fail required).
+            input.value = (!html || html === emptyParagraph) ? '' : html;
             // Bubble both generic input and a namespaced rich-text change hook.
             input.dispatchEvent(new Event('input', { bubbles: true }));
             dispatchFieldEvent(input, MODULE_ID, 'populate', {
@@ -166,6 +168,17 @@ function initRichTextField(container: HTMLElement, input: RichTextInput, options
     input.richText = editor;
     editor.content.innerHTML = input.value || '';
 
+    const form = input.form;
+    const onReset = (event: Event) => {
+        // Wait for the textarea to regain its default value before updating Pell.
+        queueMicrotask(() => {
+            if (!event.defaultPrevented) {
+                editor.content.innerHTML = input.value || '';
+            }
+        });
+    };
+    form?.addEventListener('reset', onReset);
+
     if (input.placeholder) {
         editor.content.setAttribute('data-placeholder', input.placeholder);
     }
@@ -175,13 +188,16 @@ function initRichTextField(container: HTMLElement, input: RichTextInput, options
     });
 
     return () => {
+        form?.removeEventListener('reset', onReset);
         container.innerHTML = '';
         delete input.richText;
     };
 }
 
-export const richTextModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const richTextModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return ctx.target instanceof HTMLElement && hasRichTextField(ctx.target);

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

@@ -17,6 +17,19 @@ const fallbackCssEscape = (value: string): string => {
 };
 const validatorRegistrations = new WeakMap<HTMLFormElement, Map<string, number>>();
 
+// Conditions clear ordinary controls directly. Enhanced controls also need to
+// clear their hidden transport values before their modules are unmounted.
+export function bindConditionalClear(input: HTMLElement, clear: () => void): () => void {
+    const root = input.getRootNode();
+    const handler = (event: Event) => {
+        if (event.target instanceof Element && event.target.contains(input)) {
+            clear();
+        }
+    };
+    root.addEventListener('formie:field:clear', handler);
+    return () => root.removeEventListener('formie:field:clear', handler);
+}
+
 export function escapeSelectorValue(value: string): string {
     if (typeof window.CSS?.escape === 'function') {
         return window.CSS.escape(value);

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

@@ -1,8 +1,8 @@
 import SignaturePad from 'signature_pad';
 import signatureCss from '#theme-css/fields/_signature.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';
 
 const INPUT_SELECTOR = 'input[data-formie-signature-input]';
@@ -111,11 +111,45 @@ function drawValueOnCanvas(canvas: HTMLCanvasElement, value: string): void {
     };
 }
 
+function getImageDimensions(dataUrl: string): Promise<{ width: number; height: number } | null> {
+    return new Promise((resolve) => {
+        const image = new Image();
+        image.onload = () => {
+            resolve({
+                width: image.naturalWidth,
+                height: image.naturalHeight,
+            });
+        };
+        image.onerror = () => resolve(null);
+        image.src = dataUrl;
+    });
+}
+
+async function syncCanvasHeightToSignatureValue(canvas: HTMLCanvasElement, value: string): Promise<void> {
+    const dimensions = await getImageDimensions(value);
+
+    if (!dimensions?.width || !dimensions?.height) {
+        return;
+    }
+
+    const { width: containerWidth } = getCanvasSize(canvas);
+
+    if (!(containerWidth > 0)) {
+        return;
+    }
+
+    // Match the stored PNG aspect ratio so restored signatures are not vertically stretched.
+    const aspectHeight = Math.max(1, Math.round(containerWidth * (dimensions.height / dimensions.width)));
+    canvas.style.height = `${aspectHeight}px`;
+}
+
 async function restoreSignatureValue(signaturePad: SignaturePad, canvas: HTMLCanvasElement, value: string): Promise<void> {
     if (!value) {
         return;
     }
 
+    await syncCanvasHeightToSignatureValue(canvas, value);
+
     try {
         await signaturePad.fromDataURL(value);
     } catch {
@@ -131,6 +165,8 @@ function initSignatureField(
     clearButton: HTMLElement | null,
     options: SignatureOptions,
 ): () => void {
+    const initialValue = input.value;
+    const form = input.form;
     const messages = getSignatureMessages(field);
 
     if (!supportsCanvas()) {
@@ -184,6 +220,12 @@ function initSignatureField(
     };
 
     const resizeCanvas = async(): Promise<boolean> => {
+        const existingValue = input.value || (signaturePad.isEmpty() ? '' : signaturePad.toDataURL());
+
+        if (existingValue) {
+            await syncCanvasHeightToSignatureValue(canvas, existingValue);
+        }
+
         const { width, height } = getCanvasSize(canvas);
 
         if (!(width > 0) || !(height > 0)) {
@@ -196,8 +238,6 @@ function initSignatureField(
             return false;
         }
 
-        const existingValue = input.value || (signaturePad.isEmpty() ? '' : signaturePad.toDataURL());
-
         canvas.width = width * ratio;
         canvas.height = height * ratio;
         context.setTransform(1, 0, 0, 1, 0, 0);
@@ -311,6 +351,20 @@ function initSignatureField(
         syncInputValue('');
     };
 
+    const onReset = (event: Event) => {
+        // Hidden inputs do not restore an earlier value through native reset.
+        // Reset both the submitted signature and the pad to their initial state.
+        queueMicrotask(() => {
+            if (!event.defaultPrevented) {
+                signaturePad.clear();
+                syncInputValue(initialValue);
+                void restoreSignatureValue(signaturePad, canvas, initialValue);
+            }
+        });
+    };
+    form?.addEventListener('reset', onReset);
+
+    const unbindConditionalClear = bindConditionalClear(input, clearSignature);
     signaturePad.addEventListener('endStroke', syncValue);
     window.addEventListener('resize', resizeHandler);
     root.addEventListener('formie:page:navigate:after', pageNavigateHandler as EventListener);
@@ -327,6 +381,8 @@ function initSignatureField(
 
     return () => {
         clearSizeRetry();
+        unbindConditionalClear();
+        form?.removeEventListener('reset', onReset);
         signaturePad.removeEventListener('endStroke', syncValue);
         window.removeEventListener('resize', resizeHandler);
         root.removeEventListener('formie:page:navigate:after', pageNavigateHandler as EventListener);
@@ -340,8 +396,10 @@ function initSignatureField(
     };
 }
 
-export const signatureModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const signatureModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return !!ctx.target.querySelector(CANVAS_SELECTOR);

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

@@ -1,6 +1,6 @@
 import summaryCss from '#theme-css/fields/_summary.css?inline';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
 import { toggleThemeClasses } from '#theme/theme-classes';
@@ -11,8 +11,6 @@ import { requestText } from '#utils/http';
 const BLOCKS_SELECTOR = '[data-formie-summary-blocks]';
 const CONTAINER_SELECTOR = '[data-formie-summary-container]';
 const SUMMARY_ACTION = 'formie/fields/get-summary-html';
-const THEME_CONFIG_ATTR = 'data-formie-theme-config';
-const FRONTEND_THEME_ATTR = 'data-formie-frontend-theme';
 const MODULE_ID = 'summary';
 const debug = createDebug('fields', 'summary');
 
@@ -20,8 +18,6 @@ ensureModuleStyles(MODULE_ID, [summaryCss]);
 
 type SummaryRequestState = {
     accessToken: string | null;
-    themeConfig: string | null;
-    frontendTheme: string | null;
 };
 
 function getSummaryRequestUrl(): string {
@@ -31,14 +27,12 @@ function getSummaryRequestUrl(): string {
     return url.toString();
 }
 
-function getSummaryRequestState(field: HTMLElement, form: HTMLFormElement): SummaryRequestState {
+function getSummaryRequestState(field: HTMLElement): SummaryRequestState {
     const summaryTokenInput = field.querySelector('[data-formie-summary-token]') as HTMLInputElement | null;
     const accessToken = summaryTokenInput?.value?.trim() || null;
 
     return {
         accessToken,
-        themeConfig: form.getAttribute(THEME_CONFIG_ATTR)?.trim() || null,
-        frontendTheme: form.getAttribute(FRONTEND_THEME_ATTR)?.trim() || null,
     };
 }
 
@@ -53,14 +47,6 @@ async function requestSummaryHtml(form: HTMLFormElement, state: SummaryRequestSt
     formData.set('action', SUMMARY_ACTION);
     formData.set('accessToken', state.accessToken);
 
-    if (state.themeConfig) {
-        formData.set('themeConfig', state.themeConfig);
-    }
-
-    if (state.frontendTheme) {
-        formData.set('frontendTheme', state.frontendTheme);
-    }
-
     return requestText(getSummaryRequestUrl(), {
         method: 'POST',
         body: formData,
@@ -115,7 +101,7 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
         toggleThemeClasses(blocks, form, 'loading', false);
     };
 
-    const initialState = getSummaryRequestState(field, form);
+    const initialState = getSummaryRequestState(field);
     setLoadingState(!!initialState.accessToken);
 
     const queueFetch = (): void => {
@@ -128,7 +114,7 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
     };
 
     const fetchSummary = debounce(async() => {
-        const state = getSummaryRequestState(field, form);
+        const state = getSummaryRequestState(field);
 
         if (!getBlocks() || !state.accessToken) {
             debug.warn('Missing state for fetch.', state);
@@ -256,8 +242,10 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
     };
 }
 
-export const summaryModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const summaryModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return !!ctx.target.querySelector(BLOCKS_SELECTOR);

package/src/js/modules/fields/survey-likert.ts

@@ -1,6 +1,6 @@
 import surveyPresentationsCss from '#theme-css/fields/_survey-presentations.css?inline';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { ensureModuleStyles } from '#modules/styles';
 import { createDebug } from '#utils/debug';
 
@@ -10,8 +10,10 @@ const debug = createDebug('fields', 'survey-likert');
 
 ensureModuleStyles(MODULE_ID, [surveyPresentationsCss]);
 
-export const surveyLikertModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const surveyLikertModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return ctx.target instanceof HTMLElement && (