UI: Renderer-Umschalter (WebGL2 / eigene Engine) in der Statusleiste

src/ui/StatusBar.tsx

@@ -11,6 +11,9 @@
 import type { Vec2 } from "../model/types";
 import { t } from "../i18n";
 
+/** Plan-Renderer-Wahl, gespiegelt aus dem `?engine`-URL-Param (siehe PlanView). */
+export type RendererMode = "webgl2" | "wasm";
+
 export interface StatusBarProps {
   /** Kontextueller Werkzeug-Hinweis links (z. B. „Auswahl"). */
   hint: string;
@@ -29,6 +32,15 @@ export interface StatusBarProps {
   activeFloor: string;
   /** Name der aktiven Ebene (Kategorie) oder „—". */
   activeLayer: string;
+  /** Aktuell gewählter Plan-Renderer (aus dem `?engine`-URL-Param abgeleitet). */
+  rendererMode: RendererMode;
+  /** Ist `navigator.gpu` vorhanden? Steuert, ob „Engine" wählbar ist. */
+  webGpuAvailable: boolean;
+  /**
+   * Renderer wechseln (setzt/entfernt den `engine`-URL-Param und lädt neu — kein
+   * Live-Remount der Renderer-Hooks).
+   */
+  onRendererModeChange: (mode: RendererMode) => void;
 }
 
 /** Ein Wert-Feld im rechten Cluster: kleine Beschriftung + Wert. */
@@ -57,6 +69,9 @@ export function StatusBar({
   zoomPercent,
   activeFloor,
   activeLayer,
+  rendererMode,
+  webGpuAvailable,
+  onRendererModeChange,
 }: StatusBarProps) {
   const coords = cursor
     ? `${fmt(cursor.x)}, ${fmt(cursor.y)}`
@@ -69,6 +84,30 @@ export function StatusBar({
 
       {/* Rechts: abgeleiteter Wert-Cluster. */}
       <div className="sb-cluster">
+        <span className="sb-field">
+          <span className="sb-key">{t("status.renderer")}</span>
+          <span className="sb-renderer-toggle" role="group" aria-label={t("status.renderer")}>
+            <button
+              type="button"
+              className={`sb-renderer-btn${rendererMode === "webgl2" ? " active" : ""}`}
+              aria-pressed={rendererMode === "webgl2"}
+              onClick={() => onRendererModeChange("webgl2")}
+            >
+              {t("status.rendererWebgl")}
+            </button>
+            <button
+              type="button"
+              className={`sb-renderer-btn${rendererMode === "wasm" ? " active" : ""}`}
+              aria-pressed={rendererMode === "wasm"}
+              disabled={!webGpuAvailable}
+              title={webGpuAvailable ? undefined : t("status.rendererWasmUnavailable")}
+              onClick={() => onRendererModeChange("wasm")}
+            >
+              {t("status.rendererWasm")}
+            </button>
+          </span>
+        </span>
+        <Sep />
         <Field label={t("status.xy")} value={coords} />
         <Sep />
         <Field label={t("status.unit")} value={unit} />