@dataemergencia/emergency 0.3.0 → 0.5.0

package/dist/index.cjs

@@ -391,6 +391,7 @@ function createBffClient(options) {
 const copy = {
 	panelLabel: "Panel de emergencia",
 	close: "Cerrar panel de emergencia",
+	back: "Volver",
 	question: "¿Tiene usted una emergencia?",
 	illustrationAlt: "Ícono paramédico",
 	emergency: "Emergencia",
@@ -762,6 +763,7 @@ function createEmergencyStore(config) {
 		lastError: null,
 		geolocation: null,
 		geolocationError: null,
+		contactPhone: null,
 		realtimeStatus: "idle",
 		abortResult: null,
 		simulationResult: null,
@@ -1204,7 +1206,8 @@ function createEmergencyController(deps) {
 		patch({
 			panelOpen: false,
 			abortConfirmation: false,
-			simulationConfirmation: false
+			simulationConfirmation: false,
+			contactPhone: null
 		});
 		events.emit("panel:closed", { reason });
 	}
@@ -1253,6 +1256,7 @@ function createEmergencyController(deps) {
 			lastError: null,
 			geolocation: null,
 			geolocationError: null,
+			contactPhone: null,
 			realtimeStatus: "idle",
 			abortResult: null,
 			simulationResult: null,
@@ -1294,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
@@ -1469,74 +1474,6 @@ function validateConfig(config) {
 	};
 }
 
-// src/react/components/icons/paramedical-mark.tsx
-/**
-* Neutral inline illustration used by the idle panel.
-*/
-function ParamedicalMark({ className, title }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		version: "1.0",
-		viewBox: "0 0 192 192",
-		width: "192",
-		height: "192",
-		id: "Star of life",
-		className,
-		"aria-label": title,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { id: "defs2886" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
-				id: "cross",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					d: "m 74,133 0,52 44,0 0,-52 44,26 22,-38 L 140,96 184,70 162,32 117,58 117,7 74,7 74,58 30,32 8,70 52,96 8,121 30,159 z",
-					id: "outline",
-					style: {
-						fill: "none",
-						stroke: "#3333bb",
-						strokeWidth: 6
-					}
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					d: "m 74,133 0,52 44,0 0,-52 44,26 22,-38 L 140,96 184,70 162,32 117,58 117,7 74,7 74,58 30,32 8,70 52,96 8,121 30,159 z",
-					id: "inner",
-					style: {
-						fill: "#0000bb",
-						fillRule: "evenodd",
-						stroke: "#ffffff",
-						strokeWidth: 2
-					}
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
-				id: "symbols",
-				style: {
-					fill: "#ffffff",
-					fillRule: "evenodd",
-					stroke: "#3333bb",
-					strokeWidth: 2
-				},
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					d: "m 93,166 c 0,7 6,7 6,0 l 3,-138 c 0,-8 -12,-8 -12,0 l 3,135 0,3 z",
-					id: "rod"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
-					id: "snake",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-						d: "m 100,153 c 7,4 3,15 -3,15 2,-5 3,-9 3,-15 z m 1,-40 c 10,9 4,22 -3,26 -6,3 -6,7 -6,15 -9,-10 -4,-19 4,-24 5,-4 5,-10 5,-17 z m 1,-30 c 0,11 -17,14 -17,22 0,3 1,9 6,12 0,-11 9,-12 15,-18 7,-7 7,-19 -4,-28 0,4 0,8 0,12 z M 90,77 C 80,69 76,55 80,46 c 3,-10 20,-11 20,-3 0,8 -20,3 -13,16 l 3,5 0,13 z",
-						id: "body"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-						d: "m 95,43 c 7,-3 -7,-3 0,0 z",
-						id: "eye",
-						style: {
-							fill: "#3333bb",
-							fillRule: "evenodd",
-							stroke: "none"
-						}
-					})]
-				})]
-			})
-		]
-	});
-}
-
 // src/react/components/Icon/index.tsx
 /** Icons whose artwork does not fit the default 24x24 grid need their own canvas. */
 const viewBoxes = { emergency: "0 0 640 640" };
@@ -1593,6 +1530,23 @@ 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" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M19 22v-6" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m22 19-3-3-3 3" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M6 12h.01" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "12",
+			cy: "12",
+			r: "2"
+		})
+	] }),
 	emergency: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M272.5 96C272.5 78.3 286.8 64 304.5 64L336.5 64C354.2 64 368.5 78.3 368.5 96L368.5 236.9L490.5 166.5C505.8 157.7 525.4 162.9 534.2 178.2L550.2 205.9C559 221.2 553.8 240.8 538.5 249.6L416.5 320L538.5 390.4C553.8 399.2 559.1 418.8 550.2 434.1L534.2 461.8C525.4 477.1 505.8 482.4 490.5 473.5L368.5 403.1L368.5 544C368.5 561.7 354.2 576 336.5 576L304.5 576C286.8 576 272.5 561.7 272.5 544L272.5 403.1L150.5 473.5C135.2 482.3 115.6 477.1 106.8 461.8L90.8 434.1C82 418.8 87.2 399.2 102.5 390.4L224.5 320L102.5 249.6C87.2 240.8 82 221.2 90.8 205.9L106.8 178.2C115.6 162.9 135.2 157.7 150.5 166.5L272.5 236.9L272.5 96z" }) })
 };
 function Icon({ name, className, title }) {
@@ -1622,6 +1576,16 @@ var panel_module_default = {
 	"de-emergency-slide-in": "de-emergency-de-emergency-slide-in-nA5Hwa",
 	"de-emergency-slide-up": "de-emergency-de-emergency-slide-up-nA5Hwa",
 	"de-emergency-spin": "de-emergency-de-emergency-spin-nA5Hwa",
+	"emergency-availability": "de-emergency-emergency-availability-nA5Hwa",
+	"emergency-availability__card": "de-emergency-emergency-availability__card-nA5Hwa",
+	"emergency-availability__card-body": "de-emergency-emergency-availability__card-body-nA5Hwa",
+	"emergency-availability__card-header": "de-emergency-emergency-availability__card-header-nA5Hwa",
+	"emergency-availability__card-title": "de-emergency-emergency-availability__card-title-nA5Hwa",
+	"emergency-availability__details": "de-emergency-emergency-availability__details-nA5Hwa",
+	"emergency-availability__label": "de-emergency-emergency-availability__label-nA5Hwa",
+	"emergency-availability__recharge": "de-emergency-emergency-availability__recharge-nA5Hwa",
+	"emergency-availability__rounds": "de-emergency-emergency-availability__rounds-nA5Hwa",
+	"emergency-availability__rounds-group": "de-emergency-emergency-availability__rounds-group-nA5Hwa",
 	"emergency-confirmation": "de-emergency-emergency-confirmation-nA5Hwa",
 	"emergency-confirmation__body": "de-emergency-emergency-confirmation__body-nA5Hwa",
 	"emergency-confirmation__button": "de-emergency-emergency-confirmation__button-nA5Hwa",
@@ -1646,7 +1610,12 @@ var panel_module_default = {
 	"emergency-feedback": "de-emergency-emergency-feedback-nA5Hwa",
 	"emergency-feedback__dismiss": "de-emergency-emergency-feedback__dismiss-nA5Hwa",
 	"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",
 	"emergency-panel__body-title": "de-emergency-emergency-panel__body-title-nA5Hwa",
 	"emergency-panel__body-title-container": "de-emergency-emergency-panel__body-title-container-nA5Hwa",
 	"emergency-panel__button": "de-emergency-emergency-panel__button-nA5Hwa",
@@ -1654,16 +1623,60 @@ 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__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",
+	"emergency-pricing__price": "de-emergency-emergency-pricing__price-nA5Hwa",
+	"emergency-pricing__price-meta": "de-emergency-emergency-pricing__price-meta-nA5Hwa",
+	"emergency-pricing__price-note": "de-emergency-emergency-pricing__price-note-nA5Hwa",
+	"emergency-pricing__price-row": "de-emergency-emergency-pricing__price-row-nA5Hwa",
+	"emergency-pricing__select": "de-emergency-emergency-pricing__select-nA5Hwa",
+	"emergency-pricing__stat": "de-emergency-emergency-pricing__stat-nA5Hwa",
+	"emergency-pricing__stat-divider": "de-emergency-emergency-pricing__stat-divider-nA5Hwa",
+	"emergency-pricing__stat-label": "de-emergency-emergency-pricing__stat-label-nA5Hwa",
+	"emergency-pricing__stat-value": "de-emergency-emergency-pricing__stat-value-nA5Hwa",
+	"emergency-pricing__stats": "de-emergency-emergency-pricing__stats-nA5Hwa",
+	"emergency-pricing__subtitle": "de-emergency-emergency-pricing__subtitle-nA5Hwa",
+	"emergency-pricing__title": "de-emergency-emergency-pricing__title-nA5Hwa",
+	"emergency-pricing__titles": "de-emergency-emergency-pricing__titles-nA5Hwa",
 	"emergency-resume-notification-button": "de-emergency-emergency-resume-notification-button-nA5Hwa",
 	"emergency-resume-notification-card": "de-emergency-emergency-resume-notification-card-nA5Hwa",
 	"emergency-resume-notification-icon": "de-emergency-emergency-resume-notification-icon-nA5Hwa",
 	"emergency-resume-notification-message": "de-emergency-emergency-resume-notification-message-nA5Hwa",
 	"emergency-resume-notification-overlay": "de-emergency-emergency-resume-notification-overlay-nA5Hwa",
 	"emergency-resume-notification-title": "de-emergency-emergency-resume-notification-title-nA5Hwa",
+	"emergency-screen": "de-emergency-emergency-screen-nA5Hwa",
+	"emergency-screen__placeholder": "de-emergency-emergency-screen__placeholder-nA5Hwa",
+	"emergency-screen__placeholder-text": "de-emergency-emergency-screen__placeholder-text-nA5Hwa",
 	"emergency-status__abort-btn": "de-emergency-emergency-status__abort-btn-nA5Hwa",
 	"emergency-status__body": "de-emergency-emergency-status__body-nA5Hwa",
 	"emergency-status__cell": "de-emergency-emergency-status__cell-nA5Hwa",
@@ -1709,6 +1722,532 @@ function cls(...names) {
 	return names.filter((name) => Boolean(name)).map((name) => panel_module_default[name] ?? "").filter(Boolean).join(" ");
 }
 
+// src/react/components/EmergencyConfirmation/index.tsx
+function EmergencyConfirmation(props) {
+	const { abortConfirmation, simulationConfirmation, onCancelAbort, onCancelSimulation, onConfirmAbort, onConfirmSimulation } = props;
+	const cardRef = (0, react.useRef)(null);
+	const titleId = (0, react.useId)();
+	const danger = abortConfirmation;
+	const open = abortConfirmation || simulationConfirmation;
+	(0, react.useEffect)(() => {
+		if (open) cardRef.current?.querySelector("button")?.focus();
+	}, [open]);
+	if (!open) return null;
+	const title = danger ? copy.abortConfirmTitle : copy.simulateConfirmTitle;
+	const text = danger ? copy.abortConfirmText : copy.simulateConfirmText;
+	const tone = danger ? "danger" : "information";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cls("emergency-confirmation"),
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-labelledby": titleId,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: cardRef,
+			className: cls("emergency-confirmation__card"),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: cls("emergency-confirmation__body"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: cls("emergency-confirmation__icon", `emergency-confirmation__icon--${tone}`),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: danger ? "alert-triangle" : "info" })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h5", {
+						className: cls("emergency-confirmation__title"),
+						id: titleId,
+						children: title
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: cls("emergency-confirmation__text"),
+						children: text
+					})
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: cls("emergency-confirmation__footer"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: cls("emergency-confirmation__button", "emergency-confirmation__button--cancel"),
+					onClick: danger ? onCancelAbort : onCancelSimulation,
+					children: danger ? copy.abortCancel : copy.simulateCancel
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: cls("emergency-confirmation__button", danger ? "emergency-confirmation__button--danger" : "emergency-confirmation__button--confirm"),
+					onClick: danger ? onConfirmAbort : onConfirmSimulation,
+					children: danger ? copy.abortConfirm : copy.simulateConfirm
+				})]
+			})]
+		})
+	});
+}
+
+// src/react/hooks/useEscapeKey.ts
+function useEscapeKey(active, onEscape) {
+	(0, react.useEffect)(() => {
+		if (!active || typeof document === "undefined") return;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") {
+				event.stopPropagation();
+				onEscape();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [active, onEscape]);
+}
+
+// src/react/hooks/useFocusTrap.ts
+const FOCUSABLE_SELECTOR = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(",");
+/**
+* Keeps keyboard focus inside the dialog while it is open and restores focus to
+* the element that opened it when it closes.
+*/
+function useFocusTrap(ref, active) {
+	(0, react.useEffect)(() => {
+		if (!active || typeof document === "undefined") return;
+		const container = ref.current;
+		if (!container) return;
+		const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		const focusable = () => Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((element) => !element.hasAttribute("hidden") && element.getAttribute("aria-hidden") !== "true");
+		(focusable()[0] ?? container).focus({ preventScroll: true });
+		const handleKeyDown = (event) => {
+			if (event.key !== "Tab") return;
+			const items = focusable();
+			if (items.length === 0) {
+				event.preventDefault();
+				container.focus({ preventScroll: true });
+				return;
+			}
+			const first = items[0];
+			const last = items[items.length - 1];
+			const current = document.activeElement;
+			if (event.shiftKey && (current === first || !container.contains(current))) {
+				event.preventDefault();
+				if (last) last.focus({ preventScroll: true });
+				return;
+			}
+			if (!event.shiftKey && (current === last || !container.contains(current)) && first) {
+				event.preventDefault();
+				first.focus({ preventScroll: true });
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown, true);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown, true);
+			if (previouslyFocused?.isConnected) previouslyFocused.focus({ preventScroll: true });
+		};
+	}, [active, ref]);
+}
+
+// src/react/screens/context.tsx
+const EmergencyScreenContext = (0, react.createContext)(null);
+function EmergencyScreenProvider({ children, initialScreen = "primary" }) {
+	const [state, setState] = (0, react.useState)({
+		screen: initialScreen,
+		history: []
+	});
+	const navigate = (0, react.useCallback)((next) => {
+		setState((current) => {
+			if (current.screen === next) return current;
+			return {
+				screen: next,
+				history: [...current.history, current.screen]
+			};
+		});
+	}, []);
+	const back = (0, react.useCallback)(() => {
+		setState((current) => {
+			const previous = current.history.at(-1);
+			if (!previous) return current;
+			return {
+				screen: previous,
+				history: current.history.slice(0, -1)
+			};
+		});
+	}, []);
+	const reset = (0, react.useCallback)(() => {
+		setState((current) => {
+			if (current.screen === "primary" && current.history.length === 0) return current;
+			return {
+				screen: "primary",
+				history: []
+			};
+		});
+	}, []);
+	const value = (0, react.useMemo)(() => ({
+		screen: state.screen,
+		history: state.history,
+		navigate,
+		back,
+		reset
+	}), [
+		back,
+		navigate,
+		reset,
+		state.history,
+		state.screen
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyScreenContext.Provider, {
+		value,
+		children
+	});
+}
+function useScreenNavigation() {
+	const value = (0, react.useContext)(EmergencyScreenContext);
+	if (!value) throw new Error("useScreenNavigation must be used inside EmergencyScreenProvider.");
+	return value;
+}
+
+// src/react/components/EmergencyHeader/index.tsx
+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", closeOnly && "emergency-panel__header--close-only"),
+		children: [
+			onBack && !closeOnly ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: cls("emergency-panel__close-button"),
+				"aria-label": copy.back,
+				onClick: onBack,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+					name: "arrow-left",
+					className: cls("emergency-panel__close-icon")
+				})
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				className: cls("emergency-panel__title", closeOnly && "emergency-panel__sr-only"),
+				id: titleId,
+				tabIndex: -1,
+				children: title
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: cls("emergency-panel__close-button"),
+				"aria-label": copy.close,
+				onClick: onClose,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+					name: "close",
+					className: cls("emergency-panel__close-icon")
+				})
+			})
+		]
+	});
+}
+
+// src/react/screens/layout.tsx
+/**
+* Shared shell for every screen. The wrapper is `display: contents` so the
+* header, body and footer stay direct grid rows of the emergency panel.
+*/
+function EmergencyScreenLayout({ screen, titleId, header, footer, children, bodyClassName }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cls("emergency-screen"),
+		"data-screen": screen,
+		children: [
+			header,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+				className: cls("emergency-panel__body", bodyClassName ?? null),
+				"aria-labelledby": titleId,
+				children
+			}),
+			footer
+		]
+	});
+}
+
+// src/react/screens/PlaceholderScreen.tsx
+/** Minimal in-design screen used to prove navigation before real designs land. */
+function PlaceholderScreen({ screen, titleId, title, description, onClose, onBack }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyScreenLayout, {
+		screen,
+		titleId,
+		header: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyHeader, {
+			titleId,
+			title,
+			onClose,
+			onBack
+		}),
+		footer: null,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: cls("emergency-screen__placeholder"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: cls("emergency-screen__placeholder-text"),
+				children: description
+			})
+		})
+	});
+}
+
+// src/react/screens/details/copy.ts
+const detailsCopy = {
+	title: "Detalles",
+	description: "Aquí podrás consultar el detalle de tus alertas disponibles. Esta pantalla estará disponible próximamente."
+};
+
+// src/react/screens/details/index.tsx
+function DetailsScreen({ titleId, onClose }) {
+	const { back } = useScreenNavigation();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlaceholderScreen, {
+		screen: "details",
+		titleId,
+		title: detailsCopy.title,
+		description: detailsCopy.description,
+		onClose: () => onClose("close"),
+		onBack: back
+	});
+}
+
+// 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.
+*/
+function ParamedicalMark({ className, title }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		version: "1.0",
+		viewBox: "0 0 192 192",
+		width: "192",
+		height: "192",
+		id: "Star of life",
+		className,
+		"aria-label": title,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { id: "defs2886" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+				id: "cross",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "m 74,133 0,52 44,0 0,-52 44,26 22,-38 L 140,96 184,70 162,32 117,58 117,7 74,7 74,58 30,32 8,70 52,96 8,121 30,159 z",
+					id: "outline",
+					style: {
+						fill: "none",
+						stroke: "#3333bb",
+						strokeWidth: 6
+					}
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "m 74,133 0,52 44,0 0,-52 44,26 22,-38 L 140,96 184,70 162,32 117,58 117,7 74,7 74,58 30,32 8,70 52,96 8,121 30,159 z",
+					id: "inner",
+					style: {
+						fill: "#0000bb",
+						fillRule: "evenodd",
+						stroke: "#ffffff",
+						strokeWidth: 2
+					}
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+				id: "symbols",
+				style: {
+					fill: "#ffffff",
+					fillRule: "evenodd",
+					stroke: "#3333bb",
+					strokeWidth: 2
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "m 93,166 c 0,7 6,7 6,0 l 3,-138 c 0,-8 -12,-8 -12,0 l 3,135 0,3 z",
+					id: "rod"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+					id: "snake",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+						d: "m 100,153 c 7,4 3,15 -3,15 2,-5 3,-9 3,-15 z m 1,-40 c 10,9 4,22 -3,26 -6,3 -6,7 -6,15 -9,-10 -4,-19 4,-24 5,-4 5,-10 5,-17 z m 1,-30 c 0,11 -17,14 -17,22 0,3 1,9 6,12 0,-11 9,-12 15,-18 7,-7 7,-19 -4,-28 0,4 0,8 0,12 z M 90,77 C 80,69 76,55 80,46 c 3,-10 20,-11 20,-3 0,8 -20,3 -13,16 l 3,5 0,13 z",
+						id: "body"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+						d: "m 95,43 c 7,-3 -7,-3 0,0 z",
+						id: "eye",
+						style: {
+							fill: "#3333bb",
+							fillRule: "evenodd",
+							stroke: "none"
+						}
+					})]
+				})]
+			})
+		]
+	});
+}
+
 // src/react/components/MessageSurface/index.tsx
 function MessageSurface(props) {
 	const { variant, icon, title, text, details, className, children } = props;
@@ -2033,237 +2572,410 @@ function EmergencyStatusPanel({ responders, refreshing, locale, onRefresh }) {
 	});
 }
 
+// src/react/screens/primary/copy.ts
+const primaryCopy = {
+	availabilityTitle: "Alertas Disponibles",
+	recharge: "Recargar",
+	details: "Detalles",
+	roundSingular: "ronda disponible",
+	roundPlural: "rondas disponibles"
+};
+/** Singular/plural label for the remaining rounds. */
+function roundsUnit(rounds) {
+	return rounds === 1 ? primaryCopy.roundSingular : primaryCopy.roundPlural;
+}
+function formatRounds(rounds) {
+	return `${rounds} ${roundsUnit(rounds)}`;
+}
+
+// src/react/screens/primary/data.ts
+/**
+* Derives the remaining alert rounds from available messages and designated
+* responders. Invalid or non-positive input collapses to the minimum of one
+* round instead of producing `Infinity`, `NaN` or a negative value.
+*/
+function calculateRounds(messages, responders) {
+	if (!Number.isFinite(messages) || !Number.isFinite(responders)) return 1;
+	const availableMessages = Math.floor(messages);
+	const designatedResponders = Math.floor(responders);
+	if (availableMessages <= 0 || designatedResponders <= 0) return 1;
+	return Math.max(1, Math.floor(availableMessages / designatedResponders));
+}
+
+// src/react/screens/primary/Availability.tsx
+function Availability({ onRecharge, onDetails }) {
+	const rounds = calculateRounds(100, 3);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: cls("emergency-availability"),
+		"aria-label": primaryCopy.availabilityTitle,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			className: cls("emergency-availability__recharge"),
+			onClick: onRecharge,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "credit-card-plus" }), primaryCopy.recharge]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: cls("emergency-availability__card"),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: cls("emergency-availability__card-header"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+					className: cls("emergency-availability__card-title"),
+					children: primaryCopy.availabilityTitle
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: cls("emergency-availability__card-body"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: cls("emergency-availability__rounds-group"),
+					"aria-label": formatRounds(rounds),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: cls("emergency-availability__rounds"),
+						children: rounds
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: cls("emergency-availability__label"),
+						children: roundsUnit(rounds)
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: cls("emergency-availability__details"),
+					onClick: onDetails,
+					children: primaryCopy.details
+				})]
+			})]
+		})]
+	});
+}
+
 // src/react/components/EmergencyBody/index.tsx
 function EmergencyBody(props) {
-	const { active, responders, refreshing, loading, locale, geolocationError, activationError, error, abortResult, simulationResult, onRefresh, onRetry, onDismissFeedback } = props;
+	const { active, responders, refreshing, loading, locale, geolocationError, activationError, error, abortResult, simulationResult, onRefresh, onRetry, onDismissFeedback, onRecharge, onDetails } = props;
 	const showingFeedback = geolocationError !== null || Boolean(activationError) || abortResult !== null || simulationResult !== null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		!loading && !showingFeedback ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: cls("sos-img__container"),
-			id: "sos-img__container",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParamedicalMark, {
-				className: cls("sos-img"),
-				title: copy.illustrationAlt
-			})
-		}) : null,
-		active || loading || showingFeedback ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: cls("emergency-panel__body-title-container"),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
-				className: cls("emergency-panel__body-title"),
-				children: copy.question
+	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.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
 			})
+		}), /* @__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", {
+					className: cls("sos-img__container"),
+					id: "sos-img__container",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParamedicalMark, {
+						className: cls("sos-img"),
+						title: copy.illustrationAlt
+					})
+				}) : null,
+				active || loading || showingFeedback ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: cls("emergency-panel__body-title-container"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+						className: cls("emergency-panel__body-title"),
+						children: copy.question
+					})
+				}),
+				active && !showingFeedback ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyStatusPanel, {
+					responders,
+					refreshing,
+					locale,
+					onRefresh
+				}) : null,
+				loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyLoading, {}) : null,
+				error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyError, {
+					error,
+					onRetry
+				}) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyFeedback, {
+					abortResult,
+					simulationResult,
+					geolocationError,
+					activationError,
+					onDismiss: onDismissFeedback
+				})
+			]
+		})]
+	});
+}
+
+// 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")
 		}),
-		active && !showingFeedback ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyStatusPanel, {
-			responders,
-			refreshing,
-			locale,
-			onRefresh
-		}) : null,
-		loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyLoading, {}) : null,
-		error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyError, {
-			error,
-			onRetry
-		}) : null,
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyFeedback, {
-			abortResult,
-			simulationResult,
-			geolocationError,
-			activationError,
-			onDismiss: onDismissFeedback
+		footer: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyFooter, {
+			active: props.active,
+			busy: props.busy,
+			aborting: props.aborting,
+			feedbackVisible: props.feedbackVisible,
+			onActivate: needsContactPhone ? () => navigate("pre-emergency") : props.onActivate,
+			onRequestAbort: props.onRequestAbort,
+			onRequestSimulation: props.onRequestSimulation
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyBody, {
+			active: props.active,
+			responders: props.responders,
+			refreshing: props.refreshing,
+			loading: props.loading,
+			locale: props.locale,
+			geolocationError: props.geolocationError,
+			activationError: props.activationError,
+			error: props.error,
+			abortResult: props.abortResult,
+			simulationResult: props.simulationResult,
+			onRefresh: props.onRefresh,
+			onRetry: props.onRetry,
+			onDismissFeedback: props.onDismissFeedback,
+			onRecharge: () => navigate("pricing"),
+			onDetails: () => navigate("details")
 		})
-	] });
+	});
 }
 
-// src/react/components/EmergencyConfirmation/index.tsx
-function EmergencyConfirmation(props) {
-	const { abortConfirmation, simulationConfirmation, onCancelAbort, onCancelSimulation, onConfirmAbort, onConfirmSimulation } = props;
-	const cardRef = (0, react.useRef)(null);
-	const titleId = (0, react.useId)();
-	const danger = abortConfirmation;
-	const open = abortConfirmation || simulationConfirmation;
-	(0, react.useEffect)(() => {
-		if (open) cardRef.current?.querySelector("button")?.focus();
-	}, [open]);
-	if (!open) return null;
-	const title = danger ? copy.abortConfirmTitle : copy.simulateConfirmTitle;
-	const text = danger ? copy.abortConfirmText : copy.simulateConfirmText;
-	const tone = danger ? "danger" : "information";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: cls("emergency-confirmation"),
-		role: "dialog",
-		"aria-modal": "true",
-		"aria-labelledby": titleId,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			ref: cardRef,
-			className: cls("emergency-confirmation__card"),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: cls("emergency-confirmation__body"),
+// src/react/screens/pricing/copy.ts
+const pricingCopy = {
+	title: "Recargar",
+	heading: "Elige tu paquete",
+	subtitle: "Alertas de WhatsApp para tus contactos",
+	bestValue: "MEJOR VALOR",
+	choose: "Seleccionar",
+	chosen: "Seleccionado",
+	whatsapp: "de WhatsApp",
+	rounds: "rondas de alerta",
+	perMessage: "IVA Incluido",
+	footnote: "Rondas calculadas con 3 contactos de emergencia. Válidas para pruebas y emergencias."
+};
+
+// src/react/screens/pricing/data.ts
+/**
+* Local demo catalog. Prices and per-message labels are literal values from the
+* mock; they are not derived from the package totals.
+*/
+const PRICING_PACKAGES = [{
+	id: "package-1",
+	label: "PAQUETE 1",
+	messages: 100,
+	priceLabel: "$7",
+	priceCaption: "IVA incluído",
+	perMessageLabel: "$0.07",
+	highlighted: false
+}, {
+	id: "package-2",
+	label: "PAQUETE 2",
+	messages: 200,
+	priceLabel: "12$",
+	priceCaption: "IVA incluído",
+	perMessageLabel: "$0.06",
+	highlighted: true,
+	badge: "MEJOR VALOR"
+}];
+/** Derives the alert rounds a package provides for the demo responder count. */
+function packageRounds(pkg) {
+	return calculateRounds(pkg.messages, 3);
+}
+
+// src/react/screens/pricing/PackageCard.tsx
+function PackageCard({ pkg, selected, onSelect }) {
+	const labelId = (0, react.useId)();
+	const rounds = packageRounds(pkg);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: cls("emergency-pricing__package", pkg.highlighted && "emergency-pricing__package--highlighted"),
+		"aria-labelledby": labelId,
+		"data-selected": selected ? "true" : void 0,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: cls("emergency-pricing__package-header"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: cls("emergency-pricing__package-label"),
+					id: labelId,
+					children: pkg.label
+				}), pkg.badge ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: cls("emergency-pricing__badge"),
+					children: pkg.badge
+				}) : null]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: cls("emergency-pricing__price-row"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h4", {
+					className: cls("emergency-pricing__package-name"),
+					children: [pkg.messages, " alertas"]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: cls("emergency-pricing__package-caption"),
+					children: pricingCopy.whatsapp
+				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: cls("emergency-pricing__price-meta"),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: cls("emergency-pricing__price"),
+						children: pkg.priceLabel
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: cls("emergency-pricing__price-note"),
+						children: [pkg.priceCaption, pkg.priceNote ? ` ${pkg.priceNote}` : null]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: cls("emergency-pricing__stats"),
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: cls("emergency-confirmation__icon", `emergency-confirmation__icon--${tone}`),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: danger ? "alert-triangle" : "info" })
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: cls("emergency-pricing__stat"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: cls("emergency-pricing__stat-value"),
+							children: rounds
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: cls("emergency-pricing__stat-label"),
+							children: pricingCopy.rounds
+						})]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h5", {
-						className: cls("emergency-confirmation__title"),
-						id: titleId,
-						children: title
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: cls("emergency-pricing__stat-divider"),
+						"aria-hidden": "true"
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: cls("emergency-confirmation__text"),
-						children: text
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: cls("emergency-pricing__stat"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: cls("emergency-pricing__stat-value"),
+							children: pkg.perMessageLabel
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: cls("emergency-pricing__stat-label"),
+							children: pricingCopy.perMessage
+						})]
 					})
 				]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: cls("emergency-confirmation__footer"),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: cls("emergency-confirmation__button", "emergency-confirmation__button--cancel"),
-					onClick: danger ? onCancelAbort : onCancelSimulation,
-					children: danger ? copy.abortCancel : copy.simulateCancel
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: cls("emergency-confirmation__button", danger ? "emergency-confirmation__button--danger" : "emergency-confirmation__button--confirm"),
-					onClick: danger ? onConfirmAbort : onConfirmSimulation,
-					children: danger ? copy.abortConfirm : copy.simulateConfirm
-				})]
-			})]
-		})
+			}),
+			/* @__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"),
+				"aria-pressed": selected,
+				onClick: () => onSelect(pkg.id),
+				children: selected ? pricingCopy.chosen : pricingCopy.choose
+			})
+		]
 	});
 }
 
-// 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" })]
+// src/react/screens/pricing/index.tsx
+function PricingScreen(props) {
+	const { back } = useScreenNavigation();
+	const [selected, setSelected] = (0, react.useState)(null);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyScreenLayout, {
+		screen: "pricing",
+		titleId: props.titleId,
+		bodyClassName: "emergency-panel__body--pricing",
+		header: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyHeader, {
+			titleId: props.titleId,
+			title: pricingCopy.title,
+			onClose: () => props.onClose("close"),
+			onBack: back
+		}),
+		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))]
 		})
 	});
-	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/components/EmergencyHeader/index.tsx
-function EmergencyHeader({ titleId, onClose }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
-		className: cls("emergency-panel__header"),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-			className: cls("emergency-panel__title"),
-			id: titleId,
-			children: copy.panelLabel
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			type: "button",
-			className: cls("emergency-panel__close-button"),
-			"aria-label": copy.close,
-			onClick: onClose,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-				name: "close",
-				className: cls("emergency-panel__close-icon")
-			})
-		})]
-	});
-}
+// src/react/screens/registry.ts
+/** Every screen the panel can render. Add one entry to add a screen. */
+const screenRegistry = {
+	primary: PrimaryScreen,
+	"pre-emergency": PreEmergencyScreen,
+	pricing: PricingScreen,
+	details: DetailsScreen
+};
 
-// src/react/hooks/useEscapeKey.ts
-function useEscapeKey(active, onEscape) {
+// src/react/components/EmergencyPanel/index.tsx
+function ActiveScreen({ screenProps, open, forcePrimary }) {
+	const { screen, reset } = useScreenNavigation();
+	const shouldReset = !open || forcePrimary;
+	const effectiveScreen = shouldReset ? "primary" : screen;
+	const previousOpen = (0, react.useRef)(open);
+	const previousScreen = (0, react.useRef)(effectiveScreen);
 	(0, react.useEffect)(() => {
-		if (!active || typeof document === "undefined") return;
-		const handleKeyDown = (event) => {
-			if (event.key === "Escape") {
-				event.stopPropagation();
-				onEscape();
-			}
-		};
-		document.addEventListener("keydown", handleKeyDown);
-		return () => {
-			document.removeEventListener("keydown", handleKeyDown);
-		};
-	}, [active, onEscape]);
-}
-
-// src/react/hooks/useFocusTrap.ts
-const FOCUSABLE_SELECTOR = [
-	"a[href]",
-	"button:not([disabled])",
-	"input:not([disabled])",
-	"select:not([disabled])",
-	"textarea:not([disabled])",
-	"[tabindex]:not([tabindex=\"-1\"])"
-].join(",");
-/**
-* Keeps keyboard focus inside the dialog while it is open and restores focus to
-* the element that opened it when it closes.
-*/
-function useFocusTrap(ref, active) {
+		if (shouldReset) reset();
+	}, [reset, shouldReset]);
 	(0, react.useEffect)(() => {
-		if (!active || typeof document === "undefined") return;
-		const container = ref.current;
-		if (!container) return;
-		const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-		const focusable = () => Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((element) => !element.hasAttribute("hidden") && element.getAttribute("aria-hidden") !== "true");
-		(focusable()[0] ?? container).focus({ preventScroll: true });
-		const handleKeyDown = (event) => {
-			if (event.key !== "Tab") return;
-			const items = focusable();
-			if (items.length === 0) {
-				event.preventDefault();
-				container.focus({ preventScroll: true });
-				return;
-			}
-			const first = items[0];
-			const last = items[items.length - 1];
-			const current = document.activeElement;
-			if (event.shiftKey && (current === first || !container.contains(current))) {
-				event.preventDefault();
-				if (last) last.focus({ preventScroll: true });
-				return;
-			}
-			if (!event.shiftKey && current === last && first) {
-				event.preventDefault();
-				first.focus({ preventScroll: true });
-			}
-		};
-		document.addEventListener("keydown", handleKeyDown, true);
-		return () => {
-			document.removeEventListener("keydown", handleKeyDown, true);
-			if (previouslyFocused?.isConnected) previouslyFocused.focus({ preventScroll: true });
-		};
-	}, [active, ref]);
+		const wasOpen = previousOpen.current;
+		const previousEffectiveScreen = previousScreen.current;
+		previousOpen.current = open;
+		previousScreen.current = effectiveScreen;
+		if (!open || !wasOpen || previousEffectiveScreen === effectiveScreen) return;
+		document.getElementById(screenProps.titleId)?.focus({ preventScroll: true });
+	}, [
+		effectiveScreen,
+		open,
+		screenProps.titleId
+	]);
+	const Screen = screenRegistry[effectiveScreen];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Screen, { ...screenProps });
 }
-
-// src/react/components/EmergencyPanel/index.tsx
 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;
+	const forcePrimary = active || loading || error !== null || feedbackVisible;
 	const closeOnEscape = (0, react.useCallback)(() => {
 		onClose("escape");
 	}, [onClose]);
 	useFocusTrap(dialogRef, open);
 	useEscapeKey(open, closeOnEscape);
+	const screenProps = {
+		titleId,
+		active,
+		busy,
+		aborting,
+		loading,
+		locale,
+		responders,
+		refreshing,
+		geolocationError,
+		activationError,
+		error,
+		abortResult,
+		simulationResult,
+		feedbackVisible,
+		contactPhone,
+		onClose,
+		onActivate,
+		onRefresh,
+		onRetry,
+		onDismissFeedback,
+		onRequestAbort,
+		onRequestSimulation,
+		onSetContactPhone
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: dialogRef,
 		className: cls("emergency-panel", !open && "emergency-panel--hidden"),
@@ -2274,48 +2986,18 @@ function EmergencyPanel(props) {
 		"aria-hidden": !open,
 		inert: !open,
 		tabIndex: -1,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyHeader, {
-				titleId,
-				onClose: () => onClose("close")
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-				className: cls("emergency-panel__body"),
-				"aria-labelledby": titleId,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyBody, {
-					active,
-					responders,
-					refreshing,
-					loading,
-					locale,
-					geolocationError,
-					activationError,
-					error,
-					abortResult,
-					simulationResult,
-					onRefresh,
-					onRetry,
-					onDismissFeedback
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyFooter, {
-				active,
-				busy,
-				aborting,
-				feedbackVisible,
-				onActivate,
-				onRequestAbort,
-				onRequestSimulation
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyConfirmation, {
-				abortConfirmation,
-				simulationConfirmation,
-				onCancelAbort,
-				onCancelSimulation,
-				onConfirmAbort,
-				onConfirmSimulation
-			})
-		]
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyScreenProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActiveScreen, {
+			screenProps,
+			open,
+			forcePrimary
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyConfirmation, {
+			abortConfirmation,
+			simulationConfirmation,
+			onCancelAbort,
+			onCancelSimulation,
+			onConfirmAbort,
+			onConfirmSimulation
+		})]
 	});
 }
 
@@ -2399,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);
@@ -2424,6 +3107,7 @@ function EmergencyRoot() {
 		responders,
 		refreshing: phase.kind === "refreshing",
 		geolocationError,
+		contactPhone,
 		activationError,
 		error: showError ? error : null,
 		abortResult,
@@ -2450,7 +3134,8 @@ function EmergencyRoot() {
 		},
 		onConfirmSimulation: () => {
 			client.simulate();
-		}
+		},
+		onSetContactPhone: (phone) => client.setContactPhone(phone)
 	})] });
 }
 
@@ -2482,6 +3167,7 @@ function createFailedClient(error) {
 		lastError: error,
 		geolocation: null,
 		geolocationError: null,
+		contactPhone: null,
 		realtimeStatus: "idle",
 		abortResult: null,
 		simulationResult: null,
@@ -2510,7 +3196,8 @@ function createFailedClient(error) {
 		cancelAbortConfirmation: noop,
 		requestSimulationConfirmation: noop,
 		cancelSimulationConfirmation: noop,
-		dismissFeedback: noop
+		dismissFeedback: noop,
+		setContactPhone: noop
 	};
 }
 function attachTrigger(trigger, client) {
@@ -2599,6 +3286,7 @@ function mount(options) {
 		requestSimulationConfirmation: () => client.requestSimulationConfirmation(),
 		cancelSimulationConfirmation: () => client.cancelSimulationConfirmation(),
 		dismissFeedback: () => client.dismissFeedback(),
+		setContactPhone: (phone) => client.setContactPhone(phone),
 		destroy
 	};
 }