@evinvest/kitstart 0.13.0 → 0.14.0

package/README.md

@@ -45,7 +45,7 @@ brand's `flake.nix` is its own config plus one call — `template/flake.nix` is
 the whole of one:
 
 ```nix
-inputs.ev.url = "github:EV-invest/lib?ref=@evinvest/kitstart-v0.13.0"; # the version in package-lock.json
+inputs.ev.url = "github:EV-invest/lib?ref=@evinvest/kitstart-v0.14.0"; # the version in package-lock.json
 inputs.ev.inputs.v_flakes.follows = "v_flakes";
 
 landing = ev.lib.mkLanding {
@@ -208,8 +208,8 @@ it is the plain POST to `/quote` it always was.
   wire={LEAD.wire}
   needs={LEAD.subjects.map(s => ({ value: s, label: t.subjects[s] }))}
   text={{ ...LEAD_CAPTURE_TEXT[view.locale], submit: "…" }}
-  layout={arm === "b" ? "qualify-first" : "single"}
-  experiment={{ name: "lead_layout", variant: arm }}
+  layout={arm === "b" ? "steps" : "single"}
+  experiment={{ name: "lead_form", variant: arm }}
 />
 ```
 
@@ -217,9 +217,16 @@ it is the plain POST to `/quote` it always was.
 |---|---|
 | `place`, `contact` | the hours order the channels, the service area suggests the commune; `contact` is `contactOf(site, place)` — a `null` number is a channel not offered |
 | `locale`, `renderedAt` | the page's language; the render stamp (time trap, and "now" until the script runs) |
-| `wire`, `needs` | `site.lead.wire`; the subjects with their labels |
-| `need` | the need the page already knows — also set by `?need=` and by a tap on any `[data-need="…"]` element |
-| `layout` | `single` (default) · `qualify-first`: a tile per need, then the contact step |
+| `wire`, `needs` | `site.lead.wire`; the subjects with their labels, an `icon` each (any node, the brand's — the kit ships none) for `needDisplay="cards"`, and an optional `shortLabel` drawn on tiles under `sm` |
+| `need` | the need the page already knows — also set by `?need=` and by a tap on any `[data-need="…"]` element. `?postcode=` fills the postcode the same way |
+| `layout` | `single` (default) · `steps`: one question per screen — see [One question per screen](#one-question-per-screen-layoutsteps) · `qualify-first`: a tile per need, then the contact step (the two screens `steps` grew from, kept as they were) |
+| `needDisplay` | how the need is asked: `select` (default on `single`) · `tiles` (default otherwise) · `cards`, a grid with each need's `icon` |
+| `intro`, `localityStep` | `steps` only: a question before the need, posted as a brand's extra, whose answer may turn the form into a callback · the postcode on its own screen (`own`, default) or on the phone's (`with-phone`) |
+| `focusNext` | on one screen: after a choice the focus moves to the next empty field, and Enter in a field moves to the next empty one before it submits. Off by default; always so in `steps` |
+| `questions` | by estimate input id: `{ display?: "tiles" \| "cards", unknown?: true, unknownSpan?: 2, badges?: { [option]: text }, shortLabels?: { [option]: text }, step?: number, next?: string }` — see [The compact form](#the-compact-form) and [steps](#one-question-per-screen-layoutsteps) |
+| `price`, `taxCredit` | `box` (default) · `compact`: the price on one line, what is left after a tax credit of `taxCredit` (a ratio, `0.5`), the breakdown behind "Détail" |
+| `afterPhone` | a node right under the phone field: one line of reassurance |
+| `channelsDisplay`, `channelIcons` | the other ways out: `stack` (default, under `otherChannels`) · `row`, one row of compact buttons named by `otherChannels` · the brand's icon per channel (`phone`, `whatsapp`, `sms`, `callback`) |
 | `locality` | `required` (default) · `optional` |
 | `name` | `{ field, required? }`: a name field posted as the brand's extra; off by default |
 | `extras` | the brand's own fields, after the phone |
@@ -236,7 +243,7 @@ it is the plain POST to `/quote` it always was.
 | `bookingVariant` · `bookingEmbed` · `bookingAdapters` | the `booking_provider` variant that picks the place's provider · the providers' embeds (after cookie consent) rather than a new tab · the brand's adapters over the built-ins (from a client component) — see [Booking](#booking-manual-link-google_calendar-cal_com) |
 | `initialError` | `leadErrorOf(searchParams)` on a page that reads its query: the refusal a 303 brought back, drawn on the server by the card it names (`lead_card`) so the card says why without a script (see *Refusals*) |
 | `head`, `trust` | the brand's heading instead of the title; a slot beside the submit. Like `extras`, `done` and `booking`, any node, built on the server or not, and never asked for a `key`: each slot sits alone in a keyed fragment |
-| `className` · `classNames` | the root · its parts: `root`, `head`, `title`, `lede`, `form`, `contact`, `field`, `label`, `control` (every input, the need's select in both states, the callback's phone), `hint`, `error` (a refusal: under the field, or above the submit), `chips`, `chip`, `needs`, `need`, `summary`, `submit`, `trust`, `privacy`, `opening`, `others`, `channel`, `primary`, `callback`, `callbackSummary`, `callbackForm`, `callbackLede`, `callbackSubmit`, `consent`, `done`, and for the flows `estimate`, `estimateInput`, `estimateLegend`, `estimateGrid` (an input's answers: 2 columns, 3 from `sm`), `estimateOption` (an answer's tile), `price`, `priceTotal`, `breakdown`, `priceNote`, `photos`, `priced`, `pricedPrice`, `pricedNote`, and for the booking `booking`, `bookingCta`, `bookingNote`, `prefer`, `preferOption`, `preferSubmit` |
+| `className` · `classNames` | the root · its parts: `root`, `head`, `title`, `lede`, `form`, `contact`, `field`, `label`, `control` (every input, the need's select in both states, the callback's phone), `hint`, `error` (a refusal: under the field, or above the submit), `chips`, `chip`, `needs`, `need`, `summary`, `icon` (a need's or an intro answer's icon), `submit`, `trust`, `privacy` (not drawn when `text.privacy` is `""`), `opening`, `others`, `channel`, `channelIcon`, `primary`, `callback`, `callbackSummary`, `callbackForm`, `callbackLede`, `callbackSubmit`, `consent`, `done`, for `steps` `progress`, `stepBack`, `step` (each screen), `answers`, `answer` (the chips of the screens answered), `stepNext`, `intro`, `introOption`, and for the flows `estimate`, `estimateInput`, `estimateLegend`, `estimateGrid` (an input's answers: 2 columns, 3 from `sm`), `estimateOption` (an answer's tile), `estimateUnknown` (the "I don't know" tile, after `estimateOption`), `badge`, `optionPrice` (a card's total), `price`, `priceTotal`, `breakdown`, `priceNote`, `priceLine`, `priceTaxCredit`, `priceDetail` (`price="compact"`), `photos`, `priced`, `pricedPrice`, `pricedNote`, and for the booking `booking`, `bookingCta`, `bookingNote`, `prefer`, `preferOption`, `preferSubmit` |
 
 - **Taps.** A need the page knows is not asked again, and a place serving one
   commune fills it: focus the phone, type, send — two taps. `qualify-first`
@@ -325,7 +332,8 @@ it is the plain POST to `/quote` it always was.
   refused it, `false` the phone hint showed — the field's role, never its
   value), `lead_form_submit_error {reason, channel}` (`network` /
   `timeout`), `lead_form_step {step}`
-  (`contact` / `need`), each with `form_id`, `layout`, `experiment`,
+  (`contact` / `need` in `qualify-first`; in `steps` each screen moved to —
+  `intro`, `need`, `estimate_<input>`, `locality`, `phone`), each with `form_id`, `layout`, `experiment`,
   `variant`; `contact_intent_click {channel}` for `phone`, `whatsapp`, `sms`,
   `callback`, with the experiment; and on the server `lead_form_submit
   {form_id, channel}` and `lead_form_reject {form_id, channel, field,
@@ -335,6 +343,104 @@ it is the plain POST to `/quote` it always was.
   within the 20 % tolerance); the refusals and the shared phone rule are
   2.0 KB of it, sending (the id, the busy state, the retry) 0.6 KB.
 
+### One question per screen: `layout="steps"`
+
+```tsx
+<LeadCapture … layout="steps" needDisplay="cards" price="compact" taxCredit={0.5}
+  questions={{ surface: { unknown: true }, frequency: { display: "cards", badges: { biweekly: "Le plus avantageux" } } }}
+  intro={{ label: "C’est pour quand ?", field: "urgency", options: [
+    { value: "today", label: "Urgent — aujourd’hui", channel: "callback" },
+    { value: "week", label: "Cette semaine" },
+  ] }}
+  afterPhone={<p>Votre numéro reste entre nous — rappel sous 15 min.</p>} channelsDisplay="row" />
+```
+
+- **Screens.** The intro question when there is one; the need; each of the
+  estimate's questions; the postcode (`localityStep="own"`, the default, or
+  with the phone, `with-phone`); the phone, always last, with the price, the
+  name and the brand's extras and the submit. A tap answers and moves on
+  (from the keyboard the tiles are a radio group: arrows choose, Enter or
+  Space answers); the postcode moves on with "Continuer" or Enter. The
+  focus goes to the new screen's field — inside the tap when that is a typed
+  field, so iOS opens the keyboard.
+- **Over the screens** a thin bar (`progress`; the screen is read out as
+  `stepProgress`, "Étape 2/4", never drawn), "Retour" (`stepBack`), and the
+  screens answered as chips (`answers`, `answer`), each a tap back to its
+  screen with "Modifier" (`needChange`). The total counts the most screens
+  an answer to come could add (the longest estimate while the need is
+  open), so the bar only moves forward as the visitor answers; until the
+  intro is answered — its branches differ in length — no total is said
+  (`stepProgressOpen`, "Étape 1").
+- **Questions sharing a screen** (`questions: { bedrooms: { step: 1, next:
+  "Voir les prix" }, surface: { step: 1 } }`): questions with the same `step`
+  number are one screen. It moves on by itself once all are answered; until
+  then the focus goes to the next question, and the button (`next` of the
+  first, else `stepNext`) says which one is missing.
+- **Never asked twice.** A need the page knows (`need`, `?need=`, a
+  `[data-need]` card) and a postcode it knows (`?postcode=`, a place serving
+  one commune) are answered screens: a chip, not a question.
+- **The intro** (`intro: { label, field, options }`) is posted under `field`
+  — declare it in `site.lead.extras` (`{ name: "urgency", max: 16 }`) and it
+  is stored and mailed with the lead like any extra. An answer with
+  `channel: "callback"` cuts the form to the phone and the callback's
+  consent, posted as a callback lead (`channel=callback`, `callbackSubmit`);
+  the folded callback is then not offered a second time.
+- **A refusal** opens the screen of the field it is about (the phone's for
+  anything the form cannot place).
+- **Without a script** every screen is in the form, hidden but posted; a
+  `<noscript>` style shows them all at once and hides the bar, the back link,
+  the chips and "Continuer": the form posts as one, as `qualify-first` does.
+  The server draws the same screen the script starts on — no shift at
+  hydration.
+
+### The compact form
+
+Pieces any layout takes, for a card that fits a phone's screen:
+
+- **The price on one line** (`price="compact"`): `priceLine` ("Votre prix :
+  {price}" — a brand may write "≈ {price}"), then, with `taxCredit` (a ratio
+  of the price a tax credit gives back, `0.5` for the French *crédit
+  d'impôt*), what is left to pay (`priceTaxCredit`, `data-credit-cents`),
+  and the breakdown and `priceNote` behind a `<details>` ("Détail",
+  `priceDetail`). Read out as it changes, the line only.
+- **A question as cards** (`questions: { frequency: { display: "cards" } }`):
+  one answer a line, each with the total it would make given the other
+  answers (once they are given), and an optional `badges` tag per option.
+- **Short labels on a phone** (`needs[].shortLabel`, `questions[id].shortLabels`):
+  under `sm` the tile draws the short one; the radio stays named by the
+  whole label (`aria-label`, with the badge and the price).
+- **Badges are the brand's words** (`badges`): the kit marks nothing as
+  popular or cheapest by itself.
+- **"Je ne sais pas"** (`questions: { surface: { unknown: true, unknownSpan: 2 } }`) adds the
+  answer `estimateUnknown` to that question, posted as `ESTIMATE_UNKNOWN`
+  (`?` — never a slug, so never an option a model prices). The questions
+  after it are not asked, the price goes, and the lead is a `quote`: the
+  submit says `submit`, a quote need's photos ask shows, and the server
+  stores it as a quote too (`answeredUnknown`), without the warning a stale
+  answer logs.
+- **Need cards** (`needDisplay="cards"`): a grid of cards with each need's
+  `icon`; `tiles` a list without. Required either way: nothing is chosen
+  for the visitor, unlike the select's first need.
+- **One line under the phone** (`afterPhone`) — and `text.privacy: ""` drops
+  the kit's privacy line, so the reassurance is said once.
+- **The other channels in a row** (`channelsDisplay="row"`): one row of
+  compact buttons (call, WhatsApp, text, "Rappelez-moi" — its form on a line
+  of its own once open), named by `otherChannels` as a group, each with the
+  brand's `channelIcons`; a channel the place lacks is not drawn. Hiding the
+  row where a sticky call bar already offers the same (`classNames.others`)
+  is the brand's.
+- **`focusNext`** on one screen: after the need's select, a tile, or an
+  estimate's answer, the focus moves to the next empty field; Enter in a
+  typed field moves to the next empty one, and submits from the last.
+- **Words.** `estimateUnknown`, `priceLine`, `priceTaxCredit`, `priceDetail`,
+  `stepProgress`, `stepProgressOpen`, `stepBack`, `stepNext` are in `LEAD_CAPTURE_TEXT` and
+  optional in `LeadCaptureText`, falling back to the kit's in the page's
+  language (`flowTextOf`) — a brand's text from 0.13 still type-checks.
+- **Weight.** The steps, the tiles, the compact price and the focus ride
+  with `LeadCapture` whichever layout a page uses: about 9 KB gz of
+  first-load JS on the template's place page (170,375 → 179,430 B against
+  its 158,000 B target: +13.6 %, a warning within the 20 % tolerance).
+
 ### Form variants: quote, estimate, fixed
 
 A need is sold one of three ways, chosen per need — one brand can mix them:

package/dist/core/accept.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_ID, experimentProps } from "./analytics.js";
 import { HONEYPOT_FIELD, LEGACY_HONEYPOT_FIELDS, RENDERED_AT_FIELD, screen } from "./antispam.js";
 import { channelOf, MAX_FIELD, readCandidate, validateCandidate } from "./lead.js";
-import { flowOf, readEstimateInputs } from "./pricing/flow.js";
+import { answeredUnknown, flowOf, readEstimateInputs } from "./pricing/flow.js";
 import { priceOf } from "./pricing/price.js";
 /** Hidden fields the form carries besides what the visitor types. */
 export const LOCATION_FIELD = "location";
@@ -52,7 +52,8 @@ export function leadRef(id, seed) {
  * from the posted answers through the same `priceOf` the form showed; a
  * posted amount is never read. A callback asks for a call, not a price: no
  * flow. An estimate whose answers do not price (a stale form, a tampered
- * field) is kept as a `quote`: the customer is still a customer.
+ * field) is kept as a `quote`: the customer is still a customer — and so is
+ * one answered "I don't know" (`ESTIMATE_UNKNOWN`), on purpose.
  */
 async function priced(site, form, lead, deps) {
     const flows = site.lead.flows;
@@ -69,6 +70,9 @@ async function priced(site, form, lead, deps) {
     const flow = flowOf(flows, model, lead.subject);
     if (flow === "quote" || !model)
         return { flow: "quote" };
+    // "I don't know" is an answer, not a stale form: a quote, said so, without a warning.
+    if (flow === "estimate" && answeredUnknown(model, lead.subject, name => field(form, name)))
+        return { flow: "quote" };
     const inputs = flow === "estimate" ? readEstimateInputs(model, lead.subject, name => field(form, name)) : {};
     const price = priceOf(model, lead.subject, inputs);
     if (!price) {

package/dist/core/analytics.d.ts

@@ -26,8 +26,13 @@ export type IntentChannel = "form_open" | "whatsapp" | "phone" | "sms" | "callba
  * one field reads the same on every site. A brand's extra is its own name.
  */
 export type LeadField = "need" | "locality" | "phone" | "name" | "consent" | (string & {});
-/** `qualify-first`'s two screens; `single` has one and never reports a step. */
-export type LeadStep = "need" | "contact";
+/**
+ * A screen of the lead form, as `lead_form_step` names it. `qualify-first`'s
+ * two are `need` and `contact`; `steps` reports each screen it moves to —
+ * `intro`, `need`, `estimate_<input id>`, `locality`, `phone`. `single` has one
+ * screen and never reports a step. Slugs only: an input id, never an answer.
+ */
+export type LeadStep = "need" | "contact" | "intro" | "locality" | "phone" | `estimate_${string}`;
 /**
  * Every property name an event may carry. A customer's phone or address comes
  * through the same pages, and once it reaches PostHog the only remedy is

package/dist/core/lead-capture-text.d.ts

@@ -82,7 +82,11 @@ export interface LeadCaptureText extends Partial<LeadCaptureFlowText> {
     /** The honeypot's label — read only by a bot filling every field. */
     honeypotLabel: string;
 }
-/** What the `estimate` and `fixed` flows, the photos ask and the booking print. */
+/**
+ * What the `estimate` and `fixed` flows, the photos ask and the booking
+ * print — and every word added since (the compact price, the steps): optional
+ * in `LeadCaptureText`, so a brand's text from before them still type-checks.
+ */
 export interface LeadCaptureFlowText {
     /** Heads the live price. */
     priceTitle: string;
@@ -130,6 +134,22 @@ export interface LeadCaptureFlowText {
     photosCta: string;
     /** The WhatsApp message, `{need}` the need's label. */
     photosMessage: string;
+    /** The answer an estimate's question may offer (`EstimateQuestion.unknown`): the lead becomes a quote. */
+    estimateUnknown: string;
+    /** `price="compact"`: the one line, `{price}` the total. */
+    priceLine: string;
+    /** `price="compact"` with a `taxCredit`: after the line, `{price}` what is left to pay. */
+    priceTaxCredit: string;
+    /** `price="compact"`: opens how the price was reached. */
+    priceDetail: string;
+    /** `layout="steps"`: the screen read out, `{n}` of `{total}` — never drawn, the bar is. */
+    stepProgress: string;
+    /** The same before the intro is answered, when how many screens follow is not known yet: `{n}` only. */
+    stepProgressOpen: string;
+    /** `layout="steps"`: back one screen. */
+    stepBack: string;
+    /** `layout="steps"`: on to the next screen, from a field that is typed (the postcode). */
+    stepNext: string;
 }
 export declare const LEAD_CAPTURE_TEXT: Readonly<Record<"fr" | "en", LeadCaptureText>>;
 /** The flows' words for a page: the brand's, else the kit's in its language (English for `en*`, French otherwise). */

package/dist/core/lead-capture-text.js

@@ -27,6 +27,14 @@ const FR_FLOW = {
     photosLede: "Pour ce besoin, quelques photos nous permettent de vous donner un prix juste.",
     photosCta: "Envoyer des photos sur WhatsApp",
     photosMessage: "Bonjour, voici des photos pour : {need}.",
+    estimateUnknown: "Je ne sais pas",
+    priceLine: "Votre prix : {price}",
+    priceTaxCredit: "{price} après crédit d’impôt",
+    priceDetail: "Détail",
+    stepProgress: "Étape {n}/{total}",
+    stepProgressOpen: "Étape {n}",
+    stepBack: "Retour",
+    stepNext: "Continuer",
 };
 const EN_FLOW = {
     priceTitle: "Your price",
@@ -57,6 +65,14 @@ const EN_FLOW = {
     photosLede: "For this job, a few photos let us give you a fair price.",
     photosCta: "Send photos on WhatsApp",
     photosMessage: "Hello, here are photos for: {need}.",
+    estimateUnknown: "I don’t know",
+    priceLine: "Your price: {price}",
+    priceTaxCredit: "{price} after tax credit",
+    priceDetail: "Details",
+    stepProgress: "Step {n} of {total}",
+    stepProgressOpen: "Step {n}",
+    stepBack: "Back",
+    stepNext: "Continue",
 };
 const FR = {
     ...FR_FLOW,

package/dist/core/pricing/flow.d.ts

@@ -19,6 +19,15 @@ export declare function flowOf(flows: LeadFlows | undefined, model: PricingModel
 /** The form field an estimate's input is posted under: `estimate_<input id>`. */
 export declare const ESTIMATE_FIELD_PREFIX = "estimate_";
 export declare const estimateField: (input: string) => string;
+/**
+ * The answer "I don't know" to an estimate's question (`EstimateQuestion.unknown`
+ * in `LeadCapture`): not a slug, so it can never be an option a model prices.
+ * A need answered with it is sold as a `quote` for that lead — on the form and
+ * on the server alike (`answeredUnknown`).
+ */
+export declare const ESTIMATE_UNKNOWN = "?";
+/** Whether any of the need's questions was answered "I don't know" — the lead is then a `quote`. */
+export declare function answeredUnknown(model: PricingModel, need: string, get: (field: string) => string | null): boolean;
 /**
  * The answers a form posted for the need's inputs — only those, and only
  * slugs. Read by the server, which prices them itself: a posted amount, if

package/dist/core/pricing/flow.js

@@ -18,6 +18,20 @@ export function flowOf(flows, model, need) {
 /** The form field an estimate's input is posted under: `estimate_<input id>`. */
 export const ESTIMATE_FIELD_PREFIX = "estimate_";
 export const estimateField = (input) => `${ESTIMATE_FIELD_PREFIX}${input}`;
+/**
+ * The answer "I don't know" to an estimate's question (`EstimateQuestion.unknown`
+ * in `LeadCapture`): not a slug, so it can never be an option a model prices.
+ * A need answered with it is sold as a `quote` for that lead — on the form and
+ * on the server alike (`answeredUnknown`).
+ */
+export const ESTIMATE_UNKNOWN = "?";
+/** Whether any of the need's questions was answered "I don't know" — the lead is then a `quote`. */
+export function answeredUnknown(model, need, get) {
+    const pricing = Object.hasOwn(model.needs, need) ? model.needs[need] : undefined;
+    if (pricing?.kind !== "estimate")
+        return false;
+    return pricing.inputs.some(id => get(estimateField(id))?.trim() === ESTIMATE_UNKNOWN);
+}
 /**
  * The answers a form posted for the need's inputs — only those, and only
  * slugs. Read by the server, which prices them itself: a posted amount, if

package/dist/core/pricing/index.d.ts

@@ -1,4 +1,4 @@
 export { PRICING_CURRENCY, PRICING_FORMAT, PRICING_LIMITS, type AddOption, type DiscountOption, type MultiplyOption, type NeedPricing, type Price, type PriceLine, type PricingInput, type PricingInputKind, type PricingInputs, type PricingLabels, type PricingModel, } from "./model.js";
 export { CENTS_BUCKETS, centsBucket, mulBp, priceOf, roundTo } from "./price.js";
 export { labelOf, parsePricingModel, PricingModelError, pricingProblems, pricingProblemsFor } from "./validate.js";
-export { ESTIMATE_FIELD_PREFIX, estimateField, flowOf, LEAD_FLOWS, readEstimateInputs, type LeadFlow, type LeadFlows } from "./flow.js";
+export { answeredUnknown, ESTIMATE_FIELD_PREFIX, ESTIMATE_UNKNOWN, estimateField, flowOf, LEAD_FLOWS, readEstimateInputs, type LeadFlow, type LeadFlows } from "./flow.js";

package/dist/core/pricing/index.js

@@ -1,4 +1,4 @@
 export { PRICING_CURRENCY, PRICING_FORMAT, PRICING_LIMITS, } from "./model.js";
 export { CENTS_BUCKETS, centsBucket, mulBp, priceOf, roundTo } from "./price.js";
 export { labelOf, parsePricingModel, PricingModelError, pricingProblems, pricingProblemsFor } from "./validate.js";
-export { ESTIMATE_FIELD_PREFIX, estimateField, flowOf, LEAD_FLOWS, readEstimateInputs } from "./flow.js";
+export { answeredUnknown, ESTIMATE_FIELD_PREFIX, ESTIMATE_UNKNOWN, estimateField, flowOf, LEAD_FLOWS, readEstimateInputs } from "./flow.js";

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export { createPlaceView, DEFAULT_TIME_ZONE, freshRating, isOpenAt, nextOpening,
 export { createRouting, GONE, GONE_HEADER, gonePath, goneHeader, HOST_MARK, LANG_COOKIE, LANG_COOKIE_MAX_AGE, NON_PAGE_ROUTES, parseGoneHeader, parsePlaceParam, PASS_PATHS, placeParam, pointSuffixes, THANKS, type Decision, type RequestFacts, type Routing, } from "./core/routing.js";
 export { CARD_FIELD, CARD_ID, CHANNEL_FIELD, channelOf, CONSENT_FIELD, LEAD_CHANNELS, LEAD_ERROR_PARAM, LEAD_CARD_PARAM, leadErrorFor, leadErrorOf, LEAD_SCHEMA_VERSION, MAX_CONSENT, MAX_FIELD, readCandidate, rejectionOf, suspectOf, SUBMISSION_FIELD, SUBMISSION_ID, validateCallbackLead, validateCandidate, validateLead, type Lead, type LeadCandidate, type LeadChannel, type LeadError, type PageLeadError, type LeadConsent, type LeadExtra, type LeadPrice, type LeadRejection, type LeadSchema, type LeadStore, type LeadSuspect, type LeadVerdict, type LeadWire, type SpamVerdict, } from "./core/lead.js";
 export { isMobilePhone, isPlausiblePhone, normalizePhone, phoneProblem } from "./core/phone.js";
-export { CENTS_BUCKETS, centsBucket, ESTIMATE_FIELD_PREFIX, estimateField, flowOf, labelOf, LEAD_FLOWS, mulBp, parsePricingModel, priceOf, PRICING_CURRENCY, PRICING_FORMAT, PRICING_LIMITS, PricingModelError, pricingProblems, pricingProblemsFor, readEstimateInputs, roundTo, type AddOption, type DiscountOption, type LeadFlow, type LeadFlows, type MultiplyOption, type NeedPricing, type Price, type PriceLine, type PricingInput, type PricingInputKind, type PricingInputs, type PricingLabels, type PricingModel, } from "./core/pricing/index.js";
+export { answeredUnknown, CENTS_BUCKETS, centsBucket, ESTIMATE_FIELD_PREFIX, ESTIMATE_UNKNOWN, estimateField, flowOf, labelOf, LEAD_FLOWS, mulBp, parsePricingModel, priceOf, PRICING_CURRENCY, PRICING_FORMAT, PRICING_LIMITS, PricingModelError, pricingProblems, pricingProblemsFor, readEstimateInputs, roundTo, type AddOption, type DiscountOption, type LeadFlow, type LeadFlows, type MultiplyOption, type NeedPricing, type Price, type PriceLine, type PricingInput, type PricingInputKind, type PricingInputs, type PricingLabels, type PricingModel, } from "./core/pricing/index.js";
 export { flowTextOf, LEAD_CAPTURE_TEXT, type LeadCaptureFlowText, type LeadCaptureText } from "./core/lead-capture-text.js";
 export { fillText, formatCents, openingText } from "./core/lead-capture-format.js";
 export { channelHref, resolveChannels, smsHref, type CaptureChannel, type ChannelFacts, type ChannelOptions, type ResolvedChannels, } from "./core/channels.js";

package/dist/index.js

@@ -8,7 +8,7 @@ export { createPlaceView, DEFAULT_TIME_ZONE, freshRating, isOpenAt, nextOpening,
 export { createRouting, GONE, GONE_HEADER, gonePath, goneHeader, HOST_MARK, LANG_COOKIE, LANG_COOKIE_MAX_AGE, NON_PAGE_ROUTES, parseGoneHeader, parsePlaceParam, PASS_PATHS, placeParam, pointSuffixes, THANKS, } from "./core/routing.js";
 export { CARD_FIELD, CARD_ID, CHANNEL_FIELD, channelOf, CONSENT_FIELD, LEAD_CHANNELS, LEAD_ERROR_PARAM, LEAD_CARD_PARAM, leadErrorFor, leadErrorOf, LEAD_SCHEMA_VERSION, MAX_CONSENT, MAX_FIELD, readCandidate, rejectionOf, suspectOf, SUBMISSION_FIELD, SUBMISSION_ID, validateCallbackLead, validateCandidate, validateLead, } from "./core/lead.js";
 export { isMobilePhone, isPlausiblePhone, normalizePhone, phoneProblem } from "./core/phone.js";
-export { CENTS_BUCKETS, centsBucket, ESTIMATE_FIELD_PREFIX, estimateField, flowOf, labelOf, LEAD_FLOWS, mulBp, parsePricingModel, priceOf, PRICING_CURRENCY, PRICING_FORMAT, PRICING_LIMITS, PricingModelError, pricingProblems, pricingProblemsFor, readEstimateInputs, roundTo, } from "./core/pricing/index.js";
+export { answeredUnknown, CENTS_BUCKETS, centsBucket, ESTIMATE_FIELD_PREFIX, ESTIMATE_UNKNOWN, estimateField, flowOf, labelOf, LEAD_FLOWS, mulBp, parsePricingModel, priceOf, PRICING_CURRENCY, PRICING_FORMAT, PRICING_LIMITS, PricingModelError, pricingProblems, pricingProblemsFor, readEstimateInputs, roundTo, } from "./core/pricing/index.js";
 export { flowTextOf, LEAD_CAPTURE_TEXT } from "./core/lead-capture-text.js";
 export { fillText, formatCents, openingText } from "./core/lead-capture-format.js";
 export { channelHref, resolveChannels, smsHref, } from "./core/channels.js";

package/dist/react/LeadCapture.d.ts

@@ -5,17 +5,19 @@ import { type LeadCaptureText } from "../core/lead-capture-text.js";
 import { type Place } from "../core/place/types.js";
 import { type LeadFlows } from "../core/pricing/flow.js";
 import type { PricingModel } from "../core/pricing/model.js";
-import type { FormSelectOption } from "./FormSelect.js";
 import type { BookingAdapters } from "./booking-adapters.js";
 import type { BookingPart } from "./LeadBookingManual.js";
 import { type PricedPart } from "./LeadCapturePriced.js";
-import { type ChannelPart, type Experiment } from "./LeadCaptureChannels.js";
-import { type EstimatePart } from "./LeadCaptureEstimate.js";
+import { type ChannelIconKey, type ChannelPart, type Experiment } from "./LeadCaptureChannels.js";
+import { type EstimatePart, type EstimateQuestions } from "./LeadCaptureEstimate.js";
 import { type FieldPart } from "./LeadCaptureFields.js";
-import { type LeadCaptureLayout } from "./LeadCaptureNeed.js";
+import { type LeadCaptureLayout, type LeadNeedDisplay, type LeadNeedOption } from "./LeadCaptureNeed.js";
+import { type PricePart } from "./LeadCapturePrice.js";
+import { type StepsPart } from "./LeadCaptureSteps.js";
+import { type LeadIntro } from "./lead-steps.js";
 import type { PartClassNames } from "./parts.js";
 import { type LeadSent } from "./use-lead-submit.js";
-export type LeadCapturePart = "root" | "head" | "title" | "lede" | "form" | "contact" | "submit" | "trust" | "privacy" | "opening" | "others" | "done" | "needs" | "need" | "summary" | FieldPart | ChannelPart | EstimatePart | PricedPart | BookingPart;
+export type LeadCapturePart = "root" | "head" | "title" | "lede" | "form" | "contact" | "submit" | "trust" | "privacy" | "opening" | "others" | "done" | "needs" | "need" | "summary" | "icon" | "intro" | "introOption" | "stepNext" | FieldPart | ChannelPart | EstimatePart | PricePart | StepsPart | PricedPart | BookingPart;
 export interface LeadCaptureProps {
     /** Its hours order the channels; its service area suggests the commune. */
     place: Place<string>;
@@ -29,8 +31,8 @@ export interface LeadCaptureProps {
     renderedAt: number;
     /** `site.lead.wire`: the names the funnel reads. */
     wire: LeadWire;
-    /** The brand's subjects with their labels, in order. */
-    needs: readonly FormSelectOption[];
+    /** The brand's subjects with their labels, in order — and an icon each for `needDisplay="cards"`. */
+    needs: readonly LeadNeedOption[];
     /**
      * How each need is sold — `site.lead.flows`, the map the server prices
      * with. A need runs `estimate` or `fixed` only when `pricing` prices it so
@@ -71,8 +73,34 @@ export interface LeadCaptureProps {
     bookingEmbed?: boolean | undefined;
     /** The need the page already knows; `?need=` and `[data-need]` triggers set it too. */
     need?: string | undefined;
-    /** `single` (one screen) or `qualify-first` (the need, then the contact) — an experiment's switch. */
+    /**
+     * `single` (one screen, the default) · `steps` (one question per screen, a
+     * thin bar, a way back, the phone last) · `qualify-first` (the two screens
+     * `steps` grew from: the need, then the contact) — an experiment's switch.
+     */
     layout?: LeadCaptureLayout | undefined;
+    /** How the need is asked: `select` (default on one screen), `tiles` (default otherwise), `cards` with the `icon` of each need. */
+    needDisplay?: LeadNeedDisplay | undefined;
+    /**
+     * `steps` only: a question before the need whose answer is posted as one of
+     * the brand's extras (`field`) and may change the channel — `callback`:
+     * the rest is the phone and its consent, posted as a callback.
+     */
+    intro?: LeadIntro | undefined;
+    /** `steps` only: the postcode on a screen of its own (default), or on the phone's. */
+    localityStep?: "own" | "with-phone" | undefined;
+    /**
+     * After a choice (the need, an estimate's answer) the focus moves to the
+     * next empty field, and Enter in a field moves to the next empty one before
+     * it submits. Always so in `steps`; off by default on one screen.
+     */
+    focusNext?: boolean | undefined;
+    /** By estimate input id: how a question is asked — `cards` with the total each answer makes, an "I don't know", badges. */
+    questions?: EstimateQuestions | undefined;
+    /** `box` (default): the price box. `compact`: one line, a tax-credit line with `taxCredit`, the breakdown behind "Détail". */
+    price?: "box" | "compact" | undefined;
+    /** `price="compact"`: the share of the price a tax credit gives back (0.5 for half), shown as what is left to pay. */
+    taxCredit?: number | undefined;
     locality?: "required" | "optional" | undefined;
     /** A name field, posted as the brand's extra `field`. Off by default: every field costs leads. */
     name?: {
@@ -81,6 +109,12 @@ export interface LeadCaptureProps {
     } | undefined;
     /** The brand's extra fields, after the phone — never before it. */
     extras?: ReactNode;
+    /** Right under the phone field: one short line of reassurance ("Votre numéro reste entre nous"). */
+    afterPhone?: ReactNode;
+    /** The other ways out: `stack` (default), under a heading, or `row`, one row of compact buttons. */
+    channelsDisplay?: "stack" | "row" | undefined;
+    /** The brand's icon before a channel's label, by channel. */
+    channelIcons?: Partial<Record<ChannelIconKey, ReactNode>> | undefined;
     /** Moved first when available — a `default_channel` experiment's arm. */
     prefer?: CaptureChannel | undefined;
     /** The site's assignment: on every event, and posted with the form. Slugs only. */