nodefony 7.0.2 → 10.0.0-alpha.2

package/dist/client/debugbar.standalone.js

@@ -0,0 +1,4274 @@
+//#region src/client/realtime/notice.ts
+/**
+* Traduit un refus de canal (`realtime:denied`, {@link IRealtimeDenied}) en
+* {@link NodefonyNotice}. Pendant FRAME du {@link closeCodeToNotice} (qui traite
+* la fermeture de la CONNEXION) : ici la connexion vit, seul l'abonnement à CE
+* canal n'a pas abouti.
+*
+* Le message SUIT le motif, parce que les trois n'appellent pas le même geste :
+* un accès refusé demande une élévation de droits, un plafond atteint demande de
+* libérer un abonnement, un canal sans producteur demande de relire son nom. Un
+* « accès refusé » affiché sur une faute de frappe envoie chercher un droit qui
+* n'a jamais manqué. Ce qui reste générique, et le restera, c'est le DÉTAIL de la
+* politique : le serveur ne dit jamais quel rôle ou quel scope manque.
+*
+* @param denied - `{ channel, reason }` reçu du serveur.
+* @returns une notice prête à afficher (toujours, contrairement au close-code).
+*/
+function deniedToNotice(denied) {
+	const message = denied.reason === "unknown" ? `Canal « ${denied.channel} » inconnu du serveur : personne ne le produit (nom exact ? module chargé ?)` : denied.reason === "limit" ? `Canal « ${denied.channel} » non ouvert : trop d'abonnements sur cette connexion` : `Accès au canal « ${denied.channel} » refusé`;
+	return {
+		level: denied.reason === "unknown" ? "warning" : "error",
+		title: "Temps réel",
+		message,
+		source: "realtime",
+		ts: Date.now()
+	};
+}
+/**
+* Traduit un **code de fermeture WebSocket** (RFC 6455 §7.4) en {@link NodefonyNotice}
+* — pendant CLIENT du `toWsCloseCode` serveur (`@nodefony/http`). Pur, sans état,
+* donc trivialement testable et réutilisable.
+*
+* Retourne `null` pour une fermeture **propre** (1000) ou **attendue** (1001 going
+* away = restart serveur, le reconnect rétablit) : pas de bruit inutile.
+*
+* @param code - code de fermeture reçu (`CloseEvent.code`).
+* @param reason - description optionnelle (`CloseEvent.reason`), ajoutée au message.
+* @returns une notice à afficher, ou `null` si la fermeture ne mérite aucune alerte.
+*/
+function closeCodeToNotice(code, reason) {
+	if (code === 1e3 || code === 1001) return null;
+	let level = "warning";
+	let message;
+	switch (code) {
+		case 1002:
+			level = "error";
+			message = "Erreur de protocole temps réel";
+			break;
+		case 1003:
+			level = "error";
+			message = "Données temps réel non supportées";
+			break;
+		case 1006:
+			message = "Connexion temps réel perdue";
+			break;
+		case 1007:
+			level = "error";
+			message = "Trame temps réel invalide";
+			break;
+		case 1008:
+			level = "error";
+			message = "Accès temps réel refusé";
+			break;
+		case 1009:
+			message = "Message temps réel trop volumineux";
+			break;
+		case 1010:
+			level = "error";
+			message = "Extension temps réel requise manquante";
+			break;
+		case 1011:
+			level = "error";
+			message = "Erreur serveur temps réel";
+			break;
+		case 4004:
+			level = "error";
+			message = "Ressource temps réel introuvable";
+			break;
+		default: message = typeof code === "number" ? `Connexion temps réel fermée (code ${code})` : "Connexion temps réel fermée";
+	}
+	const trimmed = reason?.trim();
+	return {
+		level,
+		title: "Temps réel",
+		message: trimmed ? `${message} : ${trimmed}` : message,
+		source: "realtime",
+		code,
+		ts: Date.now()
+	};
+}
+/**
+* Close codes (RFC 6455 §7.4 + privés Nodefony 4xxx) après lesquels une
+* reconnexion automatique est INUTILE ou NUISIBLE — la cause ne disparaît pas en
+* réessayant : fin propre (1000), erreurs de protocole/négociation
+* (1002/1003/1007/1010), violation de politique = 401/403 mappés (1008), et
+* ressource introuvable (4004, privé Nodefony). Une boucle de reco sur ces codes
+* martèle le serveur pour rien (vécu : un anonyme sur un endpoint protégé).
+*/
+const FATAL_CLOSE_CODES = /* @__PURE__ */ new Set([
+	1e3,
+	1002,
+	1003,
+	1007,
+	1008,
+	1010,
+	4004
+]);
+/**
+* Faut-il tenter une reconnexion après ce close code WebSocket ? Pendant CLIENT
+* de la sémantique RFC 6455 §7.4 émise par le serveur (`toWsCloseCode`).
+*
+* `false` pour les fermetures DÉFINITIVES (cf {@link FATAL_CLOSE_CODES}) : l'app
+* doit agir (ex. login après un 1008) puis rétablir explicitement (`connect()` /
+* `retryNow()`). `true` pour les transitoires (1001 restart, 1006 perte réseau,
+* 1011 erreur serveur, code absent/inconnu) où la reconnexion a une chance.
+*
+* @param code - close code reçu (`CloseEvent.code`), ou `undefined` (anormal).
+* @returns `true` si une reconnexion auto est pertinente.
+*/
+function isReconnectableCloseCode(code) {
+	if (code === void 0) return true;
+	return !FATAL_CLOSE_CODES.has(code);
+}
+//#endregion
+//#region src/realtime/JsonRpcPeer.ts
+var RpcError = class extends Error {
+	name = "RpcError";
+	data;
+	constructor(message, code = -32e3, data) {
+		super(message);
+		this.code = code;
+		if (data !== void 0) this.data = data;
+	}
+};
+/**
+* Réponse d'un handler qui veut JOINDRE des métadonnées serveur à son résultat.
+*
+* Un handler retourne normalement sa valeur nue (elle devient `result`). Quand
+* il retourne une enveloppe, le peer la déballe : `result` reste la valeur nue,
+* et `meta` voyage dans un champ frère de la trame JSON-RPC. Coût pour ceux qui
+* ne l'utilisent pas : un `instanceof` par frame.
+*/
+var RpcEnvelope = class {
+	result;
+	meta;
+	constructor(result, meta) {
+		this.result = result;
+		this.meta = meta;
+	}
+};
+var JsonRpcPeer = class JsonRpcPeer {
+	opts;
+	nextId = 1;
+	pending = null;
+	actions = null;
+	constructor(opts) {
+		this.opts = opts;
+	}
+	/** Expose une action (requête entrante `method`+`id` → `result`). Idempotent. */
+	register(method, handler) {
+		(this.actions ??= /* @__PURE__ */ new Map()).set(method, handler);
+	}
+	/** Retire une action. */
+	unregister(method) {
+		this.actions?.delete(method);
+	}
+	/** Liste des actions exposées (pour annoncer au handshake, découverte côté pair). */
+	get methods() {
+		return this.actions ? [...this.actions.keys()] : [];
+	}
+	/** Requête SORTANTE — `Promise` résolue avec le `result` (rejette sur `error`/timeout). */
+	request(method, params, timeoutMs = 3e4) {
+		return this.startCall(method, params, timeoutMs);
+	}
+	/**
+	* Requête SORTANTE **tracée** — rend `{ result, meta }` au lieu du `result` nu.
+	*
+	* Même appel que {@link request} : la seule différence est que l'appelant
+	* garde la méta serveur (en dev, le `requestId` du profil de la frame → sa
+	* radiographie). Un serveur qui n'en émet pas laisse simplement `meta`
+	* absent.
+	*/
+	requestTraced(method, params, timeoutMs = 3e4) {
+		return this.startCall(method, params, timeoutMs, true);
+	}
+	/**
+	* Frame d'une notification sortante — **source unique** de sa forme.
+	*
+	* Extraite pour que le fan-out d'un canal diffusé puisse sérialiser la frame
+	* **une seule fois** pour N abonnés, sans jamais risquer de diverger du format
+	* qu'émet {@link notify} : les deux voies passent par ici.
+	*
+	* @param method - nom de la méthode (côté canal : le nom du canal).
+	* @param params - charge applicative ; omise de la frame si `undefined`.
+	* @returns la frame JSON-RPC 2.0, prête à sérialiser.
+	*/
+	static buildNotification(method, params) {
+		return {
+			jsonrpc: "2.0",
+			method,
+			params
+		};
+	}
+	/**
+	* Notification SORTANTE (pas de réponse attendue).
+	*
+	* @returns `false` si le transport a signalé qu'il n'a pas émis. Une
+	* notification n'attend rien en retour : sans cette valeur, une frame perdue
+	* ne laisserait aucune trace chez l'appelant. Les appels qui se rattrapent
+	* seuls (ré-abonnement au reconnect) peuvent l'ignorer.
+	*/
+	notify(method, params) {
+		return this.opts.send(JsonRpcPeer.buildNotification(method, params)) !== false;
+	}
+	/**
+	* Ingestion d'une frame ENTRANTE déjà parsée → classe (request/notification/
+	* response) et route. Renvoie la nature (utile log/tests). Ne lève jamais.
+	* (Le pendant sortant = `request`/`notify` ; le `send` brut est injecté.)
+	*/
+	receive(msg) {
+		if (!msg || typeof msg !== "object" || msg.jsonrpc !== "2.0") {
+			this.opts.onFrameAudit?.("invalid", msg, this);
+			return "invalid";
+		}
+		const id = msg.id;
+		const hasId = typeof id === "number" || typeof id === "string";
+		const rawMethod = msg.method;
+		const method = typeof rawMethod === "string" ? rawMethod : void 0;
+		const params = msg.params;
+		if (method !== void 0) {
+			if (this.opts.beforeDispatch && !this.opts.beforeDispatch(msg, this)) {
+				this.opts.onFrameAudit?.("denied", msg, this);
+				if (hasId) {
+					this.opts.send({
+						jsonrpc: "2.0",
+						id,
+						error: {
+							code: -32001,
+							message: "unauthorized"
+						}
+					});
+					return "request";
+				}
+				return "notification";
+			}
+			if (hasId) {
+				this.handleRequest(id, method, params, msg);
+				return "request";
+			}
+			this.opts.onNotification?.(method, params);
+			return "notification";
+		}
+		if (hasId) {
+			this.handleResponse(msg);
+			return "response";
+		}
+		this.opts.onFrameAudit?.("invalid", msg, this);
+		return "invalid";
+	}
+	/** Annule tous les pending (fermeture du transport). */
+	dispose(reason = "peer disposed") {
+		if (!this.pending) return;
+		for (const p of this.pending.values()) {
+			if (p.timer) clearTimeout(p.timer);
+			p.reject(new Error(reason));
+		}
+		this.pending.clear();
+	}
+	startCall(method, params, timeoutMs, withMeta) {
+		const id = this.nextId++;
+		const pending = this.pending ??= /* @__PURE__ */ new Map();
+		return new Promise((resolve, reject) => {
+			const timer = setTimeout(() => {
+				pending.delete(id);
+				reject(/* @__PURE__ */ new Error(`RPC timeout: ${method}`));
+			}, timeoutMs);
+			pending.set(id, {
+				resolve: (v) => {
+					clearTimeout(timer);
+					resolve(v);
+				},
+				reject: (e) => {
+					clearTimeout(timer);
+					reject(e);
+				},
+				timer,
+				withMeta
+			});
+			if (this.opts.send({
+				jsonrpc: "2.0",
+				id,
+				method,
+				params
+			}) === false) {
+				clearTimeout(timer);
+				pending.delete(id);
+				reject(/* @__PURE__ */ new Error(`RPC non émis (transport indisponible) : ${method}`));
+			}
+		});
+	}
+	handleRequest(id, method, params, rawFrame) {
+		const handler = this.actions?.get(method);
+		if (!handler) {
+			this.opts.onFrameAudit?.("method_not_found", rawFrame, this);
+			this.opts.send({
+				jsonrpc: "2.0",
+				id,
+				error: {
+					code: -32601,
+					message: `method not found: ${method}`
+				}
+			});
+			return;
+		}
+		Promise.resolve().then(() => handler(params)).then((result) => {
+			if (result instanceof RpcEnvelope) {
+				this.opts.send({
+					jsonrpc: "2.0",
+					id,
+					result: result.result,
+					meta: result.meta
+				});
+				return;
+			}
+			this.opts.send({
+				jsonrpc: "2.0",
+				id,
+				result
+			});
+		}, (err) => {
+			if (err instanceof RpcError) {
+				const error = {
+					code: err.code,
+					message: err.message
+				};
+				if (err.data !== void 0) error.data = err.data;
+				this.opts.send({
+					jsonrpc: "2.0",
+					id,
+					error
+				});
+				return;
+			}
+			this.opts.onError?.(`rpc ${method}`, err);
+			this.opts.onFrameAudit?.("internal_error", rawFrame, this);
+			this.opts.send({
+				jsonrpc: "2.0",
+				id,
+				error: {
+					code: -32603,
+					message: "internal error"
+				}
+			});
+		});
+	}
+	handleResponse(msg) {
+		if (typeof msg.id !== "number" || !this.pending) return;
+		const pending = this.pending.get(msg.id);
+		if (!pending) return;
+		if (msg.error) {
+			this.pending.delete(msg.id);
+			pending.reject(new RpcError(msg.error.message, msg.error.code, msg.error.data));
+			return;
+		}
+		if ("result" in msg) {
+			this.pending.delete(msg.id);
+			pending.resolve(pending.withMeta ? {
+				result: msg.result,
+				meta: msg.meta
+			} : msg.result);
+		}
+	}
+};
+//#endregion
+//#region src/client/realtime/localEvents.ts
+/**
+* localEvents — **noms des événements LOCAUX du client temps réel**.
+*
+* Ces six noms ne voyagent jamais sur le fil : ils ne servent qu'à propager, dans
+* la page, ce que le client vient d'apprendre (changement d'état de connexion,
+* identité résolue au welcome, échantillon de statistiques, notice normalisée,
+* refus de canal). Ils partagent la table de `on()`/`off()` avec les canaux
+* réseau ; le double soulignement est ce qui les en distingue.
+*
+* **La table est la source unique**, exactement pour la même raison que
+* {@link PLATFORM_CHANNELS} l'est pour les canaux réseau : une chaîne recopiée
+* dans un écran est une chaîne qui survivra au renommage suivant. Celle-ci avait
+* déjà divergé — `"__state__"` était écrit en clair dans les trois gabarits
+* d'application, dans la barre de debug et dans la console d'administration,
+* sans qu'aucune constante ne l'exporte.
+*
+* Un consommateur n'a d'ailleurs pas à les connaître : `onState`, `onIdentity`,
+* `onStats`, `onNotice`, `onDenied` et `onReconnect` sont les portes publiques. La table existe
+* pour les implémentations (le client lui-même, ses observateurs agnostiques) et
+* pour un test qui veut se brancher au plus bas niveau.
+*
+* Pur et isomorphe (aucun import, aucune allocation).
+*/
+/**
+* Événements locaux du {@link RealtimeClient} — jamais émis ni reçus par le réseau.
+*
+* @see {@link RealtimeClient.onState} · {@link RealtimeClient.onIdentity} ·
+*   {@link RealtimeClient.onStats} · {@link RealtimeClient.onNotice} ·
+*   {@link RealtimeClient.onDenied} — les portes publiques à préférer partout.
+*/
+const LOCAL_EVENTS = {
+	/** État de la connexion (`"connected" | "reconnecting" | …`), à chaque transition. */
+	state: "__state__",
+	/** Identité résolue par le serveur au welcome ; `null` après un `disconnect()`. */
+	identity: "__identity__",
+	/** Tick d'échantillonnage des statistiques par canal (1×/s), sans charge utile. */
+	stats: "__stats__",
+	/** Notice normalisée (criticité temps réel interprétée). */
+	notice: "__notice__",
+	/** Refus d'un canal poussé par le serveur (`realtime:denied`). */
+	denied: "__denied__",
+	/** Tentative de reconnexion programmée (numéro d'essai, délai, échéance). */
+	reconnect: "__reconnect__"
+};
+//#endregion
+//#region src/realtime/IRealtimeTransport.ts
+/**
+* IRealtimeTransport — le SEUL maillon qui diffère client/serveur.
+*
+* Le protocole ({@link JsonRpcPeer}) et les « smarts » (stats, pub/sub) sont
+* isomorphes ; seule la façon dont les **octets** entrent et sortent change. On
+* isole donc le transport derrière cette interface : un même endpoint compose
+* N transports.
+*
+* Implémentations :
+*  - `BrowserWsTransport` (navigateur, `WebSocket` + reconnect géré au-dessus)
+*  - `WsConnectionTransport` (serveur, wrap d'une connexion `ws` — P… RealtimeController)
+*  - futurs P13 : `Tcp`/`Udp`/`Redis`/`SipTransport` (RealtimeService / IRealtimeHub)
+*
+* Les états suivent les constantes `WebSocket` (0..3) pour rester universels —
+* voir {@link TransportState}.
+*
+* ── Sens des flux ──
+*  Sortant : `send` (frame brute déjà sérialisée), `close`.
+*  Entrant : le owner branche `onMessage` (chaque frame reçue) ; `onOpen`/`onClose`/
+*  `onError` pilotent le cycle de vie (l'orchestration reconnect/heartbeat vit
+*  AU-DESSUS, dans l'endpoint — le transport reste « bête »).
+*/
+/** États d'un transport — alignés sur les constantes `WebSocket`. */
+const TransportState = {
+	CONNECTING: 0,
+	OPEN: 1,
+	CLOSING: 2,
+	CLOSED: 3
+};
+//#endregion
+//#region src/client/realtime/BrowserWsTransport.ts
+/**
+* BrowserWsTransport — transport {@link IRealtimeTransport} pour le navigateur :
+* wrap d'un `WebSocket` natif. Volontairement « bête » : il ouvre/envoie/ferme et
+* relaie les events. L'orchestration (reconnect, backoff, heartbeat, state machine)
+* vit AU-DESSUS dans `RealtimeClient` — qui crée un transport NEUF à chaque tentative.
+*
+* L'URL reçue est déjà normalisée (ws/wss, token) par l'appelant.
+*/
+var BrowserWsTransport = class {
+	url;
+	ws = null;
+	_onOpen = null;
+	_onMessage = null;
+	_onClose = null;
+	_onError = null;
+	constructor(url) {
+		this.url = url;
+	}
+	connect() {
+		const ws = new WebSocket(this.url);
+		this.ws = ws;
+		ws.addEventListener("open", () => this._onOpen?.());
+		ws.addEventListener("message", (ev) => {
+			if (typeof ev.data === "string") this._onMessage?.(ev.data);
+		});
+		ws.addEventListener("close", (ev) => {
+			this.ws = null;
+			this._onClose?.(ev.code, ev.reason);
+		});
+		ws.addEventListener("error", () => this._onError?.(/* @__PURE__ */ new Error("websocket error")));
+	}
+	send(raw) {
+		if (this.ws?.readyState === TransportState.OPEN) this.ws.send(raw);
+	}
+	close(code, reason) {
+		this.ws?.close(code, reason);
+	}
+	get readyState() {
+		return this.ws?.readyState ?? TransportState.CLOSED;
+	}
+	onOpen(cb) {
+		this._onOpen = cb;
+	}
+	onMessage(cb) {
+		this._onMessage = cb;
+	}
+	onClose(cb) {
+		this._onClose = cb;
+	}
+	onError(cb) {
+		this._onError = cb;
+	}
+};
+/** Le badge est-il déjà sorti sur cette page ? Posé même en production. */
+function alreadyAnnounced() {
+	return globalThis.__nfAnnounced__ === true;
+}
+/**
+* Mode annoncé par le SERVEUR au handshake temps réel — `null` tant qu'aucune
+* socket n'a reçu d'accueil.
+*
+* Il existe parce que `import.meta.env.DEV` ne dit que le mode du BUNDLE : une
+* application bâtie pour la production mais servie par un serveur de
+* développement (banc, `--cluster`, image testée localement) se taisait alors
+* qu'on avait tout intérêt à la faire parler. Le serveur, lui, sait.
+*/
+let serverEnv = null;
+/**
+* Le détail est-il sorti sur cette page ? Un seul par page, comme le badge — et
+* c'est le noyau qui gagne quand il y en a un.
+*
+* Sur `globalThis` et non en variable de module, pour la même raison que le
+* badge : un module vit plus longtemps qu'une page dans un banc, et un état qui
+* ne se réarme pas fait passer les tests suivants pour des régressions.
+*/
+function alreadyDetailed() {
+	return globalThis.__nfDetailed__ === true;
+}
+/**
+* Le mode annoncé par le serveur, quand il en annonce un.
+*
+* ⚠️ Le serveur **ne pose ce champ qu'en dehors de la production** : une absence
+* vaut donc production, jamais l'inverse. C'est la même règle que pour le
+* bundle, et pour la même raison — se taire à tort ne coûte qu'une ligne, parler
+* à tort expose la console de tout le monde.
+*
+* @param env - la valeur reçue dans `realtime:welcome`, ou `undefined`.
+*/
+function noteServerEnv(env) {
+	if (env) serverEnv = env;
+}
+/**
+* Peut-on se permettre le détail ? Bundle de développement, OU serveur qui
+* annonce un mode hors production.
+*/
+function isVerbose() {
+	return isDevBuild() || serverEnv !== null && serverEnv !== "production";
+}
+/**
+* Le bundle a-t-il été bâti en développement ?
+*
+* Le mode se LIT, il ne se devine pas : `import.meta.env.DEV` est posé par le
+* bundler de l'application (Vite le remplace par une constante au build). Hors
+* bundler il n'existe pas — et **l'absence de preuve de développement se traite
+* comme la production**, jamais l'inverse : se taire à tort ne coûte qu'une
+* ligne manquante, parler à tort pollue la console de tout le monde.
+*/
+function isDevBuild() {
+	return import.meta.env?.DEV === true;
+}
+/** Les sockets partagées, lues dans le registre de `RealtimeClient.shared()`. */
+function sharedSockets() {
+	const g = globalThis;
+	return g.__nfRealtime__ ? [...g.__nfRealtime__.values()] : [];
+}
+/**
+* Pose ou actualise `globalThis.nodefony`.
+*
+* Développement seulement : la console d'une application publiée appartient à
+* ses développeurs, et un handle global y serait une surface offerte pour rien.
+*/
+function poseHandle() {
+	if (!isVerbose()) return;
+	globalThis.nodefony = {
+		get kernel() {},
+		get socket() {
+			return sharedSockets()[0];
+		},
+		sockets: () => sharedSockets().map((s) => ({
+			url: s.url ?? "(adresse non résolue)",
+			state: s.state
+		})),
+		identity: () => {
+			return sharedSockets()[0]?.identity ?? null;
+		}
+	};
+}
+/**
+* Retire le handle et réarme le badge — appelé quand plus rien ne vit.
+*
+* « Plus rien » se CONSTATE : aucun noyau, et aucune socket dans le registre du
+* partage. Une socket construite hors `shared()` échappe à ce constat ; le seul
+* effet est qu'un badge pourrait ressortir, jamais une fuite.
+*/
+function release() {
+	const g = globalThis;
+	delete g.nodefony;
+	delete g.__nfAnnounced__;
+	delete globalThis.__nfDetailed__;
+	serverEnv = null;
+}
+/**
+* Émet le badge, au plus une fois par page.
+*
+* La forme est celle qu'ont adoptée Vue, Vite et les outils qui vivent dans une
+* console partagée : un badge en couleur sur UNE ligne. Pas de dessin en
+* caractères — celui du serveur a du sens dans un terminal qu'on ouvre une fois
+* au démarrage ; dans une console de navigateur il se répète à chaque
+* rechargement et pousse hors de vue les messages de l'application.
+*
+* @param name - ce qui suit « nodefony » ; le nom du noyau quand il y en a un.
+*/
+function badge(name) {
+	if (alreadyAnnounced()) return;
+	const c = globalThis.console;
+	if (!c?.log) return;
+	globalThis.__nfAnnounced__ = true;
+	c.log(`%c◆ nodefony%c${name}%c`, "background:#0b1120;color:#5eead4;font-weight:700;padding:2px 6px;border-radius:3px 0 0 3px", "background:#1e293b;color:#e2e8f0;padding:2px 6px;border-radius:0 3px 3px 0", "");
+}
+/**
+* Annonce une socket qui vit NUE — aucune composition, aucun noyau. C'est le cas
+* des vitrines du dépôt et de tout widget qui monte une socket et rien d'autre.
+*
+* @param annoncer - `false` fait taire l'annonce (option `banner` de la socket).
+* @returns le débranchement ; une socket partagée vit avec la page et n'a pas à
+*   l'appeler — il existe pour les bancs, qui doivent repartir d'une page vierge.
+*/
+function announceRealtime(annoncer) {
+	if (annoncer === false) return () => void 0;
+	badge("client");
+	poseHandle();
+	return () => {
+		if (sharedSockets().length === 0) release();
+	};
+}
+/**
+* Détail du framework, dans un groupe REPLIÉ de la console : un tableau
+* `clé → valeur` et les deux rappels qui font gagner du temps.
+*
+* **Un seul détail par page**, et le noyau gagne : quand il y en a un, la socket
+* ne le double pas — c'est lui qui a le plus à dire (état, identité, services).
+* Une vitrine sans noyau, elle, obtient enfin le sien : c'est la moitié
+* « diagnostic » que l'ADR-0007 D7 laissait derrière le péage de la composition.
+*
+* Le groupe est replié et non ouvert : présent pour qui le cherche, invisible
+* pour qui débogue autre chose. `groupEnd` est atteint même si une lecture
+* jette — un groupe laissé ouvert avale tous les messages suivants.
+*
+* @param rows - le tableau à rendre, `clé → { valeur }`, composé par
+*   l'appelant : lui seul sait ce qu'il a d'important à dire.
+* @param subject - l'objet vivant à imprimer en dernier (noyau, ou socket).
+* @param title - l'intitulé du groupe.
+* @returns `true` si le détail a été émis.
+*/
+function consoleDetails(rows, subject, title) {
+	if (alreadyDetailed() || !isVerbose()) return false;
+	const c = globalThis.console;
+	if (!c?.log || !c.groupCollapsed || !c.groupEnd) return false;
+	globalThis.__nfDetailed__ = true;
+	c.groupCollapsed(`%c${title}`, "color:#94a3b8");
+	try {
+		if (c.table) c.table(rows);
+		else for (const [k, v] of Object.entries(rows)) c.log(k, v.valeur);
+		c.log("%cconsole :%c nodefony.socket · nodefony.sockets() · nodefony.identity()", "color:#94a3b8", "color:#5eead4;font-family:monospace");
+		c.log("%ccorrélation :%c chaque journal porte un requestId — la même valeur côté serveur relie clic, route, base et réponse", "color:#94a3b8", "color:#e2e8f0");
+		c.log("%cobjet :%c", "color:#94a3b8", "", subject);
+	} finally {
+		c.groupEnd();
+	}
+	return true;
+}
+/** Un noyau est-il vivant sur cette page ? La socket s'efface devant lui. */
+function hasKernel() {
+	return false;
+}
+//#endregion
+//#region src/realtime/channelRate.ts
+/**
+* Construit le nom d'un canal cadencé à partir de sa base et de la cadence demandée.
+*
+* `intervalMs` omis OU égal à `defaultMs` → renvoie `base` nu : on **n'émet pas** de suffixe
+* pour la cadence par défaut, ce qui évite de fragmenter le canal de base entre consommateurs
+* qui veulent tous la valeur par défaut (ils partagent alors un seul ticker ref-compté).
+*
+* @param base - canal de base (ex. `"nodefony:orm:health"`).
+* @param intervalMs - cadence demandée (ms). Omise → canal de base.
+* @param defaultMs - cadence par défaut du canal ; `intervalMs === defaultMs` ⇒ canal de base.
+* @returns `base` ou `base:<ms>`.
+*/
+function rateChannel(base, intervalMs, defaultMs) {
+	if (intervalMs == null || intervalMs === defaultMs) return base;
+	return `${base}:${intervalMs}`;
+}
+//#endregion
+//#region src/client/realtime/AdaptiveRate.ts
+/**
+* AdaptiveRate — cadence ADAPTATIVE automatique d'un canal d'ÉTAT, **client-driven**
+* (niveau 1, zéro changement serveur). Pendant exact de l'ABR vidéo (HLS/DASH ajustent
+* la qualité selon le buffer) et du contrôle de congestion réseau (TCP **AIMD**).
+*
+* Idée : la cadence vit dans le nom du canal (cf {@link rateChannel} — 1 canal = 1 cadence
+* = 1 ticker serveur). Si le client observe que les frames arrivent **plus lentement** que
+* demandé (famine ⇒ event-loop serveur ou réseau sous pression), il se ré-abonne à une
+* cadence **plus grossière** (`1s→2s→5s`) → moins de pushes → la pression retombe → le flux
+* récupère ; quand c'est sain durablement, il remonte **doucement** vers la cadence désirée.
+*
+* AIMD (asymétrie anti-oscillation, comme TCP) :
+*  - **Multiplicative Decrease** : famine ⇒ on monte d'un cran l'échelle (cadence grossie),
+*    immédiat. L'échelle géométrique (×2) rend la décrue multiplicative.
+*  - **Additive Increase** : on ne redescend d'un cran (cadence affinée) qu'après une
+*    **fenêtre** de N échantillons sains → reprise lente.
+*  - **bande morte** (hystérésis) entre « sain » et « famine » : aucun changement → pas de
+*    flip-flop.
+*
+* Réservé aux canaux d'**ÉTAT** (latest-wins : supervision, stats) où décimer est sans perte.
+* PAS pour les canaux d'**ÉVÉNEMENTS** (syslog, frames protocole) où chaque item compte
+* (eux se batchent, pas se décimer).
+*
+* Cette classe est la **machine à états pure** (aucun timer, aucune socket) → déterministe
+* et testable. Le câblage à une socket réelle vit dans {@link bindAdaptiveChannel}.
+*
+* @see {@link bindAdaptiveChannel} — glue socket + watchdog.
+* @see {@link rateChannel} — convention de nommage cadencé partagée client↔serveur.
+*/
+/** Construit une échelle géométrique ×2 de `intervalMs` à `maxMs` (bornes incluses). */
+function deriveLadder(intervalMs, maxMs) {
+	const ladder = [];
+	let ms = intervalMs;
+	while (ms < maxMs) {
+		ladder.push(ms);
+		ms *= 2;
+	}
+	ladder.push(maxMs);
+	return ladder;
+}
+var AdaptiveRate = class {
+	ladder;
+	starvationFactor;
+	healthyFactor;
+	recoveryWindow;
+	/** Position dans l'échelle (0 = cadence la plus fine = désirée). */
+	idx = 0;
+	/** Échantillons sains consécutifs depuis le dernier changement. */
+	healthy = 0;
+	/** Timestamp (ms) de la dernière frame ; `null` = pas de référence (post-switch/init). */
+	lastFrameTs = null;
+	constructor(options) {
+		const maxMs = options.maxMs ?? 6e4;
+		const ladder = options.ladder && options.ladder.length > 0 ? [...options.ladder].sort((a, b) => a - b) : deriveLadder(options.intervalMs, Math.max(options.intervalMs, maxMs));
+		this.ladder = ladder;
+		this.starvationFactor = options.starvationFactor ?? 1.8;
+		this.healthyFactor = options.healthyFactor ?? 1.25;
+		this.recoveryWindow = options.recoveryWindow ?? 4;
+	}
+	/** Cadence courante (ms). */
+	current() {
+		return this.ladder[this.idx];
+	}
+	/** Décale d'un cran vers le grossier (MD) ; renvoie `true` si la cadence a changé. */
+	decrease() {
+		if (this.idx >= this.ladder.length - 1) return false;
+		this.idx += 1;
+		return true;
+	}
+	/** Décale d'un cran vers le fin (AI) ; renvoie `true` si la cadence a changé. */
+	increase() {
+		if (this.idx <= 0) return false;
+		this.idx -= 1;
+		return true;
+	}
+	/** Réamorce la mesure (après un changement de cadence). */
+	resetSample() {
+		this.lastFrameTs = null;
+		this.healthy = 0;
+	}
+	/**
+	* À appeler à CHAQUE frame reçue. Pilote l'**AI** (reprise) et détecte aussi la famine
+	* sur frames lentes (**MD**).
+	*
+	* @param now - horloge (ms).
+	* @returns une {@link RateDecision} si la cadence doit changer, sinon `null`.
+	*/
+	noteFrame(now) {
+		const prev = this.lastFrameTs;
+		this.lastFrameTs = now;
+		if (prev === null) return null;
+		const gap = now - prev;
+		const cur = this.current();
+		if (gap > this.starvationFactor * cur) {
+			if (this.decrease()) {
+				this.resetSample();
+				return {
+					intervalMs: this.current(),
+					reason: "decrease"
+				};
+			}
+			this.healthy = 0;
+			return null;
+		}
+		if (gap <= this.healthyFactor * cur) {
+			this.healthy += 1;
+			if (this.healthy >= this.recoveryWindow && this.increase()) {
+				this.resetSample();
+				return {
+					intervalMs: this.current(),
+					reason: "increase"
+				};
+			}
+			return null;
+		}
+		this.healthy = 0;
+		return null;
+	}
+	/**
+	* Watchdog : à appeler périodiquement. Détecte la famine **totale** (plus aucune frame)
+	* que {@link noteFrame} ne verrait pas (faute de frame).
+	*
+	* @param now - horloge (ms).
+	* @returns une {@link RateDecision} (toujours `"decrease"`) si la cadence doit grossir.
+	*/
+	checkStarvation(now) {
+		if (this.lastFrameTs === null) return null;
+		if (now - this.lastFrameTs > this.starvationFactor * this.current()) {
+			if (this.decrease()) {
+				this.resetSample();
+				return {
+					intervalMs: this.current(),
+					reason: "decrease"
+				};
+			}
+		}
+		return null;
+	}
+};
+const defaultScheduler = {
+	set: (cb, ms) => setInterval(cb, ms),
+	clear: (h) => clearInterval(h)
+};
+const defaultClock = () => typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+/**
+* Câble un {@link AdaptiveRate} à une socket réelle : abonne `base` à sa cadence désirée,
+* mesure la gigue d'arrivée, et **ré-abonne** automatiquement à une cadence plus grossière
+* en cas de famine (MD) puis plus fine quand c'est sain (AI). Les frames continuent d'être
+* livrées à `handler` à travers les changements de cadence.
+*
+* Réservé aux canaux d'ÉTAT (latest-wins). Pour les canaux d'événements, ne pas décimer.
+*
+* @param socket - la socket Nodefony ({@link IRealtimeSocket}).
+* @param base - canal de base (sans suffixe de cadence).
+* @param handler - reçoit le payload de chaque frame.
+* @param options - cadence désirée + réglages AIMD + injections.
+* @returns une {@link AdaptiveChannelBinding} (cadence courante + `dispose`).
+*/
+function bindAdaptiveChannel(socket, base, handler, options) {
+	if (options.enabled === false) {
+		const channel = rateChannel(base, options.intervalMs, options.defaultMs);
+		socket.subscribe(channel);
+		const offFixed = socket.on(channel, handler);
+		options.onRate?.(options.intervalMs, "init");
+		let downFixed = false;
+		return {
+			get intervalMs() {
+				return options.intervalMs;
+			},
+			get channel() {
+				return channel;
+			},
+			dispose() {
+				if (downFixed) return;
+				downFixed = true;
+				offFixed();
+				socket.unsubscribe(channel);
+			}
+		};
+	}
+	const clock = options.clock ?? defaultClock;
+	const scheduler = options.scheduler ?? defaultScheduler;
+	const ar = new AdaptiveRate(options);
+	let currentMs = ar.current();
+	let currentChannel = rateChannel(base, currentMs, options.defaultMs);
+	let off = null;
+	let watchdog;
+	let disposed = false;
+	const wrapped = (...args) => {
+		const decision = ar.noteFrame(clock());
+		handler(...args);
+		if (decision) applyDecision(decision);
+	};
+	const armWatchdog = () => {
+		if (watchdog !== void 0) scheduler.clear(watchdog);
+		watchdog = scheduler.set(() => {
+			const decision = ar.checkStarvation(clock());
+			if (decision) applyDecision(decision);
+		}, currentMs);
+	};
+	function applyDecision(decision) {
+		if (disposed) return;
+		const nextChannel = rateChannel(base, decision.intervalMs, options.defaultMs);
+		currentMs = decision.intervalMs;
+		if (nextChannel !== currentChannel) {
+			const oldChannel = currentChannel;
+			const oldOff = off;
+			socket.subscribe(nextChannel);
+			off = socket.on(nextChannel, wrapped);
+			oldOff?.();
+			socket.unsubscribe(oldChannel);
+			currentChannel = nextChannel;
+		}
+		armWatchdog();
+		options.onRate?.(currentMs, decision.reason);
+	}
+	socket.subscribe(currentChannel);
+	off = socket.on(currentChannel, wrapped);
+	armWatchdog();
+	options.onRate?.(currentMs, "init");
+	return {
+		get intervalMs() {
+			return currentMs;
+		},
+		get channel() {
+			return currentChannel;
+		},
+		dispose() {
+			if (disposed) return;
+			disposed = true;
+			if (watchdog !== void 0) scheduler.clear(watchdog);
+			off?.();
+			socket.unsubscribe(currentChannel);
+		}
+	};
+}
+//#endregion
+//#region src/realtime/platformChannels.ts
+/**
+* Canaux de **diffusion** de la plateforme (le serveur pousse, les écrans regardent).
+*
+* Les valeurs sont des **bases** : trois d'entre elles se déclinent par cible
+* (`…@<pid>` pour un forage sur un process, `…@<id>` pour un job) et toutes acceptent
+* le suffixe de cadence `:<ms>` (cf {@link rateChannel}). Composer, jamais concaténer
+* un préfixe à la main.
+*/
+const PLATFORM_CHANNELS = {
+	/** Journaux du pod (flux de `Pdu`, coalescé par le pont syslog). */
+	syslog: "nodefony:syslog",
+	/** Journal d'audit sécurité — plancher super-admin, un cran au-dessus des autres. */
+	audit: "nodefony:audit",
+	/** Métriques agrégées du tableau de bord (vue d'ensemble). */
+	dashboard: "nodefony:dashboard",
+	/** Supervision des process du cluster ; forage par process : `…@<pid>`. */
+	supervision: "nodefony:supervision",
+	/** Sondes de la barre de debug (mêmes mesures que la supervision, ticker séparé). */
+	debugbar: "nodefony:debugbar",
+	/** Auto-observabilité de la socket elle-même (canaux, abonnés, fan-out, backpressure). */
+	socket: "nodefony:socket",
+	/** Santé des connecteurs de base (état, ping). */
+	ormHealth: "nodefony:orm:health",
+	/** Flux ORM (débit de requêtes, latence, requêtes lentes) — plus dynamique que la santé. */
+	ormFlow: "nodefony:orm:flow",
+	/** Forage détaillé d'un connecteur sur un process donné : `…@<pid>`. */
+	ormRich: "nodefony:orm:rich",
+	/** Sortie d'un job de génération de code : `…@<jobId>` (développement uniquement). */
+	scaffoldJob: "nodefony:scaffold:job"
+};
+/**
+* Méthodes **RPC** de la plateforme (le client demande, le serveur répond).
+*
+* Elles portent la même marque que les canaux pour la même raison : ce sont des
+* surfaces du serveur, pas de l'application. `nodefony:kernel:gc` déclenche un cycle
+* de ramasse-miettes bloquant — un nom aussi lourd de conséquences n'a rien à faire
+* dans l'espace de nommage où une application déclare ses propres actions.
+*
+* ⚠️ À ne pas confondre avec les **notifications du protocole** (`realtime:welcome`,
+* `realtime:denied`) : celles-là décrivent la mécanique de la socket elle-même, pas
+* une surface de la plateforme, et ne sont ni des canaux ni des actions.
+*/
+const PLATFORM_METHODS = {
+	/** Liveness + mesure du temps d'aller-retour. */
+	ping: "nodefony:kernel:ping",
+	/** Force un cycle GC (seulement si le pod tourne avec `--expose-gc`). */
+	gc: "nodefony:kernel:gc",
+	/** Ce qu'un scaffold écrirait — fichiers créés, diff des réécritures — sans rien écrire. */
+	scaffoldPreview: "nodefony:scaffold:preview",
+	/** Démarre un job de génération de code et rend son identifiant. */
+	scaffoldRun: "nodefony:scaffold:run",
+	/** Demande l'arrêt d'un job de génération en cours. */
+	scaffoldCancel: "nodefony:scaffold:cancel"
+};
+/**
+* Événements **DOM** de la plateforme (`window`), dans le même espace de nommage.
+*
+* Ils ne passent pas par la socket — ce sont des `CustomEvent` que le navigateur
+* fait circuler entre la barre de debug, le pont HMR et l'écran qui les écoute.
+* Ils portent la marque pour la même raison que les canaux : `window` est un
+* espace partagé avec l'application, et un nom d'événement générique s'y
+* télescoperait.
+*/
+const PLATFORM_EVENTS = {
+	/** Un hot-update Vite vient d'être appliqué (émis par le pont du template). */
+	hmr: "nodefony:hmr",
+	/** L'utilisateur a choisi une entrée dans la barre de debug. */
+	debugbarSelect: "nodefony:debugbar:select"
+};
+//#endregion
+//#region src/client/realtime/RealtimeClient.ts
+/**
+* RealtimeClient — Core isomorphe Nodefony côté navigateur (P14.11).
+*
+* Protocole : JSON-RPC 2.0 maison sur WebSocket (+ HTTP long-polling fallback TODO P13).
+* State machine : disconnected → connecting → connected → reconnecting → error.
+*
+* Features :
+*  - reconnect exponentiel avec back-off
+*  - pub/sub (on/off/emit) — notifications JSON-RPC sans id
+*  - request/response — RPC bidirectionnel typé
+*  - streaming — chunks `{ id, stream: { chunk, done } }` pour LLM token-by-token
+*
+* Le backend WS de référence (RealtimeService) sera implémenté en P13.4.
+* En attendant, ce client peut parler à n'importe quel serveur JSON-RPC 2.0.
+*/
+/** Taille max du ring du log protocole (inspecteur realtime). */
+const FRAME_LOG_MAX = 300;
+/** Clés sensibles masquées dans le log protocole (sécurité — jamais de secret en clair). */
+const FRAME_REDACT_RE = /(token|password|secret|api[_-]?key|apikey|authorization|bearer)/i;
+/** Copie d'un payload JSON-RPC avec masquage des champs sensibles (bornée en profondeur). */
+function redactFrame(value, depth = 0) {
+	if (depth > 4 || value === null || typeof value !== "object") return value;
+	if (Array.isArray(value)) return value.map((v) => redactFrame(v, depth + 1));
+	const out = {};
+	for (const [k, v] of Object.entries(value)) out[k] = FRAME_REDACT_RE.test(k) ? "[redacted]" : redactFrame(v, depth + 1);
+	return out;
+}
+var RealtimeClient = class RealtimeClient {
+	opts;
+	transport = null;
+	transportFactory;
+	_state = "disconnected";
+	peer = new JsonRpcPeer({
+		send: (frame) => this.send(frame),
+		onNotification: (method, params) => this.dispatchNotification(method, params)
+	});
+	handlers = /* @__PURE__ */ new Map();
+	_subscriptions = /* @__PURE__ */ new Map();
+	_welcomed = false;
+	reconnectAttempt = 0;
+	_nextRetryAt = null;
+	reconnectTimer = null;
+	heartbeatTimer = null;
+	intentionalClose = false;
+	_stats = /* @__PURE__ */ new Map();
+	_framesReceived = 0;
+	_framesUnsent = 0;
+	_unsentNotified = true;
+	_lastFrameAt = null;
+	_lastFrameMethod = null;
+	statsTimer = null;
+	_prevSampled = /* @__PURE__ */ new Map();
+	_rawFrames = null;
+	_identity = null;
+	_serverChannels = null;
+	_serverMethods = null;
+	constructor(opts = {}, transportFactory) {
+		this.opts = opts;
+		this.transportFactory = transportFactory ?? ((url) => new BrowserWsTransport(url));
+		this.startStatsSampler();
+		announceRealtime(this.opts.banner);
+	}
+	/**
+	* Instance de connexion **partagée par URL** (résolue en absolu) sur
+	* `globalThis`. Plusieurs consommateurs d'une même page (ex. Studio + barre de
+	* debug) obtiennent la MÊME instance → **une seule socket** WebSocket. Les
+	* options ne s'appliquent qu'à la 1ʳᵉ création (les suivantes réutilisent).
+	*
+	* @param opts - options (au moins `url`), appliquées seulement à la création.
+	* @returns l'instance partagée pour cette URL.
+	*/
+	static shared(opts = {}) {
+		const key = RealtimeClient.resolveUrl(opts.url);
+		const g = globalThis;
+		const map = g.__nfRealtime__ ??= /* @__PURE__ */ new Map();
+		let client = map.get(key);
+		if (!client) {
+			client = new RealtimeClient({
+				...opts,
+				url: key
+			});
+			map.set(key, client);
+		}
+		return client;
+	}
+	/**
+	* Message d'une adresse manquante — LA seule formulation, employée par les
+	* deux chemins qui peuvent la constater.
+	*
+	* Il n'y a **pas** de valeur par défaut, et c'est délibéré : la route dépend
+	* de l'application, pas du framework. Deviner `/nodefony/api/realtime` — ce
+	* que faisait ce client — donnait une socket qui ne se connecte jamais et se
+	* contente de retenter, sans un mot. Un échec franc coûte trente secondes ;
+	* une socket silencieusement morte coûte une soirée.
+	*/
+	static missingUrl() {
+		return /* @__PURE__ */ new Error("[nodefony] adresse du serveur temps réel manquante.\n  Donne-la explicitement : RealtimeClient.shared({ url: \"/api/live/realtime\" })\n  ou, en React : <NodefonyProvider url=\"/api/live/realtime\">\n  Il n'y a pas de valeur par défaut : la route dépend de ton application (une application générée monte /api/live/realtime, la console d'administration /nodefony/studio/api/realtime).");
+	}
+	/** Résout une URL (relative ou absolue) en chaîne absolue stable = clé du singleton. */
+	static resolveUrl(url) {
+		if (!url) throw RealtimeClient.missingUrl();
+		if (typeof window === "undefined") return url;
+		try {
+			const u = new URL(url, window.location.href);
+			if (u.protocol === "http:") u.protocol = "ws:";
+			else if (u.protocol === "https:") u.protocol = "wss:";
+			return u.toString();
+		} catch {
+			throw new Error(`[nodefony] adresse du serveur temps réel illisible : ${JSON.stringify(url)}`);
+		}
+	}
+	get state() {
+		return this._state;
+	}
+	/** Nombre de tentatives de reconnexion depuis la dernière connexion réussie. */
+	get reconnectAttempts() {
+		return this.reconnectAttempt;
+	}
+	/**
+	* Timestamp (ms epoch) de la prochaine tentative de reconnexion planifiée,
+	* `null` hors backoff. Permet un compte à rebours UI synchronisé au vrai délai.
+	*/
+	get nextRetryAt() {
+		return this._nextRetryAt;
+	}
+	/**
+	* Force une reconnexion **immédiate** (annule le backoff en cours). No-op si
+	* déjà connecté/connexion en cours.
+	*/
+	retryNow() {
+		if (this._state === "connected" || this._state === "connecting") return;
+		if (this.reconnectTimer) {
+			clearTimeout(this.reconnectTimer);
+			this.reconnectTimer = null;
+		}
+		this._nextRetryAt = null;
+		this.intentionalClose = false;
+		this.openSocket().catch(() => {});
+	}
+	/**
+	* Ouvre la connexion WS. Idempotent — si déjà ouverte, no-op.
+	* Resolve une fois `connected` ou reject sur erreur fatale.
+	*/
+	async connect(url) {
+		if (this._state === "connected" || this._state === "connecting") return;
+		this.intentionalClose = false;
+		this.opts.url = url ?? this.requireUrl();
+		return this.openSocket();
+	}
+	/** L'URL configurée, ou l'échec franc — jamais une valeur devinée. */
+	requireUrl() {
+		if (!this.opts.url) throw RealtimeClient.missingUrl();
+		return this.opts.url;
+	}
+	disconnect() {
+		this.intentionalClose = true;
+		this.clearTimers();
+		this.transport?.close(1e3, "client disconnect");
+		this.peer.dispose("client disconnect");
+		this._welcomed = false;
+		this._identity = null;
+		this._serverChannels = null;
+		this._serverMethods = null;
+		this.fireLocal(LOCAL_EVENTS.identity, null);
+		this.setState("disconnected");
+	}
+	/** Pub/sub local — handler sur un event server-pushed (notification JSON-RPC). */
+	on(event, handler) {
+		if (!this.handlers.has(event)) this.handlers.set(event, /* @__PURE__ */ new Set());
+		this.handlers.get(event).add(handler);
+		return () => this.off(event, handler);
+	}
+	off(event, handler) {
+		this.handlers.get(event)?.delete(handler);
+	}
+	/**
+	* S'abonne aux **notices normalisées** émises par le client : criticités qui
+	* cassent le temps réel (close codes RFC 6455 interprétés via
+	* {@link closeCodeToNotice}), erreurs serveur poussées, rétablissement de
+	* connexion. Réutilisable par toute app — le centre de notifications (snackbar
+	* Studio) s'y branche directement.
+	*
+	* @param handler - reçoit chaque {@link NodefonyNotice}.
+	* @returns dispose (désabonnement).
+	*/
+	onNotice(handler) {
+		return this.on(LOCAL_EVENTS.notice, handler);
+	}
+	/**
+	* S'abonne aux **refus de canal** poussés par le serveur (`realtime:denied`) :
+	* un `subscribe`/push vers un canal protégé sans droit suffisant. Permet une
+	* réaction CIBLÉE par canal (griser un contrôle, demander une élévation),
+	* complémentaire de {@link onNotice} (UX générique). Event LOCAL `__denied__`.
+	*
+	* Polymorphisme CLIENT : la réaction est pluggable ici ; l'AUTORITÉ reste
+	* serveur (le firewall a déjà décidé, le motif est générique — pas d'oracle).
+	*
+	* @param handler - reçoit `{ channel, reason }`.
+	* @returns dispose (désabonnement).
+	*/
+	onDenied(handler) {
+		return this.on(LOCAL_EVENTS.denied, handler);
+	}
+	/**
+	* Notification one-way client → server (pas de réponse attendue).
+	*
+	* C'est la SEULE émission dont personne n'apprend l'échec autrement : une
+	* requête corrélée est rejetée, un (dés)abonnement est rejoué au reconnect —
+	* une notification applicative perdue, elle, ne laisse aucune trace. Si le
+	* transport est fermé, l'utilisateur en est donc averti (une fois par épisode
+	* de coupure, cf {@link send}).
+	*/
+	emit(method, params) {
+		if (!this._emitRaw(method, params)) this.noticeUnsent();
+	}
+	/**
+	* Émission interne sans typage strict — utilisée pour les notifications système
+	* (`subscribe`, `unsubscribe`, `ping`) qui ne figurent pas dans la map `Emit`
+	* utilisateur. Bypasse les types conditionnels de {@link emit}.
+	*
+	* Ces frames-là **ne préviennent pas** l'utilisateur quand elles se perdent :
+	* les abonnements sont rejoués à la reconnexion et le heartbeat est arrêté
+	* avec les timers. Avertir ferait paraître comme une perte ce que le client
+	* rattrape tout seul — du bruit dans le centre de notifications d'une app qui
+	* monte et démonte des vues (le cas de Studio).
+	*
+	* @returns `false` si le transport n'a pas émis la frame.
+	*/
+	_emitRaw(method, params) {
+		return this.peer.notify(method, params);
+	}
+	/**
+	* Émet sur un canal — verbe socket de {@link IRealtimeSocket.publish}. Côté client =
+	* notification au serveur (alias clair de {@link emit}).
+	*/
+	publish(channel, payload) {
+		this.emit(channel, payload);
+	}
+	/**
+	* S'abonne à un canal pub/sub serveur (**ref-compté**). Émet la notification
+	* `subscribe` au serveur UNIQUEMENT au 1er consommateur du canal ; les suivants
+	* ne font qu'incrémenter le compteur. Ré-émis automatiquement à chaque
+	* `realtime:welcome` — jamais à la simple ouverture de la socket, où le serveur
+	* le jetterait sans un mot. NE remplace PAS {@link on} : `on(channel, h)` REÇOIT les
+	* messages, `subscribe(channel)` DEMANDE au serveur de les pousser.
+	*
+	* Autorité unique partagée par le binding `nodefony/react` ET le store Studio →
+	* deux consommateurs du même canal ne se coupent plus l'un l'autre.
+	*/
+	subscribe(channel) {
+		const c = channel;
+		const n = (this._subscriptions.get(c) ?? 0) + 1;
+		this._subscriptions.set(c, n);
+		if (n === 1 && this._welcomed) this._emitRaw("subscribe", { channel: c });
+	}
+	/**
+	* Désabonne un consommateur d'un canal (ref-compté) : émet `unsubscribe` au
+	* serveur seulement au **dernier** consommateur. No-op si le canal n'est pas suivi.
+	*/
+	unsubscribe(channel) {
+		const c = channel;
+		const cur = this._subscriptions.get(c);
+		if (!cur) return;
+		if (cur <= 1) {
+			this._subscriptions.delete(c);
+			if (this._welcomed) this._emitRaw("unsubscribe", { channel: c });
+		} else this._subscriptions.set(c, cur - 1);
+	}
+	/** Canaux actuellement abonnés (≥ 1 consommateur). Lecture seule. */
+	get subscribedChannels() {
+		return Array.from(this._subscriptions.keys());
+	}
+	/**
+	* L'adresse du serveur temps réel, telle qu'elle a été donnée (ou résolue en
+	* absolu par {@link shared}). `null` tant qu'aucune n'a été fournie — le
+	* framework n'en devine aucune.
+	*
+	* Publiée pour l'auto-observation : un instantané de socket qui ne dit pas DE
+	* QUELLE socket il parle ne sert à rien dès qu'une page en tient plus d'une.
+	*/
+	get url() {
+		return this.opts.url ?? null;
+	}
+	/**
+	* Identité de la connexion, **annoncée par le serveur** au `realtime:welcome`
+	* ({@link RealtimeIdentity}). `null` tant qu'aucun welcome n'a été reçu ; une
+	* fois reçu, un visiteur anonyme a `authenticated: false` (jamais `null`). Un
+	* consommateur (Studio) sait ainsi s'il doit afficher le login **sans taper de
+	* route**. Rafraîchie à chaque (re)connexion ; remise à `null` au
+	* {@link disconnect} volontaire (logout).
+	*/
+	get identity() {
+		return this._identity;
+	}
+	/** Canaux pub/sub annoncés par le serveur au welcome (découverte). `null` si pas (encore) reçu. */
+	get serverChannels() {
+		return this._serverChannels;
+	}
+	/** Actions RPC annoncées par le serveur au welcome (découverte). `null` si pas (encore) reçu. */
+	get serverMethods() {
+		return this._serverMethods;
+	}
+	/**
+	* S'abonne à l'identité résolue (event LOCAL `__identity__`, jamais réseau) :
+	* le handler est rappelé à chaque (re)welcome et au `disconnect()`. Permet à
+	* l'UI de basculer anonyme↔authentifié sans polling ni route `/auth/me`.
+	*
+	* @param handler - reçoit la {@link RealtimeIdentity} courante (ou `null`).
+	* @returns dispose (désabonnement).
+	*/
+	onIdentity(handler) {
+		return this.on(LOCAL_EVENTS.identity, handler);
+	}
+	/**
+	* S'abonne à l'**état de la connexion** (event LOCAL `__state__`, jamais réseau) :
+	* le handler est rappelé à chaque transition (`connecting`, `connected`,
+	* `reconnecting`, `error`, `disconnected`), jamais pour un état inchangé.
+	*
+	* C'est la porte à employer partout — un badge de connexion, une liaison de vue,
+	* une barre de debug. Écrire `on("__state__", …)` en clair marche aussi, mais
+	* recopie un nom d'événement interne dans du code applicatif : c'est ce qui a
+	* fait diverger les trois gabarits d'application.
+	*
+	* @param handler - reçoit le nouvel {@link RealtimeState}.
+	* @returns dispose (désabonnement).
+	*/
+	onState(handler) {
+		return this.on(LOCAL_EVENTS.state, handler);
+	}
+	/**
+	* S'abonne au **tick d'échantillonnage des statistiques** (event LOCAL
+	* `__stats__`, jamais réseau), émis une fois par seconde après recalcul des
+	* débits par canal. Sans charge utile : lire ensuite {@link getChannelStats}
+	* ou {@link getStats}, dont les valeurs viennent d'être rafraîchies.
+	*
+	* @param handler - appelé à chaque échantillon.
+	* @returns dispose (désabonnement).
+	*/
+	onStats(handler) {
+		return this.on(LOCAL_EVENTS.stats, handler);
+	}
+	/**
+	* S'abonne aux **tentatives de reconnexion programmées** (event LOCAL
+	* `__reconnect__`, jamais réseau) : numéro d'essai, délai retenu par le
+	* back-off, et échéance absolue. De quoi afficher un compte à rebours plutôt
+	* qu'un « déconnecté » muet.
+	*
+	* @param handler - reçoit `{ attempt, delay, nextRetryAt }`.
+	* @returns dispose (désabonnement).
+	*/
+	onReconnect(handler) {
+		return this.on(LOCAL_EVENTS.reconnect, handler);
+	}
+	/**
+	* Handle « socket-like » d'un canal ({@link IRealtimeChannel}) — fine liaison sur
+	* les primitives (`subscribe`/`on`/`publish`/`unsubscribe`), forme naturelle des
+	* canaux à état (SIP, bridge) et point d'accroche des couches à venir (codec,
+	* cadence, politique). N'ouvre rien : appeler `.open()` pour s'abonner. `kind` reste
+	* indéfini côté client tant que le serveur ne l'annonce pas.
+	*/
+	channel(name) {
+		const hub = this;
+		const disposers = /* @__PURE__ */ new Set();
+		return {
+			name,
+			on(handler) {
+				const dispose = hub.on(name, handler);
+				disposers.add(dispose);
+				return () => {
+					dispose();
+					disposers.delete(dispose);
+				};
+			},
+			send(payload) {
+				hub.publish(name, payload);
+			},
+			open() {
+				hub.subscribe(name);
+			},
+			close() {
+				for (const d of disposers) d();
+				disposers.clear();
+				hub.unsubscribe(name);
+			}
+		};
+	}
+	/**
+	* S'abonne à un canal d'ÉTAT en **cadence adaptative** (AIMD client-driven) : la lib
+	* mesure la gigue d'arrivée et ré-abonne automatiquement à une cadence plus grossière en
+	* cas de famine, plus fine quand c'est sain — sans changement serveur. `handler` reçoit
+	* les frames à travers les changements de cadence. Réservé aux canaux latest-wins.
+	*
+	* @param base - canal de base (sans suffixe de cadence).
+	* @param handler - reçoit le payload de chaque frame.
+	* @param options - cadence désirée + réglages AIMD (cf {@link BindAdaptiveOptions}).
+	* @returns une poignée {@link AdaptiveChannelBinding} (cadence courante + `dispose`).
+	*/
+	adaptiveChannel(base, handler, options) {
+		return bindAdaptiveChannel(this, base, handler, options);
+	}
+	async request(method, params, timeoutMs = 3e4) {
+		if (method.charCodeAt(0) === 47) {
+			if (typeof params === "number") timeoutMs = params;
+			params = { path: method };
+			method = "api.request";
+		}
+		return this.peer.request(method, params, timeoutMs);
+	}
+	/**
+	* **Mutation** API par le pont `api.request` (POST/PUT/PATCH/DELETE) — pendant
+	* d'écriture de {@link request} (qui ne fait que des lectures GET). Transporte
+	* la méthode HTTP **logique**, le corps, et une **clé d'idempotence**
+	* (OBLIGATOIRE côté serveur : une socket reconnecte et peut rejouer une frame
+	* en vol → la clé dédoublonne le rejeu, anti double-effet) :
+	* ```ts
+	* await socket.mutate("/nodefony/security/api/apikeys/42/revoke", {
+	*   method: "POST", idempotencyKey: crypto.randomUUID(),
+	* });
+	* ```
+	* Échec → rejet {@link RpcError} (`data.status` = statut HTTP équivalent :
+	* 400 clé absente, 409 rejeu concurrent, 403 refus, 404 path inconnu…).
+	*/
+	async mutate(path, init) {
+		return this.peer.request("api.request", {
+			path,
+			method: init.method,
+			body: init.body,
+			idempotencyKey: init.idempotencyKey
+		}, init.timeoutMs ?? 3e4);
+	}
+	/**
+	* Appel API par la socket rendant l'**enveloppe complète** — le résultat ET
+	* la méta serveur — là où {@link request}/{@link mutate} ne rendent que la
+	* valeur (forme courante, contrat « snapshot ≡ GET REST »).
+	*
+	* Utile à l'outillage plus qu'aux applications : en développement, le serveur
+	* joint le `requestId` du profil de CETTE frame, ce qui permet d'aller lire sa
+	* radiographie (`GET /nodefony/profiler/api/{requestId}` — phases, SQL,
+	* décision du firewall). En production le serveur n'émet aucune méta :
+	* `requestId` vaut alors `null`, et l'appel coûte exactement le même trafic.
+	*
+	* ```ts
+	* const { result, requestId } = await socket.call("/nodefony/kernel/api/modules");
+	* ```
+	*
+	* Échec → rejet {@link RpcError}, comme {@link request} ; l'id du profil, lui,
+	* voyage dans `error.data.requestId` (un refus se radiographie aussi).
+	*
+	* @param path - chemin de la route (transport WEBSOCKET requis côté serveur).
+	* @param init - méthode logique (défaut `GET`), corps, clé d'idempotence.
+	*/
+	async call(path, init) {
+		const { result, meta } = await this.peer.requestTraced("api.request", {
+			path,
+			method: init?.method ?? "GET",
+			body: init?.body,
+			idempotencyKey: init?.idempotencyKey
+		}, init?.timeoutMs ?? 3e4);
+		return {
+			result,
+			requestId: typeof meta?.requestId === "string" ? meta.requestId : null
+		};
+	}
+	/**
+	* Mesure le round-trip WS via la méthode RPC standard `nodefony:kernel:ping` — helper
+	* RÉUTILISABLE par tout consommateur (topbar Studio, debug bar, app user) :
+	* la mesure du RTT et la convention `nodefony:kernel:ping` vivent dans la lib cliente,
+	* pas dupliquées dans chaque front. Renvoie le payload serveur enrichi de `rtt`
+	* (ms, aller-retour mesuré côté client). Lève si le serveur ne répond pas
+	* (`request` timeout) ou ne connaît pas la méthode (`-32601`).
+	*/
+	async ping(timeoutMs = 5e3) {
+		const now = () => typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+		const t0 = now();
+		return {
+			...await this.request(PLATFORM_METHODS.ping, void 0, timeoutMs),
+			rtt: Math.round(now() - t0)
+		};
+	}
+	/** Notification SORTANTE typée (pas de réponse). Pendant de {@link emit}/{@link publish}. */
+	notify(method, params) {
+		this.peer.notify(method, params);
+	}
+	/**
+	* Expose une action appelable PAR LE PAIR (requête entrante serveur→client).
+	* Cœur du duplex débloqué par L0 : sans handler, une requête entrante reçoit
+	* `-32601` ; avec, le `result` repart au serveur (confirmation d'action,
+	* invalidation de cache poussée, health applicatif serveur→client).
+	*/
+	register(method, handler) {
+		this.peer.register(method, handler);
+	}
+	/** Retire une action exposée. */
+	unregister(method) {
+		this.peer.unregister(method);
+	}
+	/** Actions exposées par CE client (découverte). ≠ {@link serverMethods} (côté serveur). */
+	get methods() {
+		return this.peer.methods;
+	}
+	/**
+	* Ingestion d'une frame ENTRANTE déjà parsée → log + classification/route par le
+	* moteur. Renvoie sa nature. Une frame `invalid` peut porter une erreur GLOBALE
+	* serveur (`{jsonrpc, error}` hors spec JSON-RPC) → notice (cf {@link handleServerError}).
+	*/
+	receive(frame) {
+		this.recordFrame("in", frame);
+		const kind = this.peer.receive(frame);
+		if (kind === "invalid") this.handleServerError(frame);
+		return kind;
+	}
+	/** Annule les requêtes sortantes en attente (fermeture transport / logout). */
+	dispose(reason) {
+		this.peer.dispose(reason);
+	}
+	/** Total de notifications reçues, tous canaux confondus (welcome inclus). */
+	get framesReceived() {
+		return this._framesReceived;
+	}
+	/**
+	* Total de frames qui n'ont **pas** pu partir depuis la création du client
+	* (transport fermé au moment de l'émission). Reste à `0` en fonctionnement
+	* normal ; toute valeur non nulle date d'une coupure ou d'une émission
+	* antérieure à la première connexion.
+	*/
+	get framesUnsent() {
+		return this._framesUnsent;
+	}
+	/** Timestamp (ms) de la dernière notification reçue. */
+	get lastFrameAt() {
+		return this._lastFrameAt;
+	}
+	/** `method`/canal de la dernière notification reçue. */
+	get lastFrameMethod() {
+		return this._lastFrameMethod;
+	}
+	/** Snapshot des stats par canal (msgCount/rate/series). Les objets sont les
+	*  refs internes — à LIRE, pas à muter (copier les valeurs si besoin). */
+	getStats() {
+		return Array.from(this._stats.values());
+	}
+	/** Stats d'un canal précis (== method JSON-RPC) ou `undefined`. */
+	getChannelStats(method) {
+		return this._stats.get(method);
+	}
+	/** Comptabilise une notification entrante (avant dispatch aux handlers). */
+	trackFrame(method) {
+		const now = Date.now();
+		this._framesReceived++;
+		this._lastFrameAt = now;
+		this._lastFrameMethod = method;
+		let st = this._stats.get(method);
+		if (!st) {
+			st = {
+				method,
+				msgCount: 0,
+				lastMessage: null,
+				rate: 0,
+				series: []
+			};
+			this._stats.set(method, st);
+		}
+		st.msgCount++;
+		st.lastMessage = now;
+	}
+	/**
+	* (Ré)émet un `subscribe` pour chaque canal ref-compté, à la réception du
+	* `realtime:welcome` — le seul instant où le serveur est prêt à l'enregistrer.
+	*
+	* Ouvrir la socket ne suffit pas : pendant que le serveur authentifie, son
+	* transport JSON-RPC n'est pas encore branché et il **jette** les frames
+	* entrantes, sans pouvoir répondre — c'est le contrat écrit par
+	* `RealtimeController.handleRealtime`. Rejouer sur `onOpen` revenait à parler
+	* dans le vide, et perdait en silence deux cas entiers : un `subscribe` posé
+	* avant `start()`, et TOUS les abonnements après une reconnexion.
+	*
+	* Cold path (1×/connexion) : ne parcourt que les canaux réellement suivis, et
+	* n'alloue rien.
+	*/
+	replaySubscriptions() {
+		this._welcomed = true;
+		for (const channel of this._subscriptions.keys()) this._emitRaw("subscribe", { channel });
+	}
+	/**
+	* Ingère le `realtime:welcome` : mémorise l'identité résolue + les capabilities
+	* annoncées (canaux/actions découvrables) et émet `__identity__`. Tolérant à un
+	* welcome partiel/legacy (champs absents → `null`). Cold path (1×/connexion).
+	*/
+	ingestWelcome(params) {
+		const w = params;
+		if (!w || typeof w !== "object") return;
+		this._identity = w.identity ?? null;
+		this._serverChannels = Array.isArray(w.channels) ? w.channels : null;
+		this._serverMethods = Array.isArray(w.methods) ? w.methods : null;
+		noteServerEnv(w.env);
+		if (this.opts.banner !== false && !hasKernel()) this.detailsSocket();
+		this.fireLocal(LOCAL_EVENTS.identity, this._identity);
+	}
+	/**
+	* Détail de la socket dans la console — le pendant, pour une page SANS noyau,
+	* du groupe que le noyau émet quand il y en a un (#136).
+	*
+	* Une vitrine ne compose rien : sans ceci, elle n'a aucun endroit où lire son
+	* adresse, ses canaux ou son identité, alors que c'est exactement ce qu'on
+	* cherche quand une socket ne pousse rien. Émis au premier accueil, une seule
+	* fois par page, et jamais en production.
+	*/
+	detailsSocket() {
+		consoleDetails({
+			adresse: { valeur: this.url ?? "—" },
+			état: { valeur: this.state },
+			identité: { valeur: this._identity?.authenticated ? this._identity.userIdentifier ?? "authentifié" : "anonyme" },
+			canaux: { valeur: this._serverChannels?.join(", ") || "aucun" },
+			actions: { valeur: this._serverMethods?.join(", ") || "aucune" }
+		}, this, "socket nodefony — détail et raccourcis");
+	}
+	/**
+	* Ingère un `realtime:denied` (refus d'abonnement/push poussé par le serveur) :
+	* émet une notice normalisée ({@link onNotice}) ET un event ciblé `__denied__`
+	* ({@link onDenied}) pour une réaction polymorphe de l'app. Tolérant à un
+	* payload partiel (motif par défaut `forbidden`). Cold path (refus rare).
+	*/
+	ingestDenied(params) {
+		const p = params;
+		const channel = typeof p?.channel === "string" ? p.channel : "";
+		const brut = p?.reason;
+		const reason = brut === "unknown" || brut === "limit" ? brut : "forbidden";
+		const detail = typeof p?.detail === "string" ? p.detail : void 0;
+		const denied = {
+			channel,
+			reason,
+			...detail === void 0 ? {} : { detail }
+		};
+		this.fireNotice(deniedToNotice(denied));
+		this.fireLocal(LOCAL_EVENTS.denied, denied);
+	}
+	/**
+	* Dispatch d'une NOTIFICATION entrante — appelé par le moteur via `onNotification`.
+	* Ordre figé : ingestion welcome (1ʳᵉ frame) → stats → handlers locaux + wildcard
+	* (un handler `on("realtime:welcome")` voit donc l'identité déjà ingérée).
+	*/
+	dispatchNotification(method, params) {
+		if (method === "realtime:welcome") {
+			this.ingestWelcome(params);
+			this.replaySubscriptions();
+		} else if (method === "realtime:denied") this.ingestDenied(params);
+		this.trackFrame(method);
+		this.handlers.get(method)?.forEach((h) => {
+			try {
+				h(params);
+			} catch {}
+		});
+		this.handlers.get("*")?.forEach((h) => {
+			try {
+				h(method, params);
+			} catch {}
+		});
+	}
+	/**
+	* Frame `invalid` (JSON-RPC strict) portant un `error` sans `id`/`method` = erreur
+	* GLOBALE serveur (extension Nodefony hors spec, ex. refus tardif) → notice pour le
+	* centre de notifications. Frame réellement malformée (sans `.error`) → no-op.
+	*/
+	handleServerError(frame) {
+		const err = frame.error;
+		if (!err || typeof err !== "object") return;
+		this.fireNotice({
+			level: "error",
+			title: "Temps réel",
+			message: err.message || "Erreur serveur temps réel",
+			source: "server",
+			code: err.code,
+			ts: Date.now()
+		});
+	}
+	/** Échantillonne le débit (msg/s) + série par canal, 1×/s, puis émet
+	*  `__stats__` (event local) pour notifier les consommateurs réactifs. */
+	startStatsSampler() {
+		if (this.statsTimer) return;
+		this.statsTimer = setInterval(() => {
+			for (const st of this._stats.values()) {
+				const prev = this._prevSampled.get(st.method) ?? st.msgCount;
+				st.rate = Math.max(0, st.msgCount - prev);
+				this._prevSampled.set(st.method, st.msgCount);
+				st.series = [...st.series, st.rate].slice(-32);
+			}
+			this.fireLocal(LOCAL_EVENTS.stats);
+		}, 1e3);
+		this.statsTimer.unref?.();
+	}
+	/** Émet une notice normalisée aux abonnés `onNotice` (event local, pas réseau). */
+	fireNotice(notice) {
+		this.fireLocal(LOCAL_EVENTS.notice, notice);
+	}
+	/** Déclenche les handlers locaux d'un event interne (pas d'envoi réseau). */
+	fireLocal(event, ...args) {
+		this.handlers.get(event)?.forEach((h) => {
+			try {
+				h(...args);
+			} catch {}
+		});
+	}
+	openSocket() {
+		return new Promise((resolve, reject) => {
+			this._welcomed = false;
+			this.setState(this.reconnectAttempt > 0 ? "reconnecting" : "connecting");
+			let transport;
+			try {
+				const base = typeof window !== "undefined" ? window.location.href : "http://localhost";
+				const url = new URL(this.requireUrl(), base);
+				if (url.protocol === "http:") url.protocol = "ws:";
+				else if (url.protocol === "https:") url.protocol = "wss:";
+				if (this.opts.token) url.searchParams.set("token", this.opts.token);
+				transport = this.transportFactory(url.toString());
+				this.transport = transport;
+			} catch (e) {
+				this.setState("error");
+				reject(e);
+				return;
+			}
+			transport.onOpen(() => {
+				const wasReconnecting = this.reconnectAttempt > 0;
+				this.reconnectAttempt = 0;
+				this._nextRetryAt = null;
+				this.setState("connected");
+				this.startHeartbeat();
+				if (wasReconnecting) this.fireNotice({
+					level: "success",
+					title: "Temps réel",
+					message: "Connexion temps réel rétablie",
+					source: "realtime",
+					ts: Date.now()
+				});
+				resolve();
+			});
+			transport.onMessage((raw) => this.handleMessage(raw));
+			transport.onError(() => {});
+			transport.onClose((code, reason) => {
+				this.clearTimers();
+				this.transport = null;
+				if (this.intentionalClose) {
+					this.setState("disconnected");
+					return;
+				}
+				const notice = closeCodeToNotice(code, reason);
+				if (notice) this.fireNotice(notice);
+				const reconnectable = isReconnectableCloseCode(code);
+				if (reconnectable && this.opts.autoReconnect !== false) this.scheduleReconnect();
+				else this.setState(reconnectable ? "disconnected" : "error");
+			});
+			transport.connect();
+		});
+	}
+	scheduleReconnect() {
+		this.reconnectAttempt++;
+		const base = this.opts.reconnectDelay ?? 1e3;
+		const max = this.opts.reconnectDelayMax ?? 3e4;
+		const delay = Math.min(base * 2 ** (this.reconnectAttempt - 1), max);
+		this._nextRetryAt = Date.now() + delay;
+		this.setState("reconnecting");
+		this.fireLocal(LOCAL_EVENTS.reconnect, {
+			attempt: this.reconnectAttempt,
+			delay,
+			nextRetryAt: this._nextRetryAt
+		});
+		this.reconnectTimer = setTimeout(() => {
+			this.openSocket().catch(() => {});
+		}, delay);
+	}
+	startHeartbeat() {
+		const interval = this.opts.heartbeatInterval ?? 3e4;
+		this.heartbeatTimer = setInterval(() => {
+			if (this.transport?.readyState === TransportState.OPEN) this._emitRaw("ping", { ts: Date.now() });
+		}, interval);
+	}
+	clearTimers() {
+		if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
+		if (this.heartbeatTimer) clearInterval(this.heartbeatTimer);
+		this.reconnectTimer = null;
+		this.heartbeatTimer = null;
+	}
+	/**
+	* Log protocole : les `FRAME_LOG_MAX` dernières frames JSON-RPC (redactées),
+	* enregistrées EN CONTINU → la console « retrace l'instant » dès l'ouverture
+	* (jamais de démarrage à vide). Construction + redaction faites ici, à la lecture.
+	*/
+	get frameLog() {
+		return (this._rawFrames ?? []).map((f) => RealtimeClient.buildFrame(f.dir, f.msg, f.ts));
+	}
+	/** Purge le log protocole. */
+	clearFrameLog() {
+		if (this._rawFrames) this._rawFrames.length = 0;
+	}
+	/**
+	* Enregistre une frame dans le ring — coût = 1 push de réf (construction +
+	* redaction DIFFÉRÉES). Émet `__frame__` (frame construite) seulement si la
+	* console écoute.
+	*/
+	recordFrame(dir, msg) {
+		const ts = Date.now();
+		(this._rawFrames ??= []).push({
+			ts,
+			dir,
+			msg
+		});
+		if (this._rawFrames.length > FRAME_LOG_MAX) this._rawFrames.shift();
+		const listeners = this.handlers.get("__frame__");
+		if (listeners && listeners.size > 0) this.fireLocal("__frame__", RealtimeClient.buildFrame(dir, msg, ts));
+	}
+	/** Construit une frame affichable (kind/canal/id + payload redacté). */
+	static buildFrame(dir, msg, ts) {
+		const m = msg ?? {};
+		let kind = "?";
+		let channel;
+		if (typeof m.method === "string") {
+			kind = m.method;
+			const p = m.params;
+			if (p && typeof p.channel === "string") channel = p.channel;
+		} else if ("error" in m) kind = "error";
+		else if ("result" in m) kind = "response";
+		return {
+			ts,
+			dir,
+			kind,
+			id: typeof m.id === "number" ? m.id : void 0,
+			channel,
+			payload: redactFrame(msg)
+		};
+	}
+	/**
+	* Émet une frame si — et seulement si — le transport est ouvert.
+	*
+	* La frame n'est **pas** mise en file d'attente : rejouer une intention après
+	* coup peut être pire que la perdre (une commande obsolète appliquée en
+	* retard, un abonnement rétabli sur un écran déjà quitté). Ce qui n'est plus
+	* accepté, c'est de la perdre **en silence** — l'appelant reçoit `false`, une
+	* requête corrélée est rejetée aussitôt par {@link JsonRpcPeer} plutôt qu'au
+	* bout de son timeout, et l'utilisateur est prévenu une fois par épisode.
+	*
+	* @param msg - la frame JSON-RPC à sérialiser.
+	* @returns `true` si la frame est partie, `false` si le transport était fermé.
+	*/
+	send(msg) {
+		if (this.transport?.readyState !== TransportState.OPEN) {
+			this._framesUnsent++;
+			return false;
+		}
+		this.transport.send(JSON.stringify(msg));
+		this.recordFrame("out", msg);
+		return true;
+	}
+	/**
+	* Avertit que des notifications applicatives se perdent — **une fois par
+	* épisode** de coupure, jamais par frame : une vue qui pousse en boucle
+	* remplirait sinon le centre de notifications à elle seule.
+	*
+	* Appelé depuis {@link emit} uniquement. Les requêtes corrélées et les
+	* (dés)abonnements ont déjà leur propre voie (rejet, rejeu au reconnect).
+	*/
+	noticeUnsent() {
+		if (this._unsentNotified) return;
+		this._unsentNotified = true;
+		this.fireNotice({
+			level: "warning",
+			title: "Temps réel",
+			message: "Connexion interrompue — les messages émis pendant la coupure sont perdus",
+			source: "realtime",
+			ts: Date.now()
+		});
+	}
+	handleMessage(raw) {
+		if (typeof raw !== "string") return;
+		let msg;
+		try {
+			msg = JSON.parse(raw);
+		} catch {
+			return;
+		}
+		this.receive(msg);
+	}
+	setState(s) {
+		if (this._state === s) return;
+		if (s === "connected") this._unsentNotified = false;
+		this._state = s;
+		this.fireLocal(LOCAL_EVENTS.state, s);
+	}
+};
+//#endregion
+//#region src/syslog/Pdu.ts
+var SysLogSeverity = /* @__PURE__ */ function(SysLogSeverity) {
+	SysLogSeverity[SysLogSeverity["EMERGENCY"] = 0] = "EMERGENCY";
+	SysLogSeverity[SysLogSeverity["ALERT"] = 1] = "ALERT";
+	SysLogSeverity[SysLogSeverity["CRITIC"] = 2] = "CRITIC";
+	SysLogSeverity[SysLogSeverity["ERROR"] = 3] = "ERROR";
+	SysLogSeverity[SysLogSeverity["WARNING"] = 4] = "WARNING";
+	SysLogSeverity[SysLogSeverity["NOTICE"] = 5] = "NOTICE";
+	SysLogSeverity[SysLogSeverity["INFO"] = 6] = "INFO";
+	SysLogSeverity[SysLogSeverity["DEBUG"] = 7] = "DEBUG";
+	return SysLogSeverity;
+}(SysLogSeverity || {});
+const sysLogSeverity = [
+	0,
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7
+];
+const translateSeverity = function(severity = "INFO") {
+	if (typeof severity === "number") {
+		if (sysLogSeverity[severity] !== void 0) return sysLogSeverity[severity];
+		else throw new Error(`Not a valid nodefony syslog severity: ${severity}`);
+	} else if (SysLogSeverity[severity] !== void 0) return SysLogSeverity[severity];
+	else throw new Error(`Not a valid nodefony syslog severity: ${severity}`);
+};
+const sysLogSeverityObj = Object.entries(SysLogSeverity).reduce((acc, [key, value]) => {
+	acc[key] = value;
+	return acc;
+}, {});
+const severityNameMap = new Map(Object.entries(SysLogSeverity).filter(([, v]) => typeof v === "number").map(([k, v]) => [v, k]));
+const _gBuffer = globalThis.Buffer;
+const PID = globalThis.process?.pid ?? 0;
+const fastTypeOf = (value) => {
+	if (value === null) return null;
+	const t = typeof value;
+	if (t !== "object") return t;
+	if (Array.isArray(value)) return "array";
+	if (value instanceof Date) return "date";
+	if (value instanceof RegExp) return "RegExp";
+	if (value instanceof Error) return "Error";
+	if (_gBuffer?.isBuffer(value)) return "buffer";
+	return "object";
+};
+/**
+* Process Data Unit — entrée de log unitaire conforme RFC 5424.
+*
+* Une instance représente un événement de log dans le pipeline Syslog.
+* Stockée dans le `CircularBuffer` (O(1)) et diffusée aux transports
+* via l'event `onLog` du {@link Syslog}.
+*
+* @example
+* ```ts
+* const pdu = new Pdu("user logged in", "INFO", "AUTH", "USER_LOGIN", "user@example.com");
+* pdu.severity;      // 6
+* pdu.severityName;  // "INFO"
+* pdu.payload;       // "user logged in"
+* ```
+*
+* @remarks `pdu.severity` est numérique (RFC 5424) pour comparaisons rapides.
+*   `pdu.severityName` est la string (`"INFO"`, `"CRITIC"` — pas `"CRITICAL"`).
+*/
+let guid = 0;
+var Pdu = class Pdu {
+	payload;
+	uid;
+	severity;
+	timeStamp;
+	severityName;
+	typePayload;
+	moduleName;
+	msgid;
+	msg;
+	status;
+	/** PID du process émetteur (= procid RFC 5424). Constant, capturé au chargement du module. */
+	pid;
+	/**
+	* Identifiant de la requête en cours (corrélation log↔requête).
+	*
+	* Présent UNIQUEMENT si le Pdu est créé dans une bulle `RequestContext` active
+	* (ALS Node) ET que {@link Pdu.requestIdProvider} a été branché côté Node — voir
+	* `src/index.ts` (barrel Node uniquement, isomorphisme préservé : le bundle
+	* client/browser ne branche pas, le provider reste `null` → 0 alloc, 0 lecture).
+	*
+	* Combiné à `pid` (procid RFC 5424), permet la corrélation **complète** :
+	* `pid` = quel worker, `requestId` = quelle requête. Voyage dans ring buffer +
+	* `nodefony:syslog` + transports JSON (champ public sérialisé naturellement).
+	*/
+	requestId;
+	/**
+	* Provider injectable du `requestId` courant (ALS). Branché par le barrel
+	* Node (`src/index.ts`) sur `RequestContext.getRequestId`. Reste `null` côté
+	* browser/debugbar (le bundle client n'importe pas `node:async_hooks`) et
+	* pendant les phases boot pré-Kernel (cohérent : pas de requête en cours).
+	*
+	* Coût : 1 test de référence par Pdu (~5 ns) quand `null` ; ~50-100 ns quand
+	* branché (lecture ALS + accès propriété). Pas d'alloc supplémentaire si
+	* `requestId` est `undefined` (le champ reste non-défini sur l'instance).
+	*/
+	static requestIdProvider = null;
+	/**
+	* Construit un Pdu prêt à être publié dans le pipeline Syslog.
+	*
+	* @param pci - payload (string, Error, objet — typé `unknown`, narrower côté lecteur).
+	* @param severity - niveau RFC 5424 (string `"INFO"` ou numérique `6`). Défaut `"INFO"`.
+	* @param moduleName - nom du module/service qui a produit le log. Défaut `"nodefony"`.
+	* @param msgid - catégorie de message (`"AUTH"`, `"ROUTER"`, etc.). Défaut `""`.
+	* @param msg - détail libre optionnel. Défaut `""`.
+	* @param date - timestamp (number, Date, ou string parsable). Défaut `Date.now()`.
+	* @throws Si `severity` n'est pas une valeur valide de {@link SysLogSeverity}.
+	*/
+	constructor(pci, severity, moduleName = "nodefony", msgid = "", msg = "", date) {
+		if (date === void 0) this.timeStamp = Date.now();
+		else if (typeof date === "number") this.timeStamp = date;
+		else if (date instanceof Date) this.timeStamp = date.getTime();
+		else this.timeStamp = new Date(date).getTime();
+		this.uid = ++guid;
+		this.severity = translateSeverity(severity);
+		const sName = severityNameMap.get(this.severity);
+		if (sName === void 0) throw new Error(`Invalid severity value: ${this.severity}`);
+		this.severityName = sName;
+		this.typePayload = fastTypeOf(pci);
+		this.payload = pci;
+		this.moduleName = moduleName;
+		this.msgid = msgid;
+		this.msg = msg;
+		this.status = "NOTDEFINED";
+		this.pid = PID;
+		this.requestId = Pdu.requestIdProvider !== null ? Pdu.requestIdProvider() : void 0;
+	}
+	/**
+	* Map bidirectionnelle des sévérités RFC 5424 (`{ INFO: 6, 6: "INFO", ... }`).
+	*
+	* @returns dictionnaire `{ severityName: severityValue }` plus enum reverse.
+	*/
+	static sysLogSeverity() {
+		return sysLogSeverityObj;
+	}
+	/**
+	* Convertit une sévérité numérique ou string en son nom canonique.
+	*
+	* @param severity - valeur numérique (`6`) ou string (`"INFO"` ou `"6"`).
+	* @returns nom canonique (`"INFO"`) ou `undefined` si invalide.
+	*/
+	static severityToString(severity) {
+		const numericSeverity = typeof severity === "string" ? parseInt(severity, 10) : severity;
+		if (!isNaN(numericSeverity) && SysLogSeverity[numericSeverity] !== void 0) return SysLogSeverity[numericSeverity];
+		const severityKey = Pdu.severityToString(SysLogSeverity[severity]);
+		return severityKey !== void 0 ? severityKey : void 0;
+	}
+	/**
+	* Retourne le timestamp formaté `HH:MM:SS GMT±HHMM (TZ Name)`.
+	*
+	* @returns time string lisible par humain.
+	*/
+	getDate() {
+		return new Date(this.timeStamp).toTimeString();
+	}
+	/**
+	* Sérialise le Pdu en string mono-ligne pour transport console/file.
+	*
+	* @returns ligne formatée `TimeStamp:... Log:... ModuleName:... SeverityName:... MessageID:... UID:... Message:...`.
+	*/
+	toString() {
+		return `TimeStamp:${this.getDate()}  Log:${this.payload}  ModuleName:${this.moduleName}  SeverityName:${this.severityName}  MessageID:${this.msgid}  UID:${this.uid}  Message:${this.msg}`;
+	}
+	/**
+	* Réhydrate un Pdu existant à partir d'une string JSON — mute uniquement les
+	* clés déjà présentes sur l'instance (filtre `key in this`).
+	*
+	* @param str - JSON sérialisé d'un Pdu.
+	* @returns objet parsé (ou `null` si JSON vide). Mute l'instance courante au passage.
+	*/
+	parseJson(str) {
+		const json = JSON.parse(str);
+		Object.entries(json).forEach(([key, value]) => {
+			if (key in this) this[key] = value;
+		});
+		return json;
+	}
+};
+//#endregion
+//#region src/client/debugbar/format.ts
+/**
+* Helpers de formatage PURS de la debug bar — aucune dépendance DOM/réseau,
+* donc unit-testables côté Node (suite mocha du core).
+*/
+const UNITS = [
+	"B",
+	"KB",
+	"MB",
+	"GB",
+	"TB"
+];
+/**
+* Formatte un nombre d'octets en unité lisible (1 décimale, base 1024).
+*
+* @param bytes - taille en octets (négatif/NaN → "0 B")
+* @returns ex. `"1.5 MB"`, `"0 B"`
+*/
+function formatBytes(bytes) {
+	if (!Number.isFinite(bytes) || bytes <= 0) return "0 B";
+	let i = 0;
+	let n = bytes;
+	while (n >= 1024 && i < UNITS.length - 1) {
+		n /= 1024;
+		i++;
+	}
+	return `${i === 0 ? n : n.toFixed(1)} ${UNITS[i]}`;
+}
+/**
+* Formatte une durée (secondes) en chaîne compacte (`1h 02m`, `3m 12s`, `45s`).
+*
+* @param seconds - uptime en secondes
+*/
+function formatUptime(seconds) {
+	if (!Number.isFinite(seconds) || seconds < 0) return "0s";
+	const s = Math.floor(seconds);
+	const h = Math.floor(s / 3600);
+	const m = Math.floor(s % 3600 / 60);
+	const sec = s % 60;
+	if (h > 0) return `${h}h ${String(m).padStart(2, "0")}m`;
+	if (m > 0) return `${m}m ${String(sec).padStart(2, "0")}s`;
+	return `${sec}s`;
+}
+/**
+* Classe une valeur 0-100 en palier vert/orange/rouge.
+*
+* @param percent - valeur de la jauge
+* @param warn - seuil orange (défaut 70)
+* @param crit - seuil rouge (défaut 90)
+*/
+function gauge(percent, warn = 70, crit = 90) {
+	if (!Number.isFinite(percent)) return "ok";
+	if (percent >= crit) return "crit";
+	if (percent >= warn) return "warn";
+	return "ok";
+}
+const ANSI_RE = /\[[0-9;]*m/g;
+/** Retire les séquences d'échappement ANSI (couleurs terminal) d'une chaîne. */
+function stripAnsi(input) {
+	return input.replace(ANSI_RE, "");
+}
+/**
+* Calcule l'attribut `points` d'un `<polyline>` SVG (sparkline) à partir d'une
+* série de valeurs. Pur → testable. Mise à l'échelle sur `[0, max]`.
+*
+* @param values - série temporelle (gauche = ancien, droite = récent)
+* @param width - largeur du viewBox
+* @param height - hauteur du viewBox
+* @param max - plafond de l'axe Y (défaut = max de la série, plancher 1)
+* @returns ex. `"0,14 10,7 20,2"` (vide si < 2 points)
+*/
+function sparklinePoints(values, width, height, max) {
+	const n = values.length;
+	if (n < 2) return "";
+	const top = max ?? Math.max(...values, 1);
+	const ceil = top > 0 ? top : 1;
+	const step = width / (n - 1);
+	let out = "";
+	for (let i = 0; i < n; i++) {
+		const v = Number.isFinite(values[i]) ? values[i] : 0;
+		const ratio = Math.min(1, Math.max(0, v / ceil));
+		const x = Math.round(i * step * 100) / 100;
+		const y = Math.round((height - ratio * height) * 100) / 100;
+		out += i === 0 ? `${x},${y}` : ` ${x},${y}`;
+	}
+	return out;
+}
+/**
+* Heure locale d'un horodatage, à la milliseconde — `14:03:27.482`.
+*
+* La date n'y figure pas : une barre de débogage montre ce qui vient de se
+* passer, et une date répétée sur chaque ligne coûte de la place sans rien
+* apprendre. Le détail d'une entrée, lui, rend l'horodatage complet.
+*/
+function fmtClock(ts) {
+	const d = new Date(ts);
+	const p2 = (n) => n < 10 ? `0${n}` : String(n);
+	const ms = d.getMilliseconds();
+	const p3 = ms < 10 ? `00${ms}` : ms < 100 ? `0${ms}` : String(ms);
+	return `${p2(d.getHours())}:${p2(d.getMinutes())}:${p2(d.getSeconds())}.${p3}`;
+}
+//#endregion
+//#region src/client/debugbar/model.ts
+/** Sévérité RFC 5424 : ≤ 3 = erreur, 4 = warning. */
+const SEVERITY_ERROR_MAX = 3;
+const SEVERITY_WARNING = 4;
+/** Points conservés dans les séries de sparkline (~1 min à 1 tick/s). */
+const SERIES_POINTS = 60;
+function pushCapped(arr, v, cap) {
+	arr.push(v);
+	if (arr.length > cap) arr.shift();
+}
+function logText(pci) {
+	if (pci == null) return "";
+	if (typeof pci === "string") return stripAnsi(pci);
+	if (typeof pci === "number" || typeof pci === "boolean") return String(pci);
+	try {
+		return stripAnsi(JSON.stringify(pci));
+	} catch {
+		return String(pci);
+	}
+}
+var DebugBarModel = class {
+	_state = "disconnected";
+	_stats = null;
+	_cpuPeak = 0;
+	_heapPeak = 0;
+	_loopPeak = 0;
+	_cpuSeries = [];
+	_heapSeries = [];
+	_loopSeries = [];
+	_logTotal = 0;
+	_errorCount = 0;
+	_warnCount = 0;
+	_dropped = 0;
+	_feed = [];
+	setState(state) {
+		this._state = state;
+	}
+	/** Mémorise le dernier tick stats + alimente les séries/peaks. */
+	ingestStats(payload) {
+		this._stats = payload;
+		const cpu = payload.cpuPercent ?? 0;
+		const loop = payload.eventLoopMs ?? 0;
+		const heapUsed = payload.memory?.heapUsed ?? 0;
+		const heapLimit = payload.memory?.heapLimit ?? 0;
+		const heapPct = heapLimit > 0 ? Math.round(heapUsed / heapLimit * 100) : 0;
+		pushCapped(this._cpuSeries, cpu, SERIES_POINTS);
+		pushCapped(this._heapSeries, heapPct, SERIES_POINTS);
+		pushCapped(this._loopSeries, loop, SERIES_POINTS);
+		if (cpu > this._cpuPeak) this._cpuPeak = cpu;
+		if (heapPct > this._heapPeak) this._heapPeak = heapPct;
+		if (loop > this._loopPeak) this._loopPeak = loop;
+	}
+	/**
+	* Comptabilise un batch de logs coalescés (compteurs cumulés + feed). Chaque
+	* entrée est **réhydratée en {@link Pdu}** — la MÊME classe Core que côté
+	* serveur (severityName/payload canoniques, pas de devinette de champ).
+	*/
+	ingestSyslog(payload) {
+		const logs = payload.logs;
+		if (logs) {
+			for (let i = 0; i < logs.length; i++) {
+				const entry = logs[i];
+				if (typeof entry?.severity !== "number") continue;
+				let pdu;
+				try {
+					pdu = new Pdu(entry.payload, entry.severity, entry.moduleName ?? "nodefony", entry.msgid ?? "", entry.msg ?? "");
+				} catch {
+					continue;
+				}
+				const sev = pdu.severity;
+				this._logTotal++;
+				if (sev <= SEVERITY_ERROR_MAX) this._errorCount++;
+				else if (sev === SEVERITY_WARNING) this._warnCount++;
+				this._feed.push({
+					severity: sev,
+					name: pdu.severityName,
+					text: logText(pdu.payload),
+					module: pdu.moduleName,
+					ts: typeof entry.timeStamp === "number" ? entry.timeStamp : Date.now(),
+					uid: typeof entry.uid === "number" ? entry.uid : 0,
+					msgid: typeof entry.msgid === "string" ? entry.msgid : "",
+					pid: typeof entry.pid === "number" ? entry.pid : 0,
+					requestId: typeof entry.requestId === "string" ? entry.requestId : void 0
+				});
+			}
+			if (this._feed.length > 40) this._feed.splice(0, this._feed.length - 40);
+		}
+		if (typeof payload.dropped === "number") this._dropped += payload.dropped;
+	}
+	get view() {
+		const s = this._stats;
+		const mem = s?.memory;
+		const app = s?.app;
+		const heapUsed = mem?.heapUsed ?? 0;
+		const heapLimit = mem?.heapLimit ?? 0;
+		return {
+			state: this._state,
+			appName: app?.name ?? "",
+			appVersion: app?.version ?? "",
+			env: app?.env ?? "",
+			debug: app?.debug ?? false,
+			branch: app?.branch ?? "",
+			cpuPercent: s?.cpuPercent ?? 0,
+			cpuPeak: this._cpuPeak,
+			cpuCount: s?.cpuCount ?? 0,
+			eventLoopMs: s?.eventLoopMs ?? 0,
+			eventLoopPeak: this._loopPeak,
+			uptime: s?.uptime ?? 0,
+			pid: s?.pid ?? 0,
+			instanceId: s?.instanceId ?? "—",
+			loadavg: s?.loadavg ?? [],
+			rss: mem?.rss ?? 0,
+			heapUsed,
+			heapTotal: mem?.heapTotal ?? 0,
+			heapLimit,
+			external: mem?.external ?? 0,
+			heapPercent: heapLimit > 0 ? Math.round(heapUsed / heapLimit * 100) : 0,
+			heapPeak: this._heapPeak,
+			cpuSeries: this._cpuSeries,
+			heapSeries: this._heapSeries,
+			loopSeries: this._loopSeries,
+			logTotal: this._logTotal,
+			errorCount: this._errorCount,
+			warnCount: this._warnCount,
+			dropped: this._dropped,
+			feed: this._feed
+		};
+	}
+};
+//#endregion
+//#region src/client/debugbar/hmr.ts
+/**
+* Observation des hot-updates Vite **sans ouvrir de WebSocket**.
+*
+* Historique : cette sonde ouvrait jadis un **2ᵉ client** WebSocket `vite-hmr`
+* sur le serveur HMR de Vite. Ce client passif (il ne renvoyait jamais le
+* heartbeat attendu) se faisait fermer par Vite, puis se reconnectait en
+* boucle → une cascade de connexions `wss://…:5173` qui s'ouvrent et se ferment
+* sans fin dans la console. C'était aussi un WebSocket de trop (philosophie
+* Nodefony : une seule connexion temps réel côté navigateur).
+*
+* Désormais : aucun socket. On écoute un `CustomEvent` `nodefony:hmr` émis sur
+* `window` par un pont injecté côté page (TemplateHelper, `@nodefony/frontend`),
+* lequel se branche sur le client HMR **déjà chargé** par Vite via
+* `createHotContext` — zéro connexion ajoutée.
+*/
+/** Nom de l'événement DOM émis par le pont HMR côté page. */
+const HMR_EVENT = PLATFORM_EVENTS.hmr;
+/**
+* Observe les hot-updates Vite via l'événement `window` `nodefony:hmr`.
+* Aucune connexion réseau ouverte. No-op hors navigateur.
+*
+* @param onEvent - appelé à chaque hot-update relayé par le pont.
+* @returns dispose() — retire le listener (OBLIGATOIRE au démontage).
+*/
+function observeViteHmr(onEvent) {
+	if (typeof window === "undefined") return () => {};
+	const handler = (ev) => {
+		const detail = ev.detail;
+		if (detail && typeof detail.kind === "string") onEvent(detail);
+	};
+	window.addEventListener(HMR_EVENT, handler);
+	return () => window.removeEventListener(HMR_EVENT, handler);
+}
+//#endregion
+//#region src/client/debugbar/network.ts
+/**
+* Intercepteur réseau **dev-only** de la debug bar — capture les appels AJAX
+* (`fetch` + `XMLHttpRequest`) de la page pour le panneau Network, et lit le
+* header `X-Request-Id` de chaque réponse → corrélation avec le profil serveur
+* (`/nodefony/profiler/api/{requestId}`).
+*
+* ⚠️ Monkey-patch des globals = intrusif. Donc 6 garde-fous (cf décision design) :
+*  1. **dev-only** : n'est installé que par la debug bar, jamais en prod.
+*  2. **défensif** : toute la collecte est en try/catch — un bug ici ne casse
+*     JAMAIS la requête de l'app (on relaie toujours l'appel original).
+*  3. **header-only** : on ne touche jamais au body (pas de `.clone()`, pas de
+*     lecture du stream) → 0 risque de consommer/altérer la réponse.
+*  4. **réversible** : `uninstall()` restaure les implémentations d'origine.
+*  5. **chain-safe** : on wrappe le `fetch`/XHR COURANT (déjà potentiellement
+*     patché par une autre lib), on ne clobber pas — l'uninstall ne restaure que
+*     si personne n'a re-patché par-dessus.
+*  6. **opt-out** : `mountDebugBar({ network:false })` n'installe rien.
+*
+* Coût : 2 `performance.now()` + lecture d'1 header + 1 push capé par appel.
+* Négligeable vs la latence réseau.
+*/
+/**
+* En-têtes de corrélation posés par le framework sur chaque réponse :
+*  - `x-request-id` = **clé de lookup** du profiler serveur (concept requestId) ;
+*  - `traceparent`  = W3C Trace Context (RFC-propre), affiché pour la corrélation
+*    distribuée — pas la clé du profiler (qui est keyé par requestId).
+*/
+const REQUEST_ID_HEADER = "x-request-id";
+const TRACEPARENT_HEADER = "traceparent";
+/** Extrait le path d'une URL (absolue ou relative), tolérant. */
+function toPath(url) {
+	try {
+		return new URL(url, location.href).pathname;
+	} catch {
+		return url;
+	}
+}
+/** Normalise l'`input` polymorphe de `fetch` en URL string. */
+function fetchUrl(input) {
+	if (typeof input === "string") return input;
+	if (input && typeof input === "object") {
+		const u = input.url;
+		if (typeof u === "string") return u;
+	}
+	return String(input);
+}
+/**
+* Installe l'intercepteur fetch + XHR. No-op hors navigateur.
+*
+* @returns `uninstall()` — restaure les globals (OBLIGATOIRE à l'unmount).
+*/
+function installNetworkInterceptor(opts) {
+	if (typeof window === "undefined") return () => {};
+	const ignore = opts.ignore ?? (() => false);
+	let seq = 0;
+	const origFetch = window.fetch;
+	const patchedFetch = typeof origFetch === "function" ? function(...args) {
+		let url = "";
+		let method = "GET";
+		try {
+			url = fetchUrl(args[0]);
+			method = (args[1]?.method ?? args[0]?.method ?? "GET").toString().toUpperCase();
+		} catch {}
+		if (!url || ignore(url)) return origFetch.apply(this, args);
+		const entry = {
+			id: ++seq,
+			method,
+			url,
+			path: toPath(url),
+			status: null,
+			ok: false,
+			durationMs: null,
+			startedAt: performance.now(),
+			requestId: null,
+			traceparent: null,
+			pending: true,
+			error: null
+		};
+		safeEmit(opts, entry);
+		return origFetch.apply(this, args).then((res) => {
+			try {
+				entry.status = res.status;
+				entry.ok = res.ok;
+				entry.requestId = res.headers.get(REQUEST_ID_HEADER);
+				entry.traceparent = res.headers.get(TRACEPARENT_HEADER);
+				entry.durationMs = round(performance.now() - entry.startedAt);
+				entry.pending = false;
+				safeEmit(opts, entry);
+			} catch {}
+			return res;
+		}, (err) => {
+			try {
+				entry.error = err instanceof Error ? err.message : "network error";
+				entry.durationMs = round(performance.now() - entry.startedAt);
+				entry.pending = false;
+				safeEmit(opts, entry);
+			} catch {}
+			throw err;
+		});
+	} : null;
+	if (patchedFetch) window.fetch = patchedFetch;
+	const XHR = window.XMLHttpRequest;
+	const origOpen = XHR?.prototype.open;
+	const origSend = XHR?.prototype.send;
+	const state = /* @__PURE__ */ new WeakMap();
+	if (XHR && origOpen && origSend) {
+		XHR.prototype.open = function(method, url, ...rest) {
+			try {
+				const u = url.toString();
+				if (u && !ignore(u)) state.set(this, {
+					id: ++seq,
+					method: (method ?? "GET").toUpperCase(),
+					url: u,
+					path: toPath(u),
+					status: null,
+					ok: false,
+					durationMs: null,
+					startedAt: 0,
+					requestId: null,
+					traceparent: null,
+					pending: true,
+					error: null
+				});
+			} catch {}
+			return origOpen.apply(this, [
+				method,
+				url,
+				...rest
+			]);
+		};
+		XHR.prototype.send = function(...args) {
+			const entry = state.get(this);
+			if (entry) {
+				entry.startedAt = performance.now();
+				safeEmit(opts, entry);
+				const finalize = (error) => {
+					try {
+						entry.status = this.status || null;
+						entry.ok = this.status >= 200 && this.status < 400;
+						entry.requestId = this.getResponseHeader(REQUEST_ID_HEADER) || null;
+						entry.traceparent = this.getResponseHeader(TRACEPARENT_HEADER) || null;
+						entry.durationMs = round(performance.now() - entry.startedAt);
+						entry.error = error;
+						entry.pending = false;
+						safeEmit(opts, entry);
+					} catch {}
+				};
+				this.addEventListener("load", () => finalize(null));
+				this.addEventListener("error", () => finalize("network error"));
+				this.addEventListener("abort", () => finalize("aborted"));
+				this.addEventListener("timeout", () => finalize("timeout"));
+			}
+			return origSend.apply(this, args);
+		};
+	}
+	return () => {
+		if (patchedFetch && window.fetch === patchedFetch) window.fetch = origFetch;
+		if (XHR && origOpen && XHR.prototype.open !== origOpen) XHR.prototype.open = origOpen;
+		if (XHR && origSend && XHR.prototype.send !== origSend) XHR.prototype.send = origSend;
+	};
+}
+function round(ms) {
+	return Math.round(ms * 10) / 10;
+}
+/** Émission protégée — un onChange qui throw ne doit pas casser la requête. */
+function safeEmit(opts, entry) {
+	try {
+		opts.onChange(entry);
+	} catch {}
+}
+//#endregion
+//#region src/client/debugbar/profile.ts
+/** Couleur stable par nom de phase canonique. */
+const PHASE_TIER = {
+	parse: "parse",
+	resolve: "resolve",
+	firewall: "firewall",
+	identity: "identity",
+	initialize: "init",
+	action: "action",
+	render: "render",
+	send: "send"
+};
+/** Mappe un nom de phase vers sa classe de couleur (défaut neutre). */
+function phaseTier(name) {
+	return PHASE_TIER[name] ?? "other";
+}
+/** Logs/appels conservés dans le panneau Network. */
+const NET_MAX = 80;
+var NetworkModel = class {
+	_byId = /* @__PURE__ */ new Map();
+	_profiles = /* @__PURE__ */ new Map();
+	_total = 0;
+	_errors = 0;
+	/** Upsert d'une entrée (pending puis résolue partagent le même `id`). */
+	ingest(entry) {
+		if (!this._byId.has(entry.id)) this._total++;
+		const prev = this._byId.get(entry.id);
+		const wasErr = prev ? isError(prev) : false;
+		const isErr = isError(entry);
+		if (isErr && !wasErr) this._errors++;
+		else if (!isErr && wasErr) this._errors--;
+		this._byId.set(entry.id, entry);
+		if (this._byId.size > NET_MAX) {
+			const oldest = this._byId.keys().next().value;
+			if (oldest !== void 0) {
+				const ev = this._byId.get(oldest);
+				if (ev && isError(ev)) this._errors--;
+				this._byId.delete(oldest);
+			}
+		}
+	}
+	/** Entrées récentes (récent → ancien) pour le rendu. */
+	entries() {
+		return [...this._byId.values()].reverse();
+	}
+	get total() {
+		return this._total;
+	}
+	get errors() {
+		return this._errors;
+	}
+	get pending() {
+		let n = 0;
+		for (const e of this._byId.values()) if (e.pending) n++;
+		return n;
+	}
+	profileState(requestId) {
+		return this._profiles.get(requestId);
+	}
+	setProfileState(requestId, state) {
+		this._profiles.set(requestId, state);
+	}
+	clear() {
+		this._byId.clear();
+		this._profiles.clear();
+		this._total = 0;
+		this._errors = 0;
+	}
+};
+/** Vrai si une entrée est en erreur réseau ou status ≥ 400. */
+function isError(e) {
+	if (e.error) return true;
+	return e.status !== null && e.status >= 400;
+}
+/**
+* Calcule le layout proportionnel des phases serveur (waterfall). Pur.
+*
+* Chaque barre est positionnée sur le span `[min start, max end]` en %. Une
+* phase de durée nulle reçoit une largeur plancher (visibilité). Span nul →
+* barres vides (évite la division par zéro).
+*
+* @param phases - phases du profil serveur (startMs relatif + durationMs)
+* @returns barres prêtes à rendre (gauche/largeur en %)
+*/
+function computeWaterfall(phases) {
+	if (phases.length === 0) return [];
+	let min = Infinity;
+	let max = -Infinity;
+	for (const p of phases) {
+		if (p.startMs < min) min = p.startMs;
+		const end = p.startMs + (p.durationMs ?? 0);
+		if (end > max) max = end;
+	}
+	const span = max - min;
+	return phases.map((p) => {
+		const dur = p.durationMs ?? 0;
+		const leftPct = span > 0 ? (p.startMs - min) / span * 100 : 0;
+		const widthRaw = span > 0 ? dur / span * 100 : 0;
+		return {
+			name: p.name,
+			leftPct: clampPct(leftPct),
+			widthPct: clampPct(Math.max(widthRaw, dur > 0 || span === 0 ? 1.5 : .6)),
+			durationMs: Math.round(dur * 100) / 100,
+			tier: phaseTier(p.name)
+		};
+	});
+}
+function clampPct(v) {
+	if (!Number.isFinite(v) || v < 0) return 0;
+	if (v > 100) return 100;
+	return Math.round(v * 100) / 100;
+}
+//#endregion
+//#region src/client/debugbar/DebugBar.ts
+/**
+* DebugBar — toolbar de debug par-page type Symfony WDT, **dev-only**, pensée
+* comme une **vitrine du realtime Nodefony** (on doit *voir* le framework
+* respirer en direct).
+*
+* 2ᵉ consommateur navigateur du Core isomorphe après Studio : MÊME backbone
+* realtime (WS JSON-RPC 2.0, canaux `nodefony:supervision` / `nodefony:syslog`) via
+* {@link RealtimeClient}. Aucun rendu serveur splicé dans le body : le serveur
+* *collecte*, le client *rend*.
+*
+* UI : **onglets** (Realtime / Network / Perf / Logs / Runtime) — un seul pane
+* rendu/visible à la fois (≠ grid fourre-tout) + **poignée de resize** (hauteur
+* persistée). Vanilla TS + **Shadow DOM** + sparklines **SVG maison** — 0 dep UI.
+*
+* Perf scroll (critique) : fond OPAQUE sur le panneau (le `backdrop-filter:blur`
+* sur le conteneur scrollable recompositait à chaque frame), `contain:content`
+* par pane, et la liste Network en **mise à jour incrémentale** (nœuds stables,
+* jamais de rebuild `innerHTML` global → le clic n'est plus perdu, le scroll ne
+* saute plus).
+*
+* Panneau **Network** (dev-only) : intercepte `fetch`/`XHR` (header-only,
+* défensif, réversible) → liste des appels AJAX ; clic sur un appel → fetch du
+* profil serveur (`/nodefony/profiler/api/{requestId}`, corrélé via le header
+* `X-Request-Id`) → **waterfall des phases** du pipeline. SPA-first : on profile
+* les appels, pas la page. Le `traceparent` W3C (RFC-propre) est aussi remonté.
+*/
+/** Canaux realtime consommés (figés, alignés sur les providers Studio). */
+const CHANNELS = {
+	stats: PLATFORM_CHANNELS.debugbar,
+	syslog: PLATFORM_CHANNELS.syslog
+};
+/** Endpoint WS realtime par défaut (porté par Studio aujourd'hui, RealtimeService demain). */
+const DEFAULT_PATH = "/nodefony/studio/api/realtime";
+/** Base du data-plane profiler (data-plane admin `IAdminApi` namespace `profiler`). */
+const DEFAULT_PROFILER_BASE = "/nodefony/profiler/api";
+const HOST_ID = "nodefony-debugbar";
+/** Dimensions des sparklines (unités viewBox SVG). */
+const MINI_W = 58;
+const MINI_H = 20;
+const CHART_W = 260;
+const CHART_H = 46;
+const RT_POINTS = 60;
+/** Borne basse de hauteur du panneau (px). */
+const PANEL_H_MIN = 140;
+/**
+* Hauteur par défaut = **fraction de l'écran** (≈48 % du viewport) — gros écran
+* → grand panneau, petit écran → panneau modeste. Bornée [300, 640] pour rester
+* raisonnable aux extrêmes.
+*/
+function defaultPanelH() {
+	const vh = typeof window !== "undefined" ? window.innerHeight : 800;
+	return Math.min(640, Math.max(300, Math.round(vh * .48)));
+}
+/** Hauteur mini à l'ouverture d'un profil (waterfall confortable) ≈55 % écran. */
+function detailPanelH() {
+	const vh = typeof window !== "undefined" ? window.innerHeight : 800;
+	return Math.min(680, Math.max(360, Math.round(vh * .55)));
+}
+/** Métadonnées d'affichage par framework (couleur de marque officielle). */
+const FRAMEWORKS = {
+	react19: {
+		label: "React 19",
+		color: "#61dafb"
+	},
+	react: {
+		label: "React",
+		color: "#61dafb"
+	},
+	vue3: {
+		label: "Vue 3",
+		color: "#42b883"
+	},
+	vue: {
+		label: "Vue",
+		color: "#42b883"
+	},
+	angular: {
+		label: "Angular",
+		color: "#dd0031"
+	},
+	vanilla: {
+		label: "Vanilla",
+		color: "#f7df1e"
+	}
+};
+const STYLES = `
+:host { all: initial; }
+* { box-sizing: border-box; }
+.bar {
+  position: fixed; left: 0; right: 0; z-index: 2147483000;
+  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: #e8eaed;
+  /* Fond OPAQUE (pas de backdrop-filter sur le conteneur scrollable : il
+     recompositait le blur à chaque frame de scroll → lag). Blur seulement sur
+     .strip (fin, non scrollé). */
+  background: #14161a;
+  --blue:#0067ba; --blue2:#3aa0ff; --orange:#ff8a3d; --ok:#36b37e; --warn:#ffab00;
+  --crit:#ff5630; --info:#4c9aff; --muted:#8a9099; --line:#2a2e36; --card:#1c1f26;
+  box-shadow: 0 -8px 40px rgba(0,0,0,.5);
+}
+.bar.bottom { bottom: 0; }
+.bar.top { top: 0; }
+.bar::before {
+  content:""; position:absolute; left:0; right:0; height:2px;
+  background: linear-gradient(90deg, var(--blue), var(--blue2), var(--orange));
+  background-size: 200% 100%; animation: flow 4s linear infinite; opacity:.9;
+}
+.bar.bottom::before { top:0; } .bar.top::before { bottom:0; }
+@keyframes flow { to { background-position: 200% 0; } }
+
+/* Strip responsive : police (et tout le contenu en em) scale avec la largeur
+   d'écran, bornée 12→15px. Padding scale aussi. */
+.strip { display: flex; align-items: center; gap: clamp(12px,1.1vw,20px);
+  padding: clamp(8px,1vh,13px) clamp(14px,1.4vw,26px); cursor: pointer;
+  font-size: clamp(12px, 0.35vw + 8px, 16px); flex-wrap: nowrap; overflow: hidden;
+  background: rgba(20,22,26,.6); backdrop-filter: blur(14px) saturate(140%); }
+.strip:hover { background: rgba(255,255,255,.03); }
+.brand { display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.2px; flex:none; }
+.brand .logo { color: var(--blue2); font-size:1.05em; filter: drop-shadow(0 0 6px rgba(58,160,255,.6)); }
+.brand .name { background: linear-gradient(90deg,#fff,var(--blue2)); -webkit-background-clip:text;
+  background-clip:text; -webkit-text-fill-color:transparent; }
+.rt-pill { display:flex; align-items:center; gap:5px; padding:.2em .7em; border-radius:11px; flex:none;
+  font-size:.76em; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
+  color:var(--muted); background:#22262e; border:1px solid var(--line); }
+.rt-pill.connected { color:#fff; border-color:rgba(58,160,255,.5);
+  background: linear-gradient(90deg, rgba(0,103,186,.35), rgba(255,138,61,.25));
+  box-shadow: 0 0 14px rgba(58,160,255,.35); }
+.rt-pill .bolt { animation: bolt 1.6s ease-in-out infinite; }
+.rt-pill.connected .bolt { color: var(--orange); }
+@keyframes bolt { 0%,100%{opacity:.5;transform:scale(.9)} 50%{opacity:1;transform:scale(1.15)} }
+
+.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; color: var(--muted); }
+.dot.connected { background: var(--ok); color: var(--ok); animation: pulse 2s infinite; }
+.dot.connecting, .dot.reconnecting { background: var(--warn); color: var(--warn); }
+.dot.error, .dot.disconnected { background: var(--crit); color: var(--crit); }
+@keyframes pulse { 0%{box-shadow:0 0 0 0 currentColor} 70%{box-shadow:0 0 0 5px transparent} 100%{box-shadow:0 0 0 0 transparent} }
+
+.metric { display: flex; align-items: center; gap: 6px; white-space: nowrap; flex:none; }
+.metric .k { color: var(--muted); text-transform: uppercase; font-size: .76em; letter-spacing:.5px; }
+.metric .v { font-weight: 700; min-width: 2.6em; font-size: 1em; }
+.mini { width: 3.8em; height: 1.35em; display:block; }
+.mini polyline { fill:none; stroke-width:1.5; vector-effect:non-scaling-stroke; }
+.chip { display:flex; align-items:center; gap:6px; padding:.2em .7em; border-radius:11px; flex:none;
+  background:#22262e; font-weight:700; font-size:.92em; white-space:nowrap; }
+.chip .k { color: var(--muted); font-size:.82em; text-transform:uppercase; }
+.spacer { flex: 1 1 auto; min-width: 8px; }
+.toggle { color: var(--muted); font-size: .85em; transition: transform .25s; flex:none; }
+.bar.open .toggle { transform: rotate(180deg); }
+.ok{color:var(--ok)} .warn{color:var(--warn)} .crit{color:var(--crit)} .info{color:var(--info)} .muted{color:var(--muted)} .blue{color:var(--blue2)}
+.spark.ok{stroke:var(--ok)} .spark.warn{stroke:var(--warn)} .spark.crit{stroke:var(--crit)} .spark.rt{stroke:var(--blue2)}
+.area.ok{fill:rgba(54,179,126,.12)} .area.warn{fill:rgba(255,171,0,.14)} .area.crit{fill:rgba(255,86,48,.16)} .area.rt{fill:rgba(58,160,255,.16)}
+
+/* ── Panneau : resize + onglets + panes ──────────────────────────────────── */
+.panelwrap { display:none; flex-direction:column; border-top:1px solid var(--line); }
+.bar.open .panelwrap { display:flex; }
+.resize { height:8px; cursor:ns-resize; display:flex; align-items:center; justify-content:center;
+  flex:none; background:rgba(255,255,255,.015); }
+.resize::after { content:""; width:42px; height:3px; border-radius:2px; background:var(--line); transition:background .15s; }
+.resize:hover::after { background:var(--blue2); }
+.tabs { display:flex; gap:2px; padding:0 8px; flex:none; border-bottom:1px solid var(--line);
+  overflow-x:auto; scrollbar-width:none; }
+.tabs::-webkit-scrollbar { display:none; }
+.tab { padding:7px 12px; font:inherit; font-size:11px; font-weight:700; color:var(--muted);
+  cursor:pointer; border:0; background:none; border-bottom:2px solid transparent;
+  text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; display:flex; align-items:center; gap:5px; }
+.tab:hover { color:#fff; }
+.tab.active { color:#fff; border-bottom-color:var(--blue2); }
+.tab .tcount { font-size:9px; padding:0 5px; border-radius:8px; background:#22262e; color:var(--muted); }
+.tab.active .tcount { background:rgba(58,160,255,.25); color:#fff; }
+.tab .tcount.crit { background:rgba(255,86,48,.3); color:#fff; }
+.panes { overflow:hidden; }
+.pane { display:none; height:100%; overflow:auto; padding:14px; contain:content; }
+.pane.active { display:block; }
+.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:14px; align-items:start; }
+.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:11px 13px; }
+.card.hero { border-color: rgba(58,160,255,.35);
+  background: linear-gradient(160deg, rgba(0,103,186,.16), rgba(28,31,38,.7) 60%); }
+.card > h4 { margin:0 0 9px; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); font-weight:800; display:flex; gap:6px; align-items:center; }
+
+.hero .big { font-size:30px; font-weight:800; line-height:1; letter-spacing:-.5px;
+  background:linear-gradient(90deg,var(--blue2),var(--orange)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
+.hero .big small { font-size:12px; -webkit-text-fill-color:var(--muted); color:var(--muted); font-weight:700; margin-left:4px; }
+.hero svg { width:100%; height:38px; display:block; margin:6px 0 8px; }
+.hero polyline { fill:none; stroke-width:1.75; vector-effect:non-scaling-stroke; }
+.tag { margin-top:9px; padding-top:8px; border-top:1px solid var(--line); color:var(--muted);
+  font-size:10px; line-height:1.5; }
+.tag b { color:#cfd3d8; }
+
+.chart { margin-bottom:10px; } .chart:last-child { margin-bottom:0; }
+.chart .hd { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:2px; }
+.chart .lbl { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.5px; }
+.chart .val { font-weight:700; font-size:13px; }
+.chart .peak { color:var(--muted); font-size:9px; }
+.chart svg { width:100%; height:${CHART_H}px; display:block; }
+.chart polyline { fill:none; stroke-width:1.5; vector-effect:non-scaling-stroke; }
+
+.kv { display:flex; justify-content:space-between; gap:8px; padding:2px 0; }
+.kv .k { color:var(--muted); } .kv .v { font-weight:600; text-align:right; overflow:hidden; text-overflow:ellipsis; }
+
+.counts { display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
+.feed { font-size:11px; }
+/* ── Explorateur de journal ─────────────────────────────────────────────── */
+.counts { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
+.counts .spacer { flex:1 1 auto; }
+.counts button { font: inherit; color: inherit; background:none; border:1px solid transparent; cursor:pointer; }
+.chip.sevf { border-color: var(--line); }
+.chip.sevf.on { border-color: var(--ok); color:#fff; }
+.search { font: inherit; font-size:11px; color:inherit; background:rgba(255,255,255,.04);
+  border:1px solid var(--line); border-radius:6px; padding:3px 8px; min-width:120px; max-width:220px; }
+.search::placeholder { color: var(--muted); }
+.toolbtn { font: inherit; font-size:12px; line-height:1; color:var(--muted); background:none;
+  border:1px solid var(--line); border-radius:6px; padding:3px 7px; cursor:pointer; }
+.toolbtn:hover { color:#fff; }
+.toolbtn.on { color:var(--ok); border-color:var(--ok); }
+.log { display:flex; align-items:baseline; gap:8px; padding:2px 0; cursor:pointer; }
+.log:hover { background:rgba(255,255,255,.04); }
+.log .ts { color:var(--muted); font-variant-numeric: tabular-nums; flex:none; }
+.log .rid { color:var(--muted); font-family:monospace; flex:none; margin-left:auto;
+  border:1px solid var(--line); border-radius:4px; padding:0 4px; }
+.logdetail { margin:2px 0 6px 0; padding:6px 8px; border-left:2px solid var(--line);
+  background:rgba(255,255,255,.03); border-radius:0 6px 6px 0; }
+.drow { display:flex; gap:8px; padding:1px 0; }
+.drow .dk { color:var(--muted); min-width:92px; flex:none; }
+.drow .dv { word-break:break-word; }
+.feed .empty { color:var(--muted); padding:6px 0; }
+.log { display:flex; gap:7px; padding:2px 0; align-items:baseline; border-bottom:1px solid rgba(255,255,255,.04); }
+.log .sev { flex:none; width:54px; font-size:9px; font-weight:800; text-transform:uppercase; }
+.log .mod { flex:none; color:var(--muted); max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.log .txt { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+
+.card.fe { border-color: rgba(255,138,61,.3);
+  background: linear-gradient(160deg, rgba(255,138,61,.12), rgba(28,31,38,.7) 60%); }
+.fw { display:flex; align-items:center; gap:9px; margin-bottom:9px; }
+.fw .badge { padding:2px 10px; border-radius:7px; font-weight:800; font-size:11px; color:#0b0d10; }
+.fw .name { color:var(--muted); }
+.fe .hd { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:2px; }
+.fe .lbl { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.5px; }
+.hmr-big { font-size:26px; font-weight:800; line-height:1; transition: color .2s; }
+.hmr-big.hmr-flash { color: var(--orange); text-shadow: 0 0 14px rgba(255,138,61,.7); }
+.fe svg { width:100%; height:34px; display:block; margin:6px 0 8px; }
+.fe polyline { fill:none; stroke-width:1.75; vector-effect:non-scaling-stroke; }
+.spark.fe { stroke:var(--orange); } .area.fe { fill:rgba(255,138,61,.16); }
+
+.env-badge { padding:.2em .7em; border-radius:6px; font-size:.76em; font-weight:800;
+  letter-spacing:.6px; text-transform:uppercase; color:#0b0d10; background:var(--muted); flex:none; }
+.env-badge.dev { background: var(--ok); } .env-badge.prod { background: var(--crit); color:#fff; }
+.env-badge.test { background: var(--warn); } .env-badge.staging { background:#a06bff; color:#fff; }
+.branch { display:flex; align-items:center; gap:5px; padding:2px 9px; border-radius:6px; flex:none;
+  background:#22262e; font-weight:700; max-width:200px; cursor:help; }
+.branch .git { color:var(--blue2); } .branch span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+/* Les contrôles et les indicateurs du bandeau sont de VRAIS <button> : ils
+   s'atteignent au clavier et s'annoncent. Ce bloc leur retire l'apparence
+   native que le navigateur leur donne, sans leur retirer leur nature. */
+.strip button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; }
+.strip button:focus-visible, .tab:focus-visible, .toolbtn:focus-visible {
+  outline: 2px solid var(--ok); outline-offset: 2px; border-radius: 4px; }
+.goto:hover .v, .goto:hover .k { color: #fff; }
+
+/* ── Infobulles ────────────────────────────────────────────────────────────
+   Maison, et non l'attribut « title » du navigateur : celui-là met environ une
+   seconde à venir, ne se style pas, et surtout n'apparaît JAMAIS au focus
+   clavier — l'aide restait donc inaccessible à qui n'utilise pas la souris.
+   Celle-ci s'ouvre au survol ET au focus, ce qui la rend utilisable par tout le
+   monde. En CSS pur : aucun script, aucun écouteur, rien à libérer. */
+[data-tip] { position: relative; }
+[data-tip]::after {
+  content: attr(data-tip);
+  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
+  width: max-content; max-width: 280px; white-space: normal; text-align: left;
+  background: #0b0b0d; color: #f2f2f2; border: 1px solid var(--line);
+  border-radius: 6px; padding: 6px 9px; font-size: 11px; line-height: 1.45;
+  font-weight: 400; text-transform: none; letter-spacing: 0;
+  box-shadow: 0 6px 20px rgba(0,0,0,.5);
+  opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none; z-index: 20;
+}
+[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; visibility: visible; }
+/* Barre ancrée en haut : l'infobulle bascule dessous, sinon elle sort de l'écran. */
+.bar.top [data-tip]::after { bottom: auto; top: calc(100% + 9px); }
+/* Les bords : l'infobulle se recale pour ne pas déborder de la fenêtre. */
+.strip > :first-child[data-tip]::after { left: 0; transform: none; }
+.strip > :last-child[data-tip]::after { left: auto; right: 0; transform: none; }
+@media (prefers-reduced-motion: reduce) { [data-tip]::after { transition: none; } }
+
+.ctrl { color:var(--muted); cursor:pointer; padding:0 4px; font-weight:800; font-size:1.05em; line-height:1; flex:none; }
+.ctrl:hover { color:#fff; }
+.ctrl.live { font-size:.78em; font-weight:700; border:1px solid var(--line); border-radius:6px; padding:2px 7px; letter-spacing:.3px; }
+.ctrl.live.on { color:var(--ok); border-color:var(--ok); }
+.ctrl.live:not(.on) { color:var(--muted); }
+
+.minbar { position:fixed; z-index:2147483000; display:none; align-items:center; gap:8px;
+  padding:6px 13px; border-radius:22px; cursor:pointer;
+  font:12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color:#e8eaed;
+  background:rgba(18,20,25,.92); backdrop-filter:blur(12px);
+  border:1px solid rgba(58,160,255,.45); box-shadow:0 4px 20px rgba(0,0,0,.5); }
+.minbar:hover { border-color:#3aa0ff; box-shadow:0 4px 26px rgba(58,160,255,.4); }
+.minbar.bottom { bottom:14px; } .minbar.top { top:14px; }
+.minbar.dock-left { left:14px; } .minbar.dock-right { right:14px; }
+.minbar .dot { width:8px; height:8px; border-radius:50%; background:#36b37e; }
+.minbar .dot.connected { background:#36b37e; } .minbar .dot.disconnected,.minbar .dot.error { background:#ff5630; }
+.minbar .dot.connecting,.minbar .dot.reconnecting { background:#ffab00; }
+.minbar .mlogo { color:#ff8a3d; } .minbar .mrate { font-weight:800; }
+.minbar .mbadge { font-size:9px; font-weight:800; text-transform:uppercase; color:#8a9099; }
+
+/* ── Network ─────────────────────────────────────────────────────────────── */
+.net-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
+.net-clear { margin-left:auto; color:var(--muted); cursor:pointer; font-size:10px;
+  text-transform:uppercase; letter-spacing:.5px; padding:2px 6px; border-radius:6px; }
+.net-clear:hover { color:#fff; background:rgba(255,255,255,.06); }
+.net-list { border-top:1px solid var(--line); }
+.net-list .empty { color:var(--muted); padding:8px 0; }
+.net-row { display:flex; align-items:center; gap:9px; padding:3px 4px; cursor:pointer;
+  border-bottom:1px solid rgba(255,255,255,.04); }
+.net-row:hover { background:rgba(255,255,255,.04); }
+.net-row.sel { background:rgba(58,160,255,.14); }
+.net-row.err .net-path { color:#ffb4a6; }
+.net-method { flex:none; width:46px; text-align:center; font-weight:800; font-size:9px;
+  padding:1px 0; border-radius:5px; text-transform:uppercase; color:#0b0d10; background:var(--muted); }
+.net-method.get { background:var(--blue2); } .net-method.post { background:var(--ok); }
+.net-method.put,.net-method.patch { background:var(--orange); }
+.net-method.delete { background:var(--crit); color:#fff; }
+.net-method.ws { background:#a06bff; color:#fff; }
+.net-path { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.net-status { flex:none; width:38px; text-align:center; font-weight:800; font-size:10px; }
+.net-status.s2 { color:var(--ok); } .net-status.s3 { color:var(--info); }
+.net-status.s4 { color:var(--warn); } .net-status.s5 { color:var(--crit); }
+.net-status.sp { color:var(--muted); }
+.net-dur { flex:none; width:58px; text-align:right; color:var(--muted); font-size:10px; }
+.net-rid { flex:none; color:var(--blue2); font-size:9px; opacity:.7; }
+
+.net-detail { margin-top:10px; border-top:1px solid var(--line); padding-top:10px; }
+.net-detail .empty { color:var(--muted); }
+.det-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:2px 14px; margin-bottom:10px; }
+.wf { display:flex; flex-direction:column; gap:3px; }
+.wf-title { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
+.wf-row { display:flex; align-items:center; gap:8px; }
+.wf-name { flex:none; width:74px; text-align:right; color:#cfd3d8; font-size:10px; }
+.wf-track { flex:1; position:relative; height:14px; background:rgba(255,255,255,.04); border-radius:3px; }
+.wf-bar { position:absolute; top:0; bottom:0; border-radius:3px; min-width:2px;
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
+.wf-ms { flex:none; width:62px; text-align:right; color:var(--muted); font-size:10px; }
+.wf-bar.parse { background:#4c9aff; } .wf-bar.resolve { background:#3aa0ff; }
+.wf-bar.firewall { background:#ff8a3d; } .wf-bar.init { background:#a06bff; }
+.wf-bar.action { background:#36b37e; } .wf-bar.render { background:#ffab00; }
+.wf-bar.send { background:#00b8d9; } .wf-bar.other { background:#8a9099; }
+.wf-bar.identity { background:#ff5c8a; }
+.det-loading,.det-err { color:var(--muted); padding:6px 0; } .det-err { color:var(--crit); }
+
+/* Network pane = split DevTools : liste (scroll) + détail (scroll), détail
+   TOUJOURS visible (≠ tout dans un seul scroll où le détail finit hors écran). */
+.pane.np.active { display:flex; flex-direction:column; padding:0; }
+.np .net-head { padding:10px 14px 8px; flex:none; margin:0; }
+.np .net-list { flex:1 1 auto; min-height:56px; overflow:auto; padding:0 14px; border-top:1px solid var(--line); }
+/* Détail : placeholder = petit (flex:0). Sélection active (.np.sel) → le détail
+   prend une vraie part (60%) avec son propre scroll → le waterfall est visible,
+   la liste se réduit. */
+.np .net-detail { flex:0 1 auto; max-height:50%; overflow:auto; padding:8px 14px 12px; margin-top:0; border-top:1px solid var(--line); }
+.np.sel .net-list { flex:1 1 40%; min-height:48px; }
+.np.sel .net-detail { flex:1 1 60%; max-height:none; }
+.det-bar { display:flex; justify-content:flex-end; margin-bottom:2px; }
+.det-close { cursor:pointer; color:var(--muted); font-weight:800; font-size:15px; line-height:1; padding:0 4px; }
+.det-close:hover { color:#fff; }
+`;
+function pushCap(arr, v, cap) {
+	arr.push(v);
+	if (arr.length > cap) arr.shift();
+}
+function clampH(h) {
+	const max = typeof window !== "undefined" ? window.innerHeight * .85 : 700;
+	if (h < PANEL_H_MIN) return PANEL_H_MIN;
+	if (h > max) return Math.round(max);
+	return Math.round(h);
+}
+/**
+* Version du format de l'état persisté.
+*
+* Elle existe pour une raison précise : ces clés survivent aux mises à jour du
+* framework, dans un navigateur que personne ne nettoie. Le jour où l'une change
+* de sens, une valeur écrite par une version d'avant est lue comme si elle
+* disait la même chose — et la barre s'ouvre dans un état incohérent que
+* l'utilisateur ne sait pas défaire. Au changement de version, tout est purgé :
+* on perd une préférence d'affichage, ce qui ne coûte rien, plutôt que de
+* charger un état dont on ne sait rien.
+*/
+const LS_VERSION = "1";
+/** Clés de persistance localStorage (état chrome de la barre). */
+const LS = {
+	/** Version du format — jamais purgée, c'est elle qui décide de la purge. */
+	version: "nf.debugbar.v",
+	visible: "nf.debugbar.visible",
+	min: "nf.debugbar.min",
+	side: "nf.debugbar.side",
+	tab: "nf.debugbar.tab",
+	h: "nf.debugbar.h",
+	live: "nf.debugbar.live"
+};
+/**
+* Toutes les clés que la barre écrit sur CE navigateur.
+*
+* Cette liste n'est pas décorative : elle est ce que la barre AFFICHE dans son
+* onglet Runtime et ce que sa purge efface. Trois choses qui doivent rester
+* d'accord, donc une seule source.
+*/
+function lsKeys() {
+	return Object.values(LS);
+}
+/** Efface l'état persisté de la barre — et rien d'autre du stockage de l'app. */
+function lsPurge() {
+	try {
+		for (const k of lsKeys()) localStorage.removeItem(k);
+	} catch {}
+}
+/**
+* Purge l'état si le format a changé depuis la dernière visite.
+*
+* Appelée avant toute lecture — sinon on lirait justement les valeurs qu'on
+* s'apprête à jeter.
+*/
+function lsMigrate() {
+	try {
+		if (localStorage.getItem(LS.version) === LS_VERSION) return;
+		lsPurge();
+		localStorage.setItem(LS.version, LS_VERSION);
+	} catch {}
+}
+function lsGet(key, def) {
+	try {
+		return localStorage.getItem(key) ?? def;
+	} catch {
+		return def;
+	}
+}
+function lsSet(key, val) {
+	try {
+		localStorage.setItem(key, val);
+	} catch {}
+}
+const GLOBAL_KEY = "__NODEFONY_DEBUGBAR__";
+/**
+* Widget DOM. Lazy : ne construit le Shadow DOM qu'au `mount()`. Idempotent
+* (un seul `#nodefony-debugbar` par page).
+*/
+var DebugBar = class DebugBar {
+	client;
+	model = new DebugBarModel();
+	url;
+	position;
+	startOpen;
+	ownClient;
+	frontend;
+	host = null;
+	bar = null;
+	visible;
+	minimized;
+	side;
+	activeTab;
+	panelH;
+	live;
+	/** dispose des abonnements realtime (null quand OFF). */
+	liveOff = null;
+	rafPending = false;
+	feedLen = -1;
+	/** Filtre de sévérité de l'onglet Logs — `all` par défaut. */
+	feedSev = "all";
+	/** Recherche courante, déjà en minuscules (comparée telle quelle). */
+	feedQuery = "";
+	/**
+	* Affichage suspendu. Les entrées continuent d'arriver dans le modèle : à la
+	* reprise, la liste se reconstruit complète — mettre en pause ne fait pas
+	* perdre ce qui s'est passé pendant, ce qui serait le pire des deux mondes.
+	*/
+	feedPaused = false;
+	/** La liste affichée doit être refaite (changement de filtre ou de recherche). */
+	feedDirty = false;
+	prevFrames = 0;
+	rtRate = 0;
+	rtPeak = 0;
+	rtSeries = [];
+	viteConnected = false;
+	hmrCount = 0;
+	hmrPrev = 0;
+	hmrRate = 0;
+	hmrLast = "—";
+	hmrSeries = [];
+	flashTimer = null;
+	disposers = [];
+	el = Object.create(null);
+	networkEnabled;
+	profilerBase;
+	net = new NetworkModel();
+	/** Observe la barre → publie sa hauteur (var CSS) pour l'app hôte. */
+	ro = null;
+	netRows = /* @__PURE__ */ new Map();
+	selectedRid = null;
+	selRowId = null;
+	selNoRid = false;
+	detailVersion = 0;
+	detailRendered = -1;
+	constructor(opts = {}) {
+		this.url = opts.url ?? DEFAULT_PATH;
+		this.position = opts.position ?? "bottom";
+		this.startOpen = opts.open ?? false;
+		this.ownClient = false;
+		this.frontend = opts.frontend ?? null;
+		this.networkEnabled = opts.network !== false;
+		this.profilerBase = (opts.profilerBase ?? DEFAULT_PROFILER_BASE).replace(/\/$/, "");
+		this.client = opts.client ?? RealtimeClient.shared({ url: this.url });
+		lsMigrate();
+		this.visible = lsGet(LS.visible, "1") !== "0";
+		this.minimized = lsGet(LS.min, "0") === "1";
+		this.side = lsGet(LS.side, "right") === "left" ? "left" : "right";
+		this.activeTab = lsGet(LS.tab, "realtime") || "realtime";
+		this.panelH = clampH(parseInt(lsGet(LS.h, String(defaultPanelH())), 10) || defaultPanelH());
+		this.live = lsGet(LS.live, "0") === "1";
+	}
+	/** Construit le DOM, branche le realtime et ouvre la connexion. No-op si déjà monté. */
+	mount() {
+		if (typeof document === "undefined") return this;
+		if (document.getElementById(HOST_ID)) return this;
+		this.buildDom();
+		this.wireRealtime();
+		this.wireHmr();
+		this.wireNetwork();
+		this.applyChrome();
+		this.registerHandle();
+		this.client.connect().catch(() => {});
+		this.render();
+		return this;
+	}
+	/** Détache listeners, ferme la connexion (si propriétaire) et retire le DOM. */
+	unmount() {
+		for (const d of this.disposers) d();
+		this.disposers.length = 0;
+		if (this.flashTimer) clearTimeout(this.flashTimer);
+		this.flashTimer = null;
+		if (this.ownClient) this.client.disconnect();
+		this.unregisterHandle();
+		this.ro?.disconnect();
+		this.ro = null;
+		try {
+			document.documentElement.style.removeProperty("--nodefony-debugbar-height");
+		} catch {}
+		this.host?.remove();
+		this.host = null;
+		this.bar = null;
+	}
+	/** Affiche/masque la barre (pilotable depuis une app via le handle global). */
+	setVisible(v) {
+		this.visible = v;
+		lsSet(LS.visible, v ? "1" : "0");
+		this.applyChrome();
+	}
+	setMinimized(v) {
+		this.minimized = v;
+		lsSet(LS.min, v ? "1" : "0");
+		this.applyChrome();
+	}
+	toggleSide() {
+		this.side = this.side === "left" ? "right" : "left";
+		lsSet(LS.side, this.side);
+		this.applyChrome();
+	}
+	/**
+	* Déplie ou replie le panneau — le SEUL endroit qui bascule cet état.
+	*
+	* Il porte aussi ce qu'un lecteur d'écran doit entendre : `aria-expanded` sur
+	* le bouton qui commande, et un nom qui dit l'action à venir (« Déplier » /
+	* « Replier »), pas l'état courant — un nom qui décrit l'état laisse
+	* l'utilisateur deviner ce que le bouton va faire.
+	*/
+	setOpen(open) {
+		const bar = this.bar;
+		if (!bar) return;
+		bar.classList.toggle("open", open);
+		const btn = this.el.btnToggle;
+		if (btn) {
+			btn.setAttribute("aria-expanded", open ? "true" : "false");
+			const label = open ? "Replier le panneau" : "Déplier le panneau";
+			btn.setAttribute("aria-label", label);
+			btn.setAttribute("data-tip", label);
+		}
+		this.render();
+	}
+	setTab(tab) {
+		this.activeTab = tab;
+		lsSet(LS.tab, tab);
+		this.applyTab();
+		this.render();
+	}
+	setPanelH(h) {
+		this.panelH = clampH(h);
+		const panes = this.el.panes;
+		if (panes) panes.style.height = `${this.panelH}px`;
+	}
+	/** Reflète l'onglet actif sur les boutons + panes. */
+	applyTab() {
+		(this.bar?.querySelectorAll(".tab"))?.forEach((t) => t.classList.toggle("active", t.getAttribute("data-tab") === this.activeTab));
+		(this.bar?.querySelectorAll(".pane"))?.forEach((p) => p.classList.toggle("active", p.getAttribute("data-pane") === this.activeTab));
+	}
+	/** Applique l'état chrome au DOM (display + classes de dock + hauteur). */
+	applyChrome() {
+		if (!this.host || !this.bar) return;
+		this.host.style.display = this.visible ? "" : "none";
+		this.bar.style.display = this.minimized ? "none" : "";
+		const min = this.el.minbar;
+		if (min) {
+			min.style.display = this.minimized ? "flex" : "none";
+			min.setAttribute("class", `minbar ${this.position} dock-${this.side}`);
+		}
+		this.setPanelH(this.panelH);
+		this.applyTab();
+		this.publishHeight();
+	}
+	/**
+	* Publie la hauteur occupée par la barre (dock bas, visible, dépliée) en
+	* variable CSS `--nodefony-debugbar-height` sur `:root`. L'app hôte (Studio)
+	* la réserve en `padding-bottom` → le contenu n'est jamais masqué. `0px` si
+	* masquée / réduite (chip flottante) / dockée en haut.
+	*/
+	publishHeight() {
+		if (typeof document === "undefined") return;
+		const h = this.visible && !this.minimized && this.position === "bottom" && this.bar ? this.bar.offsetHeight : 0;
+		document.documentElement.style.setProperty("--nodefony-debugbar-height", `${h}px`);
+	}
+	registerHandle() {
+		globalThis[GLOBAL_KEY] = {
+			isVisible: () => this.visible,
+			setVisible: (v) => this.setVisible(v),
+			toggle: () => this.setVisible(!this.visible),
+			minimize: () => this.setMinimized(true),
+			restore: () => this.setMinimized(false)
+		};
+	}
+	unregisterHandle() {
+		try {
+			delete globalThis[GLOBAL_KEY];
+		} catch {}
+	}
+	buildDom() {
+		const host = document.createElement("div");
+		host.id = HOST_ID;
+		host.setAttribute("role", "complementary");
+		host.setAttribute("aria-label", "Barre de débogage Nodefony");
+		const shadow = host.attachShadow({ mode: "open" });
+		const style = document.createElement("style");
+		style.textContent = STYLES;
+		const bar = document.createElement("div");
+		bar.className = `bar ${this.position}${this.startOpen ? " open" : ""}`;
+		bar.innerHTML = this.template();
+		const minbar = document.createElement("div");
+		minbar.className = `minbar ${this.position} dock-${this.side}`;
+		minbar.innerHTML = `<span class="dot" data-el="mdot"></span><span class="mlogo">⚡</span><span class="mrate" data-el="mrate">0/s</span><span class="mbadge" data-el="mEnv"></span>`;
+		shadow.append(style, bar, minbar);
+		document.body.appendChild(host);
+		this.host = host;
+		this.bar = bar;
+		this.el.minbar = minbar;
+		if (typeof ResizeObserver !== "undefined") {
+			this.ro = new ResizeObserver(() => this.publishHeight());
+			this.ro.observe(bar);
+		}
+		shadow.querySelectorAll("[data-el]").forEach((node) => {
+			const key = node.getAttribute("data-el");
+			if (key) this.el[key] = node;
+		});
+		const strip = bar.querySelector(".strip");
+		this.wireBtn("btnToggle", () => this.setOpen(!bar.classList.contains("open")));
+		const onGoto = (ev) => {
+			const id = (ev.target?.closest?.(".goto"))?.getAttribute("data-goto");
+			if (!id) return;
+			this.setOpen(true);
+			this.setTab(id);
+		};
+		strip.addEventListener("click", onGoto);
+		this.disposers.push(() => strip.removeEventListener("click", onGoto));
+		this.wireBtn("btnMin", () => this.setMinimized(true));
+		this.wireBtn("btnSide", () => this.toggleSide());
+		this.wireBtn("btnLive", () => this.setLive(!this.live));
+		this.updateLiveBtn();
+		const tabsBar = bar.querySelector(".tabs");
+		if (tabsBar) {
+			const onTab = (ev) => {
+				const id = (ev.target?.closest?.(".tab"))?.getAttribute("data-tab");
+				if (id) this.setTab(id);
+			};
+			tabsBar.addEventListener("click", onTab);
+			this.disposers.push(() => tabsBar.removeEventListener("click", onTab));
+		}
+		const resize = this.el.resize;
+		if (resize) {
+			const onDown = (e) => this.startResize(e);
+			resize.addEventListener("pointerdown", onDown);
+			this.disposers.push(() => resize.removeEventListener("pointerdown", onDown));
+		}
+		const counts = bar.querySelector(".counts");
+		if (counts) {
+			const onSev = (ev) => {
+				const sev = (ev.target?.closest?.(".sevf"))?.getAttribute("data-sev");
+				if (sev !== "all" && sev !== "err" && sev !== "warn") return;
+				this.feedSev = this.feedSev === sev ? "all" : sev;
+				counts.querySelectorAll(".sevf").forEach((n) => n.classList.toggle("on", n.getAttribute("data-sev") === this.feedSev && this.feedSev !== "all"));
+				this.feedDirty = true;
+				this.render();
+			};
+			counts.addEventListener("click", onSev);
+			this.disposers.push(() => counts.removeEventListener("click", onSev));
+		}
+		const search = this.el.logSearch;
+		if (search) {
+			const onSearch = () => {
+				this.feedQuery = search.value.trim().toLowerCase();
+				this.feedDirty = true;
+				this.render();
+			};
+			search.addEventListener("input", onSearch);
+			this.disposers.push(() => search.removeEventListener("input", onSearch));
+		}
+		this.wireBtn("btnPause", () => {
+			this.feedPaused = !this.feedPaused;
+			const b = this.el.btnPause;
+			if (b) {
+				b.setAttribute("aria-pressed", this.feedPaused ? "true" : "false");
+				b.classList.toggle("on", this.feedPaused);
+				b.textContent = this.feedPaused ? "▶" : "⏸";
+				const tip = this.feedPaused ? "Reprendre l'affichage — la liste se recompose avec ce qui est arrivé pendant la pause" : "Suspendre l'affichage — les entrées continuent d'arriver et se rattrapent à la reprise";
+				b.setAttribute("data-tip", tip);
+			}
+			if (!this.feedPaused) {
+				this.feedDirty = true;
+				this.render();
+			}
+		});
+		this.wireBtn("btnCopy", () => {
+			const node = this.el.feed;
+			const text = node ? node.textContent ?? "" : "";
+			navigator.clipboard?.writeText(text).then(() => this.flashBtn("btnCopy", "✓"), () => this.flashBtn("btnCopy", "✗"));
+		});
+		this.wireBtn("btnClearFeed", () => {
+			const node = this.el.feed;
+			if (node) node.innerHTML = `<div class="empty">liste vidée — les nouvelles entrées s'afficheront ici.</div>`;
+			this.feedLen = this.model.view.feed.length;
+		});
+		const feed = this.el.feed;
+		if (feed) {
+			const onFeed = (ev) => {
+				const row = ev.target?.closest?.(".log");
+				if (!row) return;
+				if (row.nextElementSibling?.classList.contains("logdetail")) {
+					row.nextElementSibling?.remove();
+					row.setAttribute("aria-expanded", "false");
+					return;
+				}
+				const uid = Number(row.getAttribute("data-uid"));
+				const entry = this.model.view.feed.find((l) => l.uid === uid);
+				if (!entry) return;
+				feed.querySelectorAll(".logdetail").forEach((n) => n.remove());
+				feed.querySelectorAll(".log[aria-expanded='true']").forEach((n) => n.setAttribute("aria-expanded", "false"));
+				row.insertAdjacentHTML("afterend", this.feedDetail(entry));
+				row.setAttribute("aria-expanded", "true");
+			};
+			const onFeedKey = (ev) => {
+				const k = ev.key;
+				if (k !== "Enter" && k !== " ") return;
+				const row = ev.target?.closest?.(".log");
+				if (!row) return;
+				ev.preventDefault();
+				row.click();
+			};
+			feed.addEventListener("click", onFeed);
+			feed.addEventListener("keydown", onFeedKey);
+			this.disposers.push(() => {
+				feed.removeEventListener("click", onFeed);
+				feed.removeEventListener("keydown", onFeedKey);
+			});
+		}
+		this.wireBtn("btnPurge", () => {
+			lsPurge();
+			this.flashBtn("btnPurge", "état effacé ✓");
+		});
+		const onMin = () => this.setMinimized(false);
+		minbar.addEventListener("click", onMin);
+		this.disposers.push(() => minbar.removeEventListener("click", onMin));
+		let resizePending = false;
+		const onWinResize = () => {
+			if (resizePending) return;
+			resizePending = true;
+			requestAnimationFrame(() => {
+				resizePending = false;
+				this.setPanelH(this.panelH);
+			});
+		};
+		window.addEventListener("resize", onWinResize);
+		this.disposers.push(() => window.removeEventListener("resize", onWinResize));
+	}
+	startResize(ev) {
+		ev.preventDefault();
+		const startY = ev.clientY;
+		const startH = this.panelH;
+		const onMove = (e) => {
+			const delta = this.position === "bottom" ? startY - e.clientY : e.clientY - startY;
+			this.setPanelH(startH + delta);
+		};
+		const onUp = () => {
+			document.removeEventListener("pointermove", onMove);
+			document.removeEventListener("pointerup", onUp);
+			lsSet(LS.h, String(this.panelH));
+		};
+		document.addEventListener("pointermove", onMove);
+		document.addEventListener("pointerup", onUp);
+	}
+	/**
+	* Retour visuel bref sur un bouton d'action.
+	*
+	* Une copie réussie ne change rien à l'écran : sans ce clin d'œil, on ne sait
+	* pas si le clic a porté, et on reclique.
+	*/
+	flashBtn(key, glyph) {
+		const b = this.el[key];
+		if (!b) return;
+		const before = b.textContent ?? "";
+		b.textContent = glyph;
+		const t = setTimeout(() => {
+			b.textContent = before;
+		}, 900);
+		this.disposers.push(() => clearTimeout(t));
+	}
+	wireBtn(key, handler) {
+		const node = this.el[key];
+		if (!node) return;
+		node.addEventListener("click", handler);
+		this.disposers.push(() => node.removeEventListener("click", handler));
+	}
+	template() {
+		return `
+      <div class="strip">
+        <span class="dot" data-el="dot" data-tip="État de la connexion temps réel"></span>
+        <span class="brand" data-tip="Barre de débogage Nodefony — visible en développement uniquement"><span class="logo">◆</span><span class="name">nodefony</span></span>
+        <span class="env-badge" data-el="envBadge" data-tip="Environnement dans lequel tourne l'application">env</span>
+        <span class="branch" data-el="branch" data-tip="Branche git de la copie de travail"><span class="git">⎇</span><span data-el="branchName">—</span></span>
+        <span class="rt-pill" data-el="rtPill" data-tip="Transport temps réel et état de la socket"><span class="bolt">⚡</span> realtime</span>
+        ${this.miniMetric("rt", "rt", "rtMini", "0/s", "realtime", "Messages temps réel reçus par seconde — cliquer pour ouvrir l'onglet Realtime")}
+        ${this.miniMetric("cpu", "cpu", "cpuMini", "0%", "perf", "Charge processeur du serveur — cliquer pour ouvrir l'onglet Perf")}
+        ${this.miniMetric("mem", "mem", "memMini", "0%", "perf", "Mémoire utilisée par le serveur — cliquer pour ouvrir l'onglet Perf")}
+        <span class="spacer"></span>
+        ${this.networkEnabled ? `<button type="button" class="chip goto" data-goto="network" data-tip="Requêtes réseau observées — cliquer pour ouvrir l'onglet Network"><span class="k">net</span><span class="blue" data-el="netChip">0</span></button>` : ""}
+        <button type="button" class="chip goto" data-goto="logs" data-tip="Entrées de journal reçues — cliquer pour ouvrir l'onglet Logs"><span class="k">logs</span><span data-el="logs">0</span></button>
+        <button type="button" class="chip goto" data-goto="logs" data-tip="Erreurs et alertes — cliquer pour ouvrir l'onglet Logs"><span class="k">err</span><span class="crit" data-el="err">0</span></button>
+        <button type="button" class="ctrl live" data-el="btnLive" aria-pressed="false" data-tip="Recevoir les mesures et les journaux en direct. Coupé par défaut : le flux maintient des compteurs côté serveur.">flux OFF</button>
+        <button type="button" class="ctrl" data-el="btnSide" aria-label="Changer la barre de côté" data-tip="Changer la barre de côté">⇄</button>
+        <button type="button" class="ctrl" data-el="btnMin" aria-label="Réduire la barre en pastille" data-tip="Réduire en pastille">—</button>
+        <button type="button" class="toggle" data-el="btnToggle" aria-expanded="${this.startOpen}" aria-controls="nf-db-panel" aria-label="${this.startOpen ? "Replier" : "Déplier"} le panneau" data-tip="${this.startOpen ? "Replier" : "Déplier"} le panneau">▴</button>
+      </div>
+      <div class="panelwrap" id="nf-db-panel">
+        <div class="resize" data-el="resize" title="Redimensionner"></div>
+        <div class="tabs">
+          <button class="tab" data-tab="realtime">Realtime</button>
+          ${this.networkEnabled ? `<button class="tab" data-tab="network">Network <span class="tcount" data-el="netTab">0</span></button>` : ""}
+          <button class="tab" data-tab="perf">Perf</button>
+          <button class="tab" data-tab="logs">Logs <span class="tcount" data-el="logsTab">0</span></button>
+          <button class="tab" data-tab="runtime">Runtime</button>
+        </div>
+        <div class="panes" data-el="panes">
+          ${this.realtimePane()}
+          ${this.networkEnabled ? this.networkPane() : ""}
+          ${this.perfPane()}
+          ${this.logsPane()}
+          ${this.runtimePane()}
+        </div>
+      </div>`;
+	}
+	realtimePane() {
+		return `<div class="pane" data-pane="realtime"><div class="cards">
+      <div class="card hero">
+        <h4><span class="blue">⚡</span> Realtime</h4>
+        <div class="big"><span data-el="rtBig">0</span><small>msg/s</small></div>
+        <svg viewBox="0 0 ${CHART_W} 38" preserveAspectRatio="none">
+          <polygon class="area rt" data-el="rtArea" points=""/>
+          <polyline class="spark rt" data-el="rtLine" points=""/>
+        </svg>
+        ${this.kv("transport", "rtTransport")}
+        ${this.kv("protocole", "rtProto")}
+        ${this.kv("état", "rtState")}
+        ${this.kv("frames reçues", "rtFrames")}
+        ${this.kv("pic", "rtPeak")}
+        <div class="tag"><b>HTTP &amp; WebSocket, même contexte.</b> Push natif, <b>0 polling</b> — chaque chiffre arrive en temps réel par le Core isomorphe.</div>
+      </div>
+      ${this.frontendCard()}
+    </div></div>`;
+	}
+	networkPane() {
+		return `<div class="pane np" data-pane="network">
+      <div class="net-head">
+        <span class="chip"><span class="k">total</span><span data-el="netTotal">0</span></span>
+        <span class="chip"><span class="k">err</span><span class="crit" data-el="netErr">0</span></span>
+        <span class="chip"><span class="k">pending</span><span class="muted" data-el="netPend">0</span></span>
+        <span class="net-clear" data-el="netClear" title="vider la liste">vider</span>
+      </div>
+      <div class="net-list" data-el="netList"><div class="empty">en attente d'appels AJAX (fetch / XHR)…</div></div>
+      <div class="net-detail" data-el="netDetail"><div class="empty">clique un appel → profil serveur (waterfall des phases, route, user).</div></div>
+    </div>`;
+	}
+	perfPane() {
+		return `<div class="pane" data-pane="perf"><div class="cards">
+      <div class="card">
+        <h4>Performance</h4>
+        ${this.chart("CPU", "cpuVal", "cpuPeak", "cpuLine", "cpuArea")}
+        ${this.chart("Heap", "heapVal", "heapPeak", "heapLine", "heapArea")}
+        ${this.chart("Event loop", "loopVal", "loopPeak", "loopLine", "loopArea")}
+      </div>
+    </div></div>`;
+	}
+	/**
+	* L'onglet Logs — une petite console de lecture, pas une liste qui défile.
+	*
+	* Ce qu'elle porte, et pourquoi : un FILTRE par sévérité et une RECHERCHE
+	* (sans quoi on lit le bruit au lieu de son incident) ; une PAUSE (sans quoi
+	* la ligne qu'on essaie de lire s'en va) ; une COPIE (une trace se colle dans
+	* un ticket) ; et le DÉTAIL d'une entrée, où vit le `requestId` — le champ qui
+	* relie ce journal à sa requête, et que la barre recevait sans jamais le
+	* montrer.
+	*/
+	logsPane() {
+		return `<div class="pane" data-pane="logs">
+      <div class="counts">
+        <button type="button" class="chip sevf" data-sev="all" data-tip="Tout afficher"><span class="k">total</span><span data-el="cTotal">0</span></button>
+        <button type="button" class="chip sevf" data-sev="err" data-tip="N'afficher que les erreurs (sévérité 0 à 3)"><span class="k">err</span><span class="crit" data-el="cErr">0</span></button>
+        <button type="button" class="chip sevf" data-sev="warn" data-tip="N'afficher que les alertes (sévérité 4)"><span class="k">warn</span><span class="warn" data-el="cWarn">0</span></button>
+        <span class="chip" data-tip="Entrées écartées par le serveur faute de place dans le tampon — le flux était plus rapide que l'envoi"><span class="k">dropped</span><span class="muted" data-el="cDrop">0</span></span>
+        <span class="spacer"></span>
+        <input class="search" data-el="logSearch" type="search" placeholder="rechercher…"
+               aria-label="Filtrer les journaux sur leur texte, leur module ou leur requête" />
+        <button type="button" class="toolbtn" data-el="btnPause" aria-pressed="false" data-tip="Suspendre l'affichage — les entrées continuent d'arriver et se rattrapent à la reprise">⏸</button>
+        <button type="button" class="toolbtn" data-el="btnCopy" data-tip="Copier les entrées affichées dans le presse-papiers">⧉</button>
+        <button type="button" class="toolbtn" data-el="btnClearFeed" data-tip="Vider la liste affichée (n'efface rien côté serveur)">⌫</button>
+      </div>
+      <div class="feed" data-el="feed" role="log" aria-label="Journaux du serveur"><div class="empty">en attente de logs…</div></div>
+    </div>`;
+	}
+	/**
+	* Ce que la barre garde sur CE navigateur — écrit noir sur blanc.
+	*
+	* Une console de développement qui écrit dans le stockage local sans le dire
+	* est exactement ce qu'on reproche aux autres. La liste est dérivée des clés
+	* réelles, donc elle ne peut pas mentir par oubli, et le bouton efface
+	* précisément celles-là — jamais le stockage de l'application hôte.
+	*/
+	storageCard() {
+		return `<div class="card">
+      <h4>Stockage local</h4>
+      <div class="tag">Ces valeurs vivent dans ce navigateur, sur cet appareil. Elles ne quittent jamais la page et ne concernent que l'apparence de la barre.</div>
+      ${lsKeys().map((k) => `<div class="drow"><span class="dk">${escapeHtml(k.replace("nf.debugbar.", ""))}</span><span class="dv">${escapeHtml(lsGet(k, "—"))}</span></div>`).join("")}
+      <div style="margin-top:8px"><button type="button" class="toolbtn" data-el="btnPurge" data-tip="Effacer les préférences de la barre sur ce navigateur — l'application n'est pas touchée">Purger l'état de la barre</button></div>
+    </div>`;
+	}
+	runtimePane() {
+		return `<div class="pane" data-pane="runtime"><div class="cards">
+      ${this.storageCard()}
+      <div class="card">
+        <h4>Runtime</h4>
+        ${this.kv("app", "appName")}
+        ${this.kv("version", "appVersion")}
+        ${this.kv("environnement", "envRow")}
+        ${this.kv("branche", "branchRow")}
+        ${this.kv("pid", "pid")}
+        ${this.kv("uptime", "uptime")}
+        ${this.kv("instance", "instance")}
+        ${this.kv("cpu cores", "cores")}
+        ${this.kv("loadavg", "load")}
+        ${this.kv("rss", "rss")}
+        ${this.kv("heap used", "heapUsed")}
+        ${this.kv("heap total", "heapTotal")}
+        ${this.kv("heap limit", "heapLimit")}
+        ${this.kv("external", "external")}
+      </div>
+    </div></div>`;
+	}
+	/**
+	* Un indicateur du bandeau — et un RACCOURCI vers l'onglet qui le détaille.
+	*
+	* C'est un `<button>` et non un `<span>` : le bandeau ne se replie plus au
+	* clic (c'était le défaut principal — lire une valeur refermait le panneau),
+	* donc chaque indicateur peut faire quelque chose d'utile de son propre clic.
+	* Mener à l'onglet qui explique le chiffre est ce que l'utilisateur attend,
+	* et un bouton l'annonce et s'atteint au clavier.
+	*/
+	miniMetric(label, valKey, sparkKey, init, goto, tip) {
+		return `<button type="button" class="metric goto" data-goto="${goto}" data-tip="${escapeHtml(tip)}">
+      <span class="k">${label}</span>
+      <span class="v" data-el="${valKey}">${init}</span>
+      <svg class="mini" viewBox="0 0 ${MINI_W} ${MINI_H}" preserveAspectRatio="none">
+        <polyline class="spark ok" data-el="${sparkKey}" points=""/>
+      </svg>
+    </button>`;
+	}
+	chart(label, valKey, peakKey, lineKey, areaKey) {
+		return `<div class="chart">
+      <div class="hd">
+        <span class="lbl">${label}</span>
+        <span><span class="val" data-el="${valKey}">—</span> <span class="peak" data-el="${peakKey}"></span></span>
+      </div>
+      <svg viewBox="0 0 ${CHART_W} ${CHART_H}" preserveAspectRatio="none">
+        <polygon class="area ok" data-el="${areaKey}" points=""/>
+        <polyline class="spark ok" data-el="${lineKey}" points=""/>
+      </svg>
+    </div>`;
+	}
+	kv(label, key) {
+		return `<div class="kv"><span class="k">${label}</span><span class="v" data-el="${key}">—</span></div>`;
+	}
+	/** Carte Frontend / HMR — affichée seulement si un contexte frontend est fourni. */
+	frontendCard() {
+		if (!this.frontend) return "";
+		const fw = FRAMEWORKS[this.frontend.framework ?? ""] ?? {
+			label: this.frontend.framework ?? "Frontend",
+			color: "#3aa0ff"
+		};
+		return `<div class="card fe">
+      <h4><span style="color:${fw.color}">●</span> Frontend</h4>
+      <div class="fw">
+        <span class="badge" style="background:${fw.color}">${escapeHtml(fw.label)}</span>
+        <span class="name">${escapeHtml(this.frontend.name ?? "")}</span>
+      </div>
+      <div class="hd"><span class="lbl">HMR hot updates</span><span class="hmr-big" data-el="hmrBig">0</span></div>
+      <svg viewBox="0 0 ${CHART_W} 34" preserveAspectRatio="none">
+        <polygon class="area fe" data-el="hmrArea" points=""/>
+        <polyline class="spark fe" data-el="hmrLine" points=""/>
+      </svg>
+      ${this.kv("bundler", "feVite")}
+      ${this.kv("dernier module", "hmrLast")}
+      <div class="tag"><b>Backend &amp; frontend, un seul process.</b> HMR Vite branché au runtime — sauvegarde un composant, la barre pulse.</div>
+    </div>`;
+	}
+	wireRealtime() {
+		const offState = this.client.onState((state) => {
+			this.model.setState(state);
+			this.scheduleRender();
+		});
+		const offTick = this.client.onStats(() => {
+			if (!this.live) return;
+			this.sampleThroughput();
+			this.scheduleRender();
+		});
+		const offStats = this.client.on(CHANNELS.stats, (...a) => {
+			const p = a[0];
+			if (p && typeof p === "object") this.model.ingestStats(p);
+			this.scheduleRender();
+		});
+		const offSyslog = this.client.on(CHANNELS.syslog, (...a) => {
+			const p = a[0];
+			if (p && typeof p === "object") this.model.ingestSyslog(p);
+			this.scheduleRender();
+		});
+		this.model.setState(this.client.state);
+		this.disposers.push(offState, offTick, offStats, offSyslog, () => {
+			this.stopLive();
+		});
+		if (this.live) this.startLive();
+	}
+	/**
+	* Démarre les abonnements realtime (tickers serveur stats+syslog). REF-COMPTÉ
+	* (UNE fois) sur le client PARTAGÉ : un canal reste actif tant qu'un
+	* consommateur le veut ; le client ré-abonne seul au reconnect. Idempotent.
+	*/
+	startLive() {
+		if (this.liveOff) return;
+		this.client.subscribe(CHANNELS.stats);
+		this.client.subscribe(CHANNELS.syslog);
+		this.liveOff = () => {
+			this.client.unsubscribe(CHANNELS.stats);
+			this.client.unsubscribe(CHANNELS.syslog);
+		};
+	}
+	/** Arrête les abonnements realtime (relâche la réf de la barre). Idempotent. */
+	stopLive() {
+		if (!this.liveOff) return;
+		this.liveOff();
+		this.liveOff = null;
+	}
+	/** Active/désactive le temps réel (bouton de la barre) + persiste la préférence. */
+	setLive(v) {
+		if (v === this.live && !!this.liveOff === v) return;
+		this.live = v;
+		lsSet(LS.live, v ? "1" : "0");
+		if (v) {
+			this.prevFrames = this.client.framesReceived;
+			this.startLive();
+		} else {
+			this.stopLive();
+			this.rtRate = 0;
+			pushCap(this.rtSeries, 0, RT_POINTS);
+		}
+		this.updateLiveBtn();
+		this.scheduleRender();
+	}
+	/** Met à jour l'aspect du bouton « Temps réel » selon l'état. */
+	updateLiveBtn() {
+		const btn = this.el["btnLive"];
+		if (!btn) return;
+		btn.textContent = this.live ? "flux ON" : "flux OFF";
+		btn.title = this.live ? "Flux push ACTIF (stats + logs) — clic pour couper. ≠ état de la connexion (pastille « realtime »)." : "Flux push coupé (perf) — clic pour activer (stats + logs). ≠ état de la connexion (pastille « realtime »).";
+		btn.setAttribute("aria-pressed", this.live ? "true" : "false");
+		btn.classList.toggle("on", this.live);
+	}
+	sampleThroughput() {
+		const total = this.client.framesReceived;
+		this.rtRate = Math.max(0, total - this.prevFrames);
+		this.prevFrames = total;
+		if (this.rtRate > this.rtPeak) this.rtPeak = this.rtRate;
+		pushCap(this.rtSeries, this.rtRate, RT_POINTS);
+		this.hmrRate = Math.max(0, this.hmrCount - this.hmrPrev);
+		this.hmrPrev = this.hmrCount;
+		pushCap(this.hmrSeries, this.hmrRate, RT_POINTS);
+	}
+	wireHmr() {
+		if (!this.frontend) return;
+		const dispose = observeViteHmr((e) => this.onHmr(e));
+		this.disposers.push(dispose);
+	}
+	onHmr(e) {
+		if (e.kind === "connected") this.viteConnected = true;
+		else if (e.kind === "update") {
+			this.hmrCount++;
+			this.hmrLast = e.path ?? "(module)";
+			this.flashHmr();
+		} else if (e.kind === "full-reload") {
+			this.hmrCount++;
+			this.hmrLast = e.path ?? "full reload";
+			this.flashHmr();
+		}
+		this.scheduleRender();
+	}
+	flashHmr() {
+		const node = this.el.hmrBig;
+		if (!node) return;
+		node.setAttribute("class", "hmr-big hmr-flash");
+		if (this.flashTimer) clearTimeout(this.flashTimer);
+		this.flashTimer = setTimeout(() => {
+			node.setAttribute("class", "hmr-big");
+		}, 600);
+	}
+	wireNetwork() {
+		if (!this.networkEnabled) return;
+		const viteOrigin = this.frontend?.viteOrigin ?? "";
+		const uninstall = installNetworkInterceptor({
+			onChange: (e) => this.onNetEntry(e),
+			ignore: (url) => url.includes(this.profilerBase) || url.includes("/@vite/") || url.includes("/@fs/") || url.includes("/node_modules/.vite/") || viteOrigin !== "" && url.includes(viteOrigin)
+		});
+		this.disposers.push(uninstall);
+		const list = this.el.netList;
+		if (list) {
+			const onClick = (ev) => {
+				const row = ev.target?.closest?.(".net-row");
+				if (!row) return;
+				const rid = row.dataset.rid;
+				this.selectRow(row, rid || null);
+			};
+			list.addEventListener("click", onClick);
+			this.disposers.push(() => list.removeEventListener("click", onClick));
+		}
+		const detail = this.el.netDetail;
+		if (detail) {
+			const onDetail = (ev) => {
+				if (ev.target?.closest?.("[data-act=\"close\"]")) this.deselect();
+			};
+			detail.addEventListener("click", onDetail);
+			this.disposers.push(() => detail.removeEventListener("click", onDetail));
+		}
+		const clear = this.el.netClear;
+		if (clear) {
+			const onClear = (e) => {
+				e.stopPropagation();
+				this.net.clear();
+				this.netRows.clear();
+				this.selectedRid = null;
+				this.selRowId = null;
+				const node = this.el.netList;
+				if (node) node.innerHTML = `<div class="empty">en attente d'appels AJAX (fetch / XHR)…</div>`;
+				this.detailVersion++;
+				this.scheduleRender();
+			};
+			clear.addEventListener("click", onClear);
+			this.disposers.push(() => clear.removeEventListener("click", onClear));
+		}
+	}
+	onNetEntry(e) {
+		this.net.ingest(e);
+		this.upsertNetRow(e);
+		if (e.requestId && e.requestId === this.selectedRid) this.detailVersion++;
+		this.scheduleRender();
+	}
+	/** Crée ou met à jour le nœud de ligne d'un appel (jamais d'innerHTML global). */
+	upsertNetRow(e) {
+		const list = this.el.netList;
+		if (!list) return;
+		let row = this.netRows.get(e.id);
+		if (!row) {
+			if (this.netRows.size === 0) list.textContent = "";
+			row = document.createElement("div");
+			row.className = "net-row";
+			row.innerHTML = "<span class=\"net-method\"></span><span class=\"net-path\"></span><span class=\"net-rid\"></span><span class=\"net-status\"></span><span class=\"net-dur\"></span>";
+			this.netRows.set(e.id, row);
+			list.insertBefore(row, list.firstChild);
+			while (this.netRows.size > 80 && list.lastElementChild) {
+				const last = list.lastElementChild;
+				for (const [id, n] of this.netRows) if (n === last) {
+					this.netRows.delete(id);
+					break;
+				}
+				last.remove();
+			}
+		}
+		this.fillNetRow(row, e);
+	}
+	/** Remplit/actualise les cellules d'une ligne (textContent → 0 échappement). */
+	fillNetRow(row, e) {
+		row.dataset.rid = e.requestId ?? "";
+		row.className = `net-row${e.requestId && e.requestId === this.selectedRid ? " sel" : ""}${isError(e) ? " err" : ""}`;
+		const [m, path, rid, status, dur] = row.children;
+		m.className = `net-method ${methodClass(e.method)}`;
+		m.textContent = e.method;
+		path.textContent = e.path;
+		path.title = e.url;
+		rid.textContent = e.requestId ? shortId(e.requestId) : "";
+		if (e.pending) {
+			status.className = "net-status sp";
+			status.textContent = "···";
+		} else if (e.error) {
+			status.className = "net-status s5";
+			status.textContent = "ERR";
+		} else {
+			status.className = `net-status s${statusFamily(e.status)}`;
+			status.textContent = e.status === null ? "—" : String(e.status);
+		}
+		dur.textContent = e.durationMs === null ? "" : `${e.durationMs}ms`;
+	}
+	/** Sélectionne une ligne (highlight) + déclenche le fetch du profil. */
+	selectRow(row, rid) {
+		if (this.selRowId !== null) this.netRows.get(this.selRowId)?.classList.remove("sel");
+		row.classList.add("sel");
+		const idEntry = [...this.netRows.entries()].find(([, n]) => n === row);
+		this.selRowId = idEntry ? idEntry[0] : null;
+		this.selectedRid = rid;
+		this.selNoRid = !rid;
+		this.detailVersion++;
+		const minDetail = detailPanelH();
+		if (rid && this.panelH < minDetail) this.setPanelH(minDetail);
+		if (rid && !this.net.profileState(rid)) this.fetchProfile(rid);
+		if (rid && typeof window !== "undefined") try {
+			window.dispatchEvent(new CustomEvent(PLATFORM_EVENTS.debugbarSelect, { detail: { requestId: rid } }));
+		} catch {}
+		this.scheduleRender();
+	}
+	/** Fetch `/{profilerBase}/{requestId}` (ignoré par l'intercepteur). */
+	fetchProfile(requestId) {
+		if (typeof fetch === "undefined") return;
+		this.net.setProfileState(requestId, { status: "loading" });
+		fetch(`${this.profilerBase}/${encodeURIComponent(requestId)}`, { headers: { accept: "application/json" } }).then(async (res) => {
+			if (res.status === 404) {
+				this.net.setProfileState(requestId, { status: "missing" });
+				return;
+			}
+			const ct = res.headers.get("content-type") ?? "";
+			if (!res.ok || !ct.includes("application/json")) {
+				this.net.setProfileState(requestId, {
+					status: "error",
+					message: res.ok ? "réponse non-JSON (path profiler non proxifié par Vite ?)" : `HTTP ${res.status}`
+				});
+				return;
+			}
+			const profile = await res.json();
+			this.net.setProfileState(requestId, {
+				status: "ready",
+				profile
+			});
+		}).catch((err) => {
+			this.net.setProfileState(requestId, {
+				status: "error",
+				message: err instanceof Error ? err.message : "fetch failed"
+			});
+		}).finally(() => {
+			if (requestId === this.selectedRid) this.detailVersion++;
+			this.scheduleRender();
+		});
+	}
+	scheduleRender() {
+		if (typeof requestAnimationFrame === "undefined") {
+			this.render();
+			return;
+		}
+		if (this.rafPending) return;
+		this.rafPending = true;
+		requestAnimationFrame(() => {
+			this.rafPending = false;
+			this.render();
+		});
+	}
+	text(key, value) {
+		const node = this.el[key];
+		if (node) node.textContent = value;
+	}
+	/** className safe pour HTML *et* SVG (SVGElement.className n'est pas une string). */
+	cls(key, value) {
+		this.el[key]?.setAttribute("class", value);
+	}
+	setPoints(lineKey, areaKey, series, tier, height, max) {
+		const pts = sparklinePoints(series, CHART_W, height, max);
+		this.el[lineKey]?.setAttribute("points", pts);
+		this.el[lineKey]?.setAttribute("class", `spark ${tier}`);
+		if (areaKey) {
+			const area = this.el[areaKey];
+			if (area) {
+				area.setAttribute("points", pts ? `${pts} ${CHART_W},${height} 0,${height}` : "");
+				area.setAttribute("class", `area ${tier}`);
+			}
+		}
+	}
+	render() {
+		if (!this.bar) return;
+		const v = this.model.view;
+		this.renderStrip(v);
+		if (!this.bar.classList.contains("open")) return;
+		switch (this.activeTab) {
+			case "realtime":
+				this.renderRealtimePane(v);
+				break;
+			case "network":
+				this.renderNetwork();
+				break;
+			case "perf":
+				this.renderPerf(v);
+				break;
+			case "logs":
+				this.renderLogsPane(v);
+				break;
+			case "runtime": this.renderRuntime(v);
+		}
+	}
+	/** Bandeau toujours visible (chips + pouls) — léger. */
+	renderStrip(v) {
+		const connected = v.state === "connected";
+		const cpuT = gauge(v.cpuPercent);
+		const memT = gauge(v.heapPercent);
+		this.text("envBadge", v.env || "env");
+		this.cls("envBadge", `env-badge ${envClass(v.env)}`);
+		this.text("branchName", v.branch || "—");
+		this.el.branch?.setAttribute("title", v.branch ? `branche git : ${v.branch}` : "branche git");
+		this.text("mEnv", v.env);
+		this.cls("dot", `dot ${v.state}`);
+		this.cls("mdot", `dot ${v.state}`);
+		this.text("mrate", `${this.rtRate}/s`);
+		this.cls("rtPill", connected ? "rt-pill connected" : "rt-pill");
+		const connTitle = `Connexion temps réel : ${v.state}`;
+		this.el.rtPill?.setAttribute("title", connTitle);
+		this.el.dot?.setAttribute("title", connTitle);
+		this.text("rt", `${this.rtRate}/s`);
+		this.cls("rt", "v blue");
+		this.el.rtMini?.setAttribute("points", sparklinePoints(this.rtSeries, MINI_W, MINI_H));
+		this.el.rtMini?.setAttribute("class", "spark rt");
+		this.text("cpu", `${v.cpuPercent}%`);
+		this.cls("cpu", `v ${cpuT}`);
+		this.text("mem", `${v.heapPercent}%`);
+		this.cls("mem", `v ${memT}`);
+		this.el.cpuMini?.setAttribute("points", sparklinePoints(v.cpuSeries, MINI_W, MINI_H, 100));
+		this.el.cpuMini?.setAttribute("class", `spark ${cpuT}`);
+		this.el.memMini?.setAttribute("points", sparklinePoints(v.heapSeries, MINI_W, MINI_H, 100));
+		this.el.memMini?.setAttribute("class", `spark ${memT}`);
+		if (this.networkEnabled) {
+			this.text("netChip", String(this.net.total));
+			this.cls("netChip", this.net.errors > 0 ? "crit" : "blue");
+			this.text("netTab", String(this.net.total));
+			this.cls("netTab", this.net.errors > 0 ? "tcount crit" : "tcount");
+		}
+		this.text("logs", String(v.logTotal));
+		this.text("err", String(v.errorCount));
+		this.text("logsTab", String(v.logTotal));
+		this.cls("logsTab", v.errorCount > 0 ? "tcount crit" : "tcount");
+	}
+	renderRealtimePane(v) {
+		const live = v.state === "connected";
+		this.text("rtBig", String(this.rtRate));
+		this.setPoints("rtLine", "rtArea", this.rtSeries, "rt", 38);
+		this.text("rtTransport", "WebSocket");
+		this.text("rtProto", "JSON-RPC 2.0");
+		this.text("rtState", v.state);
+		this.cls("rtState", `v ${live ? "ok" : "warn"}`);
+		this.text("rtFrames", String(this.client.framesReceived));
+		this.text("rtPeak", `${this.rtPeak}/s`);
+		if (this.frontend) {
+			this.text("hmrBig", String(this.hmrCount));
+			this.setPoints("hmrLine", "hmrArea", this.hmrSeries, "fe", 34);
+			this.text("feVite", this.viteConnected ? "Vite · connecté" : "Vite · …");
+			this.cls("feVite", `v ${this.viteConnected ? "ok" : "warn"}`);
+			this.text("hmrLast", this.hmrLast);
+		}
+	}
+	renderPerf(v) {
+		const cpuT = gauge(v.cpuPercent);
+		const memT = gauge(v.heapPercent);
+		const loopT = gauge(v.eventLoopMs, 50, 200);
+		this.text("cpuVal", `${v.cpuPercent}%`);
+		this.text("cpuPeak", v.cpuPeak ? `peak ${v.cpuPeak}%` : "");
+		this.cls("cpuVal", `val ${cpuT}`);
+		this.setPoints("cpuLine", "cpuArea", v.cpuSeries, cpuT, CHART_H, 100);
+		this.text("heapVal", `${v.heapPercent}%`);
+		this.text("heapPeak", v.heapPeak ? `peak ${v.heapPeak}%` : "");
+		this.cls("heapVal", `val ${memT}`);
+		this.setPoints("heapLine", "heapArea", v.heapSeries, memT, CHART_H, 100);
+		this.text("loopVal", `${v.eventLoopMs}ms`);
+		this.text("loopPeak", v.eventLoopPeak ? `peak ${v.eventLoopPeak}ms` : "");
+		this.cls("loopVal", `val ${loopT}`);
+		this.setPoints("loopLine", "loopArea", v.loopSeries, loopT, CHART_H);
+	}
+	renderRuntime(v) {
+		this.text("appName", v.appName || "—");
+		this.text("appVersion", v.appVersion || "—");
+		this.text("envRow", v.debug ? `${v.env} · debug` : v.env || "—");
+		this.text("branchRow", v.branch || "—");
+		this.text("pid", String(v.pid));
+		this.text("uptime", formatUptime(v.uptime));
+		this.text("instance", v.instanceId);
+		this.text("cores", String(v.cpuCount));
+		this.text("load", v.loadavg.map((n) => n.toFixed(2)).join(" ") || "—");
+		this.text("rss", formatBytes(v.rss));
+		this.text("heapUsed", formatBytes(v.heapUsed));
+		this.text("heapTotal", formatBytes(v.heapTotal));
+		this.text("heapLimit", formatBytes(v.heapLimit));
+		this.text("external", formatBytes(v.external));
+	}
+	renderLogsPane(v) {
+		this.text("cTotal", String(v.logTotal));
+		this.text("cErr", String(v.errorCount));
+		this.text("cWarn", String(v.warnCount));
+		this.text("cDrop", String(v.dropped));
+		this.renderFeed(v.feed);
+	}
+	/** Classe de couleur d'une entrée, dérivée de sa sévérité RFC 5424. */
+	static tierOf(severity) {
+		if (severity <= 3) return "crit";
+		if (severity === 4) return "warn";
+		if (severity === 7) return "muted";
+		return "info";
+	}
+	/** L'entrée passe-t-elle le filtre de sévérité et la recherche en cours ? */
+	feedMatch(l) {
+		if (this.feedSev === "err" && l.severity > 3) return false;
+		if (this.feedSev === "warn" && l.severity !== 4) return false;
+		const q = this.feedQuery;
+		if (q === "") return true;
+		return l.text.toLowerCase().includes(q) || l.module.toLowerCase().includes(q) || l.msgid.toLowerCase().includes(q) || (l.requestId ?? "").toLowerCase().includes(q);
+	}
+	/** Une ligne de journal — horodatage, sévérité, module, texte, requête. */
+	feedRow(l) {
+		const tier = DebugBar.tierOf(l.severity);
+		const rid = l.requestId ? `<span class="rid" data-tip="requête ${escapeHtml(l.requestId)} — la même valeur relie ce journal à sa route, à ses requêtes de base et à sa réponse">${escapeHtml(l.requestId.slice(0, 8))}</span>` : "";
+		return `<div class="log" data-uid="${l.uid}" tabindex="0" role="button" aria-expanded="false" aria-label="Entrée ${escapeHtml(l.name)} de ${escapeHtml(l.module)} — ouvrir le détail"><span class="ts">${fmtClock(l.ts)}</span><span class="sev ${tier}">${escapeHtml(l.name)}</span><span class="mod">${escapeHtml(l.module)}</span><span class="txt">${escapeHtml(l.text)}</span>${rid}</div>`;
+	}
+	/** Le détail d'une entrée — ce qu'on colle dans un ticket. */
+	feedDetail(l) {
+		const row = (k, v) => `<div class="drow"><span class="dk">${k}</span><span class="dv">${escapeHtml(v)}</span></div>`;
+		return `<div class="logdetail">
+      ${row("horodatage", new Date(l.ts).toISOString())}
+      ${row("sévérité", `${l.name} (${l.severity})`)}
+      ${row("module", l.module)}
+      ${l.msgid ? row("catégorie", l.msgid) : ""}
+      ${l.pid ? row("worker (pid)", String(l.pid)) : ""}
+      ${row("séquence", String(l.uid))}
+      ${l.requestId ? row("requête", l.requestId) : ""}
+      ${row("message", l.text)}
+    </div>`;
+	}
+	/**
+	* Rendu du journal — **incrémental**, et c'est le point.
+	*
+	* L'ancienne version réassignait `innerHTML` en entier à chaque arrivée. Deux
+	* conséquences qu'on ne voit pas dans le code et qu'on subit à l'écran : la
+	* SÉLECTION de texte s'efface — impossible de copier une ligne pendant que le
+	* flux tourne — et la position de DÉFILEMENT saute. Ici, seules les entrées
+	* nouvelles sont insérées en tête ; ce qui est affiché n'est jamais reconstruit.
+	*
+	* Un changement de filtre ou de recherche, lui, refait bien la liste : le jeu
+	* affiché change entièrement, il n'y a rien à préserver.
+	*/
+	renderFeed(feed) {
+		const node = this.el.feed;
+		if (!node) return;
+		if (this.feedPaused) return;
+		const refilter = this.feedDirty;
+		if (!refilter && feed.length === this.feedLen) return;
+		const previous = this.feedLen;
+		this.feedLen = feed.length;
+		this.feedDirty = false;
+		if (refilter) {
+			const rows = [];
+			for (let i = feed.length - 1; i >= 0; i--) {
+				const l = feed[i];
+				if (this.feedMatch(l)) rows.push(this.feedRow(l));
+			}
+			node.innerHTML = rows.length === 0 ? `<div class="empty">${feed.length === 0 ? "en attente de logs…" : "aucune entrée ne correspond au filtre."}</div>` : rows.join("");
+			return;
+		}
+		const added = feed.length - previous;
+		if (previous < 0 || added < 0 || added > feed.length) {
+			this.feedDirty = true;
+			this.renderFeed(feed);
+			return;
+		}
+		if (added === 0) return;
+		let html = "";
+		for (let i = feed.length - 1; i >= feed.length - added; i--) {
+			const l = feed[i];
+			if (this.feedMatch(l)) html += this.feedRow(l);
+		}
+		if (html === "") return;
+		if (node.querySelector(".empty")) node.innerHTML = "";
+		node.insertAdjacentHTML("afterbegin", html);
+		while (node.childElementCount > 40) node.lastElementChild?.remove();
+	}
+	renderNetwork() {
+		this.text("netTotal", String(this.net.total));
+		this.text("netErr", String(this.net.errors));
+		this.text("netPend", String(this.net.pending));
+		if (this.detailVersion !== this.detailRendered) {
+			this.detailRendered = this.detailVersion;
+			this.renderDetail();
+		}
+	}
+	renderDetail() {
+		const node = this.el.netDetail;
+		if (!node) return;
+		const rid = this.selectedRid;
+		const hasSel = !!rid || this.selNoRid;
+		node.parentElement?.classList.toggle("sel", hasSel);
+		if (!hasSel) {
+			node.innerHTML = `<div class="empty">clique un appel → profil serveur (waterfall des phases, route, user).</div>`;
+			return;
+		}
+		const closeBar = `<div class="det-bar"><span class="det-close" data-act="close" title="Fermer le détail">✕</span></div>`;
+		let body;
+		if (!rid) body = `<div class="det-err">cet appel n'a pas de requestId lisible — réponse sans header <b>X-Request-Id</b> (cross-origin sans Access-Control-Expose-Headers, ou appel hors Nodefony).</div>`;
+		else {
+			const st = this.net.profileState(rid);
+			if (!st || st.status === "loading") body = `<div class="det-loading">profil <b>${escapeHtml(shortId(rid))}</b> — chargement…</div>`;
+			else if (st.status === "missing") body = `<div class="det-err">profil introuvable (évincé du ring buffer, ou requête sans timing).</div>`;
+			else if (st.status === "error") body = `<div class="det-err">erreur profiler : ${escapeHtml(st.message)}</div>`;
+			else body = this.profileHtml(st.profile);
+		}
+		node.innerHTML = closeBar + body;
+	}
+	/** Désélectionne la requête → referme le détail (placeholder). */
+	deselect() {
+		if (this.selRowId !== null) this.netRows.get(this.selRowId)?.classList.remove("sel");
+		this.selRowId = null;
+		this.selectedRid = null;
+		this.selNoRid = false;
+		this.detailVersion++;
+		this.scheduleRender();
+	}
+	/** Rend le détail d'un profil serveur (méta + waterfall des phases). */
+	profileHtml(p) {
+		const bars = computeWaterfall(p.phases);
+		const total = p.durationMs === null ? "—" : `${p.durationMs}ms`;
+		const kv = (k, val) => `<div class="kv"><span class="k">${k}</span><span class="v">${val}</span></div>`;
+		const meta = `<div class="det-grid">` + kv("route", escapeHtml(p.route ?? "—")) + kv("controller", escapeHtml(p.controller ? `${p.controller}.${p.action ?? "?"}` : "—")) + kv("status", `${p.status ?? "—"}`) + kv("total serveur", total) + kv("user", escapeHtml(p.user ?? "anonyme")) + kv("kind", p.kind) + kv("requestId", escapeHtml(shortId(p.requestId))) + kv("traceparent", escapeHtml(traceId(p))) + (p.error ? kv("erreur", `<span class="crit">${escapeHtml(p.error)}</span>`) : "") + `</div>`;
+		let wf = "";
+		if (bars.length === 0) wf = `<div class="empty">aucune phase mesurée (timing désactivé ?).</div>`;
+		else {
+			wf = `<div class="wf-title">timeline des phases (serveur)</div><div class="wf">`;
+			for (const b of bars) wf += `<div class="wf-row"><span class="wf-name">${escapeHtml(b.name)}</span><div class="wf-track"><div class="wf-bar ${b.tier}" style="left:${b.leftPct}%;width:${b.widthPct}%"></div></div><span class="wf-ms">${b.durationMs}ms</span></div>`;
+			wf += `</div>`;
+		}
+		return meta + wf + this.queriesHtml(p.queries);
+	}
+	/** Rend les requêtes ORM (SEAM futur) — vide tant qu'aucun adapter ne pushe. */
+	queriesHtml(queries) {
+		if (!queries || queries.length === 0) return "";
+		let out = `<div class="wf-title" style="margin-top:10px">requêtes ORM (${queries.length})</div><div class="net-list" style="border:0">`;
+		for (const q of queries) out += `<div class="net-row" style="cursor:default"><span class="net-path" title="${escapeHtml(q.sql)}">${escapeHtml(q.sql)}</span>` + (q.connector ? `<span class="net-rid">${escapeHtml(q.connector)}</span>` : "") + (typeof q.rows === "number" ? `<span class="net-dur">${q.rows} rows</span>` : "") + `<span class="net-dur">${q.durationMs}ms</span></div>`;
+		out += `</div>`;
+		return out;
+	}
+};
+/** Famille de status (2/3/4/5) → classe de couleur. `null` → 5 (inconnu). */
+function statusFamily(status) {
+	if (status === null) return 5;
+	return Math.floor(status / 100);
+}
+/** Méthode HTTP → classe de couleur du chip. */
+function methodClass(method) {
+	const m = method.toLowerCase();
+	if (m === "get" || m === "post" || m === "put" || m === "patch" || m === "delete") return m;
+	return "ws";
+}
+/** Raccourci d'un id (1er bloc UUID, ou 8 chars). */
+function shortId(id) {
+	return id.length > 8 ? id.slice(0, 8) : id;
+}
+/** Extrait le trace-id (2ᵉ segment) d'un `traceparent` W3C, raccourci. */
+function traceId(p) {
+	if (!p.traceparent) return "—";
+	const seg = p.traceparent.split("-");
+	const tid = seg.length >= 2 ? seg[1] : p.traceparent;
+	return tid && tid.length > 12 ? tid.slice(0, 12) + "…" : tid ?? "—";
+}
+/** Mappe un nom d'environnement vers une classe de couleur du badge. */
+function envClass(env) {
+	const e = env.toLowerCase();
+	if (e.startsWith("prod")) return "prod";
+	if (e.startsWith("dev")) return "dev";
+	if (e.startsWith("test")) return "test";
+	if (e.startsWith("stag")) return "staging";
+	return "";
+}
+function escapeHtml(s) {
+	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+//#endregion
+//#region src/client/debugbar/index.ts
+/**
+* Subpath `nodefony/debugbar` — point d'entrée de la debug bar Nodefony.
+*
+* Entry Rollup SÉPARÉE (tree-shakée, 0 octet si non importée) : ce fichier ne
+* doit JAMAIS être réexporté depuis `client/index.ts` (sinon le barrel `nodefony`
+* navigateur tire toute la barre). Cf décision `project_client_lib_subpaths_decision`.
+*
+* Usage :
+* ```ts
+* import { mountDebugBar } from "nodefony/debugbar";
+* mountDebugBar(); // dev only
+* ```
+*/
+/**
+* Monte la debug bar sur la page courante. Idempotent (un seul widget par page).
+* No-op hors navigateur (SSR). Branche un {@link RealtimeClient} sur le WS
+* realtime et rend l'overlay live.
+*
+* @param opts - URL du WS, client partagé, position, ouverture initiale
+* @returns l'instance {@link DebugBar} (appeler `.unmount()` pour retirer)
+*/
+function mountDebugBar(opts = {}) {
+	return new DebugBar(opts).mount();
+}
+//#endregion
+export { DebugBar, NetworkModel, computeWaterfall, mountDebugBar as default, mountDebugBar, isError as isNetworkError, phaseTier };