@cosmicdrift/kumiko-renderer-web 0.193.0 → 0.194.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.193.0",
+  "version": "0.194.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>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.193.0",
-    "@cosmicdrift/kumiko-headless": "0.193.0",
-    "@cosmicdrift/kumiko-renderer": "0.193.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.194.0",
+    "@cosmicdrift/kumiko-headless": "0.194.0",
+    "@cosmicdrift/kumiko-renderer": "0.194.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

package/src/__tests__/create-app.test.tsx

@@ -316,7 +316,7 @@ describe("createKumikoApp", () => {
     expect(screen.getByTestId("ca-swatch-field").textContent).toBe("color");
   });
 
-  test("clientFeatures.contentEditors → createKumikoApp verdrahtet Merge → Provider → useContentEditor end-to-end", async () => {
+  test("clientFeatures.contentEditors → createKumikoApp wires merge → provider → useContentEditor end-to-end", async () => {
     // Proves the whole chain: ClientFeatureDefinition.contentEditors →
     // mergeContentEditors → ContentEditorsProvider in the tree →
     // useContentEditor in the consumer. Without the provider mount,

package/src/__tests__/entity-edit-redirect.test.tsx

@@ -14,6 +14,7 @@ import type {
 import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
 import type { NavTarget } from "@cosmicdrift/kumiko-renderer";
 import { DispatcherProvider, KumikoScreen, NavProvider } from "@cosmicdrift/kumiko-renderer";
+import userEvent from "@testing-library/user-event";
 import { createMockDispatcher, fireEvent, render, screen, waitFor } from "./test-utils";
 
 const productEntity: EntityDefinition = {
@@ -163,4 +164,114 @@ describe("entityEdit redirect (#1942)", () => {
 
     await waitFor(() => expect(navigated).toEqual([{ screenId: "product-detail" }]));
   });
+
+  test("update: redirect as fully-qualified cross-feature QN navigates via its short id (#1946)", async () => {
+    // Mirrors the create-mode QN test above — EntityEditUpdateForm's
+    // handleSubmitted has its own lastSegment(screen.redirect) call
+    // (kumiko-screen.tsx), separate from the create path's.
+    const navigated: NavTarget[] = [];
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { id: "42", version: 1, name: "Existing" },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <NavProvider
+          value={{
+            route: { screenId: "shop:screen:product-edit", entityId: "42" },
+            navigate: (target) => navigated.push(target),
+            replace: () => {},
+            hrefFor: () => "",
+            searchParams: {},
+            setSearchParams: () => {},
+          }}
+        >
+          <KumikoScreen
+            schema={buildSchema("statements:screen:statement-upload-list")}
+            qn="shop:screen:product-edit"
+            entityId="42"
+          />
+        </NavProvider>
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByTestId("field-name")).toBeTruthy());
+    fillNameAndSubmit();
+
+    await waitFor(() => expect(navigated).toEqual([{ screenId: "statement-upload-list" }]));
+  });
+
+  test("update: no redirect set falls back to the entity's list screen", async () => {
+    const navigated: NavTarget[] = [];
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { id: "42", version: 1, name: "Existing" },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <NavProvider
+          value={{
+            route: { screenId: "shop:screen:product-edit", entityId: "42" },
+            navigate: (target) => navigated.push(target),
+            replace: () => {},
+            hrefFor: () => "",
+            searchParams: {},
+            setSearchParams: () => {},
+          }}
+        >
+          <KumikoScreen schema={buildSchema()} qn="shop:screen:product-edit" entityId="42" />
+        </NavProvider>
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByTestId("field-name")).toBeTruthy());
+    fillNameAndSubmit();
+
+    await waitFor(() => expect(navigated).toEqual([{ screenId: "product-list" }]));
+  });
+
+  test("update: delete navigates to the list even with redirect set", async () => {
+    const user = userEvent.setup();
+    const navigated: NavTarget[] = [];
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { id: "42", version: 1, name: "Existing" },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <NavProvider
+          value={{
+            route: { screenId: "shop:screen:product-edit", entityId: "42" },
+            navigate: (target) => navigated.push(target),
+            replace: () => {},
+            hrefFor: () => "",
+            searchParams: {},
+            setSearchParams: () => {},
+          }}
+        >
+          <KumikoScreen
+            schema={buildSchema("product-detail")}
+            qn="shop:screen:product-edit"
+            entityId="42"
+          />
+        </NavProvider>
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByTestId("field-name")).toBeTruthy());
+    // userEvent instead of fireEvent: the Radix dialog fires async state updates.
+    await user.click(screen.getByTestId("render-edit-delete"));
+    await user.click(screen.getByTestId("render-edit-delete-dialog-confirm"));
+
+    await waitFor(() => expect(navigated).toEqual([{ screenId: "product-list" }]));
+  });
 });

package/src/__tests__/field-hide-label.test.tsx

@@ -1,6 +1,19 @@
 import { describe, expect, test } from "bun:test";
+import { DispatcherProvider } from "@cosmicdrift/kumiko-renderer";
+import type { ReactElement } from "react";
 import { defaultPrimitives } from "../primitives";
-import { render } from "./test-utils";
+import { AiTextField } from "../widgets/ai-text-field";
+import {
+  BooleanField,
+  DateField,
+  FileField,
+  NumberField,
+  RangeField,
+  SelectField,
+  TextareaField,
+  TextField,
+} from "../widgets/form-fields";
+import { createMockDispatcher, render } from "./test-utils";
 
 const { Field } = defaultPrimitives;
 
@@ -42,3 +55,155 @@ describe("DefaultField hideLabel (fw#1870)", () => {
     expect(view.getByLabelText("Maps to")).toBeTruthy();
   });
 });
+
+const LABEL = "Maps to";
+
+// Every *Field widget in form-fields.tsx wires hideLabel through to the
+// underlying Field primitive by hand (fw#1870/#1871) — a widget that forgets
+// the pass-through renders a visible label with no compile error, so this
+// has to be caught per-widget rather than assumed from the Field test above.
+const FIELD_WIDGETS: ReadonlyArray<readonly [string, ReactElement]> = [
+  [
+    "NumberField",
+    <NumberField
+      key="NumberField"
+      id="f1"
+      name="f1"
+      label={LABEL}
+      value={1}
+      onChange={() => {}}
+      hideLabel
+      testId="field"
+    />,
+  ],
+  [
+    "TextField",
+    <TextField
+      key="TextField"
+      id="f1"
+      name="f1"
+      label={LABEL}
+      value="hallo"
+      onChange={() => {}}
+      hideLabel
+      testId="field"
+    />,
+  ],
+  [
+    "SelectField",
+    <SelectField
+      key="SelectField"
+      id="f1"
+      name="f1"
+      label={LABEL}
+      value="a"
+      onChange={() => {}}
+      options={["a", "b"]}
+      hideLabel
+      testId="field"
+    />,
+  ],
+  [
+    "DateField",
+    <DateField
+      key="DateField"
+      id="f1"
+      name="f1"
+      label={LABEL}
+      value="2026-01-01"
+      onChange={() => {}}
+      hideLabel
+      testId="field"
+    />,
+  ],
+  [
+    "BooleanField",
+    <BooleanField
+      key="BooleanField"
+      id="f1"
+      name="f1"
+      label={LABEL}
+      value={false}
+      onChange={() => {}}
+      hideLabel
+      testId="field"
+    />,
+  ],
+  [
+    "TextareaField",
+    <TextareaField
+      key="TextareaField"
+      id="f1"
+      name="f1"
+      label={LABEL}
+      value="hallo"
+      onChange={() => {}}
+      hideLabel
+      testId="field"
+    />,
+  ],
+  [
+    "RangeField",
+    <RangeField
+      key="RangeField"
+      id="f1"
+      name="f1"
+      label={LABEL}
+      value={5}
+      onChange={() => {}}
+      min={0}
+      max={10}
+      hideLabel
+      testId="field"
+    />,
+  ],
+  [
+    "FileField",
+    <FileField
+      key="FileField"
+      id="f1"
+      name="f1"
+      label={LABEL}
+      value={null}
+      onChange={() => {}}
+      hideLabel
+      testId="field"
+    />,
+  ],
+];
+
+describe("form-fields.tsx hideLabel pass-through (fw#1870/#1871)", () => {
+  test.each(FIELD_WIDGETS)(
+    "%s collapses its label to sr-only and keeps it htmlFor-linked",
+    (_name, element) => {
+      const view = render(element);
+      expect(view.getByText(LABEL).className).toContain("sr-only");
+      expect(view.getByLabelText(LABEL)).toBeTruthy();
+    },
+  );
+});
+
+// AiTextField builds its own <Field> instead of going through form-fields.tsx
+// (fw#1871#1) — a separate widget, so it needs its own pass-through check.
+describe("AiTextField hideLabel pass-through (fw#1871#1)", () => {
+  test("collapses its label to sr-only and keeps it htmlFor-linked", () => {
+    const dispatcher = createMockDispatcher({});
+    const view = render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <AiTextField
+          id="f1"
+          name="f1"
+          label={LABEL}
+          value="hallo"
+          onChange={() => {}}
+          actions={[]}
+          completion={false}
+          hideLabel
+          testId="field"
+        />
+      </DispatcherProvider>,
+    );
+    expect(view.getByText(LABEL).className).toContain("sr-only");
+    expect(view.getByLabelText(LABEL)).toBeTruthy();
+  });
+});

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

@@ -1527,6 +1527,38 @@ describe("KumikoScreen", () => {
     expect(navigateCalls).toEqual([{ screenId: "task-list" }]);
   });
 
+  test("actionForm mit Cross-Feature-QN als cancelTarget: Abbrechen navigiert per Short-Id (#1946)", () => {
+    const navigateCalls: { screenId: string }[] = [];
+    const memoryNav = {
+      route: { screenId: "quick-add" },
+      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      replace: () => undefined,
+      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      searchParams: {},
+      setSearchParams: () => undefined,
+    };
+    const actionScreen: ActionFormScreenDefinition = {
+      id: "quick-add",
+      type: "actionForm",
+      handler: "tasks:write:task:quick-add",
+      fields: { title: { type: "text", required: true } },
+      layout: { sections: [{ title: "x", fields: ["title"] }] },
+      cancelTarget: "statements:screen:statement-upload-list",
+    };
+    render(
+      <NavProvider value={memoryNav}>
+        <DispatcherProvider dispatcher={makeDispatcher()}>
+          <KumikoScreen
+            schema={{ ...schema, screens: [actionScreen, listScreen] }}
+            qn="tasks:screen:quick-add"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+    fireEvent.click(screen.getByTestId("render-edit-cancel"));
+    expect(navigateCalls).toEqual([{ screenId: "statement-upload-list" }]);
+  });
+
   // Tier 2.7e-2: URL-Search-Params füllen die actionForm initial values.
   // Use-case: rowAction kind=navigate setzt `?taskId=r1`, das actionForm
   // sieht es beim Mount und pre-fillt das title-Feld.
@@ -1956,6 +1988,33 @@ describe("KumikoScreen: singleton entityEdit", () => {
     expect(screen.getByTestId("kumiko-screen-create-disabled")).toBeTruthy();
     expect(screen.queryByTestId("render-edit-form")).toBeNull();
   });
+
+  // The singleton wrapper fires its own list(limit:1) query up front — a
+  // screen whose `list` handler has stricter access.roles than its `edit`
+  // handler used to render fine (no query ran before this feature) and now
+  // flips to an error banner instead. No test caught that regression.
+  test("list-Query schlägt fehl → Fehler-Banner statt Create-Form", async () => {
+    const dispatcher = makeDispatcher({
+      query: (async () => ({
+        isSuccess: false,
+        error: {
+          code: "access_denied",
+          httpStatus: 403,
+          i18nKey: "errors.access.denied",
+          message: "",
+        },
+      })) as unknown as Dispatcher["query"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={singletonSchema} qn="tasks:screen:task-edit" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+    const bannerText = screen.getByTestId("kumiko-screen-error").textContent;
+    expect(bannerText).toBe(kumikoDefaultTranslations["en"]?.["errors.access.denied"] ?? "");
+    expect(screen.queryByTestId("render-edit-form")).toBeNull();
+  });
 });
 
 // --- actionForm extension-section (Wave J: Incident-Update-Timeline) ---

package/src/__tests__/nav-tree.test.tsx

@@ -138,6 +138,36 @@ describe("NavTree role-gating", () => {
   });
 });
 
+// Lucide tags every icon's <svg> with a `lucide-<slug>` class (see
+// createLucideIcon) — asserting on it distinguishes "icon X rendered" from
+// "some svg rendered", so a NAV_ICONS entry pointing at the wrong component
+// (or a duplicate) fails even when the total svg count still matches.
+const NAV_ICON_LUCIDE_CLASS: Readonly<Record<string, string>> = {
+  dashboard: "lucide-layout-dashboard",
+  layers: "lucide-layers",
+  building: "lucide-building",
+  tag: "lucide-tag",
+  key: "lucide-key-round",
+  server: "lucide-server",
+  mail: "lucide-mail",
+  download: "lucide-download",
+  upload: "lucide-upload",
+  rocket: "lucide-rocket",
+  palette: "lucide-palette",
+  link: "lucide-link",
+  share: "lucide-share-2",
+};
+
+function expectNavIcons(container: HTMLElement, iconKeys: readonly string[]): void {
+  const classes = Array.from(container.querySelectorAll("svg")).map(
+    (svg) => svg.getAttribute("class") ?? "",
+  );
+  expect(classes).toHaveLength(iconKeys.length);
+  iconKeys.forEach((key, i) => {
+    expect(classes[i]).toContain(NAV_ICON_LUCIDE_CLASS[key]);
+  });
+}
+
 describe("NavTree", () => {
   test("Section-Header (parent ohne screen) ist statisches Label, children sichtbar", () => {
     render(<NavTree schema={makeSchema()} testId="tree" />);
@@ -204,10 +234,10 @@ describe("NavTree", () => {
     const { container } = render(<NavTree schema={schema} />);
     // Flache Navigation ohne Sections → keine Chevrons. Genau EIN svg:
     // das dashboard-Icon. Das icon-lose Item rendert den Dot (span, kein svg).
-    expect(container.querySelectorAll("svg").length).toBe(1);
+    expectNavIcons(container, ["dashboard"]);
   });
 
-  test("layers + building (money-horse Kredit-Gruppen/Mandanten) lösen auf ein Icon auf", () => {
+  test("layers + building (money-horse credit groups/tenants) resolve to an icon", () => {
     const schema = {
       featureName: "showcase",
       entities: {},
@@ -221,10 +251,10 @@ describe("NavTree", () => {
       ],
     } as FeatureSchema;
     const { container } = render(<NavTree schema={schema} />);
-    expect(container.querySelectorAll("svg").length).toBe(2);
+    expectNavIcons(container, ["layers", "building"]);
   });
 
-  test("tag + key (custom-fields / api-tokens) lösen auf ein Icon auf", () => {
+  test("tag + key (custom-fields / api-tokens) resolve to an icon", () => {
     const schema = {
       featureName: "showcase",
       entities: {},
@@ -238,13 +268,15 @@ describe("NavTree", () => {
       ],
     } as FeatureSchema;
     const { container } = render(<NavTree schema={schema} />);
-    expect(container.querySelectorAll("svg").length).toBe(2);
+    expectNavIcons(container, ["tag", "key"]);
   });
 
-  test("server, mail, download, upload, rocket lösen auf ein Icon auf (Config-/SMTP-Nav)", () => {
-    // Config-Settings-Hub leitet Child-Nav-Icons aus dem mask.icon der
-    // ConfigKey ab (smtp-host="server", from="mail", subscription="rocket");
-    // fehlten sie in NAV_ICONS, rendert das Nav blank statt Icon.
+  test("server, mail, download, upload, rocket resolve to an icon (config/SMTP nav)", () => {
+    // The config settings hub derives child nav icons from a ConfigKey's
+    // mask.icon (smtp-host="server", from="mail", subscription="rocket");
+    // a missing NAV_ICONS entry renders the nav blank instead of an icon.
+    // download/upload guard the same map against feature-authored icons
+    // (e.g. GDPR export-job nav).
     const schema = {
       featureName: "app",
       entities: {},
@@ -264,7 +296,7 @@ describe("NavTree", () => {
       ],
     } as FeatureSchema;
     const { container } = render(<NavTree schema={schema} />);
-    expect(container.querySelectorAll("svg").length).toBe(5);
+    expectNavIcons(container, ["server", "mail", "download", "upload", "rocket"]);
   });
 
   test("palette, link und share rendern Lucide-Icons (Share-/Branding-Nav)", () => {
@@ -283,7 +315,7 @@ describe("NavTree", () => {
       ],
     } as FeatureSchema;
     const { container } = render(<NavTree schema={schema} />);
-    expect(container.querySelectorAll("svg").length).toBe(3);
+    expectNavIcons(container, ["palette", "link", "share"]);
   });
 
   test("unbekannter icon-Key fällt sauber auf den Dot zurück (kein svg)", () => {

package/src/__tests__/primitives.test.tsx

@@ -87,6 +87,21 @@ describe("Banner", () => {
     const slot = screen.getByTestId("b").querySelector('[data-slot="actions"]');
     expect(slot?.textContent).toBe("undo");
   });
+
+  test("id prop (Field-as-control usage) sets role=group + aria-labelledby, not a bare id/htmlFor pairing", () => {
+    render(
+      <Field id="unsupported-field" label="Raw data">
+        <Banner id="unsupported-field" variant="info" testId="b">
+          No editor for this field type
+        </Banner>
+      </Field>,
+    );
+    const banner = screen.getByTestId("b");
+    expect(banner.getAttribute("role")).toBe("group");
+    const labelledBy = banner.getAttribute("aria-labelledby");
+    expect(labelledBy).not.toBeNull();
+    expect(document.getElementById(labelledBy ?? "")?.textContent).toContain("Raw data");
+  });
 });
 
 describe("Field", () => {
@@ -893,6 +908,16 @@ describe("DataTable", () => {
       expect(screen.getByTestId("cell-r1-y2026").getAttribute("data-highlighted")).toBe("true");
       expect(screen.getByTestId("cell-r1-name").getAttribute("data-highlighted")).toBeNull();
     });
+
+    test("marks the header of a highlighted sortable column too", () => {
+      const sortableCols = [
+        { field: "name", label: "Name", type: "string", sortable: false },
+        { field: "y2026", label: "2026", type: "number", sortable: true, highlighted: true },
+      ] as const;
+      render(<DataTable columns={sortableCols} rows={oneRow} onSortChange={mock()} />);
+      expect(screen.getByTestId("column-y2026").getAttribute("data-highlighted")).toBe("true");
+      expect(screen.getByTestId("column-name").getAttribute("data-highlighted")).toBeNull();
+    });
   });
 
   describe("testId overrides", () => {
@@ -1052,7 +1077,10 @@ describe("Form", () => {
         <div>content</div>
       </Form>,
     );
-    expect(screen.getByTestId("form-actions").className).toContain("max-sm:fixed");
+    const actionsFooter = screen.getByTestId("form-actions");
+    expect(actionsFooter.className).toContain("max-sm:fixed");
+    const contentContainer = actionsFooter.previousElementSibling as HTMLElement;
+    expect(contentContainer.className).toContain("max-sm:pb-24");
   });
 
   test("ohne stickyActions: Footer bleibt im normalen Dokumentfluss", () => {
@@ -1061,7 +1089,10 @@ describe("Form", () => {
         <div>content</div>
       </Form>,
     );
-    expect(screen.getByTestId("form-actions").className).not.toContain("max-sm:fixed");
+    const actionsFooter = screen.getByTestId("form-actions");
+    expect(actionsFooter.className).not.toContain("max-sm:fixed");
+    const contentContainer = actionsFooter.previousElementSibling as HTMLElement;
+    expect(contentContainer.className).not.toContain("max-sm:pb-24");
   });
 });