@cosmicdrift/kumiko-renderer 0.212.0 → 0.214.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.212.0",
+  "version": "0.214.0",
   "description": "Platform-agnostic React renderer for Kumiko screens. Contains the shared logic — primitives-contract, hooks, KumikoScreen, navigation & SSE abstractions — that any platform-specific renderer (web, native) composes. No DOM, no EventSource, no react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -15,8 +15,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.212.0",
-    "@cosmicdrift/kumiko-headless": "0.212.0",
+    "@cosmicdrift/kumiko-framework": "0.214.0",
+    "@cosmicdrift/kumiko-headless": "0.214.0",
     "react": "^19.2.6",
     "temporal-polyfill": "^0.3.2",
     "zod": "^4.4.3"
@@ -25,7 +25,7 @@
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
     "jsdom": "^29.1.1",
-    "@cosmicdrift/kumiko-locale-de": "0.212.0"
+    "@cosmicdrift/kumiko-locale-de": "0.214.0"
   },
   "repository": {
     "type": "git",

package/src/components/__tests__/render-field-unit-format.test.tsx

@@ -0,0 +1,102 @@
+// fw#2187: readOnly fields with an explicit `field.renderer: { format: "unit" }`
+// must render through applyFormatSpec's unit case, and default to the
+// LocaleProvider's App-Locale when the FormatSpec itself carries no `locale`
+// — same posture as render-field-app-locale.test.tsx for money/date inputs,
+// but for the FieldRendererOutput (readOnly + declared renderer) path, which
+// that file doesn't cover.
+//
+// Capture-Text instead of a real primitive, same pattern as
+// render-field-app-locale.test.tsx (Capture-Input there).
+
+import { describe, expect, test } from "bun:test";
+import type { EditFieldViewModel } from "@cosmicdrift/kumiko-headless";
+import { render } from "@testing-library/react";
+import type { ComponentType, ReactNode } from "react";
+import { createStaticLocaleResolver, LocaleProvider } from "../../i18n";
+import { type CorePrimitives, PrimitivesProvider, type TextProps } from "../../primitives";
+import { RenderField } from "../render-field";
+
+let captured: TextProps | undefined;
+const captureText: ComponentType<TextProps> = (props) => {
+  captured = props;
+  return null;
+};
+const noop = (): ReactNode => null;
+const passChildren = ({ children }: { readonly children?: ReactNode }): ReactNode => children;
+
+const testPrimitives: CorePrimitives = {
+  Button: noop,
+  Banner: noop,
+  Field: passChildren,
+  Input: noop,
+  DataTable: noop,
+  Form: noop,
+  Section: noop,
+  Card: noop,
+  Grid: noop,
+  GridCell: noop,
+  Text: captureText,
+  Heading: noop,
+  Dialog: noop,
+  Modal: noop,
+  Lightbox: noop,
+  ConfigSourceBadge: noop,
+  ConfigCascadeView: noop,
+  Link: noop,
+};
+
+function livingSpaceField(
+  renderer: EditFieldViewModel["renderer"],
+  value: unknown = 58,
+): EditFieldViewModel {
+  return {
+    field: "livingSpace",
+    label: "Wohnfläche",
+    type: "decimal",
+    value,
+    visible: true,
+    readOnly: true,
+    required: false,
+    renderer,
+  };
+}
+
+function renderUnderLocale(locale: string, field: EditFieldViewModel): void {
+  captured = undefined;
+  render(
+    <LocaleProvider resolver={createStaticLocaleResolver({ locale })}>
+      <PrimitivesProvider value={testPrimitives}>
+        <RenderField field={field} onChange={() => {}} />
+      </PrimitivesProvider>
+    </LocaleProvider>,
+  );
+}
+
+describe("RenderField — unit-FormatSpec (fw#2187)", () => {
+  test("m2 rendert Zahl + m²-Suffix, locale-formatiert über das App-Locale", () => {
+    renderUnderLocale("de-DE", livingSpaceField({ format: "unit", unit: "m2" }));
+    expect(captured?.children).toBe("58 m²");
+  });
+
+  test("ein anderes App-Locale ändert die Zahl-Formatierung (en-US: Punkt statt Komma)", () => {
+    renderUnderLocale("en-US", livingSpaceField({ format: "unit", unit: "m2" }, 58.5));
+    expect(captured?.children).toBe("58.5 m²");
+  });
+
+  test("CLDR-sanktionierte Unit (km) rendert über Intl.NumberFormat(style:'unit')", () => {
+    renderUnderLocale("en-US", livingSpaceField({ format: "unit", unit: "km" }, 3));
+    expect(captured?.children).toBe("3 km");
+  });
+
+  test("explizites renderer.locale gewinnt gegen das App-Locale", () => {
+    renderUnderLocale("en-US", livingSpaceField({ format: "unit", unit: "m2", locale: "de-DE" }));
+    expect(captured?.children).toBe("58 m²");
+  });
+});
+
+describe("RenderField — App-Locale an FieldRendererOutput durchreichen (fw#2187)", () => {
+  test("number-FormatSpec ohne eigenes locale bekommt das App-Locale (de-DE, Komma statt Punkt)", () => {
+    renderUnderLocale("de-DE", livingSpaceField({ format: "number" }, 1234.5));
+    expect(captured?.children).toBe("1.234,5");
+  });
+});

package/src/components/render-field.tsx

@@ -106,6 +106,7 @@ export function RenderField({
       <FieldRendererOutput
         field={field}
         renderer={field.renderer}
+        appLocale={appLocale}
         {...(row !== undefined && { row })}
       />
     ) : field.type === "embedded" && field.embeddedListCells !== undefined ? (
@@ -340,10 +341,12 @@ function FieldRendererOutput({
   field,
   renderer,
   row,
+  appLocale,
 }: {
   readonly field: EditFieldViewModel;
   readonly renderer: FieldRenderer;
   readonly row?: Readonly<Record<string, unknown>>;
+  readonly appLocale: string;
 }): ReactNode {
   const { Text } = usePrimitives();
   const componentName =
@@ -352,8 +355,16 @@ function FieldRendererOutput({
       : undefined;
   const Component = useColumnRenderer(componentName);
   if (isFormatSpec(renderer)) {
+    // App locale as default when the FormatSpec declares none of its own —
+    // otherwise locale-sensitive formats (timestamp/date/number/decimal/
+    // bigInt/unit) fell back to Intl's runtime default instead of the app
+    // language chosen via LocaleProvider (fw#2187). An explicit
+    // `renderer.locale` still wins, same pattern as dateLocale vs. appLocale
+    // further below in readOnlyDisplayText.
     return (
-      <Text testId={`field-value-${field.field}`}>{applyFormatSpec(renderer, field.value)}</Text>
+      <Text testId={`field-value-${field.field}`}>
+        {applyFormatSpec({ locale: appLocale, ...renderer }, field.value)}
+      </Text>
     );
   }
   if (componentName !== undefined) {

package/src/i18n.tsx

@@ -1,19 +1,18 @@
-// Locale-Handling für React-Consumer des Kumiko-Renderers. Eine dünne
-// Schicht um den platform-agnostischen `LocaleResolver`-Contract aus
-// @cosmicdrift/kumiko-headless: Provider, Hooks, Default-Noop-Resolver und ein
-// Fallback-Bundle-Merge für Feature-gelieferte Translations.
+// Locale handling for React consumers of the Kumiko renderer. A thin layer
+// around the platform-agnostic `LocaleResolver` contract from
+// @cosmicdrift/kumiko-headless: provider, hooks, a default no-op resolver,
+// and a fallback-bundle merge for feature-supplied translations.
 //
-// Architektur-Idee:
-//   1. App liefert genau einen `LocaleResolver` über `<LocaleProvider>`
-//      (oder überhaupt keinen → Default-Resolver returnt keys as-is).
-//   2. Feature-Plugins dürfen Fallback-Bundles mitbringen: wenn der
-//      App-Resolver einen Key nicht auflöst, probiert `useTranslation`
-//      die Plugin-Bundles. Das hält Feature-UI unabhängig von der
-//      App-seitigen i18next-Instanz und funktioniert out-of-the-box,
-//      bleibt aber vollständig overridbar.
-//   3. Re-Render bei Locale-Wechsel via `useSyncExternalStore` auf
-//      dem Resolver's `subscribe()` — App-Code kann mitten in der
-//      Session die Sprache umschalten ohne Reload.
+// Architecture:
+//   1. The app supplies exactly one `LocaleResolver` via `<LocaleProvider>`
+//      (or none at all → the default resolver returns keys as-is).
+//   2. Feature plugins may bring fallback bundles: when the app resolver
+//      can't resolve a key, `useTranslation` tries the plugin bundles.
+//      This keeps feature UI independent of the app's own i18next instance
+//      and works out of the box, while staying fully overridable.
+//   3. Re-render on locale change via `useSyncExternalStore` on the
+//      resolver's `subscribe()` — app code can switch language mid-session
+//      without a reload.
 
 import type { LocaleResolver } from "@cosmicdrift/kumiko-headless";
 import {
@@ -78,14 +77,13 @@ const EMPTY_FALLBACK_BUNDLES: readonly TranslationsByLocale[] = [];
 
 export type LocaleProviderProps = {
   readonly resolver: LocaleResolver;
-  /** Von Feature-Plugins gelieferte Default-Bundles. Lookup-Reihenfolge
-   *  pro Key: (1) App-Resolver, (2) diese Bundles in Array-Order,
-   *  (3) Key as-is. Apps können somit einzelne Keys overriden ohne
-   *  ganze Feature-Bundles austauschen zu müssen. */
+  /** Default bundles supplied by feature plugins. Lookup order per key:
+   *  (1) app resolver, (2) these bundles in array order, (3) key as-is.
+   *  Apps can thus override individual keys without swapping out whole
+   *  feature bundles. */
   readonly fallbackBundles?: readonly TranslationsByLocale[];
-  /** Auf den fallbackLocale wird zurückgegriffen, wenn weder der
-   *  current-locale- noch der key-Lookup im Plugin-Bundle greift.
-   *  Default: `"en"`. */
+  /** Falls back to fallbackLocale when neither the current-locale nor the
+   *  key lookup hits in a plugin bundle. Default: `"en"`. */
   readonly fallbackLocale?: string;
   readonly children: ReactNode;
 };
@@ -96,12 +94,12 @@ export function LocaleProvider({
   fallbackLocale = "en",
   children,
 }: LocaleProviderProps): ReactNode {
-  // Ohne Memoization baut jeder Re-Render des Providers (z.B. weil ein
-  // Ahnen-Component neu rendert) ein neues Context-Value-Objekt — jeder
-  // Consumer von useTranslation()/useLocale() sieht dann eine neue `ctx`-
-  // Referenz und damit selbst mit useCallback-Memoization einen neuen `t`.
-  // Konsequenz: `t` in einem useEffect-Dependency-Array triggert einen
-  // Endlos-Loop (siehe admin-shell Overview-Screens, Prod-Incident).
+  // Without memoization every re-render of the provider (e.g. because an
+  // ancestor component re-renders) builds a new context-value object —
+  // every consumer of useTranslation()/useLocale() then sees a new `ctx`
+  // reference and, even with useCallback memoization, a new `t`.
+  // Consequence: `t` in a useEffect dependency array triggers an infinite
+  // loop (see admin-shell Overview screens, prod incident).
   const value = useMemo(
     () => ({ resolver, fallbackBundles, fallbackLocale }),
     [resolver, fallbackBundles, fallbackLocale],