@evinvest/kitstart 0.16.0 → 0.18.0

package/dist/react/messenger/chip.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@evinvest/uikit";
+import { ChannelPicker, Glyph, ModeBody, toCall, useMessage, useMessengerAction, wordsOf } from "./action.js";
+const chipOf = (words, mode) => mode === "whatsapp" ? words.messengerChipWhatsapp : mode === "telegram" ? words.messengerChipTelegram : words.messengerChipCall;
+/**
+ * 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 }) {
+    return kit.at === "afterHead" ? _jsx(ChipMenu, { kit: kit }) : _jsx(ChipBody, { kit: kit });
+}
+function ChipMenu({ kit }) {
+    const mode = kit.mode ?? "whatsapp";
+    return (_jsx(ChannelPicker, { kit: kit, 
+        // The chip is the picker itself: the picker's part dresses it too.
+        triggerClassName: cn("h-8 w-fit rounded-full bg-muted px-3 text-sm font-medium text-ink", kit.classNames?.messengerPicker), trigger: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Glyph, { kit: kit, channel: mode }), chipOf(wordsOf(kit), mode)] }) }));
+}
+function ChipBody({ kit }) {
+    const message = useMessage(kit);
+    const action = useMessengerAction(kit, message, () => toCall(kit));
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", kit.classNames?.messenger), children: [_jsx(ModeBody, { kit: kit, message: message, action: action }), action.overlay] }));
+}

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

@@ -0,0 +1,8 @@
+import type { MessengerKit } from "./types.js";
+/**
+ * Any variant on a place without WhatsApp but with a bot: the control, and
+ * «ou via Telegram» under its submit.
+ */
+export default function Fallback({ kit }: {
+    kit: MessengerKit;
+}): import("react").JSX.Element;

package/dist/react/messenger/fallback.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { TelegramLink, toCall, useMessage, useMessengerAction } from "./action.js";
+/**
+ * Any variant on a place without WhatsApp but with a bot: the control, and
+ * «ou via Telegram» under its submit.
+ */
+export default function Fallback({ kit }) {
+    const message = useMessage(kit);
+    const action = useMessengerAction(kit, message, () => toCall(kit));
+    return (_jsxs(_Fragment, { children: [_jsx(TelegramLink, { kit: kit, action: action }), action.overlay] }));
+}

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

@@ -0,0 +1,10 @@
+import type { MessengerKit } from "./types.js";
+/**
+ * AQ-5: the channel first, on a screen of its own — WhatsApp (recommended),
+ * a call, the bot — then the job and the channel's slot, «Changer de canal»
+ * in the same place on every screen. The card's height is the brand's
+ * (`root`): the screens change what is in it, the button stays at the bottom.
+ */
+export default function Saga({ kit }: {
+    kit: MessengerKit;
+}): import("react").JSX.Element;

package/dist/react/messenger/saga.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, cn } from "@evinvest/uikit";
+import { ModeBody, modesOf, OptionCard, toCall, useMessage, useMessengerAction, wordsOf } from "./action.js";
+const headOf = (words, mode) => mode === "whatsapp" ? [words.messengerWhatsappTitle, words.messengerWhatsappLede] : mode === "telegram" ? [words.messengerTelegramTitle, words.messengerTelegramLede] : [words.messengerCallTitle, words.messengerCallLede];
+/**
+ * AQ-5: the channel first, on a screen of its own — WhatsApp (recommended),
+ * a call, the bot — then the job and the channel's slot, «Changer de canal»
+ * in the same place on every screen. The card's height is the brand's
+ * (`root`): the screens change what is in it, the button stays at the bottom.
+ */
+export default function Saga({ kit }) {
+    if (kit.at === "head")
+        return _jsx(SagaHead, { kit: kit });
+    if (kit.at === "body")
+        return _jsx(SagaPick, { kit: kit });
+    return _jsx(SagaContact, { kit: kit });
+}
+function SagaHead({ kit }) {
+    const words = wordsOf(kit);
+    const [title, lede] = kit.mode === null ? [words.messengerSagaTitle, words.messengerSagaLede] : headOf(words, kit.mode);
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [kit.mode !== null && (_jsxs(Button, { type: "button", variant: "link", size: "sm", className: "self-start px-0", onClick: () => kit.setMode(null), children: ["\u2039 ", words.messengerChange] })), _jsx("p", { className: "font-display text-2xl font-bold text-ink", children: title }), _jsx("p", { className: "text-ink-soft", children: lede })] }));
+}
+function SagaPick({ kit }) {
+    const words = wordsOf(kit);
+    return (_jsxs("div", { className: cn("flex flex-1 flex-col gap-3", kit.classNames?.messenger), children: [modesOf(kit).map(mode => (_jsx(OptionCard, { kit: kit, mode: mode, recommended: mode === "whatsapp", onPick: () => (mode === "call" ? toCall(kit) : kit.setMode(mode)) }, mode))), _jsx("p", { className: "mt-auto text-center text-sm text-ink-soft", children: words.messengerSagaFoot })] }));
+}
+function SagaContact({ kit }) {
+    const words = wordsOf(kit);
+    const message = useMessage(kit);
+    const action = useMessengerAction(kit, message, () => toCall(kit));
+    return (_jsxs("div", { className: cn("flex flex-1 flex-col gap-3", kit.classNames?.messenger), children: [_jsx(ModeBody, { kit: kit, message: message, action: action, labels: { whatsapp: words.messengerOpenWhatsapp } }), action.overlay] }));
+}

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

@@ -0,0 +1,8 @@
+import type { MessengerKit } from "./types.js";
+/**
+ * AQ-2: «WhatsApp | Appel» over a slot of one height — the message ready to
+ * send, or the phone — and the bot as a link under the button.
+ */
+export default function Segment({ kit }: {
+    kit: MessengerKit;
+}): import("react").JSX.Element;

package/dist/react/messenger/segment.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, ToggleGroup, ToggleGroupItem } from "@evinvest/uikit";
+import { Glyph, labelOf, ModeBody, TelegramLink, toCall, useMessage, useMessengerAction, wordsOf } from "./action.js";
+/**
+ * AQ-2: «WhatsApp | Appel» over a slot of one height — the message ready to
+ * send, or the phone — and the bot as a link under the button.
+ */
+export default function Segment({ kit }) {
+    const words = wordsOf(kit);
+    const message = useMessage(kit);
+    const action = useMessengerAction(kit, message, () => toCall(kit));
+    const mode = kit.mode === "call" ? "call" : "whatsapp";
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", kit.classNames?.messenger), children: [_jsx(ToggleGroup, { role: "group", type: "single", value: mode, onValueChange: v => (v === "call" || v === "whatsapp" ? kit.setMode(v) : undefined), "aria-label": words.messengerChannelLabel, className: cn("w-full gap-1 rounded-[var(--control-radius)] bg-muted p-1", kit.classNames?.messengerPicker), children: ["whatsapp", "call"].map(m => (_jsxs(ToggleGroupItem, { value: m, className: cn("h-10 flex-1 gap-2 rounded-[var(--control-radius)] data-[state=on]:bg-card data-[state=on]:text-ink", kit.classNames?.messengerOption, kit.classNames?.messengerSegment), children: [_jsx(Glyph, { kit: kit, channel: m }), labelOf(words, m)] }, m))) }), _jsx(ModeBody, { kit: { ...kit, mode }, message: message, action: action }), _jsx(TelegramLink, { kit: kit, action: action }), action.overlay] }));
+}

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

@@ -0,0 +1,10 @@
+import type { MessengerKit } from "./types.js";
+/**
+ * AQ-1 / VF-1: the channel picked in the phone field itself — before the
+ * number (`prefix`) or after it (`suffix`). WhatsApp: the number optional,
+ * the button opens the chat. Appel: the number required, the control's
+ * submit. Telegram: no number, the button opens the bot.
+ */
+export default function SelectVariant({ kit }: {
+    kit: MessengerKit;
+}): import("react").JSX.Element;

package/dist/react/messenger/select.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, InputGroup, InputGroupAddon } from "@evinvest/uikit";
+import { ChannelPicker, Glyph, InappHint, labelOf, MessengerCta, toCall, useMessage, useMessengerAction, wordsOf } from "./action.js";
+/**
+ * AQ-1 / VF-1: the channel picked in the phone field itself — before the
+ * number (`prefix`) or after it (`suffix`). WhatsApp: the number optional,
+ * the button opens the chat. Appel: the number required, the control's
+ * submit. Telegram: no number, the button opens the bot.
+ */
+export default function SelectVariant({ kit }) {
+    const words = wordsOf(kit);
+    const message = useMessage(kit);
+    const action = useMessengerAction(kit, message, () => toCall(kit));
+    const mode = kit.mode ?? "whatsapp";
+    const side = kit.variant.kind === "select" && kit.variant.side === "suffix" ? "end" : "start";
+    const picker = (_jsx(ChannelPicker, { kit: kit, triggerClassName: cn("h-full rounded-none bg-transparent px-3", side === "start" ? "border-r border-input" : "border-l border-input"), trigger: _jsxs("span", { className: "flex items-center gap-2 font-medium text-ink", children: [_jsx(Glyph, { kit: kit, channel: mode }), labelOf(words, mode)] }) }));
+    const hint = mode === "call" ? undefined : _jsx("p", { className: cn("text-sm text-ink-soft", kit.classNames?.messengerHint), children: mode === "whatsapp" ? words.messengerWhatsappHint : words.messengerTelegramHint });
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", kit.classNames?.messenger), children: [kit.phone({
+                optional: mode !== "call",
+                disabled: mode === "telegram",
+                ...(mode !== "call" ? { placeholder: words.messengerPhoneOptional } : {}),
+                frame: (input) => (_jsxs(InputGroup, { className: cn("h-12 rounded-[var(--control-radius)]", kit.classNames?.messengerPicker), children: [side === "start" && _jsx(InputGroupAddon, { align: "inline-start", children: picker }), input, side === "end" && _jsx(InputGroupAddon, { align: "inline-end", children: picker })] })),
+                ...(hint ? { after: hint } : {}),
+            }), action.panel ??
+                (mode === "call" ? (kit.submit()) : (_jsx(MessengerCta, { kit: kit, action: action, channel: mode, label: mode === "whatsapp" ? words.messengerWhatsappCta : words.messengerTelegramCta }))), mode === "whatsapp" && _jsx(InappHint, { kit: kit, message: message.message }), action.overlay] }));
+}

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

@@ -0,0 +1,10 @@
+import type { MessengerKit } from "./types.js";
+/**
+ * VF-4: the card is the estimate, the postcode and one button; the button
+ * opens the kit's drawer — «Où recevoir votre devis ?»: WhatsApp
+ * (recommended), the bot, a call — and a call asks the phone in the drawer,
+ * a field of the card's form wherever the drawer is drawn (`form`).
+ */
+export default function Sheet({ kit }: {
+    kit: MessengerKit;
+}): import("react").JSX.Element;

package/dist/react/messenger/sheet.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, cn, Drawer, DrawerContent, DrawerTitle, DrawerTrigger } from "@evinvest/uikit";
+import { useEffect, useId, useRef, useState } from "react";
+import { InappHint, modesOf, OptionCard, useMessage, useMessengerAction, wordsOf } from "./action.js";
+/**
+ * VF-4: the card is the estimate, the postcode and one button; the button
+ * opens the kit's drawer — «Où recevoir votre devis ?»: WhatsApp
+ * (recommended), the bot, a call — and a call asks the phone in the drawer,
+ * a field of the card's form wherever the drawer is drawn (`form`).
+ */
+export default function Sheet({ kit }) {
+    const words = wordsOf(kit);
+    const message = useMessage(kit);
+    const [open, setOpen] = useState(false);
+    const [step, setStep] = useState("pick");
+    const action = useMessengerAction(kit, message, () => {
+        setStep("call");
+        setOpen(true);
+    });
+    const formId = `${kit.id}-form`;
+    // The dialog is named by its heading, on either step: uikit's drawer does not wire it.
+    const titleId = useId();
+    // A step swaps the drawer's content, the pressed button with it: the focus
+    // would fall to the page, and Escape with it. The call's step gives it to
+    // the phone, the way back to the first channel — on whatever path led there.
+    const shown = useRef(step);
+    useEffect(() => {
+        const was = shown.current;
+        shown.current = step;
+        if (!open || (step === "pick" && was === "pick"))
+            return;
+        // After the drawer's own focus scope, which takes the focus as it opens.
+        const frame = requestAnimationFrame(() => {
+            const dialog = document.getElementById(titleId)?.closest("[role=dialog]");
+            const target = step === "call"
+                ? document.querySelector(`[data-lead-field="phone"][form="${CSS.escape(formId)}"]`)
+                : dialog?.querySelector("[data-messenger-option]");
+            target?.focus();
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [open, step, formId, titleId]);
+    // The app takes over: the drawer goes with it — unless the tap drew the QR code in it.
+    const closing = (link) => link && {
+        ...link,
+        onClick: (event) => {
+            link.onClick(event);
+            if (!event.defaultPrevented)
+                setOpen(false);
+        },
+    };
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", kit.classNames?.messenger), children: [_jsxs(Drawer, { open: open, onOpenChange: next => {
+                    setOpen(next);
+                    if (!next)
+                        setStep("pick");
+                }, children: [_jsx(DrawerTrigger, { asChild: true, children: _jsx(Button, { type: "button", size: "touch", className: cn("w-full", kit.classNames?.messengerCta), children: words.messengerSheetCta }) }), _jsx(DrawerContent, { "aria-labelledby": titleId, children: _jsx("div", { className: cn("flex flex-col gap-4 p-4", kit.classNames?.messengerPicker), children: step === "pick" ? (_jsxs(_Fragment, { children: [_jsx(DrawerTitle, { id: titleId, className: "font-display text-xl font-bold text-ink", children: words.messengerSheetTitle }), action.panel, modesOf(kit, ["whatsapp", "telegram", "call"]).map(mode => mode === "call" ? (_jsx(OptionCard, { kit: kit, mode: mode, onPick: () => setStep("call") }, mode)) : (_jsx(OptionCard, { kit: kit, mode: mode, link: closing(action.link(mode)), recommended: mode === "whatsapp" }, mode))), _jsx(InappHint, { kit: kit, message: message.message })] })) : (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "link", size: "sm", className: "self-start px-0", onClick: () => setStep("pick"), children: ["\u2039 ", words.messengerChange] }), _jsx(DrawerTitle, { id: titleId, className: "font-display text-xl font-bold text-ink", children: words.messengerCallTitle }), kit.phone({ form: formId }), kit.submit(words.messengerCallback, { form: formId })] })) }) })] }), action.overlay] }));
+}

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

@@ -0,0 +1,9 @@
+import type { MessengerKit } from "./types.js";
+/**
+ * VF-6: the slot — the message, or the phone — over one row: «Devis sur
+ * WhatsApp» with the bot and a call as squares beside it; the call's square
+ * turns the row into «Être rappelé» with WhatsApp and the bot as squares.
+ */
+export default function Split({ kit }: {
+    kit: MessengerKit;
+}): import("react").JSX.Element;

package/dist/react/messenger/split.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@evinvest/uikit";
+import { InappHint, MessengerCta, Preview, Slot, SquareButton, toCall, useMessage, useMessengerAction, wordsOf } from "./action.js";
+/**
+ * VF-6: the slot — the message, or the phone — over one row: «Devis sur
+ * WhatsApp» with the bot and a call as squares beside it; the call's square
+ * turns the row into «Être rappelé» with WhatsApp and the bot as squares.
+ */
+export default function Split({ kit }) {
+    const words = wordsOf(kit);
+    const message = useMessage(kit);
+    const action = useMessengerAction(kit, message, () => toCall(kit));
+    const call = kit.mode === "call";
+    const telegram = kit.facts.telegram && _jsx(MessengerCta, { kit: kit, action: action, channel: "telegram", label: words.messengerOptionTelegram, variant: "outline", square: true });
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", kit.classNames?.messenger), children: [_jsx(Slot, { kit: kit, children: call ? kit.phone() : (action.panel ?? _jsx(Preview, { kit: kit, preview: message.preview })) }), _jsx("div", { className: "flex gap-2", children: call ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "min-w-0 flex-1", children: kit.submit(words.messengerCallback) }), _jsx(SquareButton, { kit: kit, channel: "whatsapp", label: words.messengerBackToWhatsapp, onClick: () => kit.setMode("whatsapp") }), telegram] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(MessengerCta, { kit: kit, action: action, channel: "whatsapp", label: words.messengerSplitCta }) }), telegram, _jsx(SquareButton, { kit: kit, channel: "call", label: words.messengerCallback, onClick: () => toCall(kit) })] })) }), !call && _jsx(InappHint, { kit: kit, message: message.message }), action.overlay] }));
+}

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

@@ -0,0 +1,10 @@
+import type { MessengerKit } from "./types.js";
+/**
+ * AQ-4 / VF-3: no phone until it is asked for. Slot A is the WhatsApp button,
+ * row B the bot and «Être rappelé»; «Être rappelé» swaps them — A becomes the
+ * phone, B a square back to WhatsApp beside the call's submit — so the card
+ * keeps its height. On a computer, the QR code takes slot A.
+ */
+export default function Swap({ kit }: {
+    kit: MessengerKit;
+}): import("react").JSX.Element;

package/dist/react/messenger/swap.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, cn } from "@evinvest/uikit";
+import { Glyph, InappHint, MessengerCta, Slot, SquareButton, toCall, useDesktop, useMessage, useMessengerAction, wordsOf } from "./action.js";
+/**
+ * AQ-4 / VF-3: no phone until it is asked for. Slot A is the WhatsApp button,
+ * row B the bot and «Être rappelé»; «Être rappelé» swaps them — A becomes the
+ * phone, B a square back to WhatsApp beside the call's submit — so the card
+ * keeps its height. On a computer, the QR code takes slot A.
+ */
+export default function Swap({ kit }) {
+    const words = wordsOf(kit);
+    const message = useMessage(kit);
+    const action = useMessengerAction(kit, message, () => toCall(kit));
+    const call = kit.mode === "call";
+    const desktop = useDesktop();
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", kit.classNames?.messenger), children: [_jsx(Slot, { kit: kit, children: call ? kit.phone({ after: null }) : (action.panel ?? _jsx(MessengerCta, { kit: kit, action: action, channel: "whatsapp", label: words.messengerWhatsappCta })) }), _jsx("div", { className: "flex gap-3", children: call ? (_jsxs(_Fragment, { children: [_jsx(SquareButton, { kit: kit, channel: "whatsapp", label: words.messengerBackToWhatsapp, onClick: () => kit.setMode("whatsapp") }), _jsx("div", { className: "min-w-0 flex-1", children: kit.submit() })] })) : (_jsxs(_Fragment, { children: [kit.facts.telegram && (_jsx("div", { className: "min-w-0 flex-1", children: _jsx(MessengerCta, { kit: kit, action: action, channel: "telegram", label: desktop ? words.messengerTelegramCta : words.messengerOptionTelegram, variant: "outline" }) })), _jsxs(Button, { type: "button", variant: "outline", size: "touch", className: cn("min-w-0 flex-1", kit.classNames?.messengerSecondary), onClick: () => toCall(kit), children: [_jsx(Glyph, { kit: kit, channel: "call" }), words.messengerCallback] })] })) }), !call && _jsx(InappHint, { kit: kit, message: message.message }), action.overlay] }));
+}

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

@@ -0,0 +1,10 @@
+import type { MessengerKit } from "./types.js";
+/**
+ * AQ-3: the form is the control's; its success adds the faster way — a photo
+ * on WhatsApp, the message carrying the lead's own reference — and the bot.
+ * On a computer, WhatsApp is a QR code to scan with the phone that takes the
+ * photo. The lead is sent already: a tap here posts nothing.
+ */
+export default function Thanks({ kit }: {
+    kit: MessengerKit;
+}): import("react").JSX.Element;

package/dist/react/messenger/thanks.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@evinvest/uikit";
+import { hrefOf, InappHint, MessengerCta, QrPanel, useDesktop, useMessage, useMessengerAction, wordsOf } from "./action.js";
+/**
+ * AQ-3: the form is the control's; its success adds the faster way — a photo
+ * on WhatsApp, the message carrying the lead's own reference — and the bot.
+ * On a computer, WhatsApp is a QR code to scan with the phone that takes the
+ * photo. The lead is sent already: a tap here posts nothing.
+ */
+export default function Thanks({ kit }) {
+    const words = wordsOf(kit);
+    const message = useMessage(kit);
+    const action = useMessengerAction(kit, message, () => undefined, { followUp: true });
+    const desktop = useDesktop();
+    const whatsapp = hrefOf(kit, "whatsapp", message.message);
+    return (_jsxs("div", { className: cn("flex flex-col gap-3 border-t border-border pt-4", kit.classNames?.messenger), children: [whatsapp && !desktop && _jsx("p", { className: "font-medium text-ink", children: words.messengerThanksTitle }), whatsapp && (desktop ? _jsx(QrPanel, { href: whatsapp, words: words, onCallback: null, kit: kit }) : _jsx(MessengerCta, { kit: kit, action: action, channel: "whatsapp", label: words.messengerThanksCta })), whatsapp && !desktop && _jsx(InappHint, { kit: kit, message: message.message }), kit.facts.telegram && _jsx(MessengerCta, { kit: kit, action: action, channel: "telegram", label: desktop ? words.messengerTelegramCta : words.messengerOptionTelegram, variant: "outline" })] }));
+}

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

@@ -0,0 +1,8 @@
+import type { MessengerKit } from "./types.js";
+/**
+ * VF-2: «Recevoir mon devis par» and a tile per channel — WhatsApp, Telegram,
+ * Appel — over a slot of one height: the message, what the bot does, or the phone.
+ */
+export default function Tiles({ kit }: {
+    kit: MessengerKit;
+}): import("react").JSX.Element;

package/dist/react/messenger/tiles.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, ToggleGroup, ToggleGroupItem } from "@evinvest/uikit";
+import { Glyph, labelOf, ModeBody, modesOf, toCall, useMessage, useMessengerAction, wordsOf } from "./action.js";
+/**
+ * VF-2: «Recevoir mon devis par» and a tile per channel — WhatsApp, Telegram,
+ * Appel — over a slot of one height: the message, what the bot does, or the phone.
+ */
+export default function Tiles({ kit }) {
+    const words = wordsOf(kit);
+    const message = useMessage(kit);
+    const action = useMessengerAction(kit, message, () => toCall(kit));
+    const modes = modesOf(kit, ["whatsapp", "telegram", "call"]);
+    const mode = kit.mode ?? "whatsapp";
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", kit.classNames?.messenger), children: [_jsx("p", { className: "text-sm font-medium text-ink", children: words.messengerTilesLabel }), _jsx(ToggleGroup, { role: "group", type: "single", value: mode, onValueChange: v => {
+                    const picked = modes.find((m) => m === v);
+                    if (picked)
+                        kit.setMode(picked);
+                }, "aria-label": words.messengerTilesLabel, className: cn("grid w-full gap-2", modes.length === 3 ? "grid-cols-3" : "grid-cols-2", kit.classNames?.messengerPicker), children: modes.map(m => (_jsxs(ToggleGroupItem, { value: m, className: cn("h-11 gap-2 rounded-[var(--control-radius)] border border-border first:rounded-[var(--control-radius)] last:rounded-[var(--control-radius)] data-[state=on]:border-primary data-[state=on]:text-ink", kit.classNames?.messengerOption, kit.classNames?.messengerTile), children: [_jsx(Glyph, { kit: kit, channel: m }), labelOf(words, m)] }, m))) }), _jsx(ModeBody, { kit: kit, message: message, action: action }), action.overlay] }));
+}

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

@@ -0,0 +1,98 @@
+import type { ReactNode } from "react";
+import type { LeadWire } from "../../core/lead.js";
+import type { LeadCaptureText } from "../../core/lead-capture-text.js";
+import type { MessengerFacts, MessengerMode, MessengerVariant } from "../../core/messenger.js";
+import type { ChannelIconKey, Experiment } from "../LeadCaptureChannels.js";
+import type { LeadNeedOption } from "../LeadCaptureNeed.js";
+import type { PartClassNames } from "../parts.js";
+import type { LeadEvents } from "../use-lead-events.js";
+/**
+ * Where in the card a variant draws: in place of the heading (`head`), under
+ * it (`afterHead`), before the need (`beforeNeed`), in place of the form's
+ * fields (`body`), in place of the phone and the submit (`contact`), under
+ * the submit (`afterSubmit`), or in the success (`done`).
+ */
+export type MessengerAt = "head" | "afterHead" | "beforeNeed" | "body" | "contact" | "afterSubmit" | "done";
+/** A variant as drawn: its own kind, or the control with a way to the bot (`fallback`). */
+export type MessengerShown = MessengerVariant["kind"] | "fallback";
+/**
+ * The parts a variant dresses; a brand sizes `messengerSlot` (92 px, 72 px)
+ * so no state of a variant moves the card. `messengerCta`: a variant's main
+ * button — a messenger's, or the call's submit; `messengerSecondary`: the
+ * others (Telegram and «Être rappelé» beside it, «ou via Telegram», the way
+ * back to the chat); `messengerSquare`: the icon squares; `messengerSegment`,
+ * `messengerTile`: a segment's and a tile's item, after `messengerOption`;
+ * `messengerTrigger`: the channel picker's button (`select`, `chip`).
+ */
+export type MessengerPart = "messenger" | "messengerSlot" | "messengerCta" | "messengerSecondary" | "messengerSegment" | "messengerTile" | "messengerTrigger" | "messengerPreview" | "messengerPicker" | "messengerOption" | "messengerSquare" | "messengerQr" | "messengerReturn" | "messengerHint";
+/** How a variant asks for the card's phone field. */
+export interface PhoneOptions {
+    optional?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    /** The variant's box around the input (`PhoneField`'s `frame`). */
+    frame?: (input: ReactNode) => ReactNode;
+    /** The form's id, for a field drawn outside the form's element (a drawer). */
+    form?: string;
+    /** Under the field instead of the brand's `afterPhone`. */
+    after?: ReactNode;
+}
+/**
+ * What `LeadCapture` hands a variant: the card's facts and state, and its own
+ * pieces — the phone field and the submit — so a variant arranges them and
+ * never re-implements them.
+ */
+export interface MessengerKit {
+    at: MessengerAt;
+    variant: MessengerVariant;
+    shown: MessengerShown;
+    facts: MessengerFacts;
+    /** The card's id; its form is `<id>-form`. */
+    id: string;
+    locale: string;
+    /** The brand's name, the message's greeting. */
+    brand: string;
+    text: LeadCaptureText;
+    wire: LeadWire;
+    needs: readonly LeadNeedOption[];
+    /** The need on screen, by its label — for the message. */
+    needLabel: string | null;
+    /** The estimate the card shows, formatted — for the message. */
+    priceText: string | null;
+    /** The estimate's answers, by their short labels, in order — the timing question's left out. */
+    answers: readonly string[];
+    /**
+     * The answer to the estimate's question the brand names (`messengerTiming`):
+     * its label for the message's timing line, its short one for the preview.
+     */
+    timing: {
+        label: string;
+        short: string;
+    } | null;
+    /** The channel the visitor is on; `null` before a variant asks (`saga`, `urgency`). */
+    mode: MessengerMode | null;
+    setMode: (mode: MessengerMode | null) => void;
+    /** The card's reference (`message_ref`), minted once the script runs; `null` before. */
+    messageRef: string | null;
+    /**
+     * Whether a messenger link may lead anywhere: the script runs and the
+     * reference is minted. Until then a tap would open the chat with no lead
+     * posted and no `Réf.` to find it by — the links are inert.
+     */
+    ready: boolean;
+    /** A new reference, once a messenger lead is posted. */
+    renewRef: () => void;
+    phone: (options?: PhoneOptions) => ReactNode;
+    /** The card's submit — a call lead, posted as the control posts it. */
+    submit: (label?: string, options?: {
+        form?: string;
+        className?: string;
+    }) => ReactNode;
+    /** The default heading's words, for a variant that redraws the heading. */
+    title: string;
+    lede: string;
+    events: LeadEvents;
+    icons: Partial<Record<ChannelIconKey, ReactNode>> | undefined;
+    experiment: Experiment | undefined;
+    classNames: PartClassNames<MessengerPart> | undefined;
+}

package/dist/react/messenger/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,10 @@
+import type { MessengerKit } from "./types.js";
+/**
+ * AQ-6: «C’est urgent ?» picks the channel — today is a call, «je compare»
+ * the message ready in the slot — and the answer is the lead's, posted as
+ * the brand's extra (`field`, which `site.lead.extras` must list). Without
+ * WhatsApp the question stays, and both answers ask the phone.
+ */
+export default function Urgency({ kit }: {
+    kit: MessengerKit;
+}): import("react").JSX.Element;

package/dist/react/messenger/urgency.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, ToggleGroup, ToggleGroupItem } from "@evinvest/uikit";
+import { fillText } from "../../core/lead-capture-format.js";
+import { MessengerCta, InappHint, Preview, Slot, TelegramLink, toCall, useMessage, useMessengerAction, wordsOf } from "./action.js";
+/** What the answer is posted as, in the brand's extra: a slug, never the label. */
+const ANSWER = { call: "today", whatsapp: "later" };
+/**
+ * AQ-6: «C’est urgent ?» picks the channel — today is a call, «je compare»
+ * the message ready in the slot — and the answer is the lead's, posted as
+ * the brand's extra (`field`, which `site.lead.extras` must list). Without
+ * WhatsApp the question stays, and both answers ask the phone.
+ */
+export default function Urgency({ kit }) {
+    return kit.at === "beforeNeed" ? _jsx(Question, { kit: kit }) : _jsx(UrgencyContact, { kit: kit });
+}
+function Question({ kit }) {
+    const words = wordsOf(kit);
+    const field = kit.variant.kind === "urgency" ? kit.variant.field : "urgency";
+    const answer = kit.mode === "call" || kit.mode === "whatsapp" ? kit.mode : null;
+    return (_jsxs("div", { className: cn("flex flex-col gap-2", kit.classNames?.messenger), children: [_jsx("p", { className: "text-sm font-medium text-ink", children: words.messengerUrgencyLabel }), _jsx(ToggleGroup, { role: "group", type: "single", value: answer ?? "", onValueChange: v => (v === "call" || v === "whatsapp" ? kit.setMode(v) : undefined), "aria-label": words.messengerUrgencyLabel, className: cn("grid w-full grid-cols-2 gap-2", kit.classNames?.messengerPicker), children: ["call", "whatsapp"].map(m => (_jsx(ToggleGroupItem, { value: m, className: cn("h-11 rounded-[var(--control-radius)] border border-border first:rounded-[var(--control-radius)] last:rounded-[var(--control-radius)] data-[state=on]:border-primary data-[state=on]:text-ink", kit.classNames?.messengerOption, kit.classNames?.messengerTile), children: m === "call" ? words.messengerUrgencyYes : words.messengerUrgencyNo }, m))) }), answer && _jsx("input", { type: "hidden", name: field, value: ANSWER[answer] })] }));
+}
+function UrgencyContact({ kit }) {
+    const words = wordsOf(kit);
+    const message = useMessage(kit, kit.mode === "call" ? words.messengerUrgencyToday : kit.mode === "whatsapp" ? words.messengerUrgencyLater : null);
+    const action = useMessengerAction(kit, message, () => toCall(kit));
+    const chat = kit.mode === "whatsapp" && kit.facts.whatsapp !== null;
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", kit.classNames?.messenger), children: [_jsx(Slot, { kit: kit, children: chat ? (action.panel ?? _jsx(Preview, { kit: kit, preview: message.preview, title: words.messengerNotUrgentTitle, lede: fillText(words.messengerNotUrgentLede, { ref: kit.messageRef ?? "" }) })) : kit.phone() }), chat ? _jsx(MessengerCta, { kit: kit, action: action, channel: "whatsapp", label: words.messengerWhatsappCta }) : kit.submit(kit.mode === "call" ? words.messengerUrgentSubmit : undefined), chat && _jsx(InappHint, { kit: kit, message: message.message }), _jsx(TelegramLink, { kit: kit, action: action }), action.overlay] }));
+}

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

@@ -1,11 +1,11 @@
 import { type RefObject } from "react";
-import { type LeadChannel, type LeadError } from "../core/lead.js";
+import { type LeadError } from "../core/lead.js";
 import type { LeadCaptureText } from "../core/lead-capture-text.js";
 export type { LeadError };
 /** The fields `LeadCapture` draws itself, which show a refusal under themselves. */
-export declare const OWN_FIELDS: Readonly<Record<LeadChannel, readonly string[]>>;
+export declare const OWN_FIELDS: Readonly<Record<LeadError["channel"], 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;
+export declare const formMessageId: (id: string, channel: LeadError["channel"]) => 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;
 /**

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

@@ -1,5 +1,6 @@
 import { type RefObject } from "react";
 import { type LeadField, type LeadStep } from "../core/analytics.js";
+import type { ChannelsAvailable } from "../core/messenger.js";
 /** The attribute a lead form's control names its role in, for `lead_form_field_error`. */
 export declare const FIELD_ATTR = "data-lead-field";
 export interface LeadEvents {
@@ -10,13 +11,30 @@ export interface LeadEvents {
     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;
+    /** A messenger CTA: the lead posted, the visitor sent on — never what was typed. */
+    messengerOpen(open: {
+        channel: "whatsapp" | "telegram";
+        device: "mobile" | "desktop";
+        inapp: boolean;
+        ref: string | null;
+    }): void;
+    /** On a computer: the QR code that opens WhatsApp on the phone was shown (`contact_intent_click`, `whatsapp_qr`). */
+    qrShown(): void;
+    /** Back on the page after a messenger: what the visitor said of it. */
+    messengerReturn(back: {
+        channel: "whatsapp" | "telegram";
+        answer: "sent" | "failed";
+        ref: string | null;
+    }): void;
 }
 /**
  * The lead form's own funnel, reported through the boundary's sink: seen
  * (half of it in view, once), started (the first focus inside, once), a
  * field the browser refused (`invalid`, by role — never the value), and the
  * step `qualify-first` moved to. Every event carries the form, the layout and
- * the site's experiment, so the arms of a test compare on one schema.
+ * the site's experiment, so the arms of a test compare on one schema — and
+ * the messengers the card offered (`channels_available`) and its `messenger`
+ * variant, so an arm that fell back to the control is told apart.
  */
 export declare function useLeadEvents(root: RefObject<HTMLElement | null>, tags: {
     formId: string;
@@ -25,4 +43,6 @@ export declare function useLeadEvents(root: RefObject<HTMLElement | null>, tags:
         name: string;
         variant: string;
     } | undefined;
+    channels?: ChannelsAvailable | undefined;
+    messenger?: string | undefined;
 }): LeadEvents;

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

@@ -10,14 +10,16 @@ export const FIELD_ATTR = "data-lead-field";
  * (half of it in view, once), started (the first focus inside, once), a
  * field the browser refused (`invalid`, by role — never the value), and the
  * step `qualify-first` moved to. Every event carries the form, the layout and
- * the site's experiment, so the arms of a test compare on one schema.
+ * the site's experiment, so the arms of a test compare on one schema — and
+ * the messengers the card offered (`channels_available`) and its `messenger`
+ * variant, so an arm that fell back to the control is told apart.
  */
 export function useLeadEvents(root, tags) {
     const sink = useAnalyticsSink();
-    const { formId, layout } = tags;
+    const { formId, layout, channels, messenger } = tags;
     const name = tags.experiment?.name;
     const variant = tags.experiment?.variant;
-    const props = useMemo(() => ({ form_id: formId, layout, ...experimentProps(name, variant) }), [formId, layout, name, variant]);
+    const props = useMemo(() => ({ form_id: formId, layout, ...experimentProps(name, variant), ...(channels ? { channels_available: channels } : {}), ...(messenger ? { messenger_variant: messenger } : {}) }), [formId, layout, name, variant, channels, messenger]);
     const started = useRef(false);
     const shown = useRef(new Set());
     useEffect(() => {
@@ -69,5 +71,9 @@ export function useLeadEvents(root, tags) {
             shown.current.add(key);
             sink?.capture(EVENTS.estimateShown, { ...props, need, cents_bucket });
         },
+        // Beacons: the page is being left for the app.
+        messengerOpen: ({ channel, device, inapp, ref }) => sink?.capture(EVENTS.messengerOpen, { ...props, channel, device, inapp, ...(ref ? { message_ref: ref } : {}) }, { transport: "beacon" }),
+        qrShown: () => sink?.capture(EVENTS.intent, { ...props, channel: "whatsapp_qr" }),
+        messengerReturn: ({ channel, answer, ref }) => sink?.capture(EVENTS.messengerReturn, { ...props, channel, answer, ...(ref ? { message_ref: ref } : {}) }),
     }), [sink, props]);
 }