@dataemergencia/emergency 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -763,6 +763,7 @@ function createEmergencyStore(config) {
 		lastError: null,
 		geolocation: null,
 		geolocationError: null,
+		contactPhone: null,
 		realtimeStatus: "idle",
 		abortResult: null,
 		simulationResult: null,
@@ -1205,7 +1206,8 @@ function createEmergencyController(deps) {
 		patch({
 			panelOpen: false,
 			abortConfirmation: false,
-			simulationConfirmation: false
+			simulationConfirmation: false,
+			contactPhone: null
 		});
 		events.emit("panel:closed", { reason });
 	}
@@ -1254,6 +1256,7 @@ function createEmergencyController(deps) {
 			lastError: null,
 			geolocation: null,
 			geolocationError: null,
+			contactPhone: null,
 			realtimeStatus: "idle",
 			abortResult: null,
 			simulationResult: null,
@@ -1295,7 +1298,8 @@ function createEmergencyController(deps) {
 					geolocationError: null,
 					...state.geolocationError !== null || state.abortResult?.ok === false || state.simulationResult?.ok === false || state.phase.kind === "ready" && state.lastError !== null ? { lastError: null } : {}
 				});
-			}
+			},
+			setContactPhone: (phone) => patch({ contactPhone: phone })
 		},
 		store,
 		events
@@ -1526,6 +1530,11 @@ const paths = {
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 7h.01" })
 	] }),
 	"arrow-left": /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M19 12H5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m12 19-7-7 7-7" })] }),
+	"map-pin": /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+		cx: "12",
+		cy: "10",
+		r: "2.5"
+	})] }),
 	"credit-card-plus": /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 18H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5" }),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 12h.01" }),
@@ -1603,6 +1612,7 @@ var panel_module_default = {
 	"emergency-panel": "de-emergency-emergency-panel-nA5Hwa",
 	"emergency-panel__availability-region": "de-emergency-emergency-panel__availability-region-nA5Hwa",
 	"emergency-panel__body": "de-emergency-emergency-panel__body-nA5Hwa",
+	"emergency-panel__body--pre-emergency": "de-emergency-emergency-panel__body--pre-emergency-nA5Hwa",
 	"emergency-panel__body--pricing": "de-emergency-emergency-panel__body--pricing-nA5Hwa",
 	"emergency-panel__body-split": "de-emergency-emergency-panel__body-split-nA5Hwa",
 	"emergency-panel__body-split--with-availability": "de-emergency-emergency-panel__body-split--with-availability-nA5Hwa",
@@ -1613,18 +1623,35 @@ var panel_module_default = {
 	"emergency-panel__button--simulation": "de-emergency-emergency-panel__button--simulation-nA5Hwa",
 	"emergency-panel__close-button": "de-emergency-emergency-panel__close-button-nA5Hwa",
 	"emergency-panel__close-icon": "de-emergency-emergency-panel__close-icon-nA5Hwa",
+	"emergency-panel__divider": "de-emergency-emergency-panel__divider-nA5Hwa",
 	"emergency-panel__footer": "de-emergency-emergency-panel__footer-nA5Hwa",
+	"emergency-panel__footer--single": "de-emergency-emergency-panel__footer--single-nA5Hwa",
 	"emergency-panel__header": "de-emergency-emergency-panel__header-nA5Hwa",
+	"emergency-panel__header--close-only": "de-emergency-emergency-panel__header--close-only-nA5Hwa",
 	"emergency-panel__prompt-region": "de-emergency-emergency-panel__prompt-region-nA5Hwa",
+	"emergency-panel__sr-only": "de-emergency-emergency-panel__sr-only-nA5Hwa",
 	"emergency-panel__title": "de-emergency-emergency-panel__title-nA5Hwa",
 	"emergency-panel--hidden": "de-emergency-emergency-panel--hidden-nA5Hwa",
+	"emergency-pre-emergency": "de-emergency-emergency-pre-emergency-nA5Hwa",
+	"emergency-pre-emergency__error": "de-emergency-emergency-pre-emergency__error-nA5Hwa",
+	"emergency-pre-emergency__form": "de-emergency-emergency-pre-emergency__form-nA5Hwa",
+	"emergency-pre-emergency__input": "de-emergency-emergency-pre-emergency__input-nA5Hwa",
+	"emergency-pre-emergency__input--area-code": "de-emergency-emergency-pre-emergency__input--area-code-nA5Hwa",
+	"emergency-pre-emergency__input--invalid": "de-emergency-emergency-pre-emergency__input--invalid-nA5Hwa",
+	"emergency-pre-emergency__input--number": "de-emergency-emergency-pre-emergency__input--number-nA5Hwa",
+	"emergency-pre-emergency__input--valid": "de-emergency-emergency-pre-emergency__input--valid-nA5Hwa",
+	"emergency-pre-emergency__label": "de-emergency-emergency-pre-emergency__label-nA5Hwa",
+	"emergency-pre-emergency__notice": "de-emergency-emergency-pre-emergency__notice-nA5Hwa",
+	"emergency-pre-emergency__notice-icon": "de-emergency-emergency-pre-emergency__notice-icon-nA5Hwa",
+	"emergency-pre-emergency__notice-text": "de-emergency-emergency-pre-emergency__notice-text-nA5Hwa",
+	"emergency-pre-emergency__phone-row": "de-emergency-emergency-pre-emergency__phone-row-nA5Hwa",
 	"emergency-pricing": "de-emergency-emergency-pricing-nA5Hwa",
 	"emergency-pricing__badge": "de-emergency-emergency-pricing__badge-nA5Hwa",
-	"emergency-pricing__footnote": "de-emergency-emergency-pricing__footnote-nA5Hwa",
 	"emergency-pricing__heading": "de-emergency-emergency-pricing__heading-nA5Hwa",
 	"emergency-pricing__package": "de-emergency-emergency-pricing__package-nA5Hwa",
 	"emergency-pricing__package--highlighted": "de-emergency-emergency-pricing__package--highlighted-nA5Hwa",
 	"emergency-pricing__package-caption": "de-emergency-emergency-pricing__package-caption-nA5Hwa",
+	"emergency-pricing__package-footnote": "de-emergency-emergency-pricing__package-footnote-nA5Hwa",
 	"emergency-pricing__package-header": "de-emergency-emergency-pricing__package-header-nA5Hwa",
 	"emergency-pricing__package-label": "de-emergency-emergency-pricing__package-label-nA5Hwa",
 	"emergency-pricing__package-name": "de-emergency-emergency-pricing__package-name-nA5Hwa",
@@ -1879,11 +1906,12 @@ function useScreenNavigation() {
 }
 
 // src/react/components/EmergencyHeader/index.tsx
-function EmergencyHeader({ titleId, onClose, title = copy.panelLabel, onBack }) {
+function EmergencyHeader({ titleId, onClose, title = copy.panelLabel, onBack, variant = "default" }) {
+	const closeOnly = variant === "close-only";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
-		className: cls("emergency-panel__header"),
+		className: cls("emergency-panel__header", closeOnly && "emergency-panel__header--close-only"),
 		children: [
-			onBack ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			onBack && !closeOnly ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				className: cls("emergency-panel__close-button"),
 				"aria-label": copy.back,
@@ -1894,7 +1922,7 @@ function EmergencyHeader({ titleId, onClose, title = copy.panelLabel, onBack })
 				})
 			}) : null,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-				className: cls("emergency-panel__title"),
+				className: cls("emergency-panel__title", closeOnly && "emergency-panel__sr-only"),
 				id: titleId,
 				tabIndex: -1,
 				children: title
@@ -1976,6 +2004,182 @@ function DetailsScreen({ titleId, onClose }) {
 	});
 }
 
+// src/core/phone.ts
+const VENEZUELA_DIALLING_CODE = "+58";
+const VENEZUELAN_MOBILE_PATTERN = /^4\d{9}$/;
+function normalizeVenezuelanPhone(input) {
+	return input.replace(/\D/g, "").replace(/^0+/, "");
+}
+function formatVenezuelanPhone(input) {
+	const digits = normalizeVenezuelanPhone(input).slice(0, 10);
+	if (digits.length <= 3) return digits;
+	return `${digits.slice(0, 3)} ${digits.slice(3)}`;
+}
+function isValidVenezuelanPhone(input) {
+	return VENEZUELAN_MOBILE_PATTERN.test(normalizeVenezuelanPhone(input));
+}
+function toVenezuelanE164(input) {
+	const digits = normalizeVenezuelanPhone(input);
+	if (!VENEZUELAN_MOBILE_PATTERN.test(digits)) return null;
+	return `${"+58"}${digits}`;
+}
+
+// src/react/components/EmergencyFooter/index.tsx
+function EmergencyFooter(props) {
+	const { active, busy, aborting, feedbackVisible, showSimulation = true, emergencyDisabled = false, onActivate, onRequestAbort, onRequestSimulation } = props;
+	if (active) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
+		className: cls("emergency-panel__footer"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			className: cls("emergency-status__abort-btn"),
+			"aria-label": copy.abort,
+			disabled: aborting || feedbackVisible,
+			onClick: onRequestAbort,
+			children: [copy.abort, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "alert-triangle" })]
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
+		className: cls("emergency-panel__footer", !showSimulation && "emergency-panel__footer--single"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			className: cls("emergency-panel__button", "emergency-panel__button--emergency"),
+			"aria-label": copy.emergencyAria,
+			disabled: busy || feedbackVisible || emergencyDisabled,
+			onClick: onActivate,
+			children: [copy.emergency, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "emergency" })]
+		}), showSimulation ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			className: cls("emergency-panel__button", "emergency-panel__button--simulation"),
+			"aria-label": copy.testAria,
+			disabled: busy || feedbackVisible,
+			onClick: onRequestSimulation,
+			children: [copy.test, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "list-check" })]
+		}) : null]
+	});
+}
+
+// src/react/screens/pre-emergency/copy.ts
+const preEmergencyCopy = {
+	title: "Pre-emergencia",
+	permissionNotice: "Debes autorizar todos los permisos de ubicación",
+	phoneLabel: "Indique su número de teléfono",
+	phonePlaceholder: "Ej. 0412 000 0000",
+	areaCodeLabel: "Código de país",
+	areaCode: "+58",
+	invalidPhone: "Ingresa un número móvil venezolano válido. Ej. 412 1301234"
+};
+
+// src/react/screens/pre-emergency/index.tsx
+function PreEmergencyScreen(props) {
+	const { back } = useScreenNavigation();
+	const phoneId = (0, react.useId)();
+	const errorId = `${phoneId}-error`;
+	const permissionId = `${phoneId}-permission`;
+	const [digits, setDigits] = (0, react.useState)("");
+	const [touched, setTouched] = (0, react.useState)(false);
+	const valid = isValidVenezuelanPhone(digits);
+	const invalid = touched && digits.length > 0 && !valid;
+	const handleChange = (event) => {
+		const next = normalizeVenezuelanPhone(event.target.value).slice(0, 10);
+		setDigits(next);
+	};
+	const handleSubmit = () => {
+		setTouched(true);
+		if (!valid) return;
+		const phone = toVenezuelanE164(digits);
+		if (phone === null) return;
+		props.onSetContactPhone(phone);
+		props.onActivate();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyScreenLayout, {
+		screen: "pre-emergency",
+		titleId: props.titleId,
+		bodyClassName: "emergency-panel__body--pre-emergency",
+		header: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyHeader, {
+			titleId: props.titleId,
+			title: preEmergencyCopy.title,
+			onClose: () => props.onClose("close"),
+			onBack: back
+		}),
+		footer: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyFooter, {
+			active: props.active,
+			busy: props.busy,
+			aborting: props.aborting,
+			feedbackVisible: props.feedbackVisible,
+			emergencyDisabled: !valid,
+			showSimulation: false,
+			onActivate: handleSubmit,
+			onRequestAbort: props.onRequestAbort,
+			onRequestSimulation: props.onRequestSimulation
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: cls("emergency-pre-emergency"),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				role: "note",
+				"aria-labelledby": permissionId,
+				className: cls("emergency-pre-emergency__notice"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+					name: "map-pin",
+					className: cls("emergency-pre-emergency__notice-icon")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					id: permissionId,
+					className: cls("emergency-pre-emergency__notice-text"),
+					children: preEmergencyCopy.permissionNotice
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+				className: cls("emergency-pre-emergency__form"),
+				noValidate: true,
+				onSubmit: (event) => {
+					event.preventDefault();
+					handleSubmit();
+				},
+				onKeyDown: (event) => {
+					if (event.key === "Enter") {
+						event.preventDefault();
+						handleSubmit();
+					}
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+						htmlFor: phoneId,
+						className: cls("emergency-pre-emergency__label"),
+						children: preEmergencyCopy.phoneLabel
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: cls("emergency-pre-emergency__phone-row"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "tel",
+							"aria-label": preEmergencyCopy.areaCodeLabel,
+							className: cls("emergency-pre-emergency__input", "emergency-pre-emergency__input--area-code", valid && "emergency-pre-emergency__input--valid"),
+							value: preEmergencyCopy.areaCode,
+							disabled: true,
+							readOnly: true
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							id: phoneId,
+							type: "tel",
+							inputMode: "tel",
+							autoComplete: "tel-national",
+							placeholder: preEmergencyCopy.phonePlaceholder,
+							className: cls("emergency-pre-emergency__input", "emergency-pre-emergency__input--number", valid && "emergency-pre-emergency__input--valid", invalid && "emergency-pre-emergency__input--invalid"),
+							value: formatVenezuelanPhone(digits),
+							"aria-invalid": invalid,
+							"aria-describedby": invalid ? errorId : void 0,
+							onChange: handleChange,
+							onBlur: () => setTouched(true)
+						})]
+					}),
+					invalid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						id: errorId,
+						role: "alert",
+						className: cls("emergency-pre-emergency__error"),
+						children: preEmergencyCopy.invalidPhone
+					}) : null
+				]
+			})]
+		})
+	});
+}
+
 // src/react/components/icons/paramedical-mark.tsx
 /**
 * Neutral inline illustration used by the idle panel.
@@ -2447,13 +2651,16 @@ function EmergencyBody(props) {
 	const idle = !active && !loading && !showingFeedback && error === null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: cls("emergency-panel__body-split", idle && "emergency-panel__body-split--with-availability"),
-		children: [idle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		children: [idle ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: cls("emergency-panel__availability-region"),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Availability, {
 				onRecharge,
 				onDetails
 			})
-		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {
+			className: cls("emergency-panel__divider"),
+			"aria-hidden": "true"
+		})] }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: cls("emergency-panel__prompt-region"),
 			children: [
 				!loading && !showingFeedback ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2494,48 +2701,17 @@ function EmergencyBody(props) {
 	});
 }
 
-// src/react/components/EmergencyFooter/index.tsx
-function EmergencyFooter(props) {
-	const { active, busy, aborting, feedbackVisible, onActivate, onRequestAbort, onRequestSimulation } = props;
-	if (active) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
-		className: cls("emergency-panel__footer"),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-			type: "button",
-			className: cls("emergency-status__abort-btn"),
-			"aria-label": copy.abort,
-			disabled: aborting || feedbackVisible,
-			onClick: onRequestAbort,
-			children: [copy.abort, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "alert-triangle" })]
-		})
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
-		className: cls("emergency-panel__footer"),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-			type: "button",
-			className: cls("emergency-panel__button", "emergency-panel__button--emergency"),
-			"aria-label": copy.emergencyAria,
-			disabled: busy || feedbackVisible,
-			onClick: onActivate,
-			children: [copy.emergency, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "emergency" })]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-			type: "button",
-			className: cls("emergency-panel__button", "emergency-panel__button--simulation"),
-			"aria-label": copy.testAria,
-			disabled: busy || feedbackVisible,
-			onClick: onRequestSimulation,
-			children: [copy.test, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "list-check" })]
-		})]
-	});
-}
-
 // src/react/screens/primary/index.tsx
 function PrimaryScreen(props) {
 	const { navigate } = useScreenNavigation();
+	const idle = !props.active && !props.loading && !props.feedbackVisible && props.error === null;
+	const needsContactPhone = props.contactPhone === null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyScreenLayout, {
 		screen: "primary",
 		titleId: props.titleId,
 		header: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyHeader, {
 			titleId: props.titleId,
+			variant: idle ? "close-only" : "default",
 			onClose: () => props.onClose("close")
 		}),
 		footer: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyFooter, {
@@ -2543,7 +2719,7 @@ function PrimaryScreen(props) {
 			busy: props.busy,
 			aborting: props.aborting,
 			feedbackVisible: props.feedbackVisible,
-			onActivate: props.onActivate,
+			onActivate: needsContactPhone ? () => navigate("pre-emergency") : props.onActivate,
 			onRequestAbort: props.onRequestAbort,
 			onRequestSimulation: props.onRequestSimulation
 		}),
@@ -2577,7 +2753,7 @@ const pricingCopy = {
 	chosen: "Seleccionado",
 	whatsapp: "de WhatsApp",
 	rounds: "rondas de alerta",
-	perMessage: "por mensaje + IVA",
+	perMessage: "IVA Incluido",
 	footnote: "Rondas calculadas con 3 contactos de emergencia. Válidas para pruebas y emergencias."
 };
 
@@ -2591,17 +2767,16 @@ const PRICING_PACKAGES = [{
 	label: "PAQUETE 1",
 	messages: 100,
 	priceLabel: "$7",
-	priceCaption: "IVA incluido",
-	perMessageLabel: "$0.06",
+	priceCaption: "IVA incluído",
+	perMessageLabel: "$0.07",
 	highlighted: false
 }, {
 	id: "package-2",
 	label: "PAQUETE 2",
 	messages: 200,
 	priceLabel: "12$",
-	priceNote: "($10 + IVA)",
-	priceCaption: "IVA incluido",
-	perMessageLabel: "$0.05",
+	priceCaption: "IVA incluído",
+	perMessageLabel: "$0.06",
 	highlighted: true,
 	badge: "MEJOR VALOR"
 }];
@@ -2678,6 +2853,10 @@ function PackageCard({ pkg, selected, onSelect }) {
 					})
 				]
 			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: cls("emergency-pricing__package-footnote"),
+				children: pricingCopy.footnote
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				className: cls("emergency-pricing__select"),
@@ -2706,30 +2885,23 @@ function PricingScreen(props) {
 		footer: null,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: cls("emergency-pricing"),
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: cls("emergency-pricing__heading"),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: cls("emergency-pricing__titles"),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-							className: cls("emergency-pricing__title"),
-							children: pricingCopy.heading
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: cls("emergency-pricing__subtitle"),
-							children: pricingCopy.subtitle
-						})]
-					})
-				}),
-				PRICING_PACKAGES.map((pkg) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PackageCard, {
-					pkg,
-					selected: selected === pkg.id,
-					onSelect: setSelected
-				}, pkg.id)),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: cls("emergency-pricing__footnote"),
-					children: pricingCopy.footnote
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: cls("emergency-pricing__heading"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: cls("emergency-pricing__titles"),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						className: cls("emergency-pricing__title"),
+						children: pricingCopy.heading
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: cls("emergency-pricing__subtitle"),
+						children: pricingCopy.subtitle
+					})]
 				})
-			]
+			}), PRICING_PACKAGES.map((pkg) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PackageCard, {
+				pkg,
+				selected: selected === pkg.id,
+				onSelect: setSelected
+			}, pkg.id))]
 		})
 	});
 }
@@ -2738,6 +2910,7 @@ function PricingScreen(props) {
 /** Every screen the panel can render. Add one entry to add a screen. */
 const screenRegistry = {
 	primary: PrimaryScreen,
+	"pre-emergency": PreEmergencyScreen,
 	pricing: PricingScreen,
 	details: DetailsScreen
 };
@@ -2768,7 +2941,7 @@ function ActiveScreen({ screenProps, open, forcePrimary }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Screen, { ...screenProps });
 }
 function EmergencyPanel(props) {
-	const { open, theme, active, busy, aborting, loading, locale, responders, refreshing, geolocationError, activationError, error, abortResult, simulationResult, abortConfirmation, simulationConfirmation, onClose, onActivate, onRefresh, onRetry, onDismissFeedback, onRequestAbort, onRequestSimulation, onCancelAbort, onCancelSimulation, onConfirmAbort, onConfirmSimulation } = props;
+	const { open, theme, active, busy, aborting, loading, locale, responders, refreshing, geolocationError, contactPhone, activationError, error, abortResult, simulationResult, abortConfirmation, simulationConfirmation, onClose, onActivate, onRefresh, onRetry, onDismissFeedback, onRequestAbort, onRequestSimulation, onCancelAbort, onCancelSimulation, onConfirmAbort, onConfirmSimulation, onSetContactPhone } = props;
 	const titleId = (0, react.useId)();
 	const dialogRef = (0, react.useRef)(null);
 	const feedbackVisible = geolocationError !== null || Boolean(activationError) || abortResult !== null || simulationResult !== null;
@@ -2793,13 +2966,15 @@ function EmergencyPanel(props) {
 		abortResult,
 		simulationResult,
 		feedbackVisible,
+		contactPhone,
 		onClose,
 		onActivate,
 		onRefresh,
 		onRetry,
 		onDismissFeedback,
 		onRequestAbort,
-		onRequestSimulation
+		onRequestSimulation,
+		onSetContactPhone
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: dialogRef,
@@ -2906,6 +3081,7 @@ function EmergencyRoot() {
 	const responders = useEmergencyStore((state) => state.responders);
 	const resumeAvailable = useEmergencyStore((state) => state.resumeAvailable);
 	const geolocationError = useEmergencyStore((state) => state.geolocationError);
+	const contactPhone = useEmergencyStore((state) => state.contactPhone);
 	const lastError = useEmergencyStore((state) => state.lastError);
 	const abortResult = useEmergencyStore((state) => state.abortResult);
 	const simulationResult = useEmergencyStore((state) => state.simulationResult);
@@ -2931,6 +3107,7 @@ function EmergencyRoot() {
 		responders,
 		refreshing: phase.kind === "refreshing",
 		geolocationError,
+		contactPhone,
 		activationError,
 		error: showError ? error : null,
 		abortResult,
@@ -2957,7 +3134,8 @@ function EmergencyRoot() {
 		},
 		onConfirmSimulation: () => {
 			client.simulate();
-		}
+		},
+		onSetContactPhone: (phone) => client.setContactPhone(phone)
 	})] });
 }
 
@@ -2989,6 +3167,7 @@ function createFailedClient(error) {
 		lastError: error,
 		geolocation: null,
 		geolocationError: null,
+		contactPhone: null,
 		realtimeStatus: "idle",
 		abortResult: null,
 		simulationResult: null,
@@ -3017,7 +3196,8 @@ function createFailedClient(error) {
 		cancelAbortConfirmation: noop,
 		requestSimulationConfirmation: noop,
 		cancelSimulationConfirmation: noop,
-		dismissFeedback: noop
+		dismissFeedback: noop,
+		setContactPhone: noop
 	};
 }
 function attachTrigger(trigger, client) {
@@ -3106,6 +3286,7 @@ function mount(options) {
 		requestSimulationConfirmation: () => client.requestSimulationConfirmation(),
 		cancelSimulationConfirmation: () => client.cancelSimulationConfirmation(),
 		dismissFeedback: () => client.dismissFeedback(),
+		setContactPhone: (phone) => client.setContactPhone(phone),
 		destroy
 	};
 }

package/dist/index.d.cts

@@ -215,6 +215,7 @@ interface EmergencyClientState {
   readonly lastError: EmergencyError | null;
   readonly geolocation: EmergencyGeolocation | null;
   readonly geolocationError: EmergencyError | null;
+  readonly contactPhone: string | null;
   readonly realtimeStatus: RealtimeStatus;
   readonly abortResult: AbortResult | null;
   readonly simulationResult: SimulationResult | null;
@@ -242,6 +243,7 @@ interface EmergencyClient {
   requestSimulationConfirmation(): void;
   cancelSimulationConfirmation(): void;
   dismissFeedback(): void;
+  setContactPhone(phone: string | null): void;
 }
 type EmergencyTrigger = string | HTMLElement | ((open: () => void) => void | (() => void));
 interface EmergencyMountOptions extends EmergencyConfig {

package/dist/index.d.ts

@@ -215,6 +215,7 @@ interface EmergencyClientState {
   readonly lastError: EmergencyError | null;
   readonly geolocation: EmergencyGeolocation | null;
   readonly geolocationError: EmergencyError | null;
+  readonly contactPhone: string | null;
   readonly realtimeStatus: RealtimeStatus;
   readonly abortResult: AbortResult | null;
   readonly simulationResult: SimulationResult | null;
@@ -242,6 +243,7 @@ interface EmergencyClient {
   requestSimulationConfirmation(): void;
   cancelSimulationConfirmation(): void;
   dismissFeedback(): void;
+  setContactPhone(phone: string | null): void;
 }
 type EmergencyTrigger = string | HTMLElement | ((open: () => void) => void | (() => void));
 interface EmergencyMountOptions extends EmergencyConfig {