@webround/core 0.1.8 → 0.2.0

package/dist/context/WrAppContext.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// packages/core/src/context/WrAppContext.tsx
+import { createContext, useContext, useState, useCallback, useEffect, useMemo, useSyncExternalStore, lazy, Suspense, } from 'react';
+import { createBrowserRouter, RouterProvider, useLocation, useParams } from 'react-router-dom';
+import { wrResolveRoutes, wrBuildRegistry, wrBuildLazyRegistry, wrBuildPageConfigMap, wrExpandRoutesForLangs, wrExtractLang, wrBuildLangPath, } from '../routing';
+import { WrPageProvider } from './WrPageContext';
+import { WrLayout } from './WrLayout';
+import { WrSharedContext } from '../components/WrShared';
+import { WrSeoHead } from '../seo-react';
+import { WrNotFound } from '../not-found';
+const WrAppContext = createContext(null);
+export function useWrApp() {
+    const ctx = useContext(WrAppContext);
+    return {
+        lang: ctx?.lang ?? 'default',
+        setLang: ctx?.setLang ?? (() => { }),
+    };
+}
+function WrDefaultPageFallback() {
+    return _jsx("div", { "data-wr-loading": "true" });
+}
+const lazyComponentCache = new Map();
+function getLazyComponent(route) {
+    let cached = lazyComponentCache.get(route.routePath);
+    if (!cached) {
+        cached = lazy(route.loadComponent);
+        lazyComponentCache.set(route.routePath, cached);
+    }
+    return cached;
+}
+function WrRouteElement({ route, pageConfigMap, lazyFallback: LazyFallback, PageProvider, Header, Footer, seo, langs, }) {
+    const params = useParams();
+    const { pathname } = useLocation();
+    const { lang } = useWrApp();
+    // `/:lang/…` answers for any word in that place: only the languages of the site are one
+    if (langs && params.lang !== undefined && !langs.available.includes(params.lang))
+        return _jsx(WrNotFound, { langs: langs });
+    const pageName = route.resolvePageName(params);
+    const config = pageConfigMap[pageName] ?? {};
+    const shared = useMemo(() => ({ pageConfigMap, ScopeProvider: PageProvider }), [pageConfigMap, PageProvider]);
+    const body = route.lazy
+        ? (() => {
+            const LazyComponent = getLazyComponent(route);
+            return (_jsx(Suspense, { fallback: _jsx(LazyFallback, {}), children: _jsx(LazyComponent, {}) }));
+        })()
+        : (() => {
+            const Component = route.Component;
+            return _jsx(Component, {});
+        })();
+    return (_jsx(PageProvider, { config: config, pageName: pageName, children: _jsxs(WrSharedContext.Provider, { value: shared, children: [_jsx(WrSeoHead, { site: seo, config: config, pathname: pathname, lang: lang, langs: langs }), _jsx(WrLayout, { Header: Header, Footer: Footer, showHeader: route.header, showFooter: route.footer, pageConfigMap: pageConfigMap, ScopeProvider: PageProvider, children: body })] }) }, pageName));
+}
+export function WrAppProvider({ routesFile, eagerModules, lazyModules, configModules, langs, initialLang = 'default', lazyFallback = WrDefaultPageFallback, onRouterReady, PageProvider = WrPageProvider, Header, Footer, seo, children, }) {
+    const router = useMemo(() => {
+        const registry = wrBuildRegistry(eagerModules);
+        const lazyRegistry = wrBuildLazyRegistry(lazyModules);
+        const pageConfigMap = wrBuildPageConfigMap(configModules);
+        const { routes, errors } = wrResolveRoutes(routesFile, registry, lazyRegistry);
+        if (errors.missingComponents.length > 0) {
+            console.error('[wr] unresolved route -> component mappings:', errors.missingComponents);
+        }
+        const expandedRoutes = wrExpandRoutesForLangs(routes, langs);
+        const builtRouter = createBrowserRouter([
+            ...expandedRoutes.map((route) => ({
+                path: route.pattern,
+                element: _jsx(WrRouteElement, { route: route, pageConfigMap: pageConfigMap, lazyFallback: lazyFallback, PageProvider: PageProvider, Header: Header, Footer: Footer, seo: seo, langs: langs })
+            })),
+            // An address that leads to no page takes the visitor to the home page
+            { path: '*', element: _jsx(WrNotFound, { langs: langs }) },
+        ]);
+        onRouterReady?.(builtRouter.navigate);
+        return builtRouter;
+    }, [routesFile, eagerModules, lazyModules, configModules, langs, lazyFallback, onRouterReady, PageProvider, Header, Footer, seo]);
+    // Fallback quando non c'è alcuna config lingue: stato locale semplice, comportamento invariato.
+    const [staticLang, setStaticLang] = useState(initialLang);
+    // Con `langs`: la lingua è sempre derivata dal pathname corrente del router. Va letta in modo
+    // reattivo qui perché questo componente sta SOPRA il <RouterProvider>, non sotto — niente useLocation().
+    const pathname = useSyncExternalStore(router.subscribe, () => router.state.location.pathname, () => router.state.location.pathname);
+    const lang = langs ? wrExtractLang(pathname, langs) : staticLang;
+    // The page says what language it is in (screen readers pick their voice by it): the language shown, `default` being the site's own
+    const htmlLang = langs ? (lang === 'default' ? langs.default : lang) : undefined;
+    useEffect(() => {
+        if (htmlLang)
+            document.documentElement.lang = htmlLang;
+    }, [htmlLang]);
+    const setLang = useCallback((target) => {
+        if (langs) {
+            router.navigate(wrBuildLangPath(target, pathname, langs));
+        }
+        else {
+            setStaticLang(target);
+        }
+    }, [langs, pathname, router]);
+    return (_jsxs(WrAppContext.Provider, { value: { lang, setLang }, children: [children, _jsx(RouterProvider, { router: router })] }));
+}
+//# sourceMappingURL=WrAppContext.js.map

package/dist/context/WrLayout.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { WrPageConfig } from '../types';
+export type WrPageProviderType = ComponentType<{
+    config: WrPageConfig;
+    pageName: string;
+    children: ReactNode;
+}>;
+/**
+ * La pagina con il suo header e il suo footer. Vive DENTRO il provider della pagina e decide al primo render (i flag arrivano già
+ * risolti dalla rotta): niente effetti e niente stato, quindi niente scatto di layout e l'header non compare "per un attimo".
+ * Il contenuto della pagina sta in un `<main>` (il punto d'arrivo per chi salta alla pagina, WCAG 2.4.1): lo mette il layout, quindi una
+ * pagina non deve metterne uno suo (due `<main>` sono un errore).
+ */
+export declare function WrLayout({ Header, Footer, showHeader, showFooter, pageConfigMap, ScopeProvider, children }: {
+    Header?: ComponentType;
+    Footer?: ComponentType;
+    showHeader: boolean;
+    showFooter: boolean;
+    pageConfigMap: Record<string, WrPageConfig>;
+    ScopeProvider: WrPageProviderType;
+    children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=WrLayout.d.ts.map

package/dist/context/WrLayout.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { WR_SHARED_SCOPES } from '../routing';
+/**
+ * La pagina con il suo header e il suo footer. Vive DENTRO il provider della pagina e decide al primo render (i flag arrivano già
+ * risolti dalla rotta): niente effetti e niente stato, quindi niente scatto di layout e l'header non compare "per un attimo".
+ * Il contenuto della pagina sta in un `<main>` (il punto d'arrivo per chi salta alla pagina, WCAG 2.4.1): lo mette il layout, quindi una
+ * pagina non deve metterne uno suo (due `<main>` sono un errore).
+ */
+export function WrLayout({ Header, Footer, showHeader, showFooter, pageConfigMap, ScopeProvider, children }) {
+    const header = showHeader && Header ? Header : null;
+    const footer = showFooter && Footer ? Footer : null;
+    if (!header && !footer)
+        return _jsx("main", { children: children });
+    const shared = (key, Component) => (_jsx(ScopeProvider, { config: pageConfigMap[WR_SHARED_SCOPES[key].name] ?? {}, pageName: WR_SHARED_SCOPES[key].name, children: _jsx(Component, {}) }));
+    // Colonna alta come lo schermo: il footer sta in fondo anche con la pagina corta o ancora in caricamento
+    return (_jsxs("div", { "data-wr-layout": true, style: { display: 'flex', flexDirection: 'column', minHeight: '100dvh' }, children: [header && shared('header', header), _jsx("main", { style: { flex: '1 0 auto' }, children: children }), footer && shared('footer', footer)] }));
+}
+//# sourceMappingURL=WrLayout.js.map

package/dist/context/WrPageContext.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { WrPageConfig, WrElementConfig } from '../types';
+export declare function WrPageProvider({ config, pageName, children }: {
+    config: WrPageConfig;
+    pageName: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function useWrPage(id: string): WrElementConfig | undefined;
+export declare function useWrPageMeta(): string;
+//# sourceMappingURL=WrPageContext.d.ts.map

package/dist/context/WrPageContext.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const WrPageContext = createContext(null);
+export function WrPageProvider({ config, pageName, children }) {
+    return (_jsx(WrPageContext.Provider, { value: { config, pageName }, children: children }));
+}
+export function useWrPage(id) {
+    return useContext(WrPageContext)?.config[id];
+}
+export function useWrPageMeta() {
+    return useContext(WrPageContext).pageName;
+}
+//# sourceMappingURL=WrPageContext.js.map

package/dist/form-react.d.ts

@@ -0,0 +1,82 @@
+import React from 'react';
+import { wrFormProblems, type WrFieldRule, type WrFieldValue, type WrFormField, type WrFormMessages, type WrFormTransport } from './form.js';
+export interface WrFormViewConfig {
+    hidden?: boolean;
+    [key: string]: unknown;
+}
+export interface WrInputViewConfig {
+    label?: unknown;
+    placeholder?: unknown;
+    ariaLabel?: unknown;
+    hidden?: boolean;
+}
+interface FormContext {
+    lang: string;
+    messages?: WrFormMessages;
+    transport: WrFormTransport;
+    values: Readonly<Record<string, WrFieldValue>>;
+    setValue(key: string, value: WrFieldValue): void;
+    /** What a visitor is told: only the fields they have been in (or all, after a try). */
+    shown: Readonly<Record<string, ReturnType<typeof wrFormProblems>[string]>>;
+    touch(key: string): void;
+    registerField(key: string, field: WrFormField): () => void;
+    setProof(payload: string | null): void;
+    registerAltcha(): () => void;
+    registerConsent(): () => void;
+    consent: boolean;
+    setConsent(accepted: boolean): void;
+    reset(): void;
+    disabled: boolean;
+    sending: boolean;
+}
+/** The form a part is in; null outside of one (a part then works on its own, with nothing to check). */
+export declare const useWrForm: () => FormContext | null;
+/** What the submit button needs: null outside a form. */
+export declare function useWrSubmitGate(): {
+    disabled: boolean;
+} | null;
+export interface WrFormViewProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'id' | 'onSubmit'> {
+    id: string;
+    lang: string;
+    config?: WrFormViewConfig;
+    transport: WrFormTransport;
+}
+export declare function WrFormView({ id, lang, config, transport, children, ...props }: WrFormViewProps): React.ReactElement | null;
+export interface WrInputViewProps extends WrFieldRule {
+    id: string;
+    lang: string;
+    config?: WrInputViewConfig;
+    className?: string;
+    /** `file`: the types the file chooser offers (the form still refuses what the backend does not take). */
+    accept?: string;
+    multiple?: boolean;
+    /** What it says until the page's JSON says otherwise (the first text lives in the code, as a `WrText`'s `html`). */
+    label?: string;
+    placeholder?: string;
+    /** Attributes for the field (the editor marks it interactive). */
+    rootProps?: Record<string, string>;
+}
+export declare function WrInputView({ id, lang, config, className, type, required, maxLength, min, max, step, accept, multiple, rootProps, label: codeLabel, placeholder: codePlaceholder }: WrInputViewProps): React.ReactElement | null;
+export interface WrAltchaViewProps {
+    id: string;
+    className?: string;
+    rootProps?: Record<string, string>;
+}
+export declare function WrAltchaView({ id, className, rootProps }: WrAltchaViewProps): React.ReactElement | null;
+export interface WrFormPrivacyViewProps {
+    id: string;
+    className?: string;
+    children?: React.ReactNode;
+    rootProps?: Record<string, string>;
+}
+/** The consent checkbox; its text is whatever is put inside (a `WrText` with the link to the privacy page), so it is translated like any text. */
+export declare function WrFormPrivacyView({ id, className, children, rootProps }: WrFormPrivacyViewProps): React.ReactElement;
+export interface WrFormSuccessViewProps {
+    id: string;
+    className?: string;
+    children?: React.ReactNode;
+}
+/** What the visitor reads after the form went. The base CSS shows it only then (`WR_BASE_CSS`); the editor shows it always, to be written. */
+export declare function WrFormSuccessView({ id, className, children, ...props }: WrFormSuccessViewProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'id'>): React.ReactElement;
+export {};
+//# sourceMappingURL=form-react.d.ts.map

package/dist/form-react.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The form, once: state, validation, sending and the markup of every part. Two packages draw a form — `@webround/core` (the published site, which sends for real) and
+// `@webround/editor` (the page in the editor, which sends nothing) — and each reads its own page config and talks to its own parent. What is the form itself lives here, and
+// they hand it their `config`, their `lang` and their `transport`: the only thing that changes between the two is how a form is sent.
+import React, { createContext, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { wrLocalized } from './localized.js';
+import { wrFormMessage, wrFormMessagesOf, wrFormProblems, wrFormReady, } from './form.js';
+const FormCtx = createContext(null);
+/** The form a part is in; null outside of one (a part then works on its own, with nothing to check). */
+export const useWrForm = () => useContext(FormCtx);
+/** What the submit button needs: null outside a form. */
+export function useWrSubmitGate() {
+    const form = useContext(FormCtx);
+    return form ? { disabled: form.disabled } : null;
+}
+export function WrFormView({ id, lang, config, transport, children, ...props }) {
+    const [fields, setFields] = useState({});
+    const [values, setValues] = useState({});
+    const [touched, setTouched] = useState({});
+    const [proof, setProofState] = useState(null);
+    const [hasAltcha, setHasAltcha] = useState(0);
+    const [consentAsked, setConsentAsked] = useState(0);
+    const [consent, setConsent] = useState(false);
+    const [sending, setSending] = useState(false);
+    const [sent, setSent] = useState(false);
+    const [failure, setFailure] = useState(null);
+    const [tried, setTried] = useState(false);
+    const messages = useMemo(() => wrFormMessagesOf(config), [config]);
+    const problems = useMemo(() => wrFormProblems(fields, values), [fields, values]);
+    const shown = useMemo(() => Object.fromEntries(Object.entries(problems).filter(([key]) => tried || touched[key])), [problems, touched, tried]);
+    const ready = wrFormReady(problems, { proof: hasAltcha > 0 && proof !== null, privacy: consentAsked > 0 ? consent : null });
+    // The functions never change (a part registers itself in an effect that depends on them: new ones each render would register it again, forever)
+    const actions = useMemo(() => ({
+        setValue: (key, value) => setValues(prev => ({ ...prev, [key]: value })),
+        touch: (key) => setTouched(prev => (prev[key] ? prev : { ...prev, [key]: true })),
+        registerField: (key, field) => {
+            setFields(prev => ({ ...prev, [key]: field }));
+            return () => setFields(prev => { const { [key]: _gone, ...rest } = prev; return rest; });
+        },
+        setProof: setProofState,
+        registerAltcha: () => { setHasAltcha(n => n + 1); return () => setHasAltcha(n => n - 1); },
+        registerConsent: () => { setConsentAsked(n => n + 1); return () => setConsentAsked(n => n - 1); },
+        setConsent,
+        // Back to filling the form in (the editor's form sends nothing, so it stays on its confirmation until someone asks)
+        reset: () => { setSent(false); setValues({}); setTouched({}); setTried(false); setConsent(false); setFailure(null); },
+    }), []);
+    const context = useMemo(() => ({ ...actions, lang, messages, transport, values, shown, consent, sending, disabled: !ready || sending }), [actions, lang, messages, transport, values, shown, consent, sending, ready]);
+    if (config?.hidden)
+        return null;
+    const onSubmit = async (event) => {
+        event.preventDefault();
+        setTried(true);
+        if (!ready || sending || proof === null)
+            return;
+        const entries = Object.entries(fields).map(([key, field]) => ({ key, label: field.label, value: values[key] ?? '' }));
+        setSending(true);
+        setFailure(null);
+        const result = await transport.send(entries, proof);
+        setSending(false);
+        if (result === null) {
+            setSent(true);
+            setValues({});
+            setTouched({});
+            setTried(false);
+            setConsent(false);
+        }
+        else
+            setFailure(result);
+    };
+    return (_jsx(FormCtx.Provider, { value: context, children: _jsxs("form", { noValidate: true, ...props, "data-wr-id": id, "data-wr-type": "form", "data-wr-sent": sent ? '' : undefined, "aria-busy": sending || undefined, onSubmit: onSubmit, children: [children, failure && _jsx("p", { role: "alert", className: "text-sm text-red-600", children: wrFormMessage(failure, lang, messages) })] }) }));
+}
+export function WrInputView({ id, lang, config, className, type, required, maxLength, min, max, step, accept, multiple, rootProps, label: codeLabel, placeholder: codePlaceholder }) {
+    const form = useWrForm();
+    const domId = useId();
+    const label = wrLocalized(config?.label, lang) ?? codeLabel ?? '';
+    const placeholder = wrLocalized(config?.placeholder, lang) ?? codePlaceholder;
+    const ariaLabel = wrLocalized(config?.ariaLabel, lang);
+    const registerField = form?.registerField;
+    useEffect(() => registerField?.(id, { type, required, maxLength, min, max, step, label: label || id }), [registerField, id, type, required, maxLength, min, max, step, label]);
+    if (config?.hidden)
+        return null;
+    const value = form?.values[id];
+    const problem = form?.shown[id];
+    const error = problem ? wrFormMessage(problem, lang, form?.messages) : null;
+    const shared = {
+        id: domId,
+        name: id,
+        required,
+        placeholder,
+        'aria-label': label ? undefined : ariaLabel,
+        'aria-invalid': error ? true : undefined,
+        'aria-describedby': error ? `${domId}-error` : undefined,
+        // The element is the FIELD itself (what is seen and styled); the label and the error are around it. Its base look is in `WR_BASE_CSS`, under every class a person writes.
+        ...rootProps,
+        'data-wr-id': id,
+        'data-wr-type': 'input',
+        className,
+        onBlur: () => form?.touch(id),
+    };
+    let field;
+    if (type === 'textarea') {
+        field = _jsx("textarea", { ...shared, rows: 5, maxLength: maxLength, value: typeof value === 'string' ? value : '', onChange: e => form?.setValue(id, e.target.value) });
+    }
+    else if (type === 'file') {
+        field = _jsx("input", { ...shared, type: "file", accept: accept, multiple: multiple, onChange: e => { form?.setValue(id, Array.from(e.target.files ?? [])); form?.touch(id); } });
+    }
+    else {
+        field = _jsx("input", { ...shared, type: type, maxLength: maxLength, min: min, max: max, step: step, value: typeof value === 'string' ? value : '', onChange: e => form?.setValue(id, e.target.value) });
+    }
+    return (_jsxs("div", { children: [label && _jsxs("label", { htmlFor: domId, className: "mb-1.5 block text-sm font-medium text-fg", children: [label, required && _jsx("span", { "aria-hidden": "true", children: " *" })] }), field, error && _jsx("p", { id: `${domId}-error`, role: "alert", className: "mt-1 text-sm text-red-600", children: error })] }));
+}
+// ─── Altcha ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+// The widget follows the site's colours when it has them (`--color-*` tokens) and its own when it does not.
+const ALTCHA_STYLE = {
+    '--altcha-color-text': 'var(--color-fg, currentColor)',
+    '--altcha-color-base': 'var(--color-page, Canvas)',
+    '--altcha-color-border': 'var(--color-line, #d4d4d8)',
+    '--altcha-color-border-focus': 'var(--color-accent, currentColor)',
+    '--altcha-border-radius': '0.75rem',
+    '--altcha-max-width': '20rem',
+};
+export function WrAltchaView({ id, className, rootProps }) {
+    const form = useWrForm();
+    const widget = useRef(null);
+    const [ready, setReady] = useState(false);
+    const registerAltcha = form?.registerAltcha;
+    const setProof = form?.setProof;
+    useEffect(() => registerAltcha?.(), [registerAltcha]);
+    // The widget is a heavy custom element: it is loaded when a form that has it is on the page, never with the rest of the site.
+    useEffect(() => {
+        let alive = true;
+        import('altcha').then(() => { if (alive)
+            setReady(true); }, () => undefined);
+        return () => { alive = false; };
+    }, []);
+    useEffect(() => {
+        const el = widget.current;
+        if (!ready || !el)
+            return;
+        const onState = (event) => {
+            const detail = event.detail;
+            setProof?.(detail?.state === 'verified' && detail.payload ? detail.payload : null);
+        };
+        el.addEventListener('statechange', onState);
+        return () => { el.removeEventListener('statechange', onState); setProof?.(null); };
+    }, [ready, setProof]);
+    return (_jsx("div", { ...rootProps, "data-wr-id": id, "data-wr-type": "altcha", className: className ?? 'flex justify-center', style: ALTCHA_STYLE, children: ready && React.createElement('altcha-widget', {
+            ref: widget,
+            ...(form?.transport.mock ? { test: true } : { challengeurl: form?.transport.challengeUrl }),
+            hidefooter: true,
+        }) }));
+}
+/** The consent checkbox; its text is whatever is put inside (a `WrText` with the link to the privacy page), so it is translated like any text. */
+export function WrFormPrivacyView({ id, className, children, rootProps }) {
+    const form = useWrForm();
+    const textId = useId();
+    const registerConsent = form?.registerConsent;
+    useEffect(() => registerConsent?.(), [registerConsent]);
+    return (_jsxs("div", { ...rootProps, "data-wr-id": id, "data-wr-type": "form-privacy", className: className ?? 'flex items-start gap-2 text-sm text-muted', children: [_jsx("input", { type: "checkbox", className: "mt-1 size-4 shrink-0 accent-[var(--color-accent,currentColor)]", "aria-labelledby": textId, checked: form?.consent ?? false, onChange: e => form?.setConsent(e.target.checked) }), _jsx("div", { id: textId, children: children })] }));
+}
+/** What the visitor reads after the form went. The base CSS shows it only then (`WR_BASE_CSS`); the editor shows it always, to be written. */
+export function WrFormSuccessView({ id, className, children, ...props }) {
+    return _jsx("div", { ...props, "data-wr-id": id, "data-wr-type": "form-success", role: "status", "aria-live": "polite", className: className, children: children });
+}
+//# sourceMappingURL=form-react.js.map

package/dist/form.d.ts

@@ -0,0 +1,83 @@
+import { type WrLocalized } from './localized.js';
+export declare const WR_INPUT_TYPES: readonly ["text", "email", "tel", "number", "textarea", "file"];
+export type WrInputType = (typeof WR_INPUT_TYPES)[number];
+/** What the Webround backend (Core, `POST /form/:draftId`) accepts: the same list it checks. */
+export declare const WR_FORM_FILE_TYPES: readonly string[];
+/** The server takes 40 MB per file; the form stops at 30, so a file that is refused is refused before it travels. */
+export declare const WR_FORM_FILE_MAX_BYTES: number;
+export declare const WR_FORM_FILES_MAX = 10;
+/** The value of a field: its text, or the files chosen. */
+export type WrFieldValue = string | File[];
+/** What a field asks of its value (the props of an input that matter to the checking). */
+export interface WrFieldRule {
+    type: WrInputType;
+    required?: boolean;
+    maxLength?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+export type WrFieldError = 'required' | 'email' | 'number' | 'min' | 'max' | 'step' | 'maxLength' | 'file-count' | 'file-size' | 'file-type';
+/** The first reason a value is not acceptable, or null. An empty value is fine unless the field is required. */
+export declare function wrValidateField(rule: WrFieldRule, value: WrFieldValue | undefined): WrFieldError | null;
+type MessageTable = Record<WrFieldError | 'submit-failed' | 'rate-limited' | 'expired' | 'not-configured', string>;
+export type WrFormMessage = keyof MessageTable;
+/** Every message a form can say, in the order the panel lists them. */
+export declare const WR_FORM_MESSAGE_CODES: WrFormMessage[];
+/** The page JSON of a form holds each message as `msg-<code>` (a translated text like any other field): the messages as `wrFormMessage` reads them. */
+export declare function wrFormMessagesOf(config: Record<string, unknown> | undefined): WrFormMessages;
+/** The messages a form says in its own words: per message, a text per language (`{ default, es… }`, as every translated text of a page). */
+export type WrFormMessages = Partial<Record<WrFormMessage, WrLocalized>>;
+/**
+ * The text for a message in the language of the page. Order: what the form says in that language; what Webround says in it (`it-IT` reads as `it`);
+ * what the form says as its `default`; English. So a form that writes only the Spanish text gets Spanish, and the languages it did not write
+ * keep reading what they read before.
+ */
+export declare function wrFormMessage(code: WrFormMessage, lang: string, own?: WrFormMessages): string;
+/** A field as the form sends it: the `id` of the input is the key, the label is what the owner reads in the email. */
+export interface WrFormEntry {
+    key: string;
+    label: string;
+    value: WrFieldValue;
+}
+/**
+ * The body of `POST /form/:draftId`: a multipart with `formData` (the JSON `{ key: { label, value }, …, proof }`) and the `files`.
+ * A file field reads, in the JSON, as the names of the files; the files themselves travel as `files`.
+ */
+export declare function wrBuildFormBody(entries: readonly WrFormEntry[], proof: string): FormData;
+/** What the backend's answer means to the visitor. */
+export declare function wrFormFailure(status: number): WrFormMessage;
+/** A field the form knows about: what it asks of its value, and the name the owner reads in the email. */
+export interface WrFormField extends WrFieldRule {
+    label: string;
+}
+/** The fields that cannot be sent as they are, by key. */
+export declare function wrFormProblems(fields: Readonly<Record<string, WrFieldRule>>, values: Readonly<Record<string, WrFieldValue>>): Record<string, WrFieldError>;
+/** The three things besides the fields that a form waits for before it can be sent. */
+export interface WrFormGates {
+    /** The Altcha proof of work has been solved (a form with no Altcha cannot be sent: the backend refuses it). */
+    proof: boolean;
+    /** The privacy consent: `null` when the form does not ask for it. */
+    privacy: boolean | null;
+}
+/** Whether the form may be sent now: no field problem, the proof, the consent. THE rule of the submit button. */
+export declare function wrFormReady(problems: Readonly<Record<string, unknown>>, gates: WrFormGates): boolean;
+/** Where a form is sent. `challengeUrl` is where the Altcha widget asks for its challenge. */
+export interface WrFormTarget {
+    coreApiUrl?: string;
+    draftId?: string;
+}
+export declare const wrChallengeUrl: (target: WrFormTarget) => string | undefined;
+/** How a form is sent: the real one talks to the Webround backend; the editor swaps in one that does not. `null` = it went. */
+export interface WrFormTransport {
+    /** Altcha runs with a mock challenge, with no request to the backend. */
+    mock: boolean;
+    challengeUrl?: string;
+    send(entries: readonly WrFormEntry[], proof: string): Promise<WrFormMessage | null>;
+}
+/** `POST /form/:draftId`. Anything that goes wrong is a message for the visitor, never an exception. */
+export declare function wrSubmitForm(target: WrFormTarget, entries: readonly WrFormEntry[], proof: string, fetchImpl?: typeof fetch): Promise<WrFormMessage | null>;
+/** The transport of a published site. */
+export declare const wrRealTransport: (target: WrFormTarget) => WrFormTransport;
+export {};
+//# sourceMappingURL=form.d.ts.map