@evinvest/kitstart 0.2.0 → 0.3.0

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`, `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`, `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), `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 `tests/bundle_budget.txt`; 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.1.0"; # the version in package-lock.json
+inputs.ev.url = "github:EV-invest/lib?ref=@evinvest/kitstart-v0.2.0"; # the version in package-lock.json
 inputs.ev.inputs.v_flakes.follows = "v_flakes";
 
 landing = ev.lib.mkLanding {
@@ -98,7 +98,7 @@ the two must be one release. Pin the flake to the matching
 Structural only — where behaviour matters more than look. Marketing sections
 (hero, prices, reviews…) stay in the brand until two brands hold the same one.
 Each widget is a Server Component unless it needs the browser (`MapFacade`,
-`AnalyticsBoundary`), styled with the kit's token roles only, restyled through
+`AnalyticsBoundary`, `FormSelect`), styled with the kit's token roles only, restyled through
 `className` — and, where a brand needs geometry inside one (`Faq`, `CallBar`,
 `StatusScreen`, `PlaceDirectory`, `Coverage`), through its named parts:
 `classNames={{ list: "rounded-none", answer: "px-2" }}`, merged after the
@@ -115,6 +115,60 @@ honeypot the funnel reads; the visible fields are the brand's children.
 `StatusScreen` takes the brand's name and marks as props, so the client error
 boundary never imports the site config.
 
+### `FormSelect`: a choice that posts without JavaScript
+
+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`).
+
+```tsx
+<Field className="flex flex-col gap-2">
+  <FieldLabel>{t.quoteLabels.subject}</FieldLabel>
+  <FormSelect
+    name={LEAD.wire.subject}
+    size="lg"
+    defaultValue={LEAD.subjects[0]}
+    options={LEAD.subjects.map(s => ({ value: s, label: t.subjects[s] }))}
+  />
+</Field>
+```
+
+| Prop | |
+|---|---|
+| `name`, `options: { value, label }[]` | the posted field and its choices (labels are text) |
+| `defaultValue` | without it: empty under a `placeholder`, else the first option — the native rule |
+| `placeholder` | an empty, unpickable choice shown until one is made |
+| `required`, `disabled` | as on a `<select>`: required refuses the submit, disabled posts nothing |
+| `size` | `sm` · `md` · `lg` (the landing's) — the kit's form scale |
+| `id`, `aria-describedby`, `aria-invalid` | inside a `Field` the id comes from it: its `FieldLabel` names the `<select>` before hydration and the trigger after |
+| `className` · `classNames={{ trigger, content, item }}` | the shared box · the control in both states, the list, its rows |
+| `onValueChange` | the chosen value, after hydration |
+
+- **The value survives the swap.** A choice made in the native select before
+  the script arrived is read in the hydration commit; a form `reset` puts the
+  default back in both states. With nothing chosen (under a `placeholder`) it
+  posts nothing, as a native select on its disabled placeholder does.
+- **`required` still refuses the submit.** A `type="hidden"` input is never
+  validated, so under `required` the value rides in a transparent input under
+  the trigger, out of the tab order, the accessibility tree and autofill. An
+  invalid field's trigger takes `aria-invalid` (the error border). On a submit
+  — and only then — the form's first invalid field also takes focus with its
+  list open, where the browser's bubble would have pointed at nothing; a
+  script's `checkValidity()` marks it and moves nothing.
+- **Keyboard and screen readers** are the kit's `Select` (its README has the
+  focus pattern): the arrows open it, opening lands on the chosen option,
+  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).
+
 Tailwind v4 does not scan `node_modules`; the brand's `globals.css` names the
 package:
 

package/dist/react/FormSelect.d.ts

@@ -0,0 +1,45 @@
+import { type SelectTriggerSize } from "@evinvest/uikit";
+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.
+ *
+ * Inside a `Field`, its label names whichever control is rendered: the
+ * `Field`'s id goes to the `<select>` first and to the trigger after.
+ */
+export interface FormSelectOption {
+    value: string;
+    label: string;
+}
+/** `trigger`: the control in both states; `content` and `item`: the scripted list. */
+export type FormSelectPart = "trigger" | "content" | "item";
+export interface FormSelectProps {
+    name: string;
+    options: readonly FormSelectOption[];
+    /** Without it: empty under a `placeholder`, else the first option — a native select's own rule. */
+    defaultValue?: string | undefined;
+    /** An empty, unpickable choice shown until one is made. */
+    placeholder?: string | undefined;
+    required?: boolean | undefined;
+    disabled?: boolean | undefined;
+    size?: SelectTriggerSize | undefined;
+    id?: string | undefined;
+    /** The box both states share — what a layout sizes. */
+    className?: string | undefined;
+    classNames?: PartClassNames<FormSelectPart> | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-invalid"?: boolean | undefined;
+}
+export declare function FormSelect(props: FormSelectProps): import("react").JSX.Element;
+/**
+ * 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 declare function FormSelectView({ scripted, ...props }: FormSelectProps & {
+    scripted: boolean;
+}): import("react").JSX.Element;

package/dist/react/FormSelect.js

@@ -0,0 +1,42 @@
+"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 { useFormSelectValue } from "./form-select-value.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: "" };
+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() });
+}
+/**
+ * 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 }) {
+    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, native, box, 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, defaultValue: initial, 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: cn("min-w-(--select-trigger-width)", 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 }))] }));
+}

package/dist/react/StatusScreen.js

@@ -16,8 +16,5 @@ export function StatusScreen(props) {
     // A brand with no phone falls back to "home" rather than a dead button.
     const primary = action(status.primary) ?? action("home");
     const secondary = action(status.secondary);
-    return (_jsxs("div", { className: cn("relative flex min-h-screen flex-col bg-background text-ink", className), children: [_jsxs("header", { className: cn("relative flex flex-wrap items-center gap-x-4 gap-y-2 border-b border-border px-5 py-3 md:flex-nowrap md:gap-5 md:px-12 md:py-5", c?.header), children: [_jsx("a", { href: target.home, "aria-label": brandName, className: cn("shrink-0 text-ink", c?.logo), children: logo ?? _jsx("span", { className: "font-display text-lg font-bold md:text-xl", children: brandName }) }), _jsx("div", { className: "flex-1" }), _jsx(LangSwitch, { current: copy.locale, locales: locales, hrefs: target.langHrefs, ...(labels ? { labels } : {}), className: cn("order-last w-full text-sm font-medium text-ink-soft md:order-none md:w-auto", c?.lang) }), target.phone && (_jsx("a", { href: telHref(target.phone), className: cn("whitespace-nowrap font-display text-base font-bold text-primary-ink md:text-xl", c?.phone), children: target.phone }))] }), _jsxs("main", { className: cn("relative flex flex-1 flex-col items-center gap-5 px-5 py-12 text-center md:gap-6 md:py-24", c?.main), children: [mark, _jsx("p", { className: cn("text-xs font-medium tracking-widest text-primary-ink", c?.eyebrow), children: status.eyebrow }), _jsx("p", { className: partWithLeading("font-display text-8xl font-bold tracking-tight text-ink md:text-9xl", "leading-none", c?.code), children: status.code }), _jsxs("h1", { className: partWithLeading("font-display text-2xl font-bold text-ink md:text-4xl", "leading-snug", c?.headline), children: [status.headline[0], _jsx("span", { className: "text-primary-ink", children: status.headline[1] })] }), _jsx("p", { className: partWithLeading("max-w-2xl text-base text-ink-soft md:text-lg", "leading-relaxed", c?.body), children: status.body(f) }), _jsxs("div", { className: cn("flex flex-col gap-3.5 sm:flex-row", c?.actions), children: [primary && (_jsx(Button, { href: primary.href, size: "xl", className: cn(buttonClassName, c?.primaryButton), children: primary.label })), secondary && secondary.href !== primary?.href && (
-                            // The kit's outline border is `--border`, 14 % ink: 1.4:1 on the
-                            // dark polarity. Half ink clears 3:1 for a control on either one.
-                            _jsx(Button, { href: secondary.href, size: "xl", variant: "outline", className: cn("border-ink/50", buttonClassName, c?.secondaryButton), children: secondary.label }))] }), _jsx("ul", { className: cn("flex flex-col items-center gap-3 text-sm sm:flex-row sm:gap-6", c?.strip), children: t.statusStrip.map(term => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx(Check, {}), _jsx("span", { className: "font-medium text-ink-soft", children: term })] }, term))) })] }), _jsx("footer", { className: cn("relative border-t border-border px-5 py-6 text-xs uppercase tracking-wider text-ink-soft md:px-12 md:py-7", c?.footer), children: _jsx("p", { children: t.facts(f).join(" · ") }) })] }));
+    return (_jsxs("div", { className: cn("relative flex min-h-screen flex-col bg-background text-ink", className), children: [_jsxs("header", { className: cn("relative flex flex-wrap items-center gap-x-4 gap-y-2 border-b border-border px-5 py-3 md:flex-nowrap md:gap-5 md:px-12 md:py-5", c?.header), children: [_jsx("a", { href: target.home, "aria-label": brandName, className: cn("shrink-0 text-ink", c?.logo), children: logo ?? _jsx("span", { className: "font-display text-lg font-bold md:text-xl", children: brandName }) }), _jsx("div", { className: "flex-1" }), _jsx(LangSwitch, { current: copy.locale, locales: locales, hrefs: target.langHrefs, ...(labels ? { labels } : {}), className: cn("order-last w-full text-sm font-medium text-ink-soft md:order-none md:w-auto", c?.lang) }), target.phone && (_jsx("a", { href: telHref(target.phone), className: cn("whitespace-nowrap font-display text-base font-bold text-primary-ink md:text-xl", c?.phone), children: target.phone }))] }), _jsxs("main", { className: cn("relative flex flex-1 flex-col items-center gap-5 px-5 py-12 text-center md:gap-6 md:py-24", c?.main), children: [mark, _jsx("p", { className: cn("text-xs font-medium tracking-widest text-primary-ink", c?.eyebrow), children: status.eyebrow }), _jsx("p", { className: partWithLeading("font-display text-8xl font-bold tracking-tight text-ink md:text-9xl", "leading-none", c?.code), children: status.code }), _jsxs("h1", { className: partWithLeading("font-display text-2xl font-bold text-ink md:text-4xl", "leading-snug", c?.headline), children: [status.headline[0], _jsx("span", { className: "text-primary-ink", children: status.headline[1] })] }), _jsx("p", { className: partWithLeading("max-w-2xl text-base text-ink-soft md:text-lg", "leading-relaxed", c?.body), children: status.body(f) }), _jsxs("div", { className: cn("flex flex-col gap-3.5 sm:flex-row", c?.actions), children: [primary && (_jsx(Button, { href: primary.href, size: "xl", className: cn(buttonClassName, c?.primaryButton), children: primary.label })), secondary && secondary.href !== primary?.href && (_jsx(Button, { href: secondary.href, size: "xl", variant: "outline", className: cn(buttonClassName, c?.secondaryButton), children: secondary.label }))] }), _jsx("ul", { className: cn("flex flex-col items-center gap-3 text-sm sm:flex-row sm:gap-6", c?.strip), children: t.statusStrip.map(term => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx(Check, {}), _jsx("span", { className: "font-medium text-ink-soft", children: term })] }, term))) })] }), _jsx("footer", { className: cn("relative border-t border-border px-5 py-6 text-xs uppercase tracking-wider text-ink-soft md:px-12 md:py-7", c?.footer), children: _jsx("p", { children: t.facts(f).join(" · ") }) })] }));
 }

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

@@ -0,0 +1,20 @@
+import { type InvalidEvent, type RefObject } from "react";
+/**
+ * The value `FormSelect` posts, across the swap from the native select and
+ * through the form's own life: a reset, and a required check that points at
+ * the kit's trigger instead of an input nobody sees.
+ */
+export declare function useFormSelectValue(opts: {
+    initial: string;
+    native: RefObject<HTMLSelectElement | null>;
+    box: RefObject<HTMLElement | null>;
+    scripted: boolean;
+    onValueChange: ((value: string) => void) | undefined;
+}): {
+    value: string;
+    choose: (next: string) => void;
+    invalid: boolean;
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    onInvalid: (e: InvalidEvent<HTMLInputElement>) => void;
+};

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

@@ -0,0 +1,72 @@
+"use client";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+/**
+ * The value `FormSelect` posts, across the swap from the native select and
+ * through the form's own life: a reset, and a required check that points at
+ * the kit's trigger instead of an input nobody sees.
+ */
+export function useFormSelectValue(opts) {
+    const { initial, native, box, scripted, onValueChange } = opts;
+    const [value, setValue] = useState(initial);
+    const [invalid, setInvalid] = useState(false);
+    const [open, setOpen] = useState(false);
+    const initialRef = useRef(initial);
+    initialRef.current = initial;
+    // 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.
+    useLayoutEffect(() => {
+        if (native.current)
+            setValue(native.current.value);
+    }, [native]);
+    // A form reset puts a native select back on its default; so does this.
+    // Interactive validation — the browser's own, on a submit — is told apart
+    // 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)
+            return;
+        const reset = () => setValue(initialRef.current);
+        // On the document, not the form: a submit button may sit outside it
+        // (`form="…"`), and the click may land on an icon inside the button.
+        const submit = (e) => {
+            const control = e.target?.closest?.("button, input");
+            if (!(control instanceof HTMLButtonElement || control instanceof HTMLInputElement))
+                return;
+            if (control.form !== form || control.type !== "submit")
+                return;
+            submitting.current = true;
+            // The invalid events of this submit fire before the task ends.
+            setTimeout(() => (submitting.current = false), 0);
+        };
+        form.addEventListener("reset", reset);
+        document.addEventListener("click", submit, true);
+        return () => {
+            form.removeEventListener("reset", reset);
+            document.removeEventListener("click", submit, true);
+        };
+    }, [box, scripted]);
+    const choose = (next) => {
+        setValue(next);
+        setInvalid(false);
+        onValueChange?.(next);
+    };
+    // The browser's bubble would point at an input nobody sees: the trigger
+    // takes the error state instead. On a submit, the form's first invalid
+    // field also takes focus with its list open, where the bubble would have
+    // been; a script's quiet `checkValidity()` moves nothing.
+    const onInvalid = (e) => {
+        e.preventDefault();
+        setInvalid(true);
+        if (!submitting.current)
+            return;
+        // `validity`, not `:invalid`: jsdom answers that selector by firing `invalid` again.
+        const first = Array.from(e.currentTarget.form?.elements ?? []).find(el => "validity" in el && !el.validity.valid);
+        if (first === e.currentTarget) {
+            box.current?.querySelector("button")?.focus();
+            setOpen(true);
+        }
+    };
+    return { value, choose, invalid, open, setOpen, onInvalid };
+}

package/dist/react/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * `@evinvest/kitstart/react` — the structural widgets every landing shares,
  * where behaviour matters more than look. Server components by default; only
- * `MapFacade` and `AnalyticsBoundary` are client modules, each its own file
+ * `MapFacade`, `AnalyticsBoundary` and `FormSelect` are client modules, each its own file
  * with its own `"use client"`, so a page pays for what it renders.
  *
  * Styled with the kit's token roles only (`text-ink`, `border-border`,
@@ -15,6 +15,7 @@ export { AreaChips } from "./AreaChips.js";
 export { CallBar, type CallBarPart, type CallBarProps } from "./CallBar.js";
 export { Coverage, type CoveragePart, type CoverageProps } from "./Coverage.js";
 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 { MapFacade, type MapFacadePart, type MapFacadeProps } from "./MapFacade.js";
 export { PlaceDirectory, type PlaceDirectoryPart, type PlaceDirectoryProps } from "./PlaceDirectory.js";

package/dist/react/index.js

@@ -1,7 +1,7 @@
 /**
  * `@evinvest/kitstart/react` — the structural widgets every landing shares,
  * where behaviour matters more than look. Server components by default; only
- * `MapFacade` and `AnalyticsBoundary` are client modules, each its own file
+ * `MapFacade`, `AnalyticsBoundary` and `FormSelect` are client modules, each its own file
  * with its own `"use client"`, so a page pays for what it renders.
  *
  * Styled with the kit's token roles only (`text-ink`, `border-border`,
@@ -15,6 +15,7 @@ export { AreaChips } from "./AreaChips.js";
 export { CallBar } from "./CallBar.js";
 export { Coverage } from "./Coverage.js";
 export { Faq } from "./Faq.js";
+export { FormSelect } from "./FormSelect.js";
 export { LangSwitch, withLang } from "./LangSwitch.js";
 export { MapFacade } from "./MapFacade.js";
 export { PlaceDirectory } from "./PlaceDirectory.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evinvest/kitstart",
-  "version": "0.2.0",
+  "version": "0.3.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": {
@@ -80,7 +80,7 @@
     "@evinvest/analytics": ">=0.3.0 <1",
     "@evinvest/i18n": ">=0.9.0 <1",
     "@evinvest/marketing": ">=0.3.0 <1",
-    "@evinvest/uikit": ">=0.20.0 <1",
+    "@evinvest/uikit": ">=0.21.0 <1",
     "next": "^16",
     "react": "^19",
     "server-only": "*"

package/template/README.md

@@ -22,6 +22,9 @@ launch — `noindex` everywhere until `assets/card.toml` gets a `site`.
 8. `src/entities/content`: `Text extends CoreText`, one object per language,
    checked with `satisfies`. Every word on a page comes from here.
 9. `src/shared/config/lead.ts`: what the form asks (`subjects`, `wire`, `extras`).
+   A choice in the form is `FormSelect`: a native `<select>` until the page
+   hydrates (the form posts without JavaScript), the kit's list after — never
+   a bare `NativeSelect`, whose popup is the platform's menu.
 10. `src/views/`: the brand's sections around the package's widgets.
 11. Tests: `tests/contract.test.ts` runs the landing contract; add the copy's
     own, the e2e sections (`tests/e2e`, baselines from CI on Linux) and set

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

package/template/package.json

@@ -20,9 +20,9 @@
   "dependencies": {
     "@evinvest/analytics": "^0.3.0",
     "@evinvest/i18n": "^0.9.0",
-    "@evinvest/kitstart": "^0.1.0",
+    "@evinvest/kitstart": "^0.2.0",
     "@evinvest/marketing": "^0.3.0",
-    "@evinvest/uikit": "^0.20.0",
+    "@evinvest/uikit": "^0.21.0",
     "next": "16.3.6",
     "react": "19.3.0",
     "react-dom": "19.3.0",

package/template/src/views/home/ui/PlaceHome.tsx

@@ -7,10 +7,9 @@ import {
   Faq,
   Field,
   FieldLabel,
+  FormSelect,
   Input,
   JsonLd,
-  NativeSelect,
-  NativeSelectOption,
   PHONE_INPUT_PROPS,
   QuoteFormShell,
   Section,
@@ -42,13 +41,12 @@ export function PlaceHome({ view, copy, renderedAt }: { view: PlaceView<Locale>;
             <p className="font-display text-2xl font-bold text-ink">{t.quoteForm.title}</p>
             <Field className="flex flex-col gap-2">
               <FieldLabel>{t.quoteLabels.subject}</FieldLabel>
-              <NativeSelect name={LEAD.wire.subject} size="lg" defaultValue={LEAD.subjects[0]}>
-                {LEAD.subjects.map(s => (
-                  <NativeSelectOption key={s} value={s}>
-                    {t.subjects[s]}
-                  </NativeSelectOption>
-                ))}
-              </NativeSelect>
+              <FormSelect
+                name={LEAD.wire.subject}
+                size="lg"
+                defaultValue={LEAD.subjects[0]}
+                options={LEAD.subjects.map(s => ({ value: s, label: t.subjects[s] }))}
+              />
             </Field>
             <Field className="flex flex-col gap-2">
               <FieldLabel>{t.quoteLabels.locality}</FieldLabel>

package/template/tests/e2e/quote-form.spec.ts

@@ -0,0 +1,82 @@
+import { expect, test, type Page } from "@playwright/test";
+
+// The quote form's contract with the visitor: it posts before any script
+// (the one standing in water may be on a bad connection), and once the script
+// is there the choice is the kit's list, not the platform's menu — in the
+// same box, so nothing moves when one becomes the other.
+const SUBJECT = "Prestation";
+
+async function fillAndSend(page: Page) {
+  await page.getByLabel("Ville ou code postal").fill("75011");
+  await page.getByLabel("Mobile").fill("0612345678");
+  await page.getByRole("button", { name: "Recevoir le prix" }).click();
+}
+
+test.describe("without JavaScript", () => {
+  // Reduced motion drops the page's smooth scroll, which without a script
+  // Playwright never sees settle before it clicks.
+  test.use({ javaScriptEnabled: false, reducedMotion: "reduce" });
+
+  test("the form posts the native select's value", async ({ page }) => {
+    await page.goto("/fr#quote");
+    const select = page.locator("#quote select[name=subject]");
+    await expect(select).toBeVisible();
+    await expect(page.getByLabel(SUBJECT)).toHaveJSProperty("tagName", "SELECT");
+    await select.selectOption("deep");
+    const posted = page.waitForRequest(r => r.method() === "POST" && new URL(r.url()).pathname === "/quote");
+    await fillAndSend(page);
+    expect(new URLSearchParams((await posted).postData() ?? "").get("subject")).toBe("deep");
+    await expect(page).toHaveURL(/\/fr\/thanks$/);
+  });
+});
+
+test.describe("with JavaScript", () => {
+  test("the choice is the kit's list, and the form posts it", async ({ page }) => {
+    await page.goto("/fr#quote");
+    const trigger = page.getByRole("combobox", { name: SUBJECT });
+    await expect(trigger).toBeVisible();
+    await expect(page.locator("#quote select")).toHaveCount(0);
+    await trigger.click();
+    const list = page.getByRole("listbox");
+    await expect(list).toBeVisible();
+    await list.getByRole("option", { name: "Grand ménage" }).click();
+    await expect(list).toBeHidden();
+    await expect(trigger).toHaveText("Grand ménage");
+    const posted = page.waitForRequest(r => r.method() === "POST" && new URL(r.url()).pathname === "/quote");
+    await fillAndSend(page);
+    expect(new URLSearchParams((await posted).postData() ?? "").get("subject")).toBe("deep");
+    await expect(page).toHaveURL(/\/fr\/thanks$/);
+  });
+
+  test("works from the keyboard", async ({ page }) => {
+    await page.goto("/fr#quote");
+    const trigger = page.getByRole("combobox", { name: SUBJECT });
+    await trigger.focus();
+    await page.keyboard.press("ArrowDown");
+    await expect(page.getByRole("option", { name: "Ménage courant" })).toBeFocused();
+    await page.keyboard.press("ArrowDown");
+    await page.keyboard.press("Enter");
+    await expect(page.getByRole("listbox")).toBeHidden();
+    await expect(trigger).toBeFocused();
+    await expect(trigger).toHaveText("Grand ménage");
+    await page.keyboard.press("Tab");
+    await expect(page.getByLabel("Ville ou code postal")).toBeFocused();
+  });
+});
+
+test("the field is the same box before and after hydration", async ({ browser }) => {
+  const box = async (javaScriptEnabled: boolean) => {
+    const context = await browser.newContext({ javaScriptEnabled });
+    const page = await context.newPage();
+    await page.goto("/fr#quote");
+    const control = javaScriptEnabled ? page.getByRole("combobox", { name: SUBJECT }) : page.locator("#quote select[name=subject]");
+    await expect(control).toBeVisible();
+    const rect = await control.evaluate(el => {
+      const r = el.getBoundingClientRect();
+      return { width: r.width, height: r.height, x: r.x, border: getComputedStyle(el).borderTopWidth, radius: getComputedStyle(el).borderTopLeftRadius };
+    });
+    await context.close();
+    return rect;
+  };
+  expect(await box(true)).toEqual(await box(false));
+});