@evinvest/kitstart 0.16.0 → 0.18.0

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/ab-switcher-types.d.ts

@@ -19,7 +19,7 @@ export interface AbSwitcherText {
     leave: string;
     minimize: string;
     hide: string;
-    /** Shown for an experiment no cookie assigns yet. */
+    /** Shown for an experiment no cookie assigns — one that is off; `not running` by default. */
     unassigned: string;
 }
 /**

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;

package/dist/react/messenger/action.js

@@ -0,0 +1,301 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { whatsappHref } from "@evinvest/marketing";
+import { Badge, Button, cn, Select, SelectContent, SelectItem, SelectTrigger } from "@evinvest/uikit";
+import { useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
+import { fillText } from "../../core/lead-capture-format.js";
+import { telegramHref } from "../../core/messenger.js";
+import { messengerMessage } from "../../core/messenger-message.js";
+import { messengerTextOf } from "../../core/messenger-text.js";
+import { phoneProblem } from "../../core/phone.js";
+import { partWithLeading } from "../parts.js";
+import { useAnalyticsId } from "../analytics-context.js";
+import { postInBackground } from "../use-lead-submit.js";
+/** The variant's words, the brand's over the kit's. */
+export const wordsOf = (kit) => messengerTextOf(kit.text, kit.locale);
+const formOf = (kit) => {
+    if (typeof document === "undefined")
+        return null;
+    const el = document.getElementById(`${kit.id}-form`);
+    return el instanceof HTMLFormElement ? el : null;
+};
+/** A posted field's value as it stands — an element of the form wherever it is drawn. */
+function valueOf(form, name) {
+    const el = form?.elements.namedItem(name);
+    return el instanceof HTMLInputElement || el instanceof HTMLSelectElement ? el.value.trim() : "";
+}
+export function useMessage(kit, own) {
+    // A variant's own timing (`urgency`), else the estimate's answer the brand named.
+    const timing = own === undefined ? kit.timing : own === null ? null : { label: own, short: own };
+    const [postcode, setPostcode] = useState("");
+    useEffect(() => {
+        const form = formOf(kit);
+        if (!form)
+            return;
+        const read = () => setPostcode(valueOf(form, kit.wire.locality));
+        read();
+        form.addEventListener("input", read);
+        form.addEventListener("change", read);
+        return () => {
+            form.removeEventListener("input", read);
+            form.removeEventListener("change", read);
+        };
+    }, [kit.id, kit.wire.locality]);
+    const words = wordsOf(kit);
+    // The need with the estimate's answers: «Ménage standard · 2 ch. · 40–70 m²».
+    const need = kit.needLabel ? [kit.needLabel, ...kit.answers].join(" · ") : null;
+    const compose = (code) => messengerMessage({ brand: kit.brand, need, postcode: code, price: kit.priceText, timing: timing?.label ?? null, ref: kit.messageRef }, words);
+    const ref = kit.messageRef ? fillText(words.messageRef, { ref: kit.messageRef }) : null;
+    const price = kit.priceText ? fillText(words.messengerPreviewPrice, { price: kit.priceText }) : null;
+    const preview = [fillText(words.messageHello, { brand: kit.brand }), need, timing?.short, price, postcode, ref].filter(Boolean).join(" · ");
+    return { message: compose(postcode), preview, compose: () => compose(valueOf(formOf(kit), kit.wire.locality)) };
+}
+/** Where a messenger CTA leads: wa.me with the message, or the bot with the reference. */
+export function hrefOf(kit, channel, message) {
+    if (channel === "whatsapp")
+        return kit.facts.whatsapp ? whatsappHref(kit.facts.whatsapp, message) : null;
+    return kit.facts.telegram ? telegramHref(kit.facts.telegram, kit.messageRef ?? undefined) : null;
+}
+/** A computer: no touch to hand a link to an app, and a screen wide enough to read a QR code off. */
+const isDesktop = () => typeof window.matchMedia === "function" && window.matchMedia("(hover: hover) and (pointer: fine)").matches && window.innerWidth >= 768;
+/** The browsers of apps that hold a link to themselves: WhatsApp may not open from them. */
+const IN_APP = /Instagram|FBAN|FBAV|TikTok|musical_ly|BytedanceWebview|\bLine\/|Snapchat/i;
+const noop = () => () => undefined;
+/** Whether the page runs in such a browser — after hydration only: the server cannot know. */
+function useInApp() {
+    return useSyncExternalStore(noop, () => IN_APP.test(navigator.userAgent), () => false);
+}
+/**
+ * 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 function useMessengerAction(kit, message, onCallback, 
+/**
+ * `followUp`: the lead is already sent (`thanks`) — a tap posts nothing,
+ * keeps the reference and asks nothing on the way back.
+ */
+options = {}) {
+    const followUp = options.followUp === true;
+    const analyticsId = useAnalyticsId();
+    const words = wordsOf(kit);
+    const [qr, setQr] = useState(null);
+    const [back, setBack] = useState(null);
+    const left = useRef(null);
+    useEffect(() => {
+        let hidden = false;
+        const change = () => {
+            if (document.visibilityState === "hidden")
+                hidden = true;
+            else if (hidden && left.current) {
+                hidden = false;
+                setBack(left.current);
+                left.current = null;
+            }
+        };
+        document.addEventListener("visibilitychange", change);
+        return () => document.removeEventListener("visibilitychange", change);
+    }, []);
+    const link = channel => {
+        // The render's message — the server has no form to read; the tap reads it again.
+        const href = hrefOf(kit, channel, message.message);
+        if (!href)
+            return null;
+        if (!kit.ready)
+            return { "aria-disabled": true, onClick: event => event.preventDefault() };
+        const onClick = (event) => {
+            const form = formOf(kit);
+            const phone = form?.elements.namedItem(kit.wire.mobile);
+            if (phone instanceof HTMLInputElement && phone.value.trim() !== "" && phoneProblem(phone.value) !== null) {
+                event.preventDefault();
+                phone.reportValidity();
+                return;
+            }
+            const ref = kit.messageRef;
+            // What is on screen now; the link follows it before the browser does.
+            const fresh = hrefOf(kit, channel, message.compose()) ?? href;
+            event.currentTarget.href = fresh;
+            if (form && !followUp)
+                void postInBackground(form, { channel, ...(ref ? { message_ref: ref } : {}) }, analyticsId);
+            const desktop = isDesktop();
+            kit.events.messengerOpen({ channel, device: desktop ? "desktop" : "mobile", inapp: IN_APP.test(navigator.userAgent), ref });
+            if (desktop && channel === "whatsapp") {
+                event.preventDefault();
+                setQr(fresh);
+                kit.events.qrShown();
+            }
+            else if (!followUp) {
+                left.current = { channel, ref, href: fresh };
+            }
+            // Never renewed here: React redraws the link before the browser follows
+            // it, and the visitor would leave with a reference the lead does not
+            // carry. A second tap on the same lead is the same reference and the
+            // same submission id — one lead.
+        };
+        return channel === "telegram" ? { href, onClick, target: "_blank", rel: "noopener" } : { href, onClick };
+    };
+    const callback = () => {
+        setQr(null);
+        onCallback();
+    };
+    const panel = qr && _jsx(QrPanel, { href: qr, words: words, onCallback: followUp ? null : callback, kit: kit });
+    const answer = (said) => {
+        if (back)
+            kit.events.messengerReturn({ channel: back.channel, answer: said, ref: back.ref });
+        setBack(null);
+        // Back from the chat and answered: the next lead is another, with a reference of its own.
+        if (!followUp)
+            kit.renewRef();
+        if (said === "failed")
+            onCallback();
+    };
+    const overlay = back && _jsx(ReturnScreen, { left: back, words: words, onAnswer: answer, kit: kit });
+    return { link, panel, overlay };
+}
+/** To the phone: the variant's call state, its field focused once it is drawn. */
+export function toCall(kit) {
+    kit.setMode("call");
+    requestAnimationFrame(() => formOf(kit)?.querySelector('[data-lead-field="phone"]')?.focus());
+}
+/** A computer, as `isDesktop` says it — after hydration only. */
+export function useDesktop() {
+    return useSyncExternalStore(noop, isDesktop, () => false);
+}
+/** The slot by the channel — the message, the bot, or the phone — and the channel's button under it. */
+export function ModeBody(props) {
+    const { kit, message, action, labels } = props;
+    const words = wordsOf(kit);
+    const mode = kit.mode ?? "whatsapp";
+    return (_jsxs(_Fragment, { children: [_jsx(Slot, { kit: kit, children: mode === "call" ? kit.phone() : mode === "telegram" ? _jsx(BotCard, { kit: kit }) : (action.panel ?? _jsx(Preview, { kit: kit, preview: message.preview })) }), mode === "call" ? (kit.submit(labels?.call)) : (_jsx(MessengerCta, { kit: kit, action: action, channel: mode, label: labels?.[mode] ?? (mode === "whatsapp" ? words.messengerWhatsappCta : words.messengerTelegramCta) })), mode === "whatsapp" && _jsx(InappHint, { kit: kit, message: message.message })] }));
+}
+const iconOf = (kit, channel) => (channel === "call" ? (kit.icons?.phone ?? kit.icons?.callback) : kit.icons?.[channel]);
+/** Whether the brand drew an icon for a channel: a square without one says its name instead. */
+export const hasIcon = (kit, channel) => iconOf(kit, channel) !== undefined && iconOf(kit, channel) !== null;
+/** 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 function SquareButton(props) {
+    const { kit, channel } = props;
+    const icon = hasIcon(kit, channel);
+    return (_jsx(Button, { type: "button", variant: "outline", size: "touch", icon: icon, "aria-label": props.label, className: cn("shrink-0", kit.classNames?.messengerSquare), onClick: props.onClick, children: icon ? _jsx(Glyph, { kit: kit, channel: channel }) : labelOf(wordsOf(kit), channel) }));
+}
+/** The brand's icon for a channel, hidden from assistive technology: the label names it. */
+export function Glyph({ kit, channel }) {
+    const icon = iconOf(kit, channel);
+    if (icon === undefined || icon === null)
+        return null;
+    return (_jsx("span", { "aria-hidden": "true", className: "flex shrink-0 items-center [&_svg]:size-5", children: icon }));
+}
+/** A messenger CTA: a real link dressed as the card's button, its in-app hint under it. */
+/** A whole-pixel line under a brand's own type size, as the channel buttons keep one. */
+const CTA_LEADING = "leading-6";
+/** The part a messenger button wears: the main one, a secondary one, or a square. */
+const partOf = (kit, kind) => kind === "cta" ? kit.classNames?.messengerCta : kind === "secondary" ? kit.classNames?.messengerSecondary : kit.classNames?.messengerSquare;
+export function MessengerCta(props) {
+    const { kit, action, channel } = props;
+    const link = action.link(channel);
+    if (!link)
+        return null;
+    const { onClick, ...attrs } = link;
+    const square = props.square === true && hasIcon(kit, channel);
+    return (_jsx(Button, { asChild: true, variant: props.variant ?? "primary", size: "touch", icon: square, className: partWithLeading(cn(props.square ? "shrink-0" : "w-full", props.className), CTA_LEADING, partOf(kit, props.square ? "square" : props.variant === "outline" ? "secondary" : "cta")), children: _jsxs("a", { ...attrs, onClick: onClick, "aria-label": square ? props.label : undefined, "data-experiment": kit.experiment?.name, "data-variant": kit.experiment?.variant, "data-intent": channel === "telegram" ? "telegram" : undefined, children: [_jsx(Glyph, { kit: kit, channel: channel }), !square && props.label] }) }));
+}
+/** In an app's own browser: WhatsApp may not open — how to leave it, and the message to paste. */
+export function InappHint({ kit, message }) {
+    const inApp = useInApp();
+    const [copied, setCopied] = useState(false);
+    if (!inApp || !kit.facts.whatsapp)
+        return null;
+    const words = wordsOf(kit);
+    return (_jsxs("div", { className: cn("flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-ink-soft", kit.classNames?.messengerHint), children: [_jsx("span", { children: words.messengerInappHint }), _jsx(Button, { type: "button", variant: "link", size: "touch", className: "px-1", onClick: () => void navigator.clipboard?.writeText(message).then(() => setCopied(true), () => undefined), children: copied ? words.messengerCopied : words.messengerCopy })] }));
+}
+/** The fixed box a variant swaps its states in; the brand gives it its height (`messengerSlot`). */
+export function Slot({ kit, children }) {
+    return _jsx("div", { className: cn("flex flex-col justify-center", kit.classNames?.messengerSlot), children: children });
+}
+/** The message, ready: what goes into the chat, so the visitor knows there is nothing to write. */
+export function Preview({ kit, preview, title, lede }) {
+    const words = wordsOf(kit);
+    return (_jsxs("div", { className: cn("flex items-start gap-3 rounded-[var(--control-radius)] bg-muted p-3", kit.classNames?.messengerPreview), children: [_jsx(Glyph, { kit: kit, channel: "whatsapp" }), _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("p", { className: "text-sm font-medium text-ink", children: title ?? words.messengerPreviewTitle }), _jsx("p", { className: "line-clamp-2 text-sm text-ink-soft", children: lede ?? `« ${preview} »${words.messengerPreviewNote ? ` ${words.messengerPreviewNote}` : ""}` })] })] }));
+}
+/** What the bot does, in the slot. */
+export function BotCard({ kit }) {
+    const words = wordsOf(kit);
+    return (_jsxs("div", { className: cn("flex items-start gap-3 rounded-[var(--control-radius)] bg-muted p-3", kit.classNames?.messengerPreview), children: [_jsx(Glyph, { kit: kit, channel: "telegram" }), _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("p", { className: "text-sm font-medium text-ink", children: words.messengerBotTitle }), _jsx("p", { className: "line-clamp-2 text-sm text-ink-soft", children: words.messengerBotLede })] })] }));
+}
+/** «ou via Telegram»: the bot, as a link under the submit. */
+export function TelegramLink({ kit, action }) {
+    const link = action.link("telegram");
+    if (!link)
+        return null;
+    const { onClick, ...attrs } = link;
+    return (_jsx(Button, { asChild: true, variant: "link", size: "touch", className: cn("self-center", kit.classNames?.messengerSecondary), children: _jsxs("a", { ...attrs, onClick: onClick, "data-intent": "telegram", "data-experiment": kit.experiment?.name, "data-variant": kit.experiment?.variant, children: [_jsx(Glyph, { kit: kit, channel: "telegram" }), wordsOf(kit).messengerViaTelegram] }) }));
+}
+/** The channels a variant offers, in the Figma order; Telegram only with a bot. */
+export function modesOf(kit, order = ["whatsapp", "call", "telegram"]) {
+    return order.filter(m => (m === "whatsapp" ? kit.facts.whatsapp !== null : m === "telegram" ? kit.facts.telegram !== null : true));
+}
+export const labelOf = (words, mode) => mode === "whatsapp" ? words.messengerOptionWhatsapp : mode === "telegram" ? words.messengerOptionTelegram : words.messengerOptionCall;
+export const noteOf = (words, mode) => mode === "whatsapp" ? words.messengerOptionWhatsappNote : mode === "telegram" ? words.messengerOptionTelegramNote : words.messengerOptionCallNote;
+/**
+ * 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 function ChannelPicker(props) {
+    const { kit } = props;
+    const words = wordsOf(kit);
+    // Its own id: inside the phone's `Field` the trigger would claim the field's,
+    // and the label «Téléphone» would name the picker instead of the number.
+    const id = useId();
+    return (_jsxs(Select, { value: kit.mode ?? "whatsapp", onValueChange: v => kit.setMode(modesOf(kit).find(m => m === v) ?? "call"), children: [_jsx(SelectTrigger, { id: id, "aria-label": words.messengerChannelLabel, className: cn("border-0 shadow-none", props.triggerClassName, kit.classNames?.messengerTrigger), children: props.trigger }), _jsx(SelectContent, { children: modesOf(kit).map(mode => (_jsx(SelectItem, { value: mode, textValue: labelOf(words, mode), className: kit.classNames?.messengerOption, children: _jsxs("span", { className: "flex items-center gap-3", children: [_jsx(Glyph, { kit: kit, channel: mode }), _jsxs("span", { className: "flex flex-col", children: [_jsx("span", { className: "font-medium text-ink", children: labelOf(words, mode) }), _jsx("span", { className: "text-xs text-ink-soft", children: noteOf(words, mode) })] })] }) }, mode))) })] }));
+}
+/** A channel as a card to tap (`saga`, `sheet`): its name, its line, the recommended badge on WhatsApp. */
+export function OptionCard(props) {
+    const { kit, mode, link } = props;
+    const words = wordsOf(kit);
+    const className = cn("flex w-full items-center gap-3 rounded-[var(--control-radius)] border border-border p-3 text-left outline-none hover:bg-hover focus-visible:ring-[3px] focus-visible:ring-ring/50", props.recommended && "border-primary", kit.classNames?.messengerOption);
+    const body = (_jsxs(_Fragment, { children: [_jsx(Glyph, { kit: kit, channel: mode }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("span", { className: "flex items-center gap-2 font-medium text-ink", children: [labelOf(words, mode), props.recommended && _jsx(Badge, { children: words.messengerRecommended })] }), _jsx("span", { className: "text-sm text-ink-soft", children: noteOf(words, mode) })] }), _jsx("span", { "aria-hidden": "true", className: "text-ink-soft", children: "\u203A" })] }));
+    if (link) {
+        const { onClick, ...attrs } = link;
+        return (_jsx("a", { ...attrs, onClick: onClick, className: className, "data-messenger-option": "", "data-intent": mode === "telegram" ? "telegram" : undefined, "data-experiment": kit.experiment?.name, "data-variant": kit.experiment?.variant, children: body }));
+    }
+    return (_jsx("button", { type: "button", onClick: props.onPick, className: className, "data-messenger-option": "", children: body }));
+}
+/** A QR code drawn from `qrcode-generator`, loaded on the first desktop tap only. */
+function QrCode({ value, label, className }) {
+    const [code, setCode] = useState(null);
+    useEffect(() => {
+        let live = true;
+        void import("qrcode-generator").then(({ default: qrcode }) => {
+            const qr = qrcode(0, "L");
+            qr.addData(value);
+            qr.make();
+            const size = qr.getModuleCount();
+            let path = "";
+            for (let r = 0; r < size; r++)
+                for (let c = 0; c < size; c++)
+                    if (qr.isDark(r, c))
+                        path += `M${c} ${r}h1v1h-1z`;
+            if (live)
+                setCode({ size, path });
+        });
+        return () => {
+            live = false;
+        };
+    }, [value]);
+    return (_jsx("svg", { role: "img", "aria-label": label, viewBox: code ? `-2 -2 ${code.size + 4} ${code.size + 4}` : "0 0 1 1", shapeRendering: "crispEdges", className: cn("size-28 shrink-0 bg-card text-ink", className), children: code && _jsx("path", { d: code.path, fill: "currentColor" }) }));
+}
+export function QrPanel(props) {
+    const { href, words, kit } = props;
+    return (_jsxs("div", { className: cn("flex items-center gap-4 rounded-[var(--control-radius)] border border-border p-3", kit.classNames?.messengerQr), children: [_jsx(QrCode, { value: href, label: words.messengerQrAlt }), _jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [_jsx("p", { className: "font-medium text-ink", children: words.messengerQrTitle }), _jsx("p", { className: "text-sm text-ink-soft", children: words.messengerQrLede }), _jsx("a", { href: href, target: "_blank", rel: "noopener", className: "text-sm font-medium text-primary-ink underline-offset-4 hover:underline", children: words.messengerQrWeb }), props.onCallback && (_jsx(Button, { type: "button", variant: "link", size: "touch", className: cn("self-start px-0", kit.classNames?.messengerSecondary), onClick: props.onCallback, children: words.messengerCallback }))] })] }));
+}
+function ReturnScreen(props) {
+    const c = props.kit.classNames;
+    const { left, words } = props;
+    const title = useRef(null);
+    // The card under it is still there: the question takes the focus, and is read out.
+    useEffect(() => title.current?.focus(), []);
+    const name = left.channel === "whatsapp" ? words.messengerOptionWhatsapp : words.messengerOptionTelegram;
+    return (_jsxs("div", { role: "status", className: cn("absolute inset-0 z-10 flex flex-col justify-center gap-4 bg-card", c?.messengerReturn), children: [_jsx("p", { ref: title, tabIndex: -1, className: "font-display text-xl font-bold text-ink outline-none", children: words.messengerReturnTitle }), _jsx("p", { className: "text-ink-soft", children: fillText(words.messengerReturnBody, { channel: name, ref: left.ref ?? "" }) }), _jsx(Button, { asChild: true, variant: "outline", size: "touch", className: partWithLeading("w-full", CTA_LEADING, c?.messengerSecondary), children: _jsx("a", { href: left.href, ...(left.channel === "telegram" ? { target: "_blank", rel: "noopener" } : {}), children: fillText(words.messengerReopen, { channel: name }) }) }), _jsx(Button, { type: "button", size: "touch", className: partWithLeading("w-full", CTA_LEADING, c?.messengerCta), onClick: () => props.onAnswer("failed"), children: words.messengerReturnFailed }), _jsx(Button, { type: "button", variant: "link", size: "touch", className: "self-center", onClick: () => props.onAnswer("sent"), children: words.messengerReturnDone })] }));
+}

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

@@ -0,0 +1,8 @@
+import type { MessengerKit } from "./types.js";
+/**
+ * VF-5: the lede becomes a chip naming where the answer comes — its menu an
+ * overlay over the form — and the slot follows it: the message, the bot, or the phone.
+ */
+export default function Chip({ kit }: {
+    kit: MessengerKit;
+}): import("react").JSX.Element;