@evinvest/kitstart 0.17.0 → 0.19.1

package/dist/react/LeadCapturePrice.js

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

package/dist/react/LeadCaptureSubmit.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import type { LeadCaptureText } from "../core/lead-capture-text.js";
 import type { SendFailure } from "./use-lead-submit.js";
 /** The submit, busy while the script posts: disabled, `aria-busy`, and saying so. */
@@ -6,6 +7,8 @@ export declare function SubmitButton(props: {
     label: string;
     sending: string;
     className: string | undefined;
+    form?: string | undefined;
+    children?: ReactNode;
 }): import("react").JSX.Element;
 /** Why the post got no answer, and the way to send the same lead again. */
 export declare function FailureMessage(props: {

package/dist/react/LeadCaptureSubmit.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Button, cn, FieldError } from "@evinvest/uikit";
 /** The submit, busy while the script posts: disabled, `aria-busy`, and saying so. */
 export function SubmitButton(props) {
-    return (_jsx(Button, { type: "submit", size: "touch", disabled: props.busy, "aria-busy": props.busy || undefined, className: cn("w-full", props.className), children: props.busy ? props.sending : props.label }));
+    return (_jsxs(Button, { type: "submit", size: "touch", form: props.form, disabled: props.busy, "aria-busy": props.busy || undefined, className: cn("w-full", props.className), children: [props.children, props.busy ? props.sending : props.label] }));
 }
 /** Why the post got no answer, and the way to send the same lead again. */
 export function FailureMessage(props) {

package/dist/react/LeadCaptureTiles.js

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

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

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

package/dist/react/analytics-context.js

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

package/dist/react/form-select-value.d.ts

@@ -14,6 +14,9 @@ export declare function useFormSelectValue(opts: {
     controlled: string | undefined;
     native: RefObject<HTMLSelectElement | null>;
     box: RefObject<HTMLElement | null>;
+    /** The page's script runs: the native select, if still drawn, is the field. */
+    live: boolean;
+    /** The kit's `Select` is drawn. */
     scripted: boolean;
     onValueChange: ((value: string) => void) | undefined;
 }): {

package/dist/react/form-select-value.js

@@ -12,7 +12,7 @@ const DEV = typeof process !== "undefined" && process.env.NODE_ENV !== "producti
  * so a switch back to uncontrolled keeps the last value, as an `<input>` does.
  */
 export function useFormSelectValue(opts) {
-    const { initial, controlled, native, box, scripted, onValueChange } = opts;
+    const { initial, controlled, native, box, live, scripted, onValueChange } = opts;
     const [own, setOwn] = useState(controlled ?? initial);
     const [invalid, setInvalid] = useState(false);
     const [open, setOpen] = useState(false);
@@ -25,8 +25,8 @@ export function useFormSelectValue(opts) {
     const latest = useRef({ initial, isControlled, value, onValueChange });
     latest.current = { initial, isControlled, value, onValueChange };
     // A choice made in the native select before the script arrived survives the
-    // swap: read in the hydration commit, before the scripted render. Once —
-    // later renders never hold the native select. Under a `value` it is the
+    // swap: read in the hydration commit. Once — from then on the native
+    // select, while it stays, reports its choices itself. Under a `value` it is the
     // parent's to take, so it is reported instead of kept — and only a real
     // pick: a `value` no option carries leaves the browser on its own default,
     // which is no choice of the visitor's.
@@ -46,8 +46,8 @@ export function useFormSelectValue(opts) {
     // from a script's `checkValidity()` by the submit that starts it.
     const submitting = useRef(false);
     useEffect(() => {
-        const form = box.current?.closest("form");
-        if (!scripted || !form)
+        const form = (scripted ? box.current : native.current)?.closest("form");
+        if (!live || !form)
             return;
         const reset = () => {
             if (!latest.current.isControlled)
@@ -71,7 +71,7 @@ export function useFormSelectValue(opts) {
             form.removeEventListener("reset", reset);
             document.removeEventListener("click", submit, true);
         };
-    }, [box, scripted]);
+    }, [box, native, live, scripted]);
     const choose = (next) => {
         if (!isControlled)
             setOwn(next);

package/dist/react/index.d.ts

@@ -23,6 +23,7 @@ export { Faq, type FaqPart, type FaqProps } from "./Faq.js";
 export { FormSelect, type FormSelectOption, type FormSelectPart, type FormSelectProps } from "./FormSelect.js";
 export { LangSwitch, withLang, type LangSwitchProps } from "./LangSwitch.js";
 export { LeadCapture, type LeadCapturePart, type LeadCaptureProps } from "./LeadCapture.js";
+export { loadLazyParts } from "./lazy-part.js";
 export { LeadBooking, type LeadBookingProps } from "./LeadBooking.js";
 export type { BookingPart } from "./LeadBookingManual.js";
 export { BOOKING_ADAPTERS, BOOKING_EMBEDS, bookingAdapters, calComAdapter, calComEmbedAdapter, calComEmbedOrigin, googleCalendarAdapter, linkAdapter, manualAdapter, type BookedSlot, type BookingAdapter, type BookingAdapters, type BookingContext, } from "./booking-adapters.js";
@@ -32,6 +33,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/index.js

@@ -22,6 +22,7 @@ export { Faq } from "./Faq.js";
 export { FormSelect } from "./FormSelect.js";
 export { LangSwitch, withLang } from "./LangSwitch.js";
 export { LeadCapture } from "./LeadCapture.js";
+export { loadLazyParts } from "./lazy-part.js";
 export { LeadBooking } from "./LeadBooking.js";
 export { BOOKING_ADAPTERS, BOOKING_EMBEDS, bookingAdapters, calComAdapter, calComEmbedAdapter, calComEmbedOrigin, googleCalendarAdapter, linkAdapter, manualAdapter, } from "./booking-adapters.js";
 export { BOOKING_ACTION } from "./use-booking.js";

package/dist/react/lazy-part.d.ts

@@ -0,0 +1,33 @@
+import { type ComponentType } from "react";
+/** A piece of a client island in a chunk of its own, and the way to ask for that chunk early. */
+export interface LazyPart<P extends object> {
+    /** Drawn where the piece goes; see {@link lazyPart}. */
+    Part: ComponentType<P>;
+    /** Asks for the chunk — once a page; later calls share the first. */
+    preload: () => void;
+    /** Whether the chunk is here, for `useSyncExternalStore` with {@link LazyPart.subscribe}. */
+    isLoaded: () => boolean;
+    subscribe: (onLoad: () => void) => () => void;
+}
+/**
+ * Resolves once every lazily drawn part of the kit is loaded — today
+ * `FormSelect`'s scripted list — for a test that renders a form and reads it
+ * at once (`beforeAll(loadLazyParts)`). A page never needs it: the server
+ * loads them as their modules load, and a browser fetches them when idle.
+ */
+export declare function loadLazyParts(): Promise<void>;
+/**
+ * A component a page pays for only when it draws it — the shape of the
+ * `messenger` variants (`LeadCaptureMessenger`), here for `FormSelect`'s
+ * scripted state.
+ *
+ * On the server every part is loaded as its module is, so a render finds it
+ * and writes it into the page whole: no boundary of its own, which React
+ * would reveal late. Hydrating, a part whose chunk is still on its way holds
+ * the island's hydration — the server's markup stays as it is, no fallback
+ * drawn — and `preload` from the island's render starts every chunk it will
+ * need at once, so none waits behind another. A part first drawn after
+ * hydration (a later step, the success) waits behind a boundary of its own,
+ * drawing nothing until its chunk is here.
+ */
+export declare function lazyPart<P extends object>(load: () => Promise<ComponentType<P>>): LazyPart<P>;

package/dist/react/lazy-part.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { lazy, Suspense, useState, useSyncExternalStore } from "react";
+const noop = () => () => undefined;
+/** Every part's loader, for {@link loadLazyParts}. */
+const LOADERS = [];
+/**
+ * Resolves once every lazily drawn part of the kit is loaded — today
+ * `FormSelect`'s scripted list — for a test that renders a form and reads it
+ * at once (`beforeAll(loadLazyParts)`). A page never needs it: the server
+ * loads them as their modules load, and a browser fetches them when idle.
+ */
+export function loadLazyParts() {
+    return Promise.all(LOADERS.map(load => load())).then(() => undefined);
+}
+/**
+ * A component a page pays for only when it draws it — the shape of the
+ * `messenger` variants (`LeadCaptureMessenger`), here for `FormSelect`'s
+ * scripted state.
+ *
+ * On the server every part is loaded as its module is, so a render finds it
+ * and writes it into the page whole: no boundary of its own, which React
+ * would reveal late. Hydrating, a part whose chunk is still on its way holds
+ * the island's hydration — the server's markup stays as it is, no fallback
+ * drawn — and `preload` from the island's render starts every chunk it will
+ * need at once, so none waits behind another. A part first drawn after
+ * hydration (a later step, the success) waits behind a boundary of its own,
+ * drawing nothing until its chunk is here.
+ */
+export function lazyPart(load) {
+    let loaded = null;
+    let loading = null;
+    const listeners = new Set();
+    const fetchPart = () => {
+        loading ??= load().then(part => {
+            loaded = part;
+            for (const listener of listeners)
+                listener();
+            return part;
+        }, (error) => {
+            // A chunk that failed may be asked for again: the next draw retries.
+            loading = null;
+            throw error;
+        });
+        return loading;
+    };
+    const preload = () => void fetchPart().catch(() => undefined);
+    LOADERS.push(fetchPart);
+    if (typeof window === "undefined")
+        preload();
+    const Lazy = lazy(() => fetchPart().then(part => ({ default: part })));
+    function Part(props) {
+        const hydrating = useSyncExternalStore(noop, () => false, () => true);
+        // Chosen on the first render and kept: a structure swapped under the part would draw it anew.
+        const [Loaded] = useState(() => loaded);
+        const [wrapped] = useState(() => !hydrating);
+        if (Loaded)
+            return _jsx(Loaded, { ...props });
+        return wrapped ? (_jsx(Suspense, { fallback: null, children: _jsx(Lazy, { ...props }) })) : (_jsx(Lazy, { ...props }));
+    }
+    const subscribe = (onLoad) => {
+        listeners.add(onLoad);
+        return () => void listeners.delete(onLoad);
+    };
+    return { Part, preload, isLoaded: () => loaded !== null, subscribe };
+}

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;