@evinvest/kitstart 0.17.0 → 0.18.0

package/dist/react/LeadCaptureFields.js

@@ -48,14 +48,20 @@ export function LocalityField(props) {
  * (`phoneProblem`): one it would refuse blocks the submit, in the page's
  * words. Leaving the field with such a number shows the hint already — a
  * hint, read out, not yet an error.
+ *
+ * A `messenger` variant asks it differently: `optional` (the chat answers;
+ * a number typed is still held to the rule), `disabled` (a bot needs none),
+ * in a box of the variant's with a channel picker beside it (`frame`), or in
+ * a drawer outside the form's element (`form`, the form's id).
  */
 export function PhoneField(props) {
-    const { name, text, onSoftError, classNames: c } = props;
+    const { name, text, onSoftError, frame, classNames: c } = props;
+    const optional = props.optional === true || props.disabled === true;
     const messageId = useId();
     const [doubtful, setDoubtful] = useState(false);
     const validity = useValidity(el => {
         const problem = phoneProblem(el.value);
-        return problem === "required" ? text.required : problem === "invalid" ? text.phoneInvalid : "";
+        return problem === "required" ? (optional ? "" : text.required) : problem === "invalid" ? text.phoneInvalid : "";
     });
     const error = props.error ?? validity.shown;
     const marked = Boolean(error) || doubtful;
@@ -95,37 +101,40 @@ export function PhoneField(props) {
             onSoftError();
         setDoubtful(bad);
     };
-    return (_jsxs(Field, { ...(props.id ? { controlId: props.id } : {}), className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { className: c?.label, children: text.phoneLabel }), _jsx(Input, { ref: validity.ref, name: name, size: "lg", ...PHONE_INPUT_PROPS, enterKeyHint: "send", placeholder: text.phonePlaceholder, required: true, "data-lead-field": "phone", "aria-invalid": marked || undefined, "aria-describedby": marked ? messageId : undefined, onInvalid: validity.onInvalid, onBlur: e => {
-                    const value = e.currentTarget.value;
-                    const press = pressed.current;
-                    pressed.current = null;
-                    if (press === "submit")
-                        return;
-                    if (press === null)
-                        return judge(value);
-                    // After the press's click, which lands where the press began; a
-                    // cancelled press (a scroll) ends the wait too, and so does a
-                    // release no click follows (dragged off), a moment later.
-                    let timer;
-                    const ends = ["click", "pointercancel"];
-                    const over = () => {
-                        for (const type of ends)
-                            window.removeEventListener(type, over, true);
-                        window.removeEventListener("pointerup", late, true);
-                        clearTimeout(timer);
-                        setTimeout(() => judge(value), 0);
-                    };
-                    const late = () => {
-                        timer = setTimeout(over, 500);
-                    };
-                    for (const type of ends)
-                        window.addEventListener(type, over, true);
-                    window.addEventListener("pointerup", late, true);
-                }, onChange: e => {
-                    validity.onChange(e);
-                    if (doubtful && phoneProblem(e.currentTarget.value) === null)
-                        setDoubtful(false);
-                }, className: c?.control }), _jsx(FieldMessage, { id: messageId, error: error, hint: doubtful ? text.phoneHint : null, classNames: c })] }));
+    const input = (_jsx(Input, { ref: validity.ref, name: name, size: "lg", ...PHONE_INPUT_PROPS, enterKeyHint: "send", placeholder: props.placeholder ?? text.phonePlaceholder, required: !optional, disabled: props.disabled, form: props.form, "data-lead-field": "phone", "aria-invalid": marked || undefined, "aria-describedby": marked ? messageId : undefined, onInvalid: validity.onInvalid, onBlur: e => {
+            const value = e.currentTarget.value;
+            const press = pressed.current;
+            pressed.current = null;
+            if (press === "submit")
+                return;
+            if (press === null)
+                return judge(value);
+            // After the press's click, which lands where the press began; a
+            // cancelled press (a scroll) ends the wait too, and so does a
+            // release no click follows (dragged off), a moment later.
+            let timer;
+            const ends = ["click", "pointercancel"];
+            const over = () => {
+                for (const type of ends)
+                    window.removeEventListener(type, over, true);
+                window.removeEventListener("pointerup", late, true);
+                clearTimeout(timer);
+                setTimeout(() => judge(value), 0);
+            };
+            const late = () => {
+                timer = setTimeout(over, 500);
+            };
+            for (const type of ends)
+                window.addEventListener(type, over, true);
+            window.addEventListener("pointerup", late, true);
+        }, onChange: e => {
+            validity.onChange(e);
+            if (doubtful && phoneProblem(e.currentTarget.value) === null)
+                setDoubtful(false);
+        }, 
+        // In a frame the box is the frame's: the input loses its own border and ring.
+        className: frame ? "h-full flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0" : c?.control }));
+    return (_jsxs(Field, { ...(props.id ? { controlId: props.id } : {}), className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { className: c?.label, children: text.phoneLabel }), frame ? frame(input) : input, _jsx(FieldMessage, { id: messageId, error: error, hint: doubtful ? text.phoneHint : null, classNames: c })] }));
 }
 export function NameField(props) {
     const { name, label, placeholder, optional, classNames: c } = props;

package/dist/react/LeadCaptureMessenger.d.ts

@@ -0,0 +1,41 @@
+import { type MessengerFacts, type MessengerMode, type MessengerVariant } from "../core/messenger.js";
+import type { MessengerAt, MessengerKit, MessengerShown } from "./messenger/types.js";
+export declare const NO_MESSENGERS: MessengerFacts;
+/**
+ * What a variant becomes on this place: itself while the place has WhatsApp;
+ * without it the control (Figma's «Выключено в панели») — with a way to the
+ * bot when there is one — except `urgency`, whose question is the lead's
+ * (both answers then ask the phone), and `thanks`, whose success keeps the
+ * bot. `null`: the control as it is.
+ */
+export declare function messengerShownOf(variant: MessengerVariant | undefined, facts: MessengerFacts): MessengerShown | null;
+export declare function drawsAt(shown: MessengerShown | null, at: MessengerAt): boolean;
+/** The channel a variant starts on: none until asked (`saga`, `urgency`), else WhatsApp. */
+export declare function initialMode(variant: MessengerVariant | undefined): MessengerMode | null;
+/**
+ * The card's `message_ref`, minted once the script runs — a server render
+ * cannot know it without the hydration seeing another — and again by
+ * `renew`, after a messenger lead is posted.
+ */
+export declare function useMessageRef(prefix: string | undefined, on: boolean): {
+    ref: string | null;
+    renew: () => void;
+    minted: boolean;
+};
+/**
+ * One variant's piece at one place in the card; nothing where it draws
+ * nothing.
+ *
+ * Drawn by the server, or hydrated, it has no boundary of its own. The server
+ * finds the variant loaded (every one is, as this module loads) and writes it
+ * into the page whole — a boundary would not do: React writes a large
+ * boundary's content apart from the shell and reveals it late, the card drawn
+ * without its contact block first. Hydrating, a variant whose chunk is still
+ * on its way holds the card's hydration — the server's markup stays as it is,
+ * and nothing in the card runs until the chunk is here. A piece first drawn
+ * after that (a step, the success) is the browser's own: it waits behind a
+ * boundary, its chunk loaded then.
+ */
+export declare function MessengerSlot({ kit }: {
+    kit: MessengerKit;
+}): import("react").JSX.Element | null;

package/dist/react/LeadCaptureMessenger.js

@@ -0,0 +1,133 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { lazy, Suspense, useEffect, useState, useSyncExternalStore } from "react";
+import { MESSAGE_REF_PREFIX, newMessageRef } from "../core/messenger.js";
+/**
+ * The `messenger` variants, each its own chunk: a page pays for the one its
+ * arm draws, and the control for none. `LeadCapture` only says where.
+ */
+const LOAD = {
+    select: () => import("./messenger/select.js"),
+    segment: () => import("./messenger/segment.js"),
+    tiles: () => import("./messenger/tiles.js"),
+    thanks: () => import("./messenger/thanks.js"),
+    swap: () => import("./messenger/swap.js"),
+    saga: () => import("./messenger/saga.js"),
+    urgency: () => import("./messenger/urgency.js"),
+    sheet: () => import("./messenger/sheet.js"),
+    chip: () => import("./messenger/chip.js"),
+    split: () => import("./messenger/split.js"),
+    fallback: () => import("./messenger/fallback.js"),
+};
+const LOADING = new Map();
+/** The variants whose chunk has arrived, by kind. */
+const MODULES = new Map();
+/** The variant's chunk, asked for once a page. */
+function load(kind) {
+    const known = LOADING.get(kind);
+    if (known)
+        return known;
+    const loading = LOAD[kind]().then(mod => {
+        MODULES.set(kind, mod);
+        return mod;
+    });
+    LOADING.set(kind, loading);
+    return loading;
+}
+const KINDS = ["select", "segment", "tiles", "thanks", "swap", "saga", "urgency", "sheet", "chip", "split", "fallback"];
+// On the server every variant is loaded as the module is: a render then finds
+// its variant here and writes it into the page whole. One still loading
+// renders through `lazy` and streams in behind its boundary, after the shell
+// — React reveals such a boundary late, and the card would draw without its
+// contact block first.
+if (typeof window === "undefined")
+    for (const kind of KINDS)
+        void load(kind).catch(() => undefined);
+/** Until its chunk is here, a variant is drawn through `lazy`, behind its boundary. */
+const LAZY = new Map(KINDS.map(kind => [kind, lazy(() => load(kind))]));
+/** The variant's component: its module's own once it is here, else its lazy stand-in. */
+function partOf(kind) {
+    return MODULES.get(kind)?.default ?? LAZY.get(kind) ?? null;
+}
+/** Where each variant draws; everywhere else the card is the control's. */
+const USES = {
+    select: ["contact"],
+    segment: ["contact"],
+    tiles: ["contact"],
+    thanks: ["done"],
+    swap: ["contact"],
+    saga: ["head", "body", "contact"],
+    urgency: ["beforeNeed", "contact"],
+    sheet: ["contact"],
+    chip: ["afterHead", "contact"],
+    split: ["contact"],
+    fallback: ["afterSubmit"],
+};
+export const NO_MESSENGERS = { whatsapp: null, telegram: null };
+/**
+ * What a variant becomes on this place: itself while the place has WhatsApp;
+ * without it the control (Figma's «Выключено в панели») — with a way to the
+ * bot when there is one — except `urgency`, whose question is the lead's
+ * (both answers then ask the phone), and `thanks`, whose success keeps the
+ * bot. `null`: the control as it is.
+ */
+export function messengerShownOf(variant, facts) {
+    if (!variant)
+        return null;
+    if (facts.whatsapp)
+        return variant.kind;
+    if (variant.kind === "urgency")
+        return "urgency";
+    if (!facts.telegram)
+        return null;
+    return variant.kind === "thanks" ? "thanks" : "fallback";
+}
+export function drawsAt(shown, at) {
+    return shown !== null && USES[shown].includes(at);
+}
+/** The channel a variant starts on: none until asked (`saga`, `urgency`), else WhatsApp. */
+export function initialMode(variant) {
+    return variant?.kind === "saga" || variant?.kind === "urgency" ? null : "whatsapp";
+}
+/**
+ * The card's `message_ref`, minted once the script runs — a server render
+ * cannot know it without the hydration seeing another — and again by
+ * `renew`, after a messenger lead is posted.
+ */
+export function useMessageRef(prefix, on) {
+    const [ref, setRef] = useState(null);
+    // Without a prefix there is no reference to wait for; with one, nothing is
+    // minted on the server — an ISR page is one render for every visitor.
+    const [settled, setSettled] = useState(false);
+    const valid = on && prefix !== undefined && MESSAGE_REF_PREFIX.test(prefix);
+    useEffect(() => {
+        if (valid && prefix !== undefined)
+            setRef(newMessageRef(prefix));
+        setSettled(true);
+    }, [valid, prefix]);
+    return { ref, renew: () => (valid && prefix !== undefined ? setRef(newMessageRef(prefix)) : undefined), minted: settled && (!valid || ref !== null) };
+}
+const noop = () => () => undefined;
+/**
+ * One variant's piece at one place in the card; nothing where it draws
+ * nothing.
+ *
+ * Drawn by the server, or hydrated, it has no boundary of its own. The server
+ * finds the variant loaded (every one is, as this module loads) and writes it
+ * into the page whole — a boundary would not do: React writes a large
+ * boundary's content apart from the shell and reveals it late, the card drawn
+ * without its contact block first. Hydrating, a variant whose chunk is still
+ * on its way holds the card's hydration — the server's markup stays as it is,
+ * and nothing in the card runs until the chunk is here. A piece first drawn
+ * after that (a step, the success) is the browser's own: it waits behind a
+ * boundary, its chunk loaded then.
+ */
+export function MessengerSlot({ kit }) {
+    const hydrating = useSyncExternalStore(noop, () => false, () => true);
+    // Chosen on the first render: a structure swapped under the slot would draw the variant anew.
+    const [wrapped] = useState(() => !hydrating);
+    const [Part] = useState(() => partOf(kit.shown));
+    if (!drawsAt(kit.shown, kit.at) || !Part)
+        return null;
+    return wrapped ? (_jsx(Suspense, { fallback: null, children: _jsx(Part, { kit: kit }) })) : (_jsx(Part, { kit: kit }));
+}

package/dist/react/LeadCapturePrice.d.ts

@@ -2,7 +2,12 @@ import type { LeadCaptureFlowText } from "../core/lead-capture-text.js";
 import type { LeadFlow } from "../core/pricing/flow.js";
 import type { Price, PricingModel } from "../core/pricing/model.js";
 import type { PartClassNames } from "./parts.js";
-export type PricePart = "price" | "priceTotal" | "breakdown" | "priceNote" | "priceLine" | "priceTaxCredit" | "priceDetail";
+/**
+ * `priceDetail`: the compact price's «Détail», the trigger — the popover's
+ * button, or the `<details>`' summary without a script; `priceDetailContent`:
+ * the breakdown it pops over the card.
+ */
+export type PricePart = "price" | "priceTotal" | "breakdown" | "priceNote" | "priceLine" | "priceTaxCredit" | "priceDetail" | "priceDetailContent";
 /**
  * The price, read out as it changes (`aria-live`): an estimate's total and
  * how it was reached, or — until every question is answered — what is
@@ -22,8 +27,9 @@ export declare const afterCredit: (cents: number, ratio: number) => number;
 /**
  * `price="compact"`: the price on one line (`priceLine`), what is left after
  * the brand's tax credit when it has one (`taxCredit`, a ratio), and how it
- * was reached behind a disclosure — a `<details>`, so it opens without a
- * script. Read out as it changes, the line only.
+ * was reached behind «Détail» — the kit's `Popover`, over the card, so
+ * opening it moves nothing; without a script a `<details>`, which opens in
+ * place. Read out as it changes, the line only.
  */
 export declare function PriceCompact(props: {
     model: PricingModel;

package/dist/react/LeadCapturePrice.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { cn } from "@evinvest/uikit";
+import { cn, Popover, PopoverContent, PopoverTrigger } from "@evinvest/uikit";
+import { useSyncExternalStore } from "react";
 import { fillText, formatCents } from "../core/lead-capture-format.js";
 import { labelOf } from "../core/pricing/validate.js";
 function lineLabel(line, model, locale, text) {
@@ -36,12 +37,31 @@ export const afterCredit = (cents, ratio) => cents - Math.round(cents * ratio);
 /**
  * `price="compact"`: the price on one line (`priceLine`), what is left after
  * the brand's tax credit when it has one (`taxCredit`, a ratio), and how it
- * was reached behind a disclosure — a `<details>`, so it opens without a
- * script. Read out as it changes, the line only.
+ * was reached behind «Détail» — the kit's `Popover`, over the card, so
+ * opening it moves nothing; without a script a `<details>`, which opens in
+ * place. Read out as it changes, the line only.
  */
 export function PriceCompact(props) {
     const { model, flow, price, locale, taxCredit, text, classNames: c } = props;
     const lines = price?.breakdown.filter((line, i) => i === 0 || line.cents !== 0) ?? [];
     const credit = price && taxCredit !== undefined && taxCredit > 0 && taxCredit < 1 ? afterCredit(price.cents, taxCredit) : null;
-    return (_jsxs("div", { className: cn("flex flex-col gap-1", c?.price), children: [_jsx("p", { "aria-live": "polite", "aria-atomic": "true", className: cn("flex flex-wrap items-baseline gap-x-2 text-ink", c?.priceLine), children: price ? (_jsxs(_Fragment, { children: [_jsx("span", { className: cn("font-semibold", c?.priceTotal), "data-price-cents": price.cents, children: fillText(text.priceLine, { price: formatCents(price.cents, locale) }) }), credit !== null && (_jsxs("span", { className: cn("text-sm text-ink-soft", c?.priceTaxCredit), "data-credit-cents": credit, children: [_jsx("span", { "aria-hidden": "true", children: "\u00B7 " }), fillText(text.priceTaxCredit, { price: formatCents(credit, locale) })] }))] })) : (_jsx("span", { className: "text-sm text-ink-soft", children: text.pricePending })) }), flow === "estimate" && lines.length > 1 && (_jsxs("details", { className: cn("text-sm text-ink-soft", c?.priceDetail), children: [_jsx("summary", { className: "inline-flex min-h-11 cursor-pointer items-center underline underline-offset-4", children: text.priceDetail }), _jsx("ul", { className: cn("flex flex-col gap-1 pb-2", c?.breakdown), children: lines.map((line, i) => (_jsxs("li", { className: "flex justify-between gap-3", children: [_jsx("span", { children: lineLabel(line, model, locale, text) }), _jsx("span", { className: "tabular-nums", children: formatCents(line.cents, locale, i > 0) })] }, i))) }), _jsx("p", { className: c?.priceNote, children: text.priceNote })] }))] }));
+    return (_jsxs("div", { className: cn("flex flex-col gap-1", c?.price), children: [_jsx("p", { "aria-live": "polite", "aria-atomic": "true", className: cn("flex flex-wrap items-baseline gap-x-2 text-ink", c?.priceLine), children: price ? (_jsxs(_Fragment, { children: [_jsx("span", { className: cn("font-semibold", c?.priceTotal), "data-price-cents": price.cents, children: fillText(text.priceLine, { price: formatCents(price.cents, locale) }) }), credit !== null && (_jsxs("span", { className: cn("text-sm text-ink-soft", c?.priceTaxCredit), "data-credit-cents": credit, children: [_jsx("span", { "aria-hidden": "true", children: "\u00B7 " }), fillText(text.priceTaxCredit, { price: formatCents(credit, locale) })] }))] })) : (_jsx("span", { className: "text-sm text-ink-soft", children: text.pricePending })) }), flow === "estimate" && lines.length > 1 && (_jsxs(PriceDetail, { label: text.priceDetail, classNames: c, children: [_jsx("ul", { className: cn("flex flex-col gap-1 pb-2", c?.breakdown), children: lines.map((line, i) => (_jsxs("li", { className: "flex justify-between gap-3", children: [_jsx("span", { children: lineLabel(line, model, locale, text) }), _jsx("span", { className: "tabular-nums", children: formatCents(line.cents, locale, i > 0) })] }, i))) }), _jsx("p", { className: c?.priceNote, children: text.priceNote })] }))] }));
+}
+const noop = () => () => undefined;
+/** The trigger both forms share: one height, so the swap after hydration moves nothing. */
+const TRIGGER = "inline-flex min-h-11 cursor-pointer items-center text-sm text-ink-soft underline underline-offset-4";
+/**
+ * The breakdown behind «Détail». Scripted: the kit's `Popover` — over the
+ * card, closed by a tap outside or Escape, kept inside the screen. The
+ * server's (and a browser without scripts): a `<details>` opening in place;
+ * hydration draws that first, then the popover — `useSyncExternalStore`'s
+ * server snapshot is what hydration reads.
+ */
+function PriceDetail(props) {
+    const { label, classNames: c } = props;
+    const scripted = useSyncExternalStore(noop, () => true, () => false);
+    if (!scripted) {
+        return (_jsxs("details", { className: "text-sm text-ink-soft", children: [_jsx("summary", { className: cn(TRIGGER, c?.priceDetail), children: label }), _jsx("div", { className: c?.priceDetailContent, children: props.children })] }));
+    }
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { type: "button", className: cn("self-start", TRIGGER, c?.priceDetail), children: label }), _jsx(PopoverContent, { role: "dialog", "aria-label": label, side: "bottom", align: "end", sideOffset: 8, className: cn("max-w-[calc(100vw-16px)] text-sm text-ink-soft", c?.priceDetailContent), children: props.children })] }));
 }

package/dist/react/LeadCaptureSubmit.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 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. */
@@ -6,6 +7,8 @@ export declare function SubmitButton(props: {
     label: string;
     sending: string;
     className: string | undefined;
+    form?: string | undefined;
+    children?: ReactNode;
 }): import("react").JSX.Element;
 /** Why the post got no answer, and the way to send the same lead again. */
 export declare function FailureMessage(props: {

package/dist/react/LeadCaptureSubmit.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } 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 }));
+    return (_jsxs(Button, { type: "submit", size: "touch", form: props.form, disabled: props.busy, "aria-busy": props.busy || undefined, className: cn("w-full", props.className), children: [props.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) {

package/dist/react/LeadCaptureTiles.js

@@ -21,9 +21,12 @@ export function TileGroup(props) {
             radio.setCustomValidity(value === undefined ? requiredText : "");
     });
     const markerProps = marker ? { [marker]: "" } : {};
-    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.legend), children: legend }), _jsx("div", { className: c.grid, children: options.map(o => (_jsxs("label", { className: cn("relative block cursor-pointer", o.span === 2 && "col-span-2"), children: [_jsx("input", { type: "radio", name: name, value: o.value, required: required, checked: value === o.value, onPointerDown: () => {
-                                pointer.current = true;
-                            }, onKeyDown: (e) => {
+    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.legend), children: legend }), _jsx("div", { className: c.grid, children: options.map(o => (_jsxs("label", { className: cn("relative block cursor-pointer", o.span === 2 && "col-span-2"), 
+                    // On the label, not the radio: a tap on the tile's words lands on them,
+                    // and the label's click on the radio (`detail` 0) must still read as a tap.
+                    onPointerDown: () => {
+                        pointer.current = true;
+                    }, children: [_jsx("input", { type: "radio", name: name, value: o.value, required: required, checked: value === o.value, onKeyDown: (e) => {
                                 pointer.current = false;
                                 answered.current = false;
                                 if (e.key !== "Enter" || !enterPicks)
@@ -46,5 +49,7 @@ export function TileGroup(props) {
                                 if (!answered.current)
                                     onSelect(o.value);
                                 answered.current = false;
-                            }, className: "peer absolute inset-0 opacity-0", "data-lead-field": field, "aria-label": o.shortLabel !== undefined ? [o.label, o.badge, o.aside].filter(Boolean).join(", ") : undefined, ...markerProps }), _jsxs("span", { className: cn("flex min-h-11 items-center rounded-[var(--control-radius)] border border-input text-ink transition-colors", "peer-checked:border-primary peer-checked:bg-hover peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50", c.tile, o.className), children: [o.icon !== undefined && (_jsx("span", { "aria-hidden": "true", className: cn("flex shrink-0 items-center justify-center [&_svg]:size-6", c.icon), children: o.icon })), o.shortLabel !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "min-w-0 sm:hidden", children: o.shortLabel }), _jsx("span", { className: "min-w-0 max-sm:hidden", children: o.label })] })) : (_jsx("span", { className: "min-w-0", children: o.label })), o.badge && _jsx("span", { className: cn("rounded-full bg-hover px-2 py-0.5 text-xs font-medium text-ink", c.badge), children: o.badge }), o.aside && _jsx("span", { className: cn("ms-auto shrink-0 font-medium tabular-nums", c.aside), children: o.aside })] })] }, o.value))) })] }));
+                            }, 
+                            // The whole tile: without a size WebKit keeps a radio 12×12 in its corner.
+                            className: "peer absolute inset-0 m-0 size-full cursor-pointer opacity-0", "data-lead-field": field, "aria-label": o.shortLabel !== undefined ? [o.label, o.badge, o.aside].filter(Boolean).join(", ") : undefined, ...markerProps }), _jsxs("span", { className: cn("flex min-h-11 items-center rounded-[var(--control-radius)] border border-input text-ink transition-colors", "peer-checked:border-primary peer-checked:bg-hover peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50", c.tile, o.className), children: [o.icon !== undefined && (_jsx("span", { "aria-hidden": "true", className: cn("flex shrink-0 items-center justify-center [&_svg]:size-6", c.icon), children: o.icon })), o.shortLabel !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "min-w-0 sm:hidden", children: o.shortLabel }), _jsx("span", { className: "min-w-0 max-sm:hidden", children: o.label })] })) : (_jsx("span", { className: "min-w-0", children: o.label })), o.badge && _jsx("span", { className: cn("rounded-full bg-hover px-2 py-0.5 text-xs font-medium text-ink", c.badge), children: o.badge }), o.aside && _jsx("span", { className: cn("ms-auto shrink-0 font-medium tabular-nums", c.aside), children: o.aside })] })] }, o.value))) })] }));
 }

package/dist/react/analytics-context.d.ts

@@ -1,5 +1,4 @@
 import type { AnalyticsSink } from "@evinvest/analytics";
-import { experimentProps } from "../core/analytics.js";
 /**
  * The sink `AnalyticsBoundary` built, for an island inside it that reports
  * events of its own (`LeadCapture`). Outside a boundary there is none, and the
@@ -14,5 +13,12 @@ export declare const useAnalyticsSink: () => AnalyticsSink | null;
  */
 export declare const AnalyticsIdContext: import("react").Context<string | null>;
 export declare const useAnalyticsId: () => string | null;
-/** `data-experiment` / `data-variant` on an element or its ancestors, for an intent's event. */
-export declare function experimentOf(el: Element | null): ReturnType<typeof experimentProps>;
+/**
+ * `data-experiment` / `data-variant` on an element or its ancestors, for an
+ * intent's event — and `data-channels-available`, the messengers its card offered.
+ */
+export declare function experimentOf(el: Element | null): {
+    experiment?: string;
+    variant?: string;
+    channels_available?: string;
+};

package/dist/react/analytics-context.js

@@ -1,6 +1,6 @@
 "use client";
 import { createContext, useContext } from "react";
-import { experimentProps } from "../core/analytics.js";
+import { channelsProps, experimentProps } from "../core/analytics.js";
 /**
  * The sink `AnalyticsBoundary` built, for an island inside it that reports
  * events of its own (`LeadCapture`). Outside a boundary there is none, and the
@@ -15,8 +15,12 @@ export const useAnalyticsSink = () => useContext(AnalyticsSinkContext);
  */
 export const AnalyticsIdContext = createContext(null);
 export const useAnalyticsId = () => useContext(AnalyticsIdContext);
-/** `data-experiment` / `data-variant` on an element or its ancestors, for an intent's event. */
+/**
+ * `data-experiment` / `data-variant` on an element or its ancestors, for an
+ * intent's event — and `data-channels-available`, the messengers its card offered.
+ */
 export function experimentOf(el) {
     const host = el?.closest("[data-experiment]");
-    return experimentProps(host?.getAttribute("data-experiment"), host?.getAttribute("data-variant"));
+    const card = el?.closest("[data-channels-available]");
+    return { ...experimentProps(host?.getAttribute("data-experiment"), host?.getAttribute("data-variant")), ...channelsProps(card?.getAttribute("data-channels-available")) };
 }

package/dist/react/index.d.ts

@@ -32,6 +32,7 @@ export type { LeadCaptureLayout, LeadNeedDisplay, LeadNeedOption } from "./LeadC
 export type { EstimateQuestion, EstimateQuestions } from "./LeadCaptureEstimate.js";
 export type { LeadIntro, LeadIntroOption } from "./lead-steps.js";
 export type { ChannelIconKey } from "./LeadCaptureChannels.js";
+export type { MessengerPart } from "./messenger/types.js";
 export { MapFacade, type MapFacadePart, type MapFacadeProps } from "./MapFacade.js";
 export { PlaceDirectory, type PlaceDirectoryPart, type PlaceDirectoryProps } from "./PlaceDirectory.js";
 export { PHONE_INPUT_PROPS, QuoteFormShell, type QuoteFormShellProps } from "./QuoteFormShell.js";

package/dist/react/messenger/action.d.ts

@@ -0,0 +1,144 @@
+import { type MouseEvent, type ReactNode } from "react";
+import { type MessengerMode } from "../../core/messenger.js";
+import { type LeadCaptureMessengerText } from "../../core/messenger-text.js";
+import type { MessengerKit } from "./types.js";
+export type Messenger = Exclude<MessengerMode, "call">;
+/** The variant's words, the brand's over the kit's. */
+export declare const wordsOf: (kit: MessengerKit) => LeadCaptureMessengerText;
+/**
+ * What the message says: the need the card knows, the postcode as the
+ * visitor types it — and the estimate, the timing and the reference. The
+ * preview follows the typing; `compose` reads the form again at the tap, so
+ * the link carries what is on screen even after a value set by script.
+ */
+export interface Message {
+    message: string;
+    preview: string;
+    compose: () => string;
+}
+export declare function useMessage(kit: MessengerKit, own?: string | null): Message;
+/** Where a messenger CTA leads: wa.me with the message, or the bot with the reference. */
+export declare function hrefOf(kit: MessengerKit, channel: Messenger, message: string): string | null;
+/**
+ * A messenger link's attributes. Not `ready` (before the script, before the
+ * reference): no `href` — nothing to follow — and `aria-disabled`.
+ */
+export interface LinkAttrs {
+    href?: string;
+    onClick: (event: MouseEvent<HTMLAnchorElement>) => void;
+    target?: string;
+    rel?: string;
+    "aria-disabled"?: true;
+}
+export interface MessengerAction {
+    /** A messenger CTA's link: the real `href` (the OS opens the app from the tap) and what the tap does first. */
+    link: (channel: Messenger) => LinkAttrs | null;
+    /** On a computer, WhatsApp's QR code, drawn in place of the slot; `null` otherwise. */
+    panel: ReactNode;
+    /** Back from the messenger: drawn over the card's form. */
+    overlay: ReactNode;
+}
+/**
+ * The tap on a messenger CTA, shared by every variant: a number typed must be
+ * one (the browser says so, nothing leaves); the lead is posted in the
+ * background; on a phone the link opens the app, on a computer WhatsApp is a
+ * QR code in place and Telegram a new tab. Back on the page, the card asks
+ * whether the message went, with the way to a call when it did not.
+ */
+export declare function useMessengerAction(kit: MessengerKit, message: Message, onCallback: () => void, 
+/**
+ * `followUp`: the lead is already sent (`thanks`) — a tap posts nothing,
+ * keeps the reference and asks nothing on the way back.
+ */
+options?: {
+    followUp?: boolean;
+}): MessengerAction;
+/** To the phone: the variant's call state, its field focused once it is drawn. */
+export declare function toCall(kit: MessengerKit): void;
+/** A computer, as `isDesktop` says it — after hydration only. */
+export declare function useDesktop(): boolean;
+/** The slot by the channel — the message, the bot, or the phone — and the channel's button under it. */
+export declare function ModeBody(props: {
+    kit: MessengerKit;
+    message: Message;
+    action: MessengerAction;
+    labels?: Partial<Record<MessengerMode, string>>;
+}): import("react").JSX.Element;
+/** Whether the brand drew an icon for a channel: a square without one says its name instead. */
+export declare const hasIcon: (kit: MessengerKit, channel: MessengerMode) => boolean;
+/** A channel as a square beside the row's button: its icon, or — the brand drew none — its name; `label` says what it does. */
+export declare function SquareButton(props: {
+    kit: MessengerKit;
+    channel: MessengerMode;
+    label: string;
+    onClick: () => void;
+}): import("react").JSX.Element;
+/** The brand's icon for a channel, hidden from assistive technology: the label names it. */
+export declare function Glyph({ kit, channel }: {
+    kit: MessengerKit;
+    channel: MessengerMode;
+}): import("react").JSX.Element | null;
+export declare function MessengerCta(props: {
+    kit: MessengerKit;
+    action: MessengerAction;
+    channel: Messenger;
+    label: string;
+    variant?: "primary" | "outline";
+    className?: string | undefined;
+    square?: boolean;
+}): import("react").JSX.Element | null;
+/** In an app's own browser: WhatsApp may not open — how to leave it, and the message to paste. */
+export declare function InappHint({ kit, message }: {
+    kit: MessengerKit;
+    message: string;
+}): import("react").JSX.Element | null;
+/** The fixed box a variant swaps its states in; the brand gives it its height (`messengerSlot`). */
+export declare function Slot({ kit, children }: {
+    kit: MessengerKit;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The message, ready: what goes into the chat, so the visitor knows there is nothing to write. */
+export declare function Preview({ kit, preview, title, lede }: {
+    kit: MessengerKit;
+    preview: string;
+    title?: string;
+    lede?: string;
+}): import("react").JSX.Element;
+/** What the bot does, in the slot. */
+export declare function BotCard({ kit }: {
+    kit: MessengerKit;
+}): import("react").JSX.Element;
+/** «ou via Telegram»: the bot, as a link under the submit. */
+export declare function TelegramLink({ kit, action }: {
+    kit: MessengerKit;
+    action: MessengerAction;
+}): import("react").JSX.Element | null;
+/** The channels a variant offers, in the Figma order; Telegram only with a bot. */
+export declare function modesOf(kit: MessengerKit, order?: readonly MessengerMode[]): MessengerMode[];
+export declare const labelOf: (words: LeadCaptureMessengerText, mode: MessengerMode) => string;
+export declare const noteOf: (words: LeadCaptureMessengerText, mode: MessengerMode) => string;
+/**
+ * The kit's `Select` as a channel picker: an overlay, so the form under it
+ * does not move. The trigger draws its own label — `SelectValue` would print
+ * the raw value.
+ */
+export declare function ChannelPicker(props: {
+    kit: MessengerKit;
+    trigger: ReactNode;
+    triggerClassName?: string | undefined;
+}): import("react").JSX.Element;
+/** A channel as a card to tap (`saga`, `sheet`): its name, its line, the recommended badge on WhatsApp. */
+export declare function OptionCard(props: {
+    kit: MessengerKit;
+    mode: MessengerMode;
+    /** A step in the card; or, for a messenger, `link` — a real link, the app opened from the tap. */
+    onPick?: () => void;
+    link?: ReturnType<MessengerAction["link"]>;
+    recommended?: boolean;
+}): import("react").JSX.Element;
+export declare function QrPanel(props: {
+    href: string;
+    words: LeadCaptureMessengerText;
+    onCallback: (() => void) | null;
+    kit: MessengerKit;
+}): import("react").JSX.Element;