@cosmicdrift/kumiko-renderer-web 0.57.1 → 0.59.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.57.1",
+  "version": "0.59.1",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.55.1",
-    "@cosmicdrift/kumiko-headless": "0.55.1",
-    "@cosmicdrift/kumiko-renderer": "0.55.1",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.57.2",
+    "@cosmicdrift/kumiko-headless": "0.57.2",
+    "@cosmicdrift/kumiko-renderer": "0.57.2",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

package/src/app/create-app.tsx

@@ -35,6 +35,7 @@ import { defaultPrimitives } from "../primitives";
 import { ToastProvider } from "../primitives/toast";
 import { createEventSourceLiveEvents } from "../sse/live-events";
 import { useBrowserTokensApi } from "../tokens";
+import { UpdateChecker } from "../version/update-checker";
 import { createBrowserLocaleResolver } from "./browser-locale";
 import { type ClientFeatureDefinition, stackWrappers } from "./client-plugin";
 import { useBrowserNavApi } from "./nav";
@@ -278,6 +279,7 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonl
                     <TreeProvidersProvider value={treeProviders} entities={treeEntities}>
                       <ResolversProvider resolvers={resolvers}>
                         <ToastProvider>
+                          <UpdateChecker />
                           {stackWrappers(providers, stackWrappers(gates, screenNode))}
                         </ToastProvider>
                       </ResolversProvider>

package/src/layout/default-app-shell.tsx

@@ -63,14 +63,10 @@ export function DefaultAppShell({
 }: DefaultAppShellProps): ReactNode {
   return (
     <AppLayout
-      {...(fill !== undefined && { fill })}
+      fill={fill}
       sidebar={
-        <Sidebar
-          header={brand}
-          {...(sidebarActions !== undefined && { actions: sidebarActions })}
-          {...(sidebarFooter !== undefined && { footer: sidebarFooter })}
-        >
-          <NavTree schema={schema} {...(user !== undefined && { user })} />
+        <Sidebar header={brand} actions={sidebarActions} footer={sidebarFooter}>
+          <NavTree schema={schema} user={user} />
         </Sidebar>
       }
     >

package/src/version/__tests__/update-checker.test.ts

@@ -0,0 +1,25 @@
+// Update-Erkennung: die Korrektheitsgrenze ist der ID-Vergleich, nicht die
+// Listener-Verdrahtung. shouldShowUpdate kapselt die "nie ein Fake-Banner"-
+// Invariante — hier die vier Fälle direkt geprüft.
+
+import { describe, expect, test } from "bun:test";
+import { shouldShowUpdate } from "../update-checker";
+
+describe("shouldShowUpdate", () => {
+  test("andere Server-id als geladen → Banner", () => {
+    expect(shouldShowUpdate("aaa", { id: "bbb", builtAt: "2026-06-18T00:00:00Z" })).toBe(true);
+  });
+
+  test("gleiche id → kein Banner", () => {
+    expect(shouldShowUpdate("aaa", { id: "aaa", builtAt: "2026-06-18T00:00:00Z" })).toBe(false);
+  });
+
+  test("kein Server-Stand (Fetch-Fehler/kaputtes JSON → null) → kein Banner", () => {
+    expect(shouldShowUpdate("aaa", null)).toBe(false);
+  });
+
+  test("kein geladener Stand (Dev/altes Bundle) → kein Banner, auch bei Server-Drift", () => {
+    expect(shouldShowUpdate(undefined, { id: "bbb", builtAt: "2026-06-18T00:00:00Z" })).toBe(false);
+    expect(shouldShowUpdate("", { id: "bbb", builtAt: "2026-06-18T00:00:00Z" })).toBe(false);
+  });
+});

package/src/version/update-checker.tsx

@@ -0,0 +1,102 @@
+// Update-Awareness — default an, kein Flag. Ein offener Tab erfährt sonst
+// nie von einem neuen Deploy (SPA bleibt geladen, index.html wird nicht neu
+// geholt → "muss hart reloaden"). Statt Service-Worker (der ist die *Ursache*
+// von "hängt auf alter Version") pollt diese Komponente die statische
+// build-info.json beim Tab-Fokus und zeigt ein Reload-Banner bei Drift.
+//
+// Versionsquelle ist build-info.json (Hash über die Asset-URLs, vom Prod-Build
+// geschrieben) — NICHT /api/version (live leer/404, Env-/Dockerfile-Falle).
+// Banner-Strings über kumikoDefaultTranslations (kumiko.version.*, de/en).
+
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { type ReactNode, useEffect, useState } from "react";
+import { cn } from "../lib/cn";
+
+// Build-Stand, der beim Page-Load aktiv war. Vom Prod-Build in die index.html
+// gebacken (build-prod-bundle injectAssetTags). Fehlt im Dev und in alten
+// Bundles → der Checker macht dann nichts (fail-safe).
+type KumikoBuild = {
+  readonly id: string;
+  readonly builtAt: string;
+};
+
+declare global {
+  interface Window {
+    __KUMIKO_BUILD__?: KumikoBuild;
+  }
+}
+
+// Korrektheitsgrenze der Update-Erkennung: ein Banner NUR bei echtem
+// ID-Drift. Kein geladener Stand (Dev/altes Bundle) oder kein Server-Stand
+// (Fetch-Fehler/kaputtes JSON → null) → nie ein Fake-Banner.
+export function shouldShowUpdate(
+  loadedId: string | undefined,
+  server: KumikoBuild | null,
+): boolean {
+  if (!loadedId || !server) return false;
+  return server.id !== loadedId;
+}
+
+async function fetchServerBuild(): Promise<KumikoBuild | null> {
+  try {
+    const res = await fetch("/build-info.json", { cache: "no-store" });
+    if (!res.ok) return null;
+    const info = (await res.json()) as Partial<KumikoBuild>;
+    if (typeof info.id !== "string" || info.id.length === 0) return null;
+    return { id: info.id, builtAt: typeof info.builtAt === "string" ? info.builtAt : "" };
+  } catch {
+    // Netzwerkfehler / kaputtes JSON → kein Banner. Nie ein Fake-Update zeigen.
+    return null;
+  }
+}
+
+export function UpdateChecker(): ReactNode {
+  const t = useTranslation();
+  const loaded = typeof window !== "undefined" ? window.__KUMIKO_BUILD__ : undefined;
+  const [hasUpdate, setHasUpdate] = useState(false);
+
+  useEffect(() => {
+    const loadedId = loaded?.id;
+    if (!loadedId) return; // Dev / altes Bundle → keine Awareness.
+
+    let cancelled = false;
+    const check = async (): Promise<void> => {
+      if (document.visibilityState !== "visible") return;
+      const server = await fetchServerBuild();
+      if (!cancelled && shouldShowUpdate(loadedId, server)) setHasUpdate(true);
+    };
+
+    document.addEventListener("visibilitychange", check);
+    window.addEventListener("focus", check);
+    void check();
+    return () => {
+      cancelled = true;
+      document.removeEventListener("visibilitychange", check);
+      window.removeEventListener("focus", check);
+    };
+  }, [loaded?.id]);
+
+  if (!hasUpdate) return null;
+
+  return (
+    <div
+      role="status"
+      className={cn(
+        "fixed inset-x-0 top-0 z-[200] flex items-center justify-center gap-3",
+        "border-b bg-background px-4 py-2 text-sm text-foreground shadow-md",
+      )}
+    >
+      <span>{t("kumiko.version.update-available")}</span>
+      <button
+        type="button"
+        onClick={() => window.location.reload()}
+        className={cn(
+          "rounded-md bg-primary px-3 py-1 text-xs font-medium text-primary-foreground",
+          "hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-ring",
+        )}
+      >
+        {t("kumiko.actions.reload")}
+      </button>
+    </div>
+  );
+}