@cosmicdrift/kumiko-renderer 0.185.0 → 0.186.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.185.0",
+  "version": "0.186.1",
   "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.185.0",
-    "@cosmicdrift/kumiko-headless": "0.185.0",
+    "@cosmicdrift/kumiko-framework": "0.186.1",
+    "@cosmicdrift/kumiko-headless": "0.186.1",
     "react": "^19.2.6",
     "temporal-polyfill": "^0.3.2"
   },

package/src/components/__tests__/render-field-unsupported-types.test.tsx

@@ -0,0 +1,110 @@
+// Regression #1834: field types without a dedicated widget (embedded
+// without embeddedListCells, jsonb, multiSelect) must render read-only
+// instead of falling back to a text input. The old default-branch
+// fallback ran the value through stringValue() — an object/array turned
+// into "[object Object]"/"a,b", and saving that overwrote the real data.
+//
+// Capture-Input/Banner instead of real primitives, same pattern as
+// render-field-app-locale.test.tsx.
+
+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 { kumikoDefaultTranslations } from "../../i18n-defaults";
+import {
+  type BannerProps,
+  type CorePrimitives,
+  type InputProps,
+  PrimitivesProvider,
+} from "../../primitives";
+import { RenderField } from "../render-field";
+
+let capturedInput: InputProps | undefined;
+let capturedBanner: BannerProps | undefined;
+const captureInput: ComponentType<InputProps> = (props) => {
+  capturedInput = props;
+  return null;
+};
+const captureBanner: ComponentType<BannerProps> = (props) => {
+  capturedBanner = props;
+  return null;
+};
+const noop = (): ReactNode => null;
+const passChildren = ({ children }: { readonly children?: ReactNode }): ReactNode => children;
+
+const testPrimitives: CorePrimitives = {
+  Button: noop,
+  Banner: captureBanner,
+  Field: passChildren,
+  Input: captureInput,
+  DataTable: noop,
+  Form: noop,
+  Section: noop,
+  Card: noop,
+  Grid: noop,
+  GridCell: noop,
+  Text: noop,
+  Heading: noop,
+  Dialog: noop,
+  Modal: noop,
+  Lightbox: noop,
+  ConfigSourceBadge: noop,
+  ConfigCascadeView: noop,
+  Link: noop,
+};
+
+function baseField(overrides: Partial<EditFieldViewModel>): EditFieldViewModel {
+  return {
+    field: "positions",
+    label: "Positionen",
+    type: "text",
+    value: null,
+    visible: true,
+    readOnly: false,
+    required: false,
+    ...overrides,
+  };
+}
+
+function renderField(field: EditFieldViewModel): void {
+  capturedInput = undefined;
+  capturedBanner = undefined;
+  render(
+    <LocaleProvider
+      resolver={createStaticLocaleResolver({ locale: "de-DE" })}
+      fallbackBundles={[kumikoDefaultTranslations]}
+    >
+      <PrimitivesProvider value={testPrimitives}>
+        <RenderField field={field} onChange={() => {}} />
+      </PrimitivesProvider>
+    </LocaleProvider>,
+  );
+}
+
+describe.each([
+  ["embedded (kein embeddedListCells)", baseField({ type: "embedded", value: { note: "x" } })],
+  ["jsonb", baseField({ type: "jsonb", value: { a: 1 } })],
+  ["multiSelect", baseField({ type: "multiSelect", value: ["a", "b"] })],
+])("RenderField — %s ohne Widget", (_name, field) => {
+  test("rendert einen schreibgeschützten Banner statt eines editierbaren Text-Inputs", () => {
+    renderField(field);
+    expect(capturedInput).toBeUndefined();
+    expect(capturedBanner).toBeDefined();
+    expect(capturedBanner?.variant).toBe("info");
+    expect(capturedBanner?.children).toBe("Dieser Feldtyp kann hier noch nicht bearbeitet werden.");
+    // The surrounding <Field> always renders a <label htmlFor={id}> —
+    // without an id on the Banner itself that label points at nothing (#1834 review).
+    expect(capturedBanner?.id).toBe("kumiko-edit-positions");
+  });
+});
+
+describe("RenderField — text bleibt weiterhin editierbar", () => {
+  test("plain text-Feld rendert weiterhin ein Text-Input, kein Banner", () => {
+    renderField(baseField({ type: "text", value: "hallo" }));
+    expect(capturedBanner).toBeUndefined();
+    expect(capturedInput).toBeDefined();
+    expect(capturedInput?.kind).toBe("text");
+  });
+});

package/src/components/render-field.tsx

@@ -49,13 +49,14 @@ export function RenderField({
   fieldAppendix,
   allIssues,
 }: RenderFieldProps): ReactNode {
-  const { Field, Input } = usePrimitives();
+  const { Field, Input, Banner } = usePrimitives();
   // App-Locale (i18n) für money/date-Inputs — sonst fielen sie auf
   // navigator.language (Browser-Sprache) zurück statt der gewählten
   // App-Sprache. BEWUSSTE API-Verschärfung (seit 0.38): RenderField ist
   // public exportiert und verlangt jetzt einen LocaleProvider —
   // Standalone-Consumer/Tests müssen wrappen (createKumikoApp tut es).
   const appLocale = useLocale().locale();
+  const t = useTranslation();
   if (!field.visible) return null;
 
   const id = inputId(field);
@@ -83,7 +84,7 @@ export function RenderField({
         featureName={featureName ?? ""}
       />
     ) : (
-      renderInput({ field, id, hasError, onChange, Input, appLocale })
+      renderInput({ field, id, hasError, onChange, Input, appLocale, Banner, t })
     );
 
   return (
@@ -285,10 +286,11 @@ function inputId(field: EditFieldViewModel): string {
   return `kumiko-edit-${field.field}`;
 }
 
-// Dispatch auf field.type → Input-Kind. Select threaded options aus dem
-// EditFieldViewModel (computeEditViewModel zieht sie aus
-// SelectFieldDef.options). Unknown-Types fallen auf text zurück damit
-// die Form was Sinnvolles rendert statt blank zu sein.
+// Dispatches field.type → Input-kind. Select threads options through
+// from the EditFieldViewModel (computeEditViewModel pulls them from
+// SelectFieldDef.options). Structural types without a widget (embedded,
+// jsonb, multiSelect) render read-only instead of a data-destroying text
+// fallback (#1834); truly unknown scalar types still fall back to text.
 function renderInput({
   field,
   id,
@@ -296,6 +298,8 @@ function renderInput({
   onChange,
   Input,
   appLocale,
+  Banner,
+  t,
 }: {
   readonly field: EditFieldViewModel;
   readonly id: string;
@@ -303,6 +307,8 @@ function renderInput({
   readonly onChange: (value: unknown) => void;
   readonly Input: ReturnType<typeof usePrimitives>["Input"];
   readonly appLocale: string;
+  readonly Banner: ReturnType<typeof usePrimitives>["Banner"];
+  readonly t: ReturnType<typeof useTranslation>;
 }): ReactNode {
   const common = {
     id,
@@ -421,9 +427,23 @@ function renderInput({
         />
       );
     }
+    // embedded (without embeddedListCells — that's embeddedList, which has
+    // had its own EmbeddedListField widget since #1838), jsonb and
+    // multiSelect carry objects/arrays. Without a dedicated widget these
+    // must NOT fall through to a text input: stringValue() turns them into
+    // "[object Object]" / "a,b", and saving that overwrites the real data
+    // with the mangled string (#1834).
+    case "embedded":
+    case "jsonb":
+    case "multiSelect":
+      return (
+        <Banner id={id} variant="info">
+          {t("kumiko.field.unsupported")}
+        </Banner>
+      );
     default: {
-      // text + unknown → text input. Wenn TextFieldDef.multiline gesetzt
-      // ist (das ViewModel hält's), wechselt der Renderer auf textarea.
+      // text + unknown scalar type → text input. If TextFieldDef.multiline
+      // is set (the view-model carries it), the renderer switches to textarea.
       if (field.type === "text" && field.multiline) {
         const rows = typeof field.multiline === "object" ? field.multiline.rows : undefined;
         return (

package/src/i18n-defaults.ts

@@ -36,6 +36,7 @@ export const kumikoDefaultTranslations: TranslationsByLocale = {
     "kumiko.field.locatedTzHint": "Zeit lokal am angegebenen Ort",
     "kumiko.field.reference-created-no-id":
       "Datensatz wurde angelegt, konnte aber nicht automatisch ausgewählt werden. Bitte manuell auswählen.",
+    "kumiko.field.unsupported": "Dieser Feldtyp kann hier noch nicht bearbeitet werden.",
     "kumiko.field.embedded-list.add-row": "Zeile hinzufügen",
     "kumiko.field.embedded-list.remove-row": "Zeile entfernen",
     "kumiko.field.embedded-list.duplicate-row": "Zeile duplizieren",
@@ -199,6 +200,7 @@ export const kumikoDefaultTranslations: TranslationsByLocale = {
     "kumiko.field.locatedTzHint": "Time local to the given location",
     "kumiko.field.reference-created-no-id":
       "Record was created but could not be selected automatically. Please select it manually.",
+    "kumiko.field.unsupported": "This field type can't be edited here yet.",
     "kumiko.field.embedded-list.add-row": "Add row",
     "kumiko.field.embedded-list.remove-row": "Remove row",
     "kumiko.field.embedded-list.duplicate-row": "Duplicate row",

package/src/primitives.tsx

@@ -126,6 +126,10 @@ export type BannerProps = {
    *  "loading", etc.). Web fügt p-6 als Margin um den Banner. */
   readonly padded?: boolean;
   readonly testId?: string;
+  /** Set when a `<Field>` wraps this Banner as its control (no actual
+   *  input exists to receive the label's `htmlFor` otherwise — see
+   *  render-field.tsx's unsupported-field-type fallback, #1834). */
+  readonly id?: string;
 };
 
 export type FieldProps = {