@evinvest/kitstart 0.17.0 → 0.18.0

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;

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;