@evinvest/kitstart 0.8.0 → 0.10.0

package/dist/react/LeadCaptureNeed.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, cn, Field, FieldLabel } from "@evinvest/uikit";
+import { useEffect, useRef } from "react";
 import { FormSelect } from "./FormSelect.js";
 /**
  * What the job is. A need already known — from the page, `?need=` or the card
@@ -10,7 +11,16 @@ import { FormSelect } from "./FormSelect.js";
  * per need: one tap answers it.
  */
 export function NeedField(props) {
-    const { layout, name, needs, need, editing, hydrated, label, changeLabel, onPick, onEdit, classNames: c } = props;
+    const { layout, name, needs, need, editing, hydrated, label, changeLabel, onPick, onSelect, onEdit, classNames: c } = props;
+    const group = useRef(null);
+    // A radio group answers arrows with a click (`detail` 0) and a change, the
+    // same events a tap makes: what moves on is told apart by its key or pointer.
+    const pointer = useRef(false);
+    const answered = useRef(false);
+    useEffect(() => {
+        for (const radio of group.current?.querySelectorAll("input[type=radio]") ?? [])
+            radio.setCustomValidity(need === undefined ? props.requiredText : "");
+    });
     const chosen = needs.find(n => n.value === need);
     if (chosen && !editing) {
         return (_jsxs("div", { className: cn("flex flex-wrap items-center gap-x-3 gap-y-1 text-ink", c?.summary), children: [_jsx("input", { type: "hidden", name: name, value: chosen.value }), _jsx("span", { className: "text-sm text-ink-soft", children: label }), _jsx("span", { className: "font-medium", children: chosen.label }), hydrated && (_jsx(Button, { type: "button", variant: "link", size: "touch", className: "px-1", onClick: onEdit, children: changeLabel }))] }));
@@ -18,5 +28,31 @@ export function NeedField(props) {
     if (layout === "single") {
         return (_jsxs(Field, { className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { className: c?.label, children: label }), _jsx(FormSelect, { name: name, size: "lg", defaultValue: need ?? needs[0]?.value, options: needs, onValueChange: onPick, classNames: c?.control ? { trigger: c.control } : undefined })] }));
     }
-    return (_jsxs("fieldset", { className: cn("flex flex-col gap-2", c?.field), children: [_jsx("legend", { className: cn("mb-2 text-sm font-medium text-ink", c?.label), children: label }), _jsx("div", { className: cn("grid grid-cols-1 gap-2 sm:grid-cols-2", c?.needs), children: needs.map(n => (_jsxs("label", { className: "relative block cursor-pointer", children: [_jsx("input", { type: "radio", name: name, value: n.value, required: true, checked: need === n.value, onChange: () => onPick(n.value), className: "peer absolute inset-0 opacity-0", "data-need-option": "", "data-lead-field": "need" }), _jsx("span", { className: cn("flex min-h-11 items-center rounded-[var(--control-radius)] border border-input px-4 py-3 text-ink transition-colors", "peer-checked:border-primary peer-checked:bg-hover peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50", c?.need), children: n.label })] }, n.value))) })] }));
+    return (_jsxs("fieldset", { ref: group, className: cn("flex flex-col gap-2", c?.field), children: [_jsx("legend", { className: cn("mb-2 text-sm font-medium text-ink", c?.label), children: label }), _jsx("div", { className: cn("grid grid-cols-1 gap-2 sm:grid-cols-2", c?.needs), children: needs.map(n => (_jsxs("label", { className: "relative block cursor-pointer", children: [_jsx("input", { type: "radio", name: name, value: n.value, required: true, checked: need === n.value, onPointerDown: () => {
+                                pointer.current = true;
+                            }, onKeyDown: (e) => {
+                                pointer.current = false;
+                                answered.current = false;
+                                if (e.key !== "Enter")
+                                    return;
+                                // From a radio, Enter would submit the form half filled.
+                                e.preventDefault();
+                                answered.current = true;
+                                onPick(n.value);
+                            }, onKeyUp: (e) => {
+                                if (e.key !== " ")
+                                    return;
+                                answered.current = true;
+                                onPick(n.value);
+                            }, onClick: (e) => {
+                                if (e.detail === 0 && !pointer.current)
+                                    return;
+                                pointer.current = false;
+                                answered.current = true;
+                                onPick(n.value);
+                            }, onChange: () => {
+                                if (!answered.current)
+                                    onSelect(n.value);
+                                answered.current = false;
+                            }, className: "peer absolute inset-0 opacity-0", "data-need-option": "", "data-lead-field": "need" }), _jsx("span", { className: cn("flex min-h-11 items-center rounded-[var(--control-radius)] border border-input px-4 py-3 text-ink transition-colors", "peer-checked:border-primary peer-checked:bg-hover peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50", c?.need), children: n.label })] }, n.value))) })] }));
 }

package/dist/react/LeadCapturePriced.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import type { LeadCaptureFlowText } from "../core/lead-capture-text.js";
+import type { LeadSent } from "./use-lead-submit.js";
+import type { PartClassNames } from "./parts.js";
+export type PricedPart = "priced" | "pricedPrice" | "pricedNote";
+/**
+ * After a priced lead (`estimate`, `fixed`): the price the server took it at,
+ * then how the slot is set — by a call, until a booking provider is chosen;
+ * a brand's `booking` (its own scheduling widget, say) stands in for that
+ * promise. The lead is stored before any of this, so an abandoned booking is
+ * still a lead to call.
+ */
+export declare function LeadCapturePriced(props: {
+    sent: LeadSent;
+    booking: ReactNode;
+    locale: string;
+    text: LeadCaptureFlowText;
+    classNames?: PartClassNames<PricedPart> | undefined;
+}): import("react").JSX.Element;

package/dist/react/LeadCapturePriced.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@evinvest/uikit";
+import { fillText, formatCents } from "../core/lead-capture-format.js";
+/**
+ * After a priced lead (`estimate`, `fixed`): the price the server took it at,
+ * then how the slot is set — by a call, until a booking provider is chosen;
+ * a brand's `booking` (its own scheduling widget, say) stands in for that
+ * promise. The lead is stored before any of this, so an abandoned booking is
+ * still a lead to call.
+ */
+export function LeadCapturePriced(props) {
+    const { sent, locale, text, classNames: c } = props;
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", c?.priced), children: [sent.cents !== undefined && _jsx("p", { className: cn("font-medium text-ink", c?.pricedPrice), children: fillText(text.sentPrice, { price: formatCents(sent.cents, locale) }) }), props.booking ?? _jsx("p", { className: cn("text-ink", c?.pricedNote), children: text.slotCallback })] }));
+}

package/dist/react/LeadCaptureSubmit.d.ts

@@ -0,0 +1,16 @@
+import type { LeadCaptureText } from "../core/lead-capture-text.js";
+import type { SendFailure } from "./use-lead-submit.js";
+/** The submit, busy while the script posts: disabled, `aria-busy`, and saying so. */
+export declare function SubmitButton(props: {
+    busy: boolean;
+    label: string;
+    sending: string;
+    className: string | undefined;
+}): import("react").JSX.Element;
+/** Why the post got no answer, and the way to send the same lead again. */
+export declare function FailureMessage(props: {
+    failure: SendFailure | null;
+    text: Pick<LeadCaptureText, "networkError" | "timeoutError" | "retry">;
+    onRetry: () => void;
+    className: string | undefined;
+}): import("react").JSX.Element | null;

package/dist/react/LeadCaptureSubmit.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, cn, FieldError } from "@evinvest/uikit";
+/** The submit, busy while the script posts: disabled, `aria-busy`, and saying so. */
+export function SubmitButton(props) {
+    return (_jsx(Button, { type: "submit", size: "touch", disabled: props.busy, "aria-busy": props.busy || undefined, className: cn("w-full", props.className), children: props.busy ? props.sending : props.label }));
+}
+/** Why the post got no answer, and the way to send the same lead again. */
+export function FailureMessage(props) {
+    const { failure, text } = props;
+    if (!failure)
+        return null;
+    return (_jsxs(FieldError, { className: cn("flex flex-wrap items-center gap-x-3 gap-y-1 text-accent-error", props.className), children: [_jsx("span", { children: failure === "timeout" ? text.timeoutError : text.networkError }), _jsx(Button, { type: "button", variant: "link", size: "touch", className: "px-1", onClick: props.onRetry, children: text.retry })] }));
+}

package/dist/react/QuoteFormShell.d.ts

@@ -20,6 +20,8 @@ export interface QuoteFormShellProps {
     /** The honeypot's label — read only by a bot filling every field. */
     honeypotLabel: string;
     formId?: string;
+    /** The card's anchor, posted so a refusal lands back on it (`quoteRoute`). */
+    card?: string | undefined;
     action?: string;
     id?: string;
     className?: string;

package/dist/react/QuoteFormShell.js

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "@evinvest/uikit";
 import { FORM_ID_FIELD, LOCALE_FIELD, LOCATION_FIELD } from "../core/accept.js";
 import { HONEYPOT_FIELD, RENDERED_AT_FIELD } from "../core/antispam.js";
+import { CARD_FIELD, SUBMISSION_FIELD } from "../core/lead.js";
 /** The mobile field's attributes: the numeric keypad and the phone's autofill. */
 export const PHONE_INPUT_PROPS = { type: "tel", inputMode: "tel", autoComplete: "tel" };
 export function QuoteFormShell(props) {
-    const { placeSlug, locale, renderedAt, honeypotLabel, formId = "quote", action = "/quote", id = "quote", className, onSubmit, children } = props;
-    return (_jsxs("form", { id: id, method: "post", action: action, onSubmit: onSubmit, className: cn("relative flex w-full flex-col gap-5", className), children: [placeSlug && _jsx("input", { type: "hidden", name: LOCATION_FIELD, value: placeSlug }), _jsx("input", { type: "hidden", name: LOCALE_FIELD, value: locale }), _jsx("input", { type: "hidden", name: FORM_ID_FIELD, value: formId }), _jsx("input", { type: "hidden", name: RENDERED_AT_FIELD, value: String(renderedAt) }), children, _jsx("div", { "aria-hidden": "true", style: { position: "absolute", left: "-10000px", width: 1, height: 1, overflow: "hidden" }, children: _jsxs("label", { children: [honeypotLabel, _jsx("input", { type: "text", name: HONEYPOT_FIELD, tabIndex: -1, autoComplete: "off", defaultValue: "" })] }) })] }));
+    const { placeSlug, locale, renderedAt, honeypotLabel, formId = "quote", card, action = "/quote", id = "quote", className, onSubmit, children } = props;
+    return (_jsxs("form", { id: id, method: "post", action: action, onSubmit: onSubmit, className: cn("relative flex w-full flex-col gap-5", className), children: [placeSlug && _jsx("input", { type: "hidden", name: LOCATION_FIELD, value: placeSlug }), _jsx("input", { type: "hidden", name: LOCALE_FIELD, value: locale }), _jsx("input", { type: "hidden", name: FORM_ID_FIELD, value: formId }), _jsx("input", { type: "hidden", name: RENDERED_AT_FIELD, value: String(renderedAt) }), card && _jsx("input", { type: "hidden", name: CARD_FIELD, value: card }), _jsx("input", { type: "hidden", name: SUBMISSION_FIELD }), children, _jsx("div", { "aria-hidden": "true", style: { position: "absolute", left: "-10000px", width: 1, height: 1, overflow: "hidden" }, children: _jsxs("label", { children: [honeypotLabel, _jsx("input", { type: "text", name: HONEYPOT_FIELD, tabIndex: -1, autoComplete: "off", defaultValue: "" })] }) })] }));
 }

package/dist/react/use-lead-error.d.ts

@@ -0,0 +1,24 @@
+import { type RefObject } from "react";
+import { type LeadChannel } from "../core/lead.js";
+import type { LeadCaptureText } from "../core/lead-capture-text.js";
+/** A refusal the server sent back: which of the card's forms, and the field it is about. */
+export interface LeadError {
+    channel: LeadChannel;
+    field: string;
+}
+/** The fields `LeadCapture` draws itself, which show a refusal under themselves. */
+export declare const OWN_FIELDS: Readonly<Record<LeadChannel, readonly string[]>>;
+/** The id of the message a refusal of a field the card does not draw is shown in, above the submit. */
+export declare const formMessageId: (id: string, channel: LeadChannel) => string;
+/** The words for a refused field: the field's own rule where the form has one. */
+export declare function errorText(field: string, text: LeadCaptureText): string;
+/**
+ * The server's refusal, for the card `id`: read once from the page's query
+ * when the 303 brought the visitor back (`?lead_error=phone#<id>`, or
+ * `#<id>-callback`) — then taken out of the URL, so a reload does not show it
+ * again — or set by the script's own post. The refused control takes the
+ * focus; a control the card does not draw (a brand's extra) is marked
+ * `aria-invalid` and pointed at the message above the submit. Fixing that
+ * control clears it.
+ */
+export declare function useLeadError(root: RefObject<HTMLElement | null>, id: string): [LeadError | null, (error: LeadError | null) => void];

package/dist/react/use-lead-error.js

@@ -0,0 +1,73 @@
+"use client";
+import { useEffect, useState } from "react";
+import { LEAD_ERROR_PARAM } from "../core/lead.js";
+const FIELD = /^[a-z][a-z0-9_]{0,31}$/;
+/** The fields `LeadCapture` draws itself, which show a refusal under themselves. */
+export const OWN_FIELDS = { form: ["phone", "locality", "name"], callback: ["phone", "consent"] };
+/** The id of the message a refusal of a field the card does not draw is shown in, above the submit. */
+export const formMessageId = (id, channel) => (channel === "callback" ? `${id}-callback-error` : `${id}-error`);
+/** The words for a refused field: the field's own rule where the form has one. */
+export function errorText(field, text) {
+    if (field === "phone")
+        return text.phoneInvalid;
+    if (field === "consent")
+        return text.consentRequired;
+    if (field === "need")
+        return text.needRequired;
+    if (field === "form")
+        return text.formInvalid;
+    return text.fieldInvalid;
+}
+/** The control a refusal is about: by its role, then by its posted name. */
+function controlOf(form, field) {
+    return form.querySelector(`[data-lead-field="${field}"]`) ?? form.querySelector(`[name="${CSS.escape(field)}"]`);
+}
+/**
+ * The server's refusal, for the card `id`: read once from the page's query
+ * when the 303 brought the visitor back (`?lead_error=phone#<id>`, or
+ * `#<id>-callback`) — then taken out of the URL, so a reload does not show it
+ * again — or set by the script's own post. The refused control takes the
+ * focus; a control the card does not draw (a brand's extra) is marked
+ * `aria-invalid` and pointed at the message above the submit. Fixing that
+ * control clears it.
+ */
+export function useLeadError(root, id) {
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        const url = new URL(window.location.href);
+        const field = url.searchParams.get(LEAD_ERROR_PARAM);
+        const channel = url.hash === `#${id}` ? "form" : url.hash === `#${id}-callback` ? "callback" : null;
+        if (field === null || channel === null)
+            return;
+        url.searchParams.delete(LEAD_ERROR_PARAM);
+        window.history.replaceState(window.history.state, "", url);
+        if (FIELD.test(field))
+            setError({ channel, field });
+    }, [id]);
+    useEffect(() => {
+        const form = error && root.current?.querySelector(`#${CSS.escape(error.channel === "callback" ? `${id}-callback-form` : `${id}-form`)}`);
+        if (!error || !form)
+            return;
+        const details = form.closest("details");
+        if (details)
+            details.open = true;
+        const control = controlOf(form, error.field);
+        const foreign = control && !OWN_FIELDS[error.channel].includes(error.field) ? control : null;
+        foreign?.setAttribute("aria-invalid", "true");
+        foreign?.setAttribute("aria-describedby", formMessageId(id, error.channel));
+        (control ?? document.getElementById(formMessageId(id, error.channel)))?.focus();
+        const fixed = (event) => {
+            if (error.field === "form" || (event.target instanceof Element && control?.contains(event.target)))
+                setError(null);
+        };
+        form.addEventListener("input", fixed);
+        form.addEventListener("change", fixed);
+        return () => {
+            form.removeEventListener("input", fixed);
+            form.removeEventListener("change", fixed);
+            foreign?.removeAttribute("aria-invalid");
+            foreign?.removeAttribute("aria-describedby");
+        };
+    }, [error, id, root]);
+    return [error, setError];
+}

package/dist/react/use-lead-events.d.ts

@@ -4,7 +4,12 @@ import { type LeadField, type LeadStep } from "../core/analytics.js";
 export declare const FIELD_ATTR = "data-lead-field";
 export interface LeadEvents {
     step(step: LeadStep): void;
+    /** A hint under a field (`blocking: false`); the browser's refusal is counted by itself (`blocking: true`). */
     fieldError(field: LeadField): void;
+    /** The script's post got no answer: `network` or `timeout`, and which form. */
+    submitError(reason: "network" | "timeout", channel: "form" | "callback"): void;
+    /** An estimate's price for a full set of answers: its band only, once per need and band. */
+    estimateShown(need: string, cents: number): void;
 }
 /**
  * The lead form's own funnel, reported through the boundary's sink: seen

package/dist/react/use-lead-events.js

@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useMemo, useRef } from "react";
 import { EVENTS, experimentProps } from "../core/analytics.js";
+import { centsBucket } from "../core/pricing/price.js";
 import { useAnalyticsSink } from "./analytics-context.js";
 /** The attribute a lead form's control names its role in, for `lead_form_field_error`. */
 export const FIELD_ATTR = "data-lead-field";
@@ -18,6 +19,7 @@ export function useLeadEvents(root, tags) {
     const variant = tags.experiment?.variant;
     const props = useMemo(() => ({ form_id: formId, layout, ...experimentProps(name, variant) }), [formId, layout, name, variant]);
     const started = useRef(false);
+    const shown = useRef(new Set());
     useEffect(() => {
         const el = root.current;
         if (!sink || !el)
@@ -45,7 +47,7 @@ export function useLeadEvents(root, tags) {
         const invalid = (event) => {
             const field = event.target instanceof Element ? event.target.getAttribute(FIELD_ATTR) : null;
             if (field)
-                sink.capture(EVENTS.fieldError, { ...props, field });
+                sink.capture(EVENTS.fieldError, { ...props, field, blocking: true });
         };
         el.addEventListener("focusin", focus);
         el.addEventListener("invalid", invalid, true);
@@ -57,6 +59,15 @@ export function useLeadEvents(root, tags) {
     }, [sink, root, props]);
     return useMemo(() => ({
         step: step => sink?.capture(EVENTS.formStep, { ...props, step }),
-        fieldError: field => sink?.capture(EVENTS.fieldError, { ...props, field }),
+        fieldError: field => sink?.capture(EVENTS.fieldError, { ...props, field, blocking: false }),
+        submitError: (reason, channel) => sink?.capture(EVENTS.submitError, { ...props, reason, channel }),
+        estimateShown: (need, cents) => {
+            const cents_bucket = centsBucket(cents);
+            const key = `${need}\n${cents_bucket}`;
+            if (shown.current.has(key))
+                return;
+            shown.current.add(key);
+            sink?.capture(EVENTS.estimateShown, { ...props, need, cents_bucket });
+        },
     }), [sink, props]);
 }

package/dist/react/use-lead-submit.d.ts

@@ -1,21 +1,60 @@
 import { type FormEventHandler } from "react";
+import { type LeadChannel } from "../core/lead.js";
 /** What the visitor just sent, for a brand's in-card success ("we call 06 … back"). */
 export interface LeadSent {
-    channel: "form" | "callback";
+    channel: LeadChannel;
     /** As typed. */
     phone: string;
     /** The name field's value, when the form has one and it was filled. */
     name: string | null;
+    /** The lead's public reference, as the route answered it (`leadRef`), for a `booking` to name the lead. */
+    lead?: string;
+    /** The price the server took the lead at, for an `estimate` or `fixed` need. */
+    cents?: number;
 }
+/** Leaving the page, behind a seam a test can stand in for (jsdom cannot navigate). */
+export declare const navigation: {
+    assign: (url: string) => void;
+};
 /**
- * The lead posted by a script, so the card can say "done" in place. The body
- * and the endpoint are the form's own, and the server answers it as it answers
- * the plain post: a 303 to the thanks page means the lead was taken. Anything
- * else — a refusal, the store's 500, no network — submits the form for real,
- * so the server's own page says what went wrong. Off (`undefined` handler)
- * when the brand gave no in-card success: the 303 to `/thanks` stays the path.
+ * A v4 UUID. `randomUUID` exists only in a secure context; a LAN dev server
+ * over plain http is not one, but `getRandomValues` works everywhere.
  */
-export declare function useLeadSubmit(enabled: boolean, fields: {
+export declare function newSubmissionId(): string;
+/** Why the script's post got no answer: none came back (`network`), or none in time (`timeout`). */
+export type SendFailure = "network" | "timeout";
+/** How long the script waits for `/quote` before it says so; the lead is a few short fields. */
+export declare const SUBMIT_TIMEOUT_MS = 15000;
+export interface LeadSubmitHandlers {
+    /** The route refused the lead: the field to fix. */
+    onRefused: (channel: LeadChannel, field: string) => void;
+    /** No answer: the form stays as typed, with a retry. */
+    onFailed: (channel: LeadChannel, failure: SendFailure) => void;
+}
+export interface LeadSubmit {
+    sent: LeadSent | null;
+    onSubmit: FormEventHandler<HTMLFormElement>;
+    /** The form being posted, while it is. */
+    busy: LeadChannel | null;
+    /** The last post that got no answer, until the next one. */
+    failure: {
+        channel: LeadChannel;
+        failure: SendFailure;
+    } | null;
+    /** Posts that form again — the same submission id, so never a second lead. */
+    retry: () => void;
+}
+/**
+ * The lead posted by a script, so a refusal keeps what was typed: the body
+ * and the endpoint are the form's own, asked for JSON. Taken → the in-card
+ * success when the card has one for that channel (`done`), else the thanks page the route
+ * names. Refused → `onRefused` with the field, the form as it was. No answer
+ * — no network, or nothing in `SUBMIT_TIMEOUT_MS` — is said in place with a
+ * retry, never by leaving the page: the browser's error page would lose the
+ * form. Any other answer (the store's 500) submits the form for real, so the
+ * server's own page says what went wrong; the submission id makes that safe.
+ */
+export declare function useLeadSubmit(done: boolean | ((channel: LeadChannel) => boolean), fields: {
     mobile: string;
     name: string | undefined;
-}): [LeadSent | null, FormEventHandler<HTMLFormElement> | undefined];
+}, on: LeadSubmitHandlers): LeadSubmit;

package/dist/react/use-lead-submit.js

@@ -1,26 +1,110 @@
 "use client";
 import { useRef, useState } from "react";
-import { CHANNEL_FIELD } from "../core/lead.js";
+import { CHANNEL_FIELD, SUBMISSION_FIELD } from "../core/lead.js";
 import { THANKS } from "../core/routing.js";
+/** Leaving the page, behind a seam a test can stand in for (jsdom cannot navigate). */
+export const navigation = { assign: (url) => window.location.assign(url) };
 /**
- * The lead posted by a script, so the card can say "done" in place. The body
- * and the endpoint are the form's own, and the server answers it as it answers
- * the plain post: a 303 to the thanks page means the lead was taken. Anything
- * else — a refusal, the store's 500, no network — submits the form for real,
- * so the server's own page says what went wrong. Off (`undefined` handler)
- * when the brand gave no in-card success: the 303 to `/thanks` stays the path.
+ * A v4 UUID. `randomUUID` exists only in a secure context; a LAN dev server
+ * over plain http is not one, but `getRandomValues` works everywhere.
  */
-export function useLeadSubmit(enabled, fields) {
+export function newSubmissionId() {
+    if (typeof crypto.randomUUID === "function")
+        return crypto.randomUUID();
+    const b = crypto.getRandomValues(new Uint8Array(16));
+    b[6] = ((b[6] ?? 0) & 0x0f) | 0x40;
+    b[8] = ((b[8] ?? 0) & 0x3f) | 0x80;
+    const hex = [...b].map(x => x.toString(16).padStart(2, "0")).join("");
+    return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+}
+/**
+ * The ids this page minted, by form, with what each was minted for. Kept in
+ * memory, not read back from the field: a browser restores a hidden field's
+ * value on Back, and a new lead would go out under an old one's id.
+ */
+const minted = new WeakMap();
+/**
+ * The form's submission id, written into its field: the same for a resend of
+ * the same lead, a new one as soon as anything posted differs — a number
+ * fixed after a timeout is another lead, which must not be answered with the
+ * first one's row.
+ */
+function stamp(form) {
+    const field = form.elements.namedItem(SUBMISSION_FIELD);
+    if (!(field instanceof HTMLInputElement))
+        return;
+    const posted = new FormData(form);
+    posted.delete(SUBMISSION_FIELD);
+    const lead = new URLSearchParams([...posted].filter((e) => typeof e[1] === "string")).toString();
+    const known = minted.get(form);
+    const id = known && known.lead === lead ? known.id : newSubmissionId();
+    minted.set(form, { id, lead });
+    field.value = id;
+}
+const LEAD_REF = /^lead-\d+-[0-9a-f]{8}$/;
+/** A root-relative path on this origin — never `//elsewhere`. */
+const OWN_PATH = /^\/(?!\/)/;
+/**
+ * The route's answer to a script (`quoteRoute`): JSON when it asked for it,
+ * or — through a proxy that rewrote nothing but followed the 303 — the
+ * thanks page itself. Anything else is not an answer: `null`.
+ */
+async function readAnswer(res) {
+    if ((res.ok || res.status === 422) && (res.headers.get("content-type") ?? "").includes("application/json")) {
+        // Not JSON is no answer; a body cut off (the network, the timeout) is no answer either — thrown on.
+        const body = await res.json().catch((error) => {
+            if (error instanceof SyntaxError)
+                return null;
+            throw error;
+        });
+        if (typeof body !== "object" || body === null)
+            return null;
+        const { ok, location, field, lead, cents } = body;
+        if (ok === true && typeof location === "string" && OWN_PATH.test(location)) {
+            return {
+                ok,
+                location,
+                ...(typeof lead === "string" && LEAD_REF.test(lead) ? { lead } : {}),
+                ...(typeof cents === "number" && Number.isSafeInteger(cents) && cents >= 0 ? { cents } : {}),
+            };
+        }
+        if (ok === false && typeof field === "string")
+            return { ok, field };
+        return null;
+    }
+    if (res.ok && res.redirected) {
+        const url = new URL(res.url);
+        if (url.pathname.endsWith(THANKS))
+            return { ok: true, location: `${url.pathname}${url.search}` };
+    }
+    return null;
+}
+/** How long the script waits for `/quote` before it says so; the lead is a few short fields. */
+export const SUBMIT_TIMEOUT_MS = 15_000;
+/**
+ * The lead posted by a script, so a refusal keeps what was typed: the body
+ * and the endpoint are the form's own, asked for JSON. Taken → the in-card
+ * success when the card has one for that channel (`done`), else the thanks page the route
+ * names. Refused → `onRefused` with the field, the form as it was. No answer
+ * — no network, or nothing in `SUBMIT_TIMEOUT_MS` — is said in place with a
+ * retry, never by leaving the page: the browser's error page would lose the
+ * form. Any other answer (the store's 500) submits the form for real, so the
+ * server's own page says what went wrong; the submission id makes that safe.
+ */
+export function useLeadSubmit(done, fields, on) {
     const [sent, setSent] = useState(null);
+    const [busy, setBusy] = useState(null);
+    const [failure, setFailure] = useState(null);
     const pending = useRef(false);
-    if (!enabled)
-        return [sent, undefined];
+    const last = useRef(null);
     const submit = (event) => {
         event.preventDefault();
         if (pending.current)
             return;
         pending.current = true;
         const form = event.currentTarget;
+        last.current = form;
+        stamp(form);
         const data = new FormData(form);
         const body = new URLSearchParams();
         for (const [key, value] of data)
@@ -31,12 +115,44 @@ export function useLeadSubmit(enabled, fields) {
             return typeof value === "string" ? value.trim() : "";
         };
         const lead = { channel: read(CHANNEL_FIELD) === "callback" ? "callback" : "form", phone: read(fields.mobile), name: read(fields.name) || null };
+        setBusy(lead.channel);
+        setFailure(null);
+        const settle = () => {
+            pending.current = false;
+            setBusy(null);
+        };
         // `form.submit()` neither validates again nor comes back here.
         const fallBack = () => {
-            pending.current = false;
+            settle();
             form.submit();
         };
-        fetch(form.action, { method: "POST", body }).then(res => (res.ok && res.redirected && new URL(res.url).pathname.endsWith(THANKS) ? setSent(lead) : fallBack()), fallBack);
+        // A controller and a timer rather than `AbortSignal.timeout`: one clock the page (and a test) controls.
+        const controller = new AbortController();
+        const timer = setTimeout(() => controller.abort(new DOMException("no answer in time", "TimeoutError")), SUBMIT_TIMEOUT_MS);
+        fetch(form.action, { method: "POST", body, headers: { Accept: "application/json" }, signal: controller.signal })
+            .then(readAnswer)
+            .then(answer => {
+            if (answer === null)
+                return fallBack();
+            if (!answer.ok) {
+                settle();
+                return on.onRefused(lead.channel, answer.field);
+            }
+            // Still pending: the page is leaving, or the form is gone. The next
+            // lead from this form (Back, another need) gets an id of its own.
+            minted.delete(form);
+            if (typeof done === "function" ? done(lead.channel) : done)
+                setSent({ ...lead, ...(answer.lead ? { lead: answer.lead } : {}), ...(answer.cents !== undefined ? { cents: answer.cents } : {}) });
+            else
+                navigation.assign(answer.location);
+        }, () => {
+            settle();
+            const kind = controller.signal.aborted ? "timeout" : "network";
+            setFailure({ channel: lead.channel, failure: kind });
+            on.onFailed(lead.channel, kind);
+        })
+            .finally(() => clearTimeout(timer));
     };
-    return [sent, submit];
+    const retry = () => last.current?.requestSubmit();
+    return { sent, onSubmit: submit, busy, failure, retry };
 }

package/dist/react/use-validity.d.ts

@@ -0,0 +1,17 @@
+import { type ChangeEvent, type FormEvent } from "react";
+/**
+ * A control's validity in the page's words. `message(el)` is what is wrong
+ * now, `""` when nothing is; it is the control's custom validity from the
+ * first render on, so the browser blocks the submit and its bubble speaks the
+ * page's language, not the browser's. `shown` is the message once the browser
+ * refused the control (`invalid`), until the visitor fixes it — for the
+ * field to show under itself and mark `aria-invalid`.
+ */
+export declare function useValidity<E extends HTMLInputElement>(message: (el: E) => string): {
+    ref: import("react").RefObject<E | null>;
+    shown: string | null;
+    onInvalid: (event: FormEvent<E>) => void;
+    onChange: (event: ChangeEvent<E>) => void;
+    /** After a value set by script, which fires no input event. */
+    recheck: (el: E) => void;
+};

package/dist/react/use-validity.js

@@ -0,0 +1,38 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+/**
+ * A control's validity in the page's words. `message(el)` is what is wrong
+ * now, `""` when nothing is; it is the control's custom validity from the
+ * first render on, so the browser blocks the submit and its bubble speaks the
+ * page's language, not the browser's. `shown` is the message once the browser
+ * refused the control (`invalid`), until the visitor fixes it — for the
+ * field to show under itself and mark `aria-invalid`.
+ */
+export function useValidity(message) {
+    const ref = useRef(null);
+    const [shown, setShown] = useState(null);
+    const latest = useRef(message);
+    latest.current = message;
+    // Every render: the words arrive as props and may change with the locale.
+    useEffect(() => {
+        const el = ref.current;
+        if (el)
+            el.setCustomValidity(latest.current(el));
+    });
+    const recheck = (el) => {
+        const now = latest.current(el);
+        el.setCustomValidity(now);
+        if (now === "")
+            setShown(null);
+        else
+            setShown(was => (was === null ? null : now));
+    };
+    return {
+        ref,
+        shown,
+        onInvalid: (event) => setShown(latest.current(event.currentTarget) || event.currentTarget.validationMessage),
+        onChange: (event) => recheck(event.currentTarget),
+        /** After a value set by script, which fires no input event. */
+        recheck,
+    };
+}

package/dist/server/env.d.ts

@@ -35,6 +35,15 @@ export interface ServerEnv {
     } | null;
     posthogKey: string | null;
     posthogHost: string;
+    /**
+     * Leads one client address may send per window before the rest are kept
+     * as `rate-limited` (`LEAD_RATE_LIMIT`, `<count>/<seconds>`): 5 per 10 min
+     * in production; 100 outside it, where every request shares one address.
+     */
+    leadRateLimit: {
+        limit: number;
+        windowMs: number;
+    };
 }
 export type EnvSource = Readonly<Record<string, string | undefined>>;
 export declare function parseServerEnv(site: {