Environment Switcher

1"use client";
2 
3import * as React from "react";
4import { createPortal } from "react-dom";
5import { motion, AnimatePresence } from "motion/react";
6 
7import { cn } from "@/lib/utils";
8import {
9  useControllableState,
10  useReducedMotion,
11  getStatusMeta,
12  statusVars,
13  formatTimestamp as defaultFormatTimestamp,
14  type StatusTone,
15} from "@/lib/motiq";
16 
17/**
18 * EnvironmentSwitcher — a presentation + control surface for choosing the
19 * environment (dev / staging / production, regions, preview branches) an app is
20 * pointed at. It is NOT a deployment tool: it never opens a socket, deploys,
21 * promotes, or mutates any backend. The host application owns the actual switch;
22 * this component surfaces the choice, the per-environment status/health the host
23 * already knows, and — critically — a production safety guard.
24 *
25 * What makes it worth shipping over a bare <select>: each environment carries a
26 * status (available / active / degraded / offline / deploying / locked /
27 * restricted), optional region / branch / version / last-deploy / health, and an
28 * app-provided disabled reason. Production is treated as a first-class hazard —
29 * it is marked with an icon AND a text label (never colour alone) and, when the
30 * host opts in via `requireProductionConfirmation`, a switch to it is gated
31 * behind an explicit confirmation dialog. A switch in flight and a switch error
32 * (with retry) are app-owned states the component renders honestly.
33 *
34 * Accessibility: the trigger is a real button (aria-haspopup="listbox"); the
35 * popup is the ARIA combobox pattern — a search input (role="combobox",
36 * aria-activedescendant) controlling a role="listbox" of role="option" rows with
37 * full Arrow / Home / End / Enter / Escape keyboard support. Disabled options
38 * keep their reason readable. The current value is announced via a polite live
39 * region; production and every status use icon + text; focus is restored to the
40 * trigger on close; targets are ≥44px; under prefers-reduced-motion everything
41 * renders in its final state. Clean-room original.
42 */
43 
44/* -------------------------------------------------------------------------- */
45/* Types                                                                       */
46/* -------------------------------------------------------------------------- */
47 
48export type EnvironmentType =
49  | "local"
50  | "development"
51  | "preview"
52  | "staging"
53  | "production"
54  | (string & {});
55 
56/** App-owned health/lifecycle of an environment. */
57// … truncated