@evinvest/kitstart 0.12.0 → 0.13.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.12.0"; # the version in package-lock.json
+inputs.ev.url = "github:EV-invest/lib?ref=@evinvest/kitstart-v0.13.0"; # the version in package-lock.json
 inputs.ev.inputs.v_flakes.follows = "v_flakes";
 
 landing = ev.lib.mkLanding {
@@ -236,7 +236,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`, `estimateOption`, `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`, `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` |
 
 - **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`
@@ -315,7 +315,10 @@ it is the plain POST to `/quote` it always was.
   never makes a second lead. While it runs the form's submit is disabled, `aria-busy` and
   says `sending`. No answer — no network, or none in 15 s
   (`SUBMIT_TIMEOUT_MS`) — is said in place with a retry that sends the same
-  lead; the page is never left for the browser's error page.
+  lead; the page is never left for the browser's error page. While a post
+  runs or waits for its retry, the channels keep their order: the hours
+  turning (the place closing) would move the callback, and a moved form is a
+  new one — what was typed gone, the retry sent nowhere.
 - **Events** (through `AnalyticsBoundary`'s sink; none outside one):
   `lead_form_view` (half in view, once), `lead_form_start` (first focus),
   `lead_form_field_error {field, blocking}` (`blocking: true` the browser
@@ -374,7 +377,11 @@ export const POST = quoteRoute(site, { env: serverEnv, notifier, pricing, unavai
   need — is a `quote`. So a flow the brand has not switched on is never run
   by a posted field.
 - **The form.** An estimate's questions are a tile per answer (touch-sized
-  radios posted as `estimate_<input>`), required once the script runs; the
+  radios posted as `estimate_<input>`), required once the script runs —
+  two columns, three from `sm`; a brand sets its own count with
+  `classNames={{ estimateGrid: "grid-cols-3 sm:grid-cols-4" }}` (a denser
+  grid, a shorter card), and a tile keeps its 44 px touch height in any
+  (`estimateOption` styles the tile itself); the
   price box (`aria-live`) shows the total and the lines that made it, or
   what is missing — never "from". A fixed need shows its price. Either
   submits as `bookSubmit` ("Réserver"). Without a script the answers still
@@ -650,8 +657,8 @@ export const POST = quoteRoute(site, { env: serverEnv, notifier, webhook, unavai
   loopback — the body carries PII. All checked at boot.
 - **The channel.** `channelOf(lead)` is `form` or `callback`. For the
   Service-Arb panel, map it through `panelChannel`: its `properties.channel`
-  is a closed set and refuses the whole event outside it, so a callback goes
-  as `form` until the panel accepts `callback` (one constant to flip).
+  is a closed set (`form` | `phone_inbound` | `callback`) that refuses the
+  whole event outside it, and a callback goes as `callback` (panel v0.3.0 on).
 - **Queued before the 303, sent after it.** The body is built once, from the
   lead and `ctx` (`leadId`, `brandId`, `locale`, `formId`, `at`, and a fresh
   `idempotencyKey` for the receiver to deduplicate by), and written to the

package/dist/react/LeadCapture.js

@@ -17,7 +17,7 @@ import { EstimateInputs, PriceBox, useEstimate } from "./LeadCaptureEstimate.js"
 import { FormMessage, LocalityField, NameField, PhoneField } from "./LeadCaptureFields.js";
 import { NeedField } from "./LeadCaptureNeed.js";
 import { QuoteFormShell } from "./QuoteFormShell.js";
-import { useHydrated, useNeed, useNow, useOpenOnHash } from "./use-lead-context.js";
+import { useHeld, useHydrated, useNeed, useNow, useOpenOnHash } from "./use-lead-context.js";
 import { errorText, formMessageId, OWN_FIELDS, useLeadError } from "./use-lead-error.js";
 import { useLeadEvents } from "./use-lead-events.js";
 import { FailureMessage, SubmitButton } from "./LeadCaptureSubmit.js";
@@ -74,7 +74,9 @@ export function LeadCapture(props) {
     const doneRef = useRef(null);
     // The form the focus was in is gone: the news takes it, and is read out.
     useEffect(() => doneRef.current?.focus(), [sent]);
-    const resolved = resolveChannels({ ...contact, hours: place.hours }, { now: new Date(useNow(renderedAt)), timeZone: props.timeZone, prefer: props.prefer });
+    // Held while a lead is posting or failed: its form stays where it is, for the retry.
+    const now = useHeld(useNow(renderedAt), busy !== null || failure !== null);
+    const resolved = resolveChannels({ ...contact, hours: place.hours }, { now: new Date(now), timeZone: props.timeZone, prefer: props.prefer });
     const opening = openingText(resolved.nextOpening, text, locale);
     const needLabel = needs.find(n => n.value === need)?.label;
     const message = needLabel ? fillText(text.message, { need: needLabel }) : text.messageGeneric;

package/dist/react/LeadCaptureEstimate.d.ts

@@ -2,7 +2,7 @@ import type { LeadCaptureFlowText } from "../core/lead-capture-text.js";
 import { type LeadFlow } from "../core/pricing/flow.js";
 import type { Price, PricingModel } from "../core/pricing/model.js";
 import type { PartClassNames } from "./parts.js";
-export type EstimatePart = "estimate" | "estimateInput" | "estimateLegend" | "estimateOption" | "price" | "priceTotal" | "breakdown" | "priceNote";
+export type EstimatePart = "estimate" | "estimateInput" | "estimateLegend" | "estimateGrid" | "estimateOption" | "price" | "priceTotal" | "breakdown" | "priceNote";
 /**
  * The live price of the need on screen: its answers, as the visitor taps
  * them, and the price `priceOf` makes of them — the same function the server

package/dist/react/LeadCaptureEstimate.js

@@ -36,7 +36,7 @@ export function EstimateInputs(props) {
     if (pricing?.kind !== "estimate")
         return null;
     const inputs = pricing.inputs.map(id => model.inputs.find(i => i.id === id)).filter((i) => i !== undefined);
-    return (_jsx("div", { className: cn("flex flex-col gap-5", c?.estimate), children: inputs.map(input => (_jsxs("fieldset", { className: cn("flex flex-col gap-2", c?.estimateInput), children: [_jsx("legend", { className: cn("mb-2 text-sm font-medium text-ink", c?.estimateLegend), children: labelOf(input.labels, locale) }), _jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-3", children: input.options.map(option => (_jsxs("label", { className: "relative block cursor-pointer", children: [_jsx("input", { type: "radio", name: estimateField(input.id), value: option.id, required: props.required, checked: answers[input.id] === option.id, onChange: () => props.onAnswer(input.id, option.id), className: "peer absolute inset-0 opacity-0", "data-lead-field": estimateField(input.id) }), _jsx("span", { className: cn("flex h-full min-h-11 items-center rounded-[var(--control-radius)] border border-input px-3 py-2 text-ink transition-colors", "peer-checked:border-primary peer-checked:bg-hover peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50", c?.estimateOption), children: labelOf(option.labels, locale) })] }, option.id))) })] }, input.id))) }));
+    return (_jsx("div", { className: cn("flex flex-col gap-5", c?.estimate), children: inputs.map(input => (_jsxs("fieldset", { className: cn("flex flex-col gap-2", c?.estimateInput), children: [_jsx("legend", { className: cn("mb-2 text-sm font-medium text-ink", c?.estimateLegend), children: labelOf(input.labels, locale) }), _jsx("div", { className: cn("grid grid-cols-2 gap-2 sm:grid-cols-3", c?.estimateGrid), children: input.options.map(option => (_jsxs("label", { className: "relative block cursor-pointer", children: [_jsx("input", { type: "radio", name: estimateField(input.id), value: option.id, required: props.required, checked: answers[input.id] === option.id, onChange: () => props.onAnswer(input.id, option.id), className: "peer absolute inset-0 opacity-0", "data-lead-field": estimateField(input.id) }), _jsx("span", { className: cn("flex h-full min-h-11 items-center rounded-[var(--control-radius)] border border-input px-3 py-2 text-ink transition-colors", "peer-checked:border-primary peer-checked:bg-hover peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50", c?.estimateOption), children: labelOf(option.labels, locale) })] }, option.id))) })] }, input.id))) }));
 }
 function lineLabel(line, model, locale, text) {
     switch (line.kind) {

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

@@ -6,6 +6,13 @@ export declare const NEED_ATTR = "data-need";
  * A page cached for ten minutes is put right once it runs.
  */
 export declare function useNow(renderedAt: number): number;
+/**
+ * `value`, held at what it was when `hold` turned on, until it turns off. The
+ * channel order runs on the clock, and a channel that moves is a form React
+ * draws anew: what was typed is gone, and the retry of a post still waiting
+ * on the server would go to a form no longer on the page.
+ */
+export declare function useHeld<T>(value: T, hold: boolean): T;
 /** `false` on the server and while hydrating, `true` from the render after. */
 export declare const useHydrated: () => boolean;
 /**

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

@@ -17,6 +17,21 @@ const minuteNow = () => Math.floor(Date.now() / MINUTE) * MINUTE;
 export function useNow(renderedAt) {
     return useSyncExternalStore(subscribeMinute, minuteNow, () => renderedAt);
 }
+/**
+ * `value`, held at what it was when `hold` turned on, until it turns off. The
+ * channel order runs on the clock, and a channel that moves is a form React
+ * draws anew: what was typed is gone, and the retry of a post still waiting
+ * on the server would go to a form no longer on the page.
+ */
+export function useHeld(value, hold) {
+    const [held, setHeld] = useState(null);
+    // Adjusted during render, React's own pattern for state derived from a prop.
+    if (hold && held === null)
+        setHeld({ value });
+    if (!hold && held !== null)
+        setHeld(null);
+    return held ? held.value : value;
+}
 const subscribeNothing = () => () => { };
 /** `false` on the server and while hydrating, `true` from the render after. */
 export const useHydrated = () => useSyncExternalStore(subscribeNothing, () => true, () => false);

package/dist/server/lead-webhook.d.ts

@@ -70,15 +70,13 @@ export interface PanelFlowProperties {
 }
 export declare function panelFlowProperties(flow: PanelFlow | undefined): PanelFlowProperties | Record<string, never>;
 /**
- * What the Service-Arb panel's `lead.created` calls a callback request. Its
- * `properties.channel` is a closed set (`form` | `phone_inbound`) and an event
- * outside it is refused whole — the outbox would park the lead — so until the
- * panel's `sa.funnel.v1` accepts `callback`, a callback travels as `form`.
- * TODO(panel): set to "callback" once the panel accepts it; nothing else changes.
+ * A lead's channel as the Service-Arb panel's `lead.created` carries it in
+ * `properties.channel` — a closed set (`form` | `phone_inbound` | `callback`)
+ * that refuses the whole event outside it, so the outbox would park the lead.
+ * A site's lead is a form or a callback, each its own: `phone_inbound` is the
+ * panel's, for the calls it records itself. `panelChannel(channelOf(lead))`.
  */
-declare const PANEL_CALLBACK = "form";
-/** A lead's channel as the panel's `properties.channel` may carry it: `panelChannel(channelOf(lead))`. */
-export declare function panelChannel(channel: LeadChannel): "form" | typeof PANEL_CALLBACK;
+export declare function panelChannel(channel: LeadChannel): "form" | "callback";
 /**
  * The receiver's body, built by the brand: the kit serialises and signs
  * whatever this returns and knows nothing of its shape. Called once, when the
@@ -188,4 +186,3 @@ export declare function leadWebhook(site: {
         id: string;
     };
 }, env: Pick<ServerEnv, "leadsDb" | "leadWebhook">, options: LeadWebhookOptions): LeadWebhook | null;
-export {};

package/dist/server/lead-webhook.js

@@ -22,16 +22,14 @@ export function panelFlowProperties(flow) {
     };
 }
 /**
- * What the Service-Arb panel's `lead.created` calls a callback request. Its
- * `properties.channel` is a closed set (`form` | `phone_inbound`) and an event
- * outside it is refused whole — the outbox would park the lead — so until the
- * panel's `sa.funnel.v1` accepts `callback`, a callback travels as `form`.
- * TODO(panel): set to "callback" once the panel accepts it; nothing else changes.
+ * A lead's channel as the Service-Arb panel's `lead.created` carries it in
+ * `properties.channel` — a closed set (`form` | `phone_inbound` | `callback`)
+ * that refuses the whole event outside it, so the outbox would park the lead.
+ * A site's lead is a form or a callback, each its own: `phone_inbound` is the
+ * panel's, for the calls it records itself. `panelChannel(channelOf(lead))`.
  */
-const PANEL_CALLBACK = "form";
-/** A lead's channel as the panel's `properties.channel` may carry it: `panelChannel(channelOf(lead))`. */
 export function panelChannel(channel) {
-    return channel === "callback" ? PANEL_CALLBACK : "form";
+    return channel;
 }
 /**
  * The lead webhook, or `null` when it is off: no `LEAD_WEBHOOK_URL`, or no

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evinvest/kitstart",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Landing-site machinery for local-service brands: a site composition root, the Place/Presence/ServiceArea model with a publication gate, host/locale routing, schema.org and SEO builders, the lead funnel with its antispam, and analytics events. Pure core at '.', more subpaths per runtime.",
   "license": "BlueOak-1.0.0",
   "publishConfig": {

package/template/flake.nix

@@ -3,7 +3,7 @@
     v_flakes.url = "github:valeratrades/v_flakes?ref=v1.6";
     # The lib flake at the tag of the @evinvest/kitstart version in
     # package-lock.json — mkLanding refuses a mismatch.
-    ev.url = "github:EV-invest/lib?ref=@evinvest/kitstart-v0.12.0";
+    ev.url = "github:EV-invest/lib?ref=@evinvest/kitstart-v0.13.0";
     ev.inputs.v_flakes.follows = "v_flakes";
   };
 

package/template/package.json

@@ -20,7 +20,7 @@
   "dependencies": {
     "@evinvest/analytics": "^0.3.0",
     "@evinvest/i18n": "^0.9.0",
-    "@evinvest/kitstart": "^0.12.0",
+    "@evinvest/kitstart": "^0.13.0",
     "@evinvest/marketing": "^0.3.0",
     "@evinvest/uikit": "^0.26.0",
     "next": "16.3.6",