@evinvest/kitstart 0.18.0 → 0.19.1

package/README.md

@@ -18,7 +18,7 @@ stays in the brand.
 | `@evinvest/kitstart/proxy` | edge | `createProxy(site)`, `PROXY_MATCHER` |
 | `@evinvest/kitstart/next` | Next server (routes, RSC) | `quoteRoute`, `bookingRoute`, `confirmRoute`, `sitemapRoute`, `robotsRoute`, `ogRoute`, `healthRoute`, `createPlaceLoader`, `loadLocale`, `placeMetadata` / `brandMetadata` / `statusMetadata`, `metadataBase` |
 | `@evinvest/kitstart/next/config` | `next.config.ts`, `vitest.config.ts` | `withLanding`, `buildEnv` and the `assets/` readers |
-| `@evinvest/kitstart/react` | either side | `LangSwitch`, `CallBar`, `StatusScreen`, `PlaceDirectory`, `AreaChips`, `Coverage`, `MapFacade` (client), `QuoteFormShell`, `FormSelect` (client), `LeadCapture` (client), `LeadBooking` (client) and its adapters, `Faq`, `AnalyticsBoundary` (client), plus the kit and marketing pieces a landing composes with |
+| `@evinvest/kitstart/react` | either side | `LangSwitch`, `CallBar`, `StatusScreen`, `PlaceDirectory`, `AreaChips`, `Coverage`, `MapFacade` (client), `QuoteFormShell`, `FormSelect` (client) with `loadLazyParts` for tests, `LeadCapture` (client), `LeadBooking` (client) and its adapters, `Faq`, `AnalyticsBoundary` (client), plus the kit and marketing pieces a landing composes with |
 | `@evinvest/kitstart/testing` | a brand's vitest | `describeLandingContract(site, { globalsCss, proxySource, text })`, `describeLeadStoreContract(name, harness)`, `storefrontPlace`, `serviceAreaPlace`, `testLead` |
 | `@evinvest/kitstart/testing/e2e` | a brand's Playwright | `defineSectionSuite(sections)`, `settle(page, selector)`, `BREAKPOINTS` |
 | bin `kitstart-size` | plain node | `kitstart-size [<build root>] [--route …] [--budget …]`: first-load JS of a place page against the target in `tests/bundle_budget.txt` (passes with a warning up to its tolerance, 20 % by default — see [The bundle budget](#the-bundle-budget)); fails closed |
@@ -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.18.0"; # the version in package-lock.json
+inputs.ev.url = "github:EV-invest/lib?ref=@evinvest/kitstart-v0.19.1"; # the version in package-lock.json
 inputs.ev.inputs.v_flakes.follows = "v_flakes";
 
 landing = ev.lib.mkLanding {
@@ -143,12 +143,16 @@ boundary never imports the site config.
 
 A form's select, for the fields inside `QuoteFormShell`. On the server and
 without JavaScript it is the kit's `NativeSelect` — a real `<select name>`
-the form posts as is. After hydration (`useSyncExternalStore`, so the
-server's HTML and the first client render agree) it is the kit's `Select`:
-the list drawn in the palette, never the platform's menu, and the value in an
-input of the same `name`. Both states are one box — height, width, border,
-radius and inset — so the swap moves nothing (checked by the template's e2e,
-which CI runs: `npm run check:template -- --e2e`).
+the form posts as is. Hydrated, it stays that select, live — a choice there
+reaches `onValueChange` — until the kit's `Select` is here: a chunk of its
+own, asked for once the page is idle, or sooner when a mouse moves over the
+field or it takes the focus. Then it is the kit's `Select`: the list drawn in
+the palette, never the platform's menu, and the value in an input of the
+same `name`. A press before that opens the platform's list at once, never a
+wait on the chunk; a select holding the focus (its picker may be open) is
+swapped only once the focus leaves. Both states are one box — height, width,
+border, radius and inset — so the swap moves nothing (checked by the
+template's e2e, which CI runs: `npm run check:template -- --e2e`).
 
 ```tsx
 <Field className="flex flex-col gap-2">
@@ -190,9 +194,11 @@ which CI runs: `npm run check:template -- --e2e`).
   letters jump, Enter chooses, Escape and Tab close with focus back on the
   trigger; the trigger is a `combobox` named by the `FieldLabel`, and so is
   its list, with the kit's focus ring.
-- **Weight.** It is a client module and pulls the kit's `Select` into the
-  page: 3.8 KB gz of first-load JS on the template's place page (152,774 →
-  156,565 B of its 158,000 B budget).
+- **Weight.** The kit's `Select` — the list's placing, dismissal and keys —
+  is out of the first load, in `FormSelectKit`'s chunk; the native select and
+  the value's plumbing stay. With `@evinvest/uikit` before 0.28 a page whose
+  form uses the kit's `Field` still loads `Select` up front: that `Field`
+  imported `SelectTrigger` to recognise the control it labels.
 - **Controlled, as an `<input>`.** Under `value` the prop is the value: a
   pick only calls `onValueChange`, and the parent's state (or a reset of its
   own, `setSubject("")` back to the placeholder) is what moves it. A form

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

@@ -1,4 +1,5 @@
 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 { labelOf } from "./label.js";
+export { parsePricingModel, PricingModelError, pricingProblems, pricingProblemsFor } from "./validate.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,5 @@
 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 { labelOf } from "./label.js";
+export { parsePricingModel, PricingModelError, pricingProblems, pricingProblemsFor } from "./validate.js";
 export { answeredUnknown, ESTIMATE_FIELD_PREFIX, ESTIMATE_UNKNOWN, estimateField, flowOf, LEAD_FLOWS, readEstimateInputs } from "./flow.js";

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

@@ -0,0 +1,7 @@
+import type { PricingLabels } from "./model.js";
+/**
+ * The label for `locale`, or the first one the model has. Apart from the
+ * validator: the form names its answers with it in the browser, where the
+ * validator's weight has no use.
+ */
+export declare function labelOf(labels: PricingLabels, locale: string): string;

package/dist/core/pricing/label.js

@@ -0,0 +1,8 @@
+/**
+ * The label for `locale`, or the first one the model has. Apart from the
+ * validator: the form names its answers with it in the browser, where the
+ * validator's weight has no use.
+ */
+export function labelOf(labels, locale) {
+    return (Object.hasOwn(labels, locale) ? labels[locale] : undefined) ?? Object.values(labels)[0] ?? "";
+}

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

@@ -1,4 +1,4 @@
-import { type PricingLabels, type PricingModel } from "./model.js";
+import { type PricingModel } from "./model.js";
 /**
  * A model that does not validate, with every reason found. A model is taken
  * whole or not at all: one bad field refuses it, so a page never prices from
@@ -23,5 +23,3 @@ export declare function parsePricingModel(value: unknown): PricingModel;
  * must not show an option with no words.
  */
 export declare function pricingProblemsFor(value: unknown, locales: readonly string[]): string[];
-/** The label for `locale`, or the first one the model has. */
-export declare function labelOf(labels: PricingLabels, locale: string): string;

package/dist/core/pricing/validate.js

@@ -238,7 +238,3 @@ export function pricingProblemsFor(value, locales) {
     }
     return out;
 }
-/** The label for `locale`, or the first one the model has. */
-export function labelOf(labels, locale) {
-    return (Object.hasOwn(labels, locale) ? labels[locale] : undefined) ?? Object.values(labels)[0] ?? "";
-}

package/dist/react/FormSelect.d.ts

@@ -4,9 +4,11 @@ import type { PartClassNames } from "./parts.js";
  * A form's choice that works before any script and looks like the kit after
  * it. The server, and a browser without JavaScript, get the kit's
  * `NativeSelect` — a real `<select name>` the form posts as is. Once the page
- * has hydrated it becomes the kit's `Select`, drawn in the palette instead of
- * the platform's menu, with the value in an input of the same `name`. Both
- * are the same box (height, width, border, inset), so the swap moves nothing.
+ * has hydrated and is idle, or as soon as the visitor reaches for the field,
+ * it becomes the kit's `Select`, drawn in the palette instead of the
+ * platform's menu, with the value in an input of the same `name`; until then
+ * the native select is live, its choices reported. Both are the same box
+ * (height, width, border, inset), so the swap moves nothing.
  *
  * Inside a `Field`, its label names whichever control is rendered: the
  * `Field`'s id goes to the `<select>` first and to the trigger after.

package/dist/react/FormSelect.js

@@ -1,45 +1,91 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, NativeSelect, NativeSelectOption, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@evinvest/uikit";
-import { useRef, useSyncExternalStore } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn, NativeSelect, NativeSelectOption } from "@evinvest/uikit";
+import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { useFormSelectValue } from "./form-select-value.js";
+import { lazyPart } from "./lazy-part.js";
 const BOX = "relative inline-flex w-full";
-// The trigger's geometry matched to `NativeSelect`'s at each size: full width,
-// the same text size (16 px on phones, which keeps iOS from zooming).
-// The chevron at full strength, as the native select draws it: the kit's
-// trigger dims its own arrow.
-const TRIGGER = "w-full min-w-0 text-ink [&>svg]:opacity-100";
-const TRIGGER_TEXT = { sm: "text-base md:text-sm", md: "text-base md:text-sm", lg: "" };
+/** The scripted state, in a chunk of its own (`FormSelectKit`). */
+const KIT = lazyPart(() => import("./FormSelectKit.js").then(m => m.FormSelectKit));
 const subscribe = () => () => { };
 /** `false` on the server and while hydrating, `true` from the render after. */
 const useHydrated = () => useSyncExternalStore(subscribe, () => true, () => false);
 export function FormSelect(props) {
-    return _jsx(FormSelectView, { ...props, scripted: useHydrated() });
+    const hydrated = useHydrated();
+    const kit = useSyncExternalStore(KIT.subscribe, KIT.isLoaded, () => false);
+    return _jsx(FormSelectField, { ...props, hydrated: hydrated, kit: hydrated && kit });
 }
 /**
  * Both states on demand — for the widget gallery, which renders on the server
  * and would only ever see the native one. Not part of the package's surface.
  */
 export function FormSelectView({ scripted, ...props }) {
+    return _jsx(FormSelectField, { ...props, hydrated: scripted, kit: scripted });
+}
+/** Asks for the scripted state when the page has nothing better to do. */
+function whenIdle(run) {
+    if (typeof window.requestIdleCallback === "function") {
+        const handle = window.requestIdleCallback(run, { timeout: 2000 });
+        return () => window.cancelIdleCallback(handle);
+    }
+    const handle = window.setTimeout(run, 200);
+    return () => window.clearTimeout(handle);
+}
+/**
+ * The native select until the scripted one is here. `hydrated`: the page's
+ * script runs — the native select reports its choices and asks for the
+ * scripted state on idle, or sooner on the visitor's reach (a mouse over it,
+ * the focus). `kit`: the scripted state is loaded. A press before that opens
+ * the platform's list at once, as before the script: never a wait on a chunk.
+ */
+function FormSelectField({ hydrated, kit, ...props }) {
     const { name, options, placeholder, required, disabled, size = "md", id, className, classNames } = props;
     const initial = props.defaultValue ?? (placeholder !== undefined ? "" : (options[0]?.value ?? ""));
     const native = useRef(null);
     // The box, not the trigger: `SelectTrigger` keeps its own ref for placing the list.
     const box = useRef(null);
-    const state = useFormSelectValue({ initial, controlled: props.value, native, box, scripted, onValueChange: props.onValueChange });
+    // The native select has the focus — its own list may be open (a phone's
+    // picker): it stays until the focus leaves, rather than vanish under the finger.
+    const [focused, setFocused] = useState(false);
+    const scripted = kit && !focused;
+    const state = useFormSelectValue({ initial, controlled: props.value, native, box, live: hydrated, scripted, onValueChange: props.onValueChange });
     const hint = placeholder !== undefined ? { placeholder } : {};
     const aria = { "aria-describedby": props["aria-describedby"], "aria-invalid": props["aria-invalid"] || state.invalid || undefined };
-    if (!scripted) {
-        return (_jsx(NativeSelect, { ref: native, name: name, id: id, size: size, ...hint, required: required, disabled: disabled, 
-            // Uncontrolled even under `value`: before the script nothing could
-            // follow a change, and a pick made then must survive into the swap.
-            defaultValue: state.value, wrapperClassName: cn(BOX, className), className: classNames?.trigger, ...aria, children: options.map(o => (_jsx(NativeSelectOption, { value: o.value, children: o.label }, o.value))) }));
-    }
-    return (_jsxs("span", { ref: box, "data-slot": "form-select", className: cn(BOX, className), children: [_jsxs(Select, { value: state.value, onValueChange: state.choose, open: state.open, onOpenChange: state.setOpen, children: [_jsx(SelectTrigger, { id: id, size: size, disabled: disabled, "aria-required": required || undefined, className: cn(TRIGGER, TRIGGER_TEXT[size], classNames?.trigger), ...aria, children: _jsx(SelectValue, { ...hint }) }), _jsx(SelectContent, { className: classNames?.content, children: options.map(o => (_jsx(SelectItem, { value: o.value, className: cn(size === "lg" && "py-2.5 text-base", classNames?.item), children: o.label }, o.value))) })] }), required ? (
-            // Validated, so not `type="hidden"` (which the browser never checks);
-            // under the trigger, out of the tab order, the accessibility tree and
-            // the browser's autofill.
-            _jsx("input", { name: name, value: state.value, required: true, disabled: disabled, tabIndex: -1, "aria-hidden": "true", autoComplete: "off", onChange: () => { }, onInvalid: state.onInvalid, className: "pointer-events-none absolute inset-0 opacity-0" })) : (
-            // Nothing chosen posts nothing, as a native select on its disabled placeholder.
-            state.value !== "" && _jsx("input", { type: "hidden", name: name, value: state.value, disabled: disabled }))] }));
+    useEffect(() => (hydrated && !kit ? whenIdle(KIT.preload) : undefined), [hydrated, kit]);
+    // The native select is uncontrolled (see below): a value moved by the
+    // parent, or put back by a reset, is written into it here.
+    const written = useRef(state.value);
+    useLayoutEffect(() => {
+        if (written.current === state.value)
+            return;
+        written.current = state.value;
+        if (native.current && native.current.value !== state.value)
+            native.current.value = state.value;
+    }, [state.value]);
+    if (scripted)
+        return _jsx(KIT.Part, { field: props, box: box, value: state.value, choose: state.choose, open: state.open, setOpen: state.setOpen, onInvalid: state.onInvalid, aria: aria });
+    const live = hydrated
+        ? {
+            onChange: (e) => {
+                const picked = e.currentTarget.value;
+                state.choose(picked);
+                // Under a `value` the parent moves it, as on a controlled input.
+                if (props.value !== undefined)
+                    e.currentTarget.value = props.value;
+            },
+            onPointerEnter: (e) => {
+                if (e.pointerType === "mouse")
+                    KIT.preload();
+            },
+            onFocus: () => {
+                setFocused(true);
+                KIT.preload();
+            },
+            onBlur: () => setFocused(false),
+        }
+        : {};
+    return (_jsx(NativeSelect, { ref: native, name: name, id: id, size: size, ...hint, required: required, disabled: disabled, 
+        // Uncontrolled even under `value`: before the script nothing could
+        // follow a change, and a pick made then must survive into the swap.
+        defaultValue: state.value, wrapperClassName: cn(BOX, className), className: classNames?.trigger, ...aria, ...live, children: options.map(o => (_jsx(NativeSelectOption, { value: o.value, children: o.label }, o.value))) }));
 }

package/dist/react/FormSelectKit.d.ts

@@ -0,0 +1,24 @@
+import type { InvalidEvent, RefObject } from "react";
+import type { FormSelectProps } from "./FormSelect.js";
+/** What the scripted state is handed by `FormSelect`, which keeps the value across the swap. */
+export interface FormSelectKitProps {
+    field: FormSelectProps;
+    box: RefObject<HTMLSpanElement | null>;
+    value: string;
+    choose: (value: string) => void;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    onInvalid: (e: InvalidEvent<HTMLInputElement>) => void;
+    aria: {
+        "aria-describedby": string | undefined;
+        "aria-invalid": true | undefined;
+    };
+}
+/**
+ * `FormSelect` once scripted: the kit's `Select`, the list drawn in the
+ * palette, with the value in an input of the same `name`. A chunk of its own
+ * — the list's placing, dismissal and keys weigh more than the rest of the
+ * field — fetched once the page is idle, or as soon as the visitor reaches
+ * for the field.
+ */
+export declare function FormSelectKit({ field, box, value, choose, open, setOpen, onInvalid, aria }: FormSelectKitProps): import("react").JSX.Element;

package/dist/react/FormSelectKit.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@evinvest/uikit";
+const BOX = "relative inline-flex w-full";
+// The trigger's geometry matched to `NativeSelect`'s at each size: full width,
+// the same text size (16 px on phones, which keeps iOS from zooming).
+// The chevron at full strength, as the native select draws it: the kit's
+// trigger dims its own arrow.
+const TRIGGER = "w-full min-w-0 text-ink [&>svg]:opacity-100";
+const TRIGGER_TEXT = { sm: "text-base md:text-sm", md: "text-base md:text-sm", lg: "" };
+/**
+ * `FormSelect` once scripted: the kit's `Select`, the list drawn in the
+ * palette, with the value in an input of the same `name`. A chunk of its own
+ * — the list's placing, dismissal and keys weigh more than the rest of the
+ * field — fetched once the page is idle, or as soon as the visitor reaches
+ * for the field.
+ */
+export function FormSelectKit({ field, box, value, choose, open, setOpen, onInvalid, aria }) {
+    const { name, options, placeholder, required, disabled, size = "md", id, className, classNames } = field;
+    const hint = placeholder !== undefined ? { placeholder } : {};
+    return (_jsxs("span", { ref: box, "data-slot": "form-select", className: cn(BOX, className), children: [_jsxs(Select, { value: value, onValueChange: choose, open: open, onOpenChange: setOpen, children: [_jsx(SelectTrigger, { id: id, size: size, disabled: disabled, "aria-required": required || undefined, className: cn(TRIGGER, TRIGGER_TEXT[size], classNames?.trigger), ...aria, children: _jsx(SelectValue, { ...hint }) }), _jsx(SelectContent, { className: classNames?.content, children: options.map(o => (_jsx(SelectItem, { value: o.value, className: cn(size === "lg" && "py-2.5 text-base", classNames?.item), children: o.label }, o.value))) })] }), required ? (
+            // Validated, so not `type="hidden"` (which the browser never checks);
+            // under the trigger, out of the tab order, the accessibility tree and
+            // the browser's autofill.
+            _jsx("input", { name: name, value: value, required: true, disabled: disabled, tabIndex: -1, "aria-hidden": "true", autoComplete: "off", onChange: () => { }, onInvalid: onInvalid, className: "pointer-events-none absolute inset-0 opacity-0" })) : (
+            // Nothing chosen posts nothing, as a native select on its disabled placeholder.
+            value !== "" && _jsx("input", { type: "hidden", name: name, value: value, disabled: disabled }))] }));
+}

package/dist/react/LeadCapture.js

@@ -11,7 +11,7 @@ import { flowTextOf } from "../core/lead-capture-text.js";
 import { bookingOf } from "../core/booking/model.js";
 import { servedLocalities, storefrontOf } from "../core/place/types.js";
 import { ESTIMATE_UNKNOWN, estimateField, flowOf } from "../core/pricing/flow.js";
-import { labelOf } from "../core/pricing/validate.js";
+import { labelOf } from "../core/pricing/label.js";
 import { focusNext } from "./focus-next.js";
 import { LeadBooking } from "./LeadBooking.js";
 import { LeadCapturePriced } from "./LeadCapturePriced.js";

package/dist/react/LeadCaptureEstimate.js

@@ -5,7 +5,7 @@ import { useEffect, useMemo, useState } from "react";
 import { formatCents } from "../core/lead-capture-format.js";
 import { ESTIMATE_UNKNOWN, estimateField } from "../core/pricing/flow.js";
 import { priceOf } from "../core/pricing/price.js";
-import { labelOf } from "../core/pricing/validate.js";
+import { labelOf } from "../core/pricing/label.js";
 import { TileGroup } from "./LeadCaptureTiles.js";
 /**
  * The screens an estimate's questions take in `steps`, in order: one each,

package/dist/react/LeadCapturePrice.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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":

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";

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evinvest/kitstart",
-  "version": "0.18.0",
+  "version": "0.19.1",
   "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": {
@@ -113,7 +113,7 @@
     "@types/react-dom": "^19.3.0",
     "eslint": "^9.39.5",
     "jsdom": "^25.0.1",
-    "next": "^16.3.6",
+    "next": "^16.4.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "server-only": "^0.0.1",

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.18.0";
+    ev.url = "github:EV-invest/lib?ref=@evinvest/kitstart-v0.19.1";
     ev.inputs.v_flakes.follows = "v_flakes";
   };
 

package/template/package.json

@@ -19,11 +19,11 @@
   },
   "dependencies": {
     "@evinvest/analytics": "^0.4.0",
-    "@evinvest/i18n": "^0.9.0",
-    "@evinvest/kitstart": "^0.18.0",
+    "@evinvest/i18n": "^0.10.0",
+    "@evinvest/kitstart": "^0.19.0",
     "@evinvest/marketing": "^0.3.0",
-    "@evinvest/uikit": "^0.27.0",
-    "next": "16.3.6",
+    "@evinvest/uikit": "^0.29.0",
+    "next": "16.4.0",
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "server-only": "^0.0.1"
@@ -35,7 +35,7 @@
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "eslint": "^9.39.5",
-    "eslint-config-next": "16.3.6",
+    "eslint-config-next": "16.4.0",
     "steiger": "^0.6.0",
     "tailwindcss": "^4.3.3",
     "typescript": "5.9.3",