@cosmicdrift/kumiko-renderer-web 0.39.0 → 0.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "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>",

package/src/__tests__/kumiko-screen.test.tsx

@@ -495,6 +495,75 @@ describe("KumikoScreen", () => {
     expect(await screen.findByText("Version conflict for entity r1")).toBeTruthy();
   });
 
+  // 284/2: der HIT-Zweig von dispatcherErrorText — bekannter i18nKey
+  // mit Params → der ÜBERSETZTE, interpolierte Text landet im Toast
+  // (nicht error.message). Genau die Logik, die die Funktion rechtfertigt.
+  test("entityList rowActions writeHandler: bekannter i18nKey → übersetzter Toast mit interpolierten Params", async () => {
+    const dispatcher = makeDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: {
+          rows: [{ id: "r1", title: "Alpha", count: 1, done: false }],
+          nextCursor: null,
+        },
+      })) as unknown as Dispatcher["query"],
+      write: (async () => ({
+        isSuccess: false,
+        error: {
+          code: "validation_error",
+          httpStatus: 422,
+          i18nKey: "kumiko.validation.too-short",
+          i18nParams: { min: 5 },
+          message: "raw fallback — must NOT appear",
+        },
+      })) as unknown as Dispatcher["write"],
+    });
+
+    const screenWithDelete: EntityListScreenDefinition = {
+      id: "task-list",
+      type: "entityList",
+      entity: "task",
+      columns: ["title"],
+      rowActions: [
+        {
+          id: "delete",
+          label: "actions.delete",
+          handler: "tasks:write:task:delete",
+          confirm: "actions.delete-confirm",
+          style: "danger",
+        },
+      ],
+    };
+
+    const { ToastProvider } = await import("../primitives/toast");
+    const { LocaleProvider, createStaticLocaleResolver, kumikoDefaultTranslations } = await import(
+      "@cosmicdrift/kumiko-renderer"
+    );
+    const user = userEvent.setup();
+    render(
+      <LocaleProvider
+        resolver={createStaticLocaleResolver()}
+        fallbackBundles={[kumikoDefaultTranslations]}
+      >
+        <ToastProvider>
+          <DispatcherProvider dispatcher={dispatcher}>
+            <KumikoScreen
+              schema={{ ...schema, screens: [screenWithDelete] }}
+              qn="tasks:screen:task-list"
+            />
+          </DispatcherProvider>
+        </ToastProvider>
+      </LocaleProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+
+    await user.click(screen.getByTestId("row-r1-action-delete"));
+    await user.click(screen.getByTestId("row-r1-action-delete-dialog-confirm"));
+
+    expect(await screen.findByText("Too short (at least 5 characters).")).toBeTruthy();
+    expect(screen.queryByText("raw fallback — must NOT appear")).toBeNull();
+  });
+
   // Tier 2.7e-1: rowAction kind="navigate" — Click ruft nav.navigate
   // mit screen-id, ggf. mit URL-Search-Params aus params(row).
   // Reihenfolge ist Teil des Contracts: navigate ZUERST, dann
@@ -567,6 +636,66 @@ describe("KumikoScreen", () => {
     expect(calls.map((c) => c.kind)).toEqual(["navigate", "setSearchParams"]);
   });
 
+  // 284/3: derselbe Contract gegen die ECHTE useBrowserNavApi statt
+  // memoryNav — der eigentliche Bug-Mechanismus (pushState verwirft die
+  // Query, setSearchParams muss auf der NEUEN URL landen) ist nur hier
+  // real verifiziert. Kombination navigate + entityId + params.
+  test("entityList rowActions kind=navigate: echte useBrowserNavApi → Pfad-Segmente + ?param auf der neuen URL", async () => {
+    window.history.replaceState(null, "", "/task-list");
+
+    const dispatcher = makeDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: {
+          rows: [{ id: "r1", title: "Alpha", count: 1, done: false }],
+          nextCursor: null,
+        },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    const screenWithNav: EntityListScreenDefinition = {
+      id: "task-list",
+      type: "entityList",
+      entity: "task",
+      columns: ["title"],
+      rowActions: [
+        {
+          kind: "navigate",
+          id: "edit",
+          label: "actions.edit",
+          screen: "task-edit",
+          entityId: "id",
+          params: { map: { from: "title" } },
+        },
+      ],
+    };
+
+    const { NavProvider } = await import("@cosmicdrift/kumiko-renderer");
+    const { useBrowserNavApi } = await import("../app/nav");
+    function BrowserNav({ children }: { readonly children: React.ReactNode }): React.ReactNode {
+      const api = useBrowserNavApi({ hasWorkspaces: false });
+      return <NavProvider value={api}>{children}</NavProvider>;
+    }
+
+    const user = userEvent.setup();
+    render(
+      <BrowserNav>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={{ ...schema, screens: [screenWithNav] }}
+            qn="tasks:screen:task-list"
+          />
+        </DispatcherProvider>
+      </BrowserNav>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+
+    await user.click(screen.getByTestId("row-r1-action-edit"));
+
+    await waitFor(() => expect(window.location.pathname).toBe("/task-edit/r1"));
+    expect(new URLSearchParams(window.location.search).get("from")).toBe("Alpha");
+  });
+
   // entityId-Variante: entityEdit-Targets brauchen die Id als PFAD-
   // Segment (route.entityId), nicht als Search-Param — sonst öffnet
   // der Edit-Screen im Create-Mode (Prod-Bug 2026-06-07, Bug 3).

package/src/__tests__/tokens-theme-persist.test.tsx

@@ -7,7 +7,12 @@
 import { beforeEach, describe, expect, test } from "bun:test";
 import { act, render, screen } from "@testing-library/react";
 import type { ReactNode } from "react";
-import { applyStoredThemeMode, THEME_STORAGE_KEY, useBrowserTokensApi } from "../tokens";
+import {
+  __resetStoredModeAppliedForTests,
+  applyStoredThemeMode,
+  THEME_STORAGE_KEY,
+  useBrowserTokensApi,
+} from "../tokens";
 
 function Probe(): ReactNode {
   const api = useBrowserTokensApi();
@@ -55,6 +60,20 @@ describe("useBrowserTokensApi — Theme-Persistenz", () => {
     expect(document.documentElement.classList.contains("dark")).toBe(false);
   });
 
+  test("Mount-Restore: erster Hook-Mount übernimmt die gespeicherte Wahl ins DOM", () => {
+    // Der eigentliche Headline-Pfad (286/1): nicht applyStoredThemeMode
+    // isoliert, sondern die Glue im Hook — localStorage VOR dem Mount
+    // geseedet, der Mount selbst muss die .dark-Class setzen.
+    __resetStoredModeAppliedForTests();
+    window.localStorage.setItem(THEME_STORAGE_KEY, "dark");
+    document.documentElement.classList.remove("dark");
+
+    render(<Probe />);
+
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+    expect(screen.getByTestId("mode").textContent).toBe("dark");
+  });
+
   test("applyStoredThemeMode restored die gespeicherte Wahl (Reload-Simulation)", () => {
     // "Reload": Class weg (frisches HTML), aber localStorage hat dark.
     window.localStorage.setItem(THEME_STORAGE_KEY, "dark");

package/src/components/config-source-badge.tsx

@@ -1,4 +1,4 @@
-import type { ConfigValueSource } from "@cosmicdrift/kumiko-framework/engine";
+import type { ConfigScope, ConfigValueSource } from "@cosmicdrift/kumiko-framework/engine";
 import { useTranslation } from "@cosmicdrift/kumiko-renderer";
 import type { ReactNode } from "react";
 
@@ -12,9 +12,42 @@ const SOURCE_CONFIG: Record<ConfigValueSource, { labelKey: string; bg: string; t
   missing: { labelKey: "kumiko.config.source.missing", bg: "#fee2e2", text: "#991b1b" },
 };
 
-export function ConfigSourceBadge({ source }: { readonly source: ConfigValueSource }): ReactNode {
+const SOURCE_ORDER: readonly ConfigValueSource[] = [
+  "user-row",
+  "tenant-row",
+  "system-row",
+  "app-override",
+  "computed",
+  "default",
+  "missing",
+];
+
+function scopeToSource(scope: ConfigScope): ConfigValueSource {
+  if (scope === "user") return "user-row";
+  if (scope === "tenant") return "tenant-row";
+  return "system-row";
+}
+
+export function ConfigSourceBadge({
+  source,
+  screenScope,
+}: {
+  readonly source: ConfigValueSource;
+  readonly screenScope?: ConfigScope;
+}): ReactNode {
   const t = useTranslation();
-  const cfg = SOURCE_CONFIG[source];
+  // Gleiche Kollaps-Regel wie toDisplayLevels (config-cascade.tsx):
+  // Operator-Quellen oberhalb des Screen-Scopes erscheinen für Nicht-
+  // Operator-Screens als neutrales "Vorgabe"-Badge — sonst leakte das
+  // Badge die System-Quelle, die die Cascade-View bewusst versteckt.
+  let effective = source;
+  if (screenScope !== undefined && screenScope !== "system") {
+    const scopeIdx = SOURCE_ORDER.indexOf(scopeToSource(screenScope));
+    if (SOURCE_ORDER.indexOf(source) > scopeIdx && source !== "missing") {
+      effective = "default";
+    }
+  }
+  const cfg = SOURCE_CONFIG[effective];
 
   return (
     <span

package/src/tokens.ts

@@ -5,7 +5,7 @@ import {
   type Tokens,
   type TokensApi,
 } from "@cosmicdrift/kumiko-renderer";
-import { useSyncExternalStore } from "react";
+import { useState, useSyncExternalStore } from "react";
 
 // Web-spezifische TokensApi-Impl. Theme-Toggle via `.dark`-Class auf
 // <html>. Die echten Farben leben in styles.css; hier ist nur die
@@ -68,6 +68,13 @@ export function applyStoredThemeMode(): void {
 
 let storedModeApplied = false;
 
+/** Nur für Tests: der once-per-page-load-Guard ist ein Module-Singleton —
+ *  ohne Reset wäre der Mount-Restore-Pfad nach der ersten Render im
+ *  Testfile strukturell unerreichbar. */
+export function __resetStoredModeAppliedForTests(): void {
+  storedModeApplied = false;
+}
+
 /** Hook der eine TokensApi für den Browser baut. Wird von
  *  createKumikoApp genutzt; App-Code der einen eigenen Token-State
  *  braucht (z.B. User-Präferenz aus localStorage) kann selber
@@ -75,10 +82,16 @@ let storedModeApplied = false;
 export function useBrowserTokensApi(): TokensApi {
   // Einmal pro Page-Load: gespeicherte Wahl anwenden. Lazy statt
   // Modul-Side-Effect, damit Import ohne DOM (SSR/Tests) safe bleibt.
-  if (!storedModeApplied && typeof document !== "undefined") {
-    storedModeApplied = true;
-    applyStoredThemeMode();
-  }
+  // Als useState-Lazy-Initializer statt nackt im Render-Body: der
+  // DOM-Side-Effect lief sonst potenziell in einem verworfenen
+  // Concurrent-Render (React darf Render-Bodies wiederholen/abbrechen).
+  useState(() => {
+    if (!storedModeApplied && typeof document !== "undefined") {
+      storedModeApplied = true;
+      applyStoredThemeMode();
+    }
+    return null;
+  });
   const mode = useSyncExternalStore(themeTick.subscribe, readCurrentMode, () => "dark" as const);
   return {
     tokens: cssVarTokens,