@cosmicdrift/kumiko-renderer-web 0.197.0 → 0.198.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.197.0",
+  "version": "0.198.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.197.0",
-    "@cosmicdrift/kumiko-headless": "0.197.0",
-    "@cosmicdrift/kumiko-renderer": "0.197.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.198.0",
+    "@cosmicdrift/kumiko-headless": "0.198.0",
+    "@cosmicdrift/kumiko-renderer": "0.198.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

@@ -206,6 +206,99 @@ describe("createKumikoApp", () => {
     );
   });
 
+  test("custom screen without a registered clientFeatures component → console.error names feature + screen at boot (kumiko-framework#2025)", async () => {
+    // A server feature can declare a `type: "custom"` screen without the
+    // app mounting the corresponding client plugin — the screen is still
+    // reachable via URL. createKumikoApp should surface that visibly ONCE
+    // at boot instead of only showing it as a banner when the URL is
+    // opened (which nobody would see if they never visit the route).
+    const errorSpy = spyOn(console, "error").mockImplementation(() => {});
+
+    const customScreenSchema: FeatureSchema = {
+      featureName: "delivery",
+      entities: { task: taskEntity },
+      screens: [
+        {
+          id: "delivery-log",
+          type: "custom",
+          renderer: { react: { __component: "DeliveryLog" } },
+        },
+      ],
+    };
+
+    mountRoot();
+    await mountApp({
+      schema: customScreenSchema,
+      dispatcher: makeDispatcher(),
+      screenQn: "delivery:screen:delivery-log",
+    });
+
+    expect(errorSpy).toHaveBeenCalledWith(expect.stringContaining("delivery:delivery-log"));
+
+    errorSpy.mockRestore();
+  });
+
+  test("custom screen WITH a registered clientFeatures component → no boot diagnostic", async () => {
+    const errorSpy = spyOn(console, "error").mockImplementation(() => {});
+
+    function DeliveryLog(): ReactNode {
+      return <span data-testid="delivery-log-mounted" />;
+    }
+    const customScreenSchema: FeatureSchema = {
+      featureName: "delivery",
+      entities: { task: taskEntity },
+      screens: [
+        {
+          id: "delivery-log",
+          type: "custom",
+          renderer: { react: { __component: "DeliveryLog" } },
+        },
+      ],
+    };
+
+    mountRoot();
+    await mountApp({
+      schema: customScreenSchema,
+      dispatcher: makeDispatcher(),
+      screenQn: "delivery:screen:delivery-log",
+      clientFeatures: [{ name: "delivery", components: { "delivery-log": DeliveryLog } }],
+    });
+
+    expect(await screen.findByTestId("delivery-log-mounted")).toBeTruthy();
+    expect(errorSpy).not.toHaveBeenCalledWith(expect.stringContaining("delivery:delivery-log"));
+
+    errorSpy.mockRestore();
+  });
+
+  test("dormant custom screen without a registered clientFeatures component → no boot diagnostic (kumiko-framework#2034)", async () => {
+    const errorSpy = spyOn(console, "error").mockImplementation(() => {});
+
+    const dormantScreenSchema: FeatureSchema = {
+      featureName: "user-data-rights",
+      entities: { task: taskEntity },
+      screens: [
+        {
+          id: "privacy-center",
+          type: "custom",
+          renderer: { react: { __component: "PrivacyCenterScreen" } },
+          access: { openToAll: true },
+          dormant: true,
+        },
+      ],
+    };
+
+    mountRoot();
+    await mountApp({
+      schema: dormantScreenSchema,
+      dispatcher: makeDispatcher(),
+      screenQn: "user-data-rights:screen:privacy-center",
+    });
+
+    expect(errorSpy).not.toHaveBeenCalledWith(expect.stringContaining("privacy-center"));
+
+    errorSpy.mockRestore();
+  });
+
   test("clientFeatures.columnRenderers → bei Key-Kollision warnt + last-wins gewinnt", async () => {
     // Zwei Features liefern denselben Renderer-Key — der Merge in
     // create-app warnt und behält den späteren Eintrag (Last-Wins).

package/src/__tests__/form-action-bar.test.tsx

@@ -85,6 +85,44 @@ describe("Form = eine Card, Sections als innere Abschnitte", () => {
     expect(form.className).toContain("gap-4");
   });
 
+  test("BareFormProvider: sections get the divider rule between them", () => {
+    render(
+      <BareFormProvider>
+        <Form onSubmit={() => {}} testId="bare-sections">
+          <Section testId="s1">
+            <div>a</div>
+          </Section>
+          <Section testId="s2">
+            <div>b</div>
+          </Section>
+        </Form>
+      </BareFormProvider>,
+    );
+    const form = screen.getByTestId("bare-sections");
+    // jsdom doesn't run Tailwind's JIT, so `:not(:first-child)` can't be
+    // asserted via computed style — check the structural precondition the
+    // selector relies on (both sections are direct <form> children, in
+    // order) plus the divider utility class carrying it.
+    const sectionChildren = Array.from(form.children).filter((el) => el.tagName === "SECTION");
+    expect(sectionChildren.length).toBe(2);
+    expect(sectionChildren[0]).toBe(screen.getByTestId("s1"));
+    expect(sectionChildren[1]).toBe(screen.getByTestId("s2"));
+    expect(form.className).toContain("[&>section:not(:first-child)]:border-t");
+  });
+
+  test("BareFormProvider: flat AuthCard-shaped fields render no <section> — the divider rule stays inert", () => {
+    render(
+      <BareFormProvider>
+        <Form onSubmit={() => {}} testId="bare-flat">
+          <div>field one</div>
+          <div>field two</div>
+        </Form>
+      </BareFormProvider>,
+    );
+    const form = screen.getByTestId("bare-flat");
+    expect(form.querySelectorAll("section").length).toBe(0);
+  });
+
   test("Section standalone (außerhalb Form) bleibt eine eigene Card", () => {
     render(
       <Section testId="solo" title="Solo">

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

@@ -1707,7 +1707,7 @@ describe("KumikoScreen", () => {
     expect(navigateCalls).toEqual([]);
   });
 
-  test("custom screen type → placeholder (M4 wires r.uiComponent)", () => {
+  test("custom screen type without a registered component → error placeholder naming feature + screen (kumiko-framework#2025)", () => {
     const customSchema: FeatureSchema = {
       featureName: "tasks",
       entities: { task: taskEntity },
@@ -1724,7 +1724,11 @@ describe("KumikoScreen", () => {
         <KumikoScreen schema={customSchema} qn="tasks:screen:dashboard" />
       </DispatcherProvider>,
     );
-    expect(screen.getByTestId("kumiko-screen-custom-placeholder")).toBeTruthy();
+    const placeholder = screen.getByTestId("kumiko-screen-custom-placeholder");
+    expect(placeholder.getAttribute("data-variant")).toBe("error");
+    expect(placeholder.textContent).toContain("dashboard");
+    expect(placeholder.textContent).toContain("tasks");
+    expect(placeholder.textContent).toContain("clientFeatures");
   });
 
   // ------------------------------------------------------------------
@@ -2015,6 +2019,79 @@ describe("KumikoScreen: singleton entityEdit", () => {
     expect(bannerText).toBe(kumikoDefaultTranslations["en"]?.["errors.access.denied"] ?? "");
     expect(screen.queryByTestId("render-edit-form")).toBeNull();
   });
+
+  // kumiko-screen#1944: EntityEditSingletonBody runs without a wrapping
+  // entityList screen, so the create-body's default "navigate back to the
+  // list" success handler is a silent no-op — a successful create used to
+  // leave the form stuck on the just-submitted create values, and a second
+  // submit created a duplicate record ("exactly one record per tenant"
+  // broken). Create on an empty table must now switch straight to the
+  // update form of the newly created record.
+  test("erfolgreicher Create bei leerer Tabelle wechselt in Update-Form des neuen Records (kein zweiter Create möglich)", async () => {
+    let created = false;
+    const write = mock(async (type: string) => {
+      if (type === "tasks:write:task:create") {
+        created = true;
+        return { isSuccess: true, data: { id: "task-1" } };
+      }
+      return { isSuccess: true, data: {} };
+    });
+    const query = mock(async (type: string) => {
+      if (type === "tasks:query:task:list") {
+        return created
+          ? { isSuccess: true, data: { rows: [{ id: "task-1", title: "Created title" }] } }
+          : { isSuccess: true, data: { rows: [], nextCursor: null } };
+      }
+      if (type === "tasks:query:task:detail") {
+        return {
+          isSuccess: true,
+          data: { id: "task-1", version: 1, title: "Created title", count: 0, done: false },
+        };
+      }
+      return { isSuccess: true, data: { rows: [], nextCursor: null } };
+    });
+    const dispatcher = makeDispatcher({
+      write: write as unknown as Dispatcher["write"],
+      query: query 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 titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
+    fireEvent.change(titleInput, { target: { value: "Created title" } });
+    fireEvent.click(screen.getByTestId("render-edit-submit"));
+
+    await waitFor(() => expect(write).toHaveBeenCalledTimes(1));
+    // The singleton wrapper refetches its list(limit:1) query after the
+    // create succeeds, sees the new row, and switches from the create body
+    // to the update body — which loads the record via its own detail
+    // query, landing on the same title through a different data path.
+    await waitFor(() => {
+      const input = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
+      expect(input.value).toBe("Created title");
+    });
+    expect(query).toHaveBeenCalledWith(
+      "tasks:query:task:detail",
+      { id: "task-1" },
+      expect.anything(),
+    );
+
+    // A second submit on the (now update-mode) form must dispatch an
+    // update, never a second create.
+    fireEvent.change(screen.getByTestId("field-title").querySelector("input") as HTMLInputElement, {
+      target: { value: "Edited again" },
+    });
+    fireEvent.click(screen.getByTestId("render-edit-submit"));
+    // Exactly one create (the first submit) followed by an update, never a
+    // second create — the singleton wrapper must have flipped branches.
+    await waitFor(() => expect(write).toHaveBeenCalledTimes(2));
+    expect(write).toHaveBeenLastCalledWith("tasks:write:task:update", expect.anything());
+  });
 });
 
 // --- actionForm extension-section (Wave J: Incident-Update-Timeline) ---

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

@@ -5,8 +5,18 @@
 //   2. Active-State greift auf node mit screen wenn nav.route's
 //      screenId matcht (Standard-Sidebar-Verhalten).
 
-import { afterEach, describe, expect, test } from "bun:test";
+import {
+  afterAll,
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  type Mock,
+  spyOn,
+  test,
+} from "bun:test";
 import type {
+  NavIconKey,
   TargetRef,
   TreeChildrenSubscribe,
   TreeNode,
@@ -169,6 +179,18 @@ function expectNavIcons(container: HTMLElement, iconKeys: readonly string[]): vo
 }
 
 describe("NavTree", () => {
+  let warnSpy: Mock<typeof console.warn>;
+  beforeEach(() => {
+    warnSpy = spyOn(console, "warn").mockImplementation(() => {});
+    // spyOn reuses the same underlying mock across calls on the same target
+    // within a process — without an explicit clear, call history from a
+    // PRIOR test in this describe block leaks into the next test's spy.
+    warnSpy.mockClear();
+  });
+  afterAll(() => {
+    warnSpy.mockRestore();
+  });
+
   test("Section-Header (parent ohne screen) ist statisches Label, children sichtbar", () => {
     render(<NavTree schema={makeSchema()} testId="tree" />);
 
@@ -318,15 +340,50 @@ describe("NavTree", () => {
     expectNavIcons(container, ["palette", "link", "share"]);
   });
 
-  test("unbekannter icon-Key fällt sauber auf den Dot zurück (kein svg)", () => {
+  test("unbekannter icon-Key fällt sauber auf den Dot zurück (kein svg), aber warnt sichtbar", () => {
     const schema = {
       featureName: "showcase",
       entities: {},
       screens: [{ id: "x", type: "entityList", entity: "x", columns: [] }],
-      navs: [{ id: "x", label: "X", screen: "x", order: 10, icon: "does-not-exist" }],
+      navs: [
+        {
+          id: "x",
+          label: "X",
+          screen: "x",
+          order: 10,
+          // Deliberately unregistered — asserts the runtime fallback, not the
+          // (now compile-time) NavIconKey vocabulary.
+          icon: "does-not-exist" as NavIconKey,
+        },
+      ],
     } as FeatureSchema;
     const { container } = render(<NavTree schema={schema} />);
     expect(container.querySelectorAll("svg").length).toBe(0);
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining('Nav entry "showcase:nav:x" references icon "does-not-exist"'),
+    );
+  });
+
+  test("bekannter icon-Key warnt NICHT", () => {
+    const schema = {
+      featureName: "showcase",
+      entities: {},
+      screens: [{ id: "dash", type: "entityList", entity: "x", columns: [] }],
+      navs: [{ id: "dash", label: "Dash", screen: "dash", order: 10, icon: "dashboard" }],
+    } as FeatureSchema;
+    render(<NavTree schema={schema} />);
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+
+  test("kein icon gesetzt warnt NICHT (Bundled Features ohne Icon sind kein Fehler)", () => {
+    const schema = {
+      featureName: "showcase",
+      entities: {},
+      screens: [{ id: "plain", type: "entityList", entity: "x", columns: [] }],
+      navs: [{ id: "plain", label: "Plain", screen: "plain", order: 10 }],
+    } as FeatureSchema;
+    render(<NavTree schema={schema} />);
+    expect(warnSpy).not.toHaveBeenCalled();
   });
 });
 

package/src/__tests__/render-edit.test.tsx

@@ -98,6 +98,33 @@ describe("RenderEdit", () => {
     expect(screen.queryByTestId("field-notes")).toBeNull();
   });
 
+  // A hidden field must not leave an empty grid cell behind — the cell count
+  // has to track the visible field count exactly, in both directions.
+  test("a hidden field claims no grid cell; toggling visibility adds/removes exactly one cell", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit<TestValues>
+          screen={makeScreen()}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "", count: 0, isUrgent: false }}
+          writeCommand="order:create"
+        />
+      </DispatcherProvider>,
+    );
+
+    const grid = screen.getByTestId("section-Basics").querySelector(".grid");
+    expect(grid).toBeTruthy();
+    // notes is hidden (isUrgent=false): title, count, isUrgent → 3 cells.
+    expect(grid?.children.length).toBe(3);
+
+    const urgentCheckbox = screen.getByTestId("field-isUrgent").querySelector('[role="checkbox"]');
+    fireEvent.click(urgentCheckbox as HTMLElement);
+
+    // notes becomes visible → 4 cells, no leftover empty cell from before.
+    expect(grid?.children.length).toBe(4);
+  });
+
   // Issue #1677: a section's optional `description` renders as the
   // Section's subtitle slot underneath the block heading, and a field's
   // `icon` reaches the DOM as a prefix icon on its input.
@@ -2485,6 +2512,13 @@ describe("RenderEdit create-mode draftId (issue #1913)", () => {
     // No silent adopt: the form stays pristine until the user picks.
     const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
     expect(titleInput.value).toBe("");
+    // #1976: single-candidate is now the normal case (auto-adopt removed) —
+    // the banner text and the "start new" button must both resolve to real
+    // copy, not the raw i18n keys.
+    const picker = screen.getByTestId("render-edit-draft-picker");
+    expect(picker.textContent).toContain("Found an open draft for this form");
+    expect(picker.textContent).not.toContain("kumiko.form.draft.resume-single");
+    expect(screen.getByTestId("render-edit-draft-start-new").textContent).toBe("Start new");
   });
 
   test("start-new on a one-candidate picker clears it without adopting, leaving the candidate untouched", async () => {
@@ -2560,6 +2594,10 @@ describe("RenderEdit create-mode draftId (issue #1913)", () => {
     );
 
     await waitFor(() => expect(screen.getByTestId("render-edit-draft-picker")).toBeTruthy());
+    // Multiple candidates keep the plural banner copy.
+    expect(screen.getByTestId("render-edit-draft-picker").textContent).toContain(
+      "Found multiple open drafts",
+    );
     const pickSecond = screen.getByTestId(`render-edit-draft-pick-${screenDef.id}:new:draft-2`);
     fireEvent.click(pickSecond);
 
@@ -3170,4 +3208,37 @@ describe("RenderEdit fields filter", () => {
     expect(write).not.toHaveBeenCalled();
     expect(screen.getByTestId("field-notes-errors")).toBeTruthy();
   });
+
+  // #1907: `fields` naming only unknown field names (typo, renamed field)
+  // must not collapse the validation scope to an empty array — an empty
+  // scope filters out ALL issues and lets submit through unvalidated.
+  test("fields naming only unknown field names falls back to unscoped and still blocks submit", async () => {
+    const write = mock(async () => ({ isSuccess: true, data: { id: "1" } }) as never);
+    const schema = z.object({
+      title: z.string().min(1),
+      notes: z.string().min(1),
+    });
+
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher(write)}>
+        <RenderEdit<FilterValues>
+          screen={makeTwoSectionScreen()}
+          entity={filterEntity}
+          featureName="orders"
+          initial={{ title: "Acme", count: 0, notes: "" }}
+          writeCommand="order:create"
+          schema={schema}
+          fields={["doesNotExist"]}
+        />
+      </DispatcherProvider>,
+    );
+
+    const form = screen.getByTestId("render-edit-form");
+    await act(async () => {
+      fireEvent.submit(form);
+      await Promise.resolve();
+    });
+
+    expect(write).not.toHaveBeenCalled();
+  });
 });

package/src/app/create-app.tsx

@@ -332,6 +332,35 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonl
   for (const f of clientFeatures) {
     if (f.components !== undefined) Object.assign(customScreens, f.components);
   }
+  // Fail loud at boot instead of per-URL: a mounted server feature can
+  // declare a `type: "custom"` screen that's reachable directly by URL
+  // even without nav placement — without this check, a missing client
+  // plugin only surfaces as an error placeholder to whoever happens to
+  // open that URL (kumiko-framework#2025). Screens flagged `dormant`
+  // (e.g. user-data-rights privacy-center, auth-mfa's enable screen) are
+  // registered without a self-owned r.nav on purpose — an app opts in by
+  // navving them explicitly, so a consumer that hasn't done that yet isn't
+  // missing anything (kumiko-framework#2034). Still dev-only: several
+  // bundled screens that ARE self-navved (e.g. compliance-profiles'
+  // profile-picker) have real unmounted-client-plugin bugs in existing
+  // consumer apps today (kumiko-framework#2025) — running this in
+  // production before those are fixed (tracked via infra#503) would just
+  // spam every affected app's console.
+  if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+    const missingCustomScreens = app.features.flatMap((f) =>
+      f.screens
+        .filter(
+          (s) => s.type === "custom" && s.dormant !== true && customScreens[s.id] === undefined,
+        )
+        .map((s) => `${f.featureName}:${s.id}`),
+    );
+    if (missingCustomScreens.length > 0) {
+      // biome-ignore lint/suspicious/noConsole: dev-only diagnostic for missing client plugins
+      console.error(
+        `[kumiko] ${missingCustomScreens.length} custom screen(s) have no registered component in clientFeatures.components — they render an error placeholder instead of the intended UI: ${missingCustomScreens.join(", ")}. Add the feature's web client plugin to clientFeatures.`,
+      );
+    }
+  }
   // Column-renderer map, same last-wins semantics as customScreens —
   // duplicate keys across features are rarely intentional, so a
   // collision logs once instead of silently overriding a library's
@@ -353,8 +382,8 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonl
     app.features.flatMap((f) => f.contentCollections ?? []),
   );
 
-  // Editor-Resolver aggregieren — keyed by "featureId:action". Gleiche
-  // Last-Wins-Semantik wie columnRenderers. Warnung bei Kollision.
+  // Aggregate editor resolvers — keyed by "featureId:action". Same
+  // last-wins semantics as columnRenderers. Warns on collision.
   const resolvers = new Map<string, ResolverComponent>();
   for (const f of clientFeatures) {
     if (f.resolvers === undefined) continue;
@@ -425,10 +454,10 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonl
   return { root };
 }
 
-// TokensBoot nutzt den browser-backed TokensApi-Hook (class-based
-// dark-toggle) und reicht den Wert an den shared TokensProvider
-// durch. Keine eigene State-Haltung — die class auf <html> ist die
-// SSoT, useSyncExternalStore im Hook synced das in React.
+// TokensBoot uses the browser-backed TokensApi hook (class-based
+// dark-toggle) and passes the value through to the shared
+// TokensProvider. No own state — the class on <html> is the
+// SSoT, useSyncExternalStore in the hook syncs that into React.
 function TokensBoot({ children }: { readonly children: ReactNode }): ReactNode {
   const api = useBrowserTokensApi();
   return <TokensProvider value={api}>{children}</TokensProvider>;
@@ -471,9 +500,9 @@ function BrowserNavBoot({
   );
 }
 
-// Sucht das Feature, dem ein vollständig qualifizierter ScreenQn gehört.
-// Returns undefined wenn der Screen in keinem Feature-Schema deklariert
-// ist — KumikoScreen rendert dann den "Screen not found"-Banner.
+// Finds the feature that owns a fully qualified ScreenQn.
+// Returns undefined if the screen isn't declared in any feature schema —
+// KumikoScreen then renders the "Screen not found" banner.
 function findOwnerFeature(app: AppSchema, qn: string): FeatureSchema | undefined {
   for (const feature of app.features) {
     for (const s of feature.screens) {
@@ -496,11 +525,11 @@ function RoutedScreen({
 }): ReactNode {
   const nav = useNav();
 
-  // ScreenId aus dem Route ist NICHT qualified — nav.route.screenId
-  // kommt aus dem URL-Path und ist die kurze Form ("order-list"). Wir
-  // müssen das ans richtige Feature heften. Strategie: durch alle
-  // Features iterieren bis das passende Screen-Decl auftaucht. Ohne
-  // Match → Fallback-Feature (das vom fallbackQn).
+  // ScreenId from the route is NOT qualified — nav.route.screenId
+  // comes from the URL path and is the short form ("order-list"). We
+  // need to pin it to the right feature. Strategy: iterate through all
+  // features until the matching screen decl turns up. No match →
+  // fallback feature (the one from fallbackQn).
   const { feature, qn, entityId } = useMemo(() => {
     if (nav.route === undefined) {
       return {
@@ -532,17 +561,17 @@ function RoutedScreen({
   >(() => {
     if (onRowClick !== undefined) return onRowClick;
     return (row, entityName) => {
-      // Edit-Screen für die Entity über alle Features suchen — im
-      // Single-Feature-Setup ist das das gleiche Feature wie das aktive,
-      // im Multi-Feature kann der Edit theoretisch in einem anderen
-      // Feature liegen (eines, das die Entity teilt).
+      // Search for the edit screen for the entity across all features —
+      // in a single-feature setup that's the same feature as the active
+      // one, in multi-feature the edit could theoretically live in a
+      // different feature (one that shares the entity).
       for (const f of app.features) {
         const editScreen = f.screens.find(
           (s) => s.type === "entityEdit" && s.entity === entityName,
         );
         if (editScreen) {
-          // editScreen.id ist QN-Form (registry-stamped); nav.navigate
-          // erwartet Short-Form. Sonst wird die URL doppelt-qualifiziert.
+          // editScreen.id is QN form (registry-stamped); nav.navigate
+          // expects the short form. Otherwise the URL gets double-qualified.
           nav.navigate({ screenId: lastSegment(editScreen.id), entityId: row.id });
           return;
         }
@@ -550,12 +579,12 @@ function RoutedScreen({
     };
   }, [onRowClick, app.features, nav]);
 
-  // Copy-Link-Action (Issue #912) für entityEdit-Update-Screens. Baut die
-  // absolute Permalink-URL aus der aktuellen Route + kopiert sie —
-  // `navigator`/`window` sind hier erlaubt (renderer-web, kein
-  // platform-neutrales Package). Kein Button ohne entityId (create-mode).
-  // Silent-catch bei Clipboard-Fehler (non-secure context) mirrort das
-  // bestehende Muster in pat-tokens-screen.tsx.
+  // Copy-link action (Issue #912) for entityEdit update screens. Builds
+  // the absolute permalink URL from the current route + copies it —
+  // `navigator`/`window` are allowed here (renderer-web, not a
+  // platform-neutral package). No button without entityId (create-mode).
+  // Silent-catch on clipboard error (non-secure context) mirrors the
+  // existing pattern in pat-tokens-screen.tsx.
   const effectiveOnCopyLink = useMemo<(() => Promise<void> | void) | undefined>(() => {
     const route = nav.route;
     if (route?.entityId === undefined) return undefined;

package/src/layout/nav-tree.tsx

@@ -17,7 +17,7 @@ import type {
   TreeAction,
   TreeNode,
 } from "@cosmicdrift/kumiko-framework/engine";
-import type { NavDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { NavDefinition, NavIconKey } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { NavNode, NavRegistrySlice } from "@cosmicdrift/kumiko-headless";
 import { resolveNavigation } from "@cosmicdrift/kumiko-headless";
 import type { AppSchema, FeatureSchema } from "@cosmicdrift/kumiko-renderer";
@@ -48,6 +48,7 @@ import {
   Hash,
   Home,
   KeyRound,
+  Languages,
   Layers,
   LayoutDashboard,
   LayoutGrid,
@@ -106,12 +107,18 @@ import {
 import { useDispatchTarget } from "./target-resolver-stub";
 import { parseTargetFromSearchParams } from "./target-url";
 
-// Nav-Icon-Registry: ein Nav-Eintrag setzt `icon: "<key>"` (im r.nav-Decl),
-// der Renderer mappt den symbolischen Key auf ein lucide-Component. Unknown
-// Keys → kein Icon (sauberer Fallback auf den Dot, kein Boot-Fail). Spiegelt
-// das NODE_ICONS-Muster vom Visual-Tree. App-Authors referenzieren nur diese
-// Keys; Erweiterung = neuer Eintrag hier (eine Quelle, alle Apps).
-const NAV_ICONS: Readonly<Record<string, typeof Folder>> = {
+// Nav-icon registry: a nav entry sets `icon: "<key>"` (in the r.nav decl),
+// the renderer maps the symbolic key to a lucide component. `NavIconKey` is
+// the closed vocabulary a feature author can write (packages/types/src/
+// nav-icon.ts); `satisfies` below makes this map a compile-time drift
+// guard — a key added to one without the other fails the build.
+//
+// `node.icon`/`TreeAction.icon` stay plain `string` at the resolved-tree
+// layer (dynamic/provider-supplied data isn't statically known), so the
+// runtime `Object.hasOwn` lookups below still see an unknown key on
+// occasion — that's the defense-in-depth fallback to the dot, not the
+// primary guard anymore.
+const NAV_ICONS = {
   dashboard: LayoutDashboard,
   "layout-grid": LayoutGrid,
   "book-open": BookOpen,
@@ -158,7 +165,13 @@ const NAV_ICONS: Readonly<Record<string, typeof Folder>> = {
   rocket: Rocket,
   // Was imported but never registered — `icon: "plus"` silently fell back.
   plus: Plus,
-};
+  languages: Languages,
+} as const satisfies Readonly<Record<NavIconKey, typeof Folder>>;
+
+// Widened alias for the two lookup sites below, which index by the plain
+// `string` icon key of the resolved NavNode/TreeAction tree — not the
+// closed NavIconKey union NAV_ICONS itself is typed against.
+const NAV_ICON_LOOKUP: Readonly<Record<string, typeof Folder | undefined>> = NAV_ICONS;
 
 export type NavTreeProps = {
   // Akzeptiert beide Shapes — AppSchema (multi-feature) oder
@@ -336,8 +349,17 @@ function NavLeadingIcon({
   label?: string;
 }): ReactNode {
   const iconKey = expanded && node.icon === "folder" ? "folder-open" : node.icon;
-  const NavIcon =
-    iconKey !== undefined && Object.hasOwn(NAV_ICONS, iconKey) ? NAV_ICONS[iconKey] : undefined;
+  const isKnownIcon = iconKey !== undefined && Object.hasOwn(NAV_ICONS, iconKey);
+  const NavIcon = iconKey !== undefined && isKnownIcon ? NAV_ICON_LOOKUP[iconKey] : undefined;
+  useEffect(() => {
+    if (iconKey !== undefined && !isKnownIcon) {
+      // biome-ignore lint/suspicious/noConsole: diagnostic for unregistered nav icon keys
+      console.warn(
+        `[kumiko] Nav entry "${node.qualifiedName}" references icon "${iconKey}", which is not ` +
+          `registered in NAV_ICONS — falling back to the dot indicator. Check the icon key spelling.`,
+      );
+    }
+  }, [iconKey, isKnownIcon, node.qualifiedName]);
   if (NavIcon !== undefined) return <NavIcon aria-hidden="true" className="shrink-0" />;
   const initial = label?.trim().charAt(0).toUpperCase();
   return (
@@ -526,10 +548,10 @@ function useNavNodeState(node: NavNode, collapsed: ReadonlySet<string>): NavNode
   };
 }
 
-// Action-Icon-Lookup: bekannter NAV_ICONS-Key → Lucide, sonst der rohe
-// String als Text (Provider-Konvention, kein Boot-Fail bei unknown).
+// Action icon lookup: registered NAV_ICONS key → Lucide icon, otherwise the
+// raw string as text (provider convention, no boot-fail on an unknown key).
 function ActionGlyph({ icon }: { readonly icon: string }): ReactNode {
-  const Icon = Object.hasOwn(NAV_ICONS, icon) ? NAV_ICONS[icon] : undefined;
+  const Icon = Object.hasOwn(NAV_ICONS, icon) ? NAV_ICON_LOOKUP[icon] : undefined;
   if (Icon !== undefined) return <Icon aria-hidden className="size-3.5" />;
   return (
     <span aria-hidden className="text-xs">

package/src/primitives/__tests__/date-parse.test.ts

@@ -171,4 +171,16 @@ describe("formatDatePlaceholder", () => {
   test("en-GB → day/month/year pattern with slash separator", () => {
     expect(formatDatePlaceholder("en-GB", enPlaceholderLetters)).toBe("DD/MM/YYYY");
   });
+
+  // #1879: a missing i18n key falls back to the raw, multi-character key
+  // string (see i18n.tsx) — the placeholder must clamp to one char per slot
+  // instead of repeating the whole fallback key.
+  test("multi-character letters (e.g. raw i18n fallback key) clamp to first code point", () => {
+    const rawKeyLetters = {
+      year: "kumiko.field.dateField.placeholderYear",
+      month: "kumiko.field.dateField.placeholderMonth",
+      day: "kumiko.field.dateField.placeholderDay",
+    };
+    expect(formatDatePlaceholder("de-DE", rawKeyLetters)).toBe("kk.kk.kkkk");
+  });
 });

package/src/primitives/__tests__/embedded-list-input.test.tsx

@@ -281,6 +281,32 @@ describe("EmbeddedListInput — issue rendering", () => {
     ).toBeTruthy();
   });
 
+  // #1876: a long validation message in a narrow cell must wrap instead of
+  // widening the whole `min-w-max` desktop table into horizontal scroll.
+  test("cellIssues in the desktop table are width-constrained and wrap", () => {
+    const rows = [{ description: "A", quantity: 1, amount: 100 }];
+    renderWithLocale(
+      <EmbeddedListInput
+        {...baseProps({
+          rows,
+          cellIssues: {
+            "0.description": [
+              issue(
+                "lines.0.description",
+                "This is a deliberately long validation message that must wrap instead of widening the table",
+              ),
+            ],
+          },
+        })}
+      />,
+    );
+    const desktop = within(screen.getByTestId("lines-desktop"));
+    const container = desktop.getByTestId("lines-cell-0-description-errors");
+    expect(container.className).toContain("max-w-[16rem]");
+    expect(container.className).toContain("whitespace-normal");
+    expect(container.className).toContain("break-words");
+  });
+
   test("rowIssues render under the matching row", () => {
     const rows = [{ description: "A", quantity: 1, amount: 100 }];
     renderWithLocale(

package/src/primitives/date-parse.ts

@@ -105,15 +105,22 @@ function localeDateOrder(locale: string): readonly DateSlot[] {
 // from formatToParts — nothing hardcoded per locale. `letters` is one
 // character per slot (from i18n); repeated to the slot's digit count
 // (day/month 2, year 4).
+// Clamps each slot letter to its first code point — `letters` normally comes
+// from i18n and can fall back to the raw, multi-character translation key
+// when a lookup misses, which would otherwise blow up the placeholder length.
+function firstCodePoint(s: string): string {
+  return [...s][0] ?? "?";
+}
+
 export function formatDatePlaceholder(
   locale: string,
   letters: { readonly year: string; readonly month: string; readonly day: string },
 ): string {
   return localeDateParts(locale)
     .map((part) => {
-      if (part.type === "year") return letters.year.repeat(4);
-      if (part.type === "month") return letters.month.repeat(2);
-      if (part.type === "day") return letters.day.repeat(2);
+      if (part.type === "year") return firstCodePoint(letters.year).repeat(4);
+      if (part.type === "month") return firstCodePoint(letters.month).repeat(2);
+      if (part.type === "day") return firstCodePoint(letters.day).repeat(2);
       return part.value;
     })
     .join("");

package/src/primitives/embedded-list-input.tsx

@@ -121,14 +121,27 @@ function parsePasteGrid(text: string): readonly (readonly string[])[] {
 function IssueMessages({
   issues,
   testId,
+  constrainWidth,
 }: {
   readonly issues: readonly FieldIssue[] | undefined;
   readonly testId?: string;
+  // Table cells sit inside a `min-w-max` table (see EmbeddedListInput below):
+  // a long, unbounded message there widens the whole table instead of
+  // wrapping, forcing horizontal scroll. Only the desktop table-cell path
+  // needs this — mobile cards and full-width row/list issues wrap naturally.
+  readonly constrainWidth?: boolean;
 }): ReactNode {
   const t = useTranslation();
   if (issues === undefined || issues.length === 0) return null;
   return (
-    <div role="alert" data-testid={testId} className="text-xs text-destructive">
+    <div
+      role="alert"
+      data-testid={testId}
+      className={cn(
+        "text-xs text-destructive",
+        constrainWidth === true && "max-w-[16rem] whitespace-normal break-words",
+      )}
+    >
       {issues.map((issue) => (
         <div key={`${issue.path}:${issue.code}`}>{t(issue.i18nKey, issue.params)}</div>
       ))}
@@ -554,6 +567,7 @@ export function EmbeddedListInput({
                               <IssueMessages
                                 issues={issues}
                                 testId={testIdFor(`cell-${rowIndex}-${column.field}-errors`)}
+                                constrainWidth
                               />
                             </TableCell>
                           );

package/src/primitives/index.tsx

@@ -1596,7 +1596,12 @@ function DefaultForm({
           onSubmit(e);
         }}
         data-testid={testId}
-        className="flex flex-col gap-4"
+        className={cn(
+          "flex flex-col gap-4",
+          // Bare forms stack sections without a card; without a divider a
+          // section boundary reads as a layout gap, not structure.
+          "[&>section:not(:first-child)]:border-t",
+        )}
       >
         <InsideFormContext.Provider value={true}>{children}</InsideFormContext.Provider>
         {actions !== undefined && (

package/src/sse/__tests__/live-events.test.ts

@@ -0,0 +1,99 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import type { LiveEvent } from "@cosmicdrift/kumiko-renderer";
+import { createEventSourceLiveEvents } from "../live-events";
+
+// happy-dom doesn't provide EventSource, and this module only needs
+// `typeof window !== "undefined"` to unlock — no real DOM required. Stub
+// both globals directly instead of pulling in the project's DOM test config.
+class FakeEventSource {
+  static instances: FakeEventSource[] = [];
+  private readonly listeners = new Map<string, Set<(e: MessageEvent) => void>>();
+
+  constructor(readonly url: string) {
+    FakeEventSource.instances.push(this);
+  }
+
+  addEventListener(type: string, listener: (e: MessageEvent) => void): void {
+    let set = this.listeners.get(type);
+    if (!set) {
+      set = new Set();
+      this.listeners.set(type, set);
+    }
+    set.add(listener);
+  }
+
+  close(): void {}
+
+  dispatch(entityName: string, data: unknown): void {
+    const event = { data: JSON.stringify(data) } as MessageEvent;
+    for (const listener of this.listeners.get(entityName) ?? []) listener(event);
+  }
+}
+
+const originalWindow = Object.getOwnPropertyDescriptor(globalThis, "window");
+const originalEventSource = Object.getOwnPropertyDescriptor(globalThis, "EventSource");
+
+beforeEach(() => {
+  FakeEventSource.instances.length = 0;
+  // biome-ignore lint/suspicious/noExplicitAny: test-only global stub
+  (globalThis as any).window = globalThis;
+  // biome-ignore lint/suspicious/noExplicitAny: test-only global stub
+  (globalThis as any).EventSource = FakeEventSource;
+});
+
+afterEach(() => {
+  if (originalWindow) Object.defineProperty(globalThis, "window", originalWindow);
+  else delete (globalThis as { window?: unknown }).window;
+  if (originalEventSource) Object.defineProperty(globalThis, "EventSource", originalEventSource);
+  else delete (globalThis as { EventSource?: unknown }).EventSource;
+});
+
+function entityEvent(overrides: Partial<LiveEvent["data"]> = {}): LiveEvent["data"] {
+  return {
+    id: "e1",
+    aggregateType: "invoice",
+    version: 1,
+    payload: {},
+    createdAt: "2026-01-01T00:00:00.000Z",
+    ...overrides,
+  };
+}
+
+describe("createEventSourceLiveEvents", () => {
+  test("any verb — including business verbs and the auto-verb 'forgotten' — triggers the entity listener", () => {
+    const liveEvents = createEventSourceLiveEvents();
+    const received: LiveEvent[] = [];
+    const unsubscribe = liveEvents("invoice", (event) => received.push(event));
+
+    const source = FakeEventSource.instances.at(-1);
+    expect(source).toBeDefined();
+    // The server now names every frame after the entity, not the verb — a
+    // business verb like "archived" or the auto-verb "forgotten" never
+    // needed its own listener because no verb-specific listener exists.
+    source?.dispatch("invoice", entityEvent({ id: "archived-1" }));
+    source?.dispatch("invoice", entityEvent({ id: "forgotten-1" }));
+
+    expect(received).toHaveLength(2);
+    expect(received[0]?.type).toBe("invoice");
+    expect(received[1]?.data.id).toBe("forgotten-1");
+
+    unsubscribe();
+  });
+
+  test("a subscriber for one entity does not receive another entity's frame", () => {
+    const liveEvents = createEventSourceLiveEvents();
+    const invoiceEvents: LiveEvent[] = [];
+    const userEvents: LiveEvent[] = [];
+    const unsubInvoice = liveEvents("invoice", (event) => invoiceEvents.push(event));
+    const unsubUser = liveEvents("user", (event) => userEvents.push(event));
+
+    const source = FakeEventSource.instances.at(-1);
+    source?.dispatch("invoice", entityEvent({ aggregateType: "invoice" }));
+
+    expect(invoiceEvents).toHaveLength(1);
+    expect(userEvents).toHaveLength(0);
+
+    unsubInvoice();
+    unsubUser();
+  });
+});

package/src/sse/live-events.ts

@@ -3,15 +3,13 @@ import type { LiveEvent, LiveEventSubscriber } from "@cosmicdrift/kumiko-rendere
 // EventSource-backed Live-Events für den Web-Renderer. Der shared
 // Layer konsumiert nur das `LiveEventSubscriber`-Interface; diese Datei
 // liefert eine Factory die intern eine EventSource auf /api/sse aufbaut,
-// pro (entity, verb)-Kombi einen addEventListener verdrahtet und
-// subscriptions routet.
+// pro Entity EINEN addEventListener verdrahtet (Server benennt den Frame
+// nach dem aggregateType, siehe sse-route.ts) und subscriptions routet.
 //
 // Verbindungs-Lifecycle: lazy beim ersten subscribe, close wenn der
 // letzte unsubscribe feuert. Mehrere Consumer teilen sich dieselbe
 // EventSource, sparen CPU + Server-Load.
 
-const VERBS = ["created", "updated", "deleted", "restored"] as const;
-
 type EntitySubscriber = {
   readonly entityName: string;
   readonly listener: (event: LiveEvent) => void;
@@ -34,18 +32,21 @@ export function createEventSourceLiveEvents(
 
   const subscribers = new Set<EntitySubscriber>();
   let source: EventSource | undefined;
-  const wiredTypes = new Set<string>();
+  const wiredEntities = new Set<string>();
 
-  const handleEvent = (type: string, raw: string): void => {
+  // `subscribers` is a flat Set across all entities — the browser-side
+  // addEventListener(entityName, ...) gate below only filters which frames
+  // arrive at all, not which subscriber a given frame is for. Without this
+  // filter, an `invoice` subscriber would also fire on every `user` frame.
+  const handleEvent = (raw: string): void => {
     let parsed: LiveEvent["data"];
     try {
       parsed = JSON.parse(raw) as LiveEvent["data"];
     } catch {
       // skip: malformed SSE payload, drop it rather than crash all subscribers
-      // zu crashen und alle anderen subscribers mitzureißen.
       return;
     }
-    const event: LiveEvent = { type, data: parsed };
+    const event: LiveEvent = { type: parsed.aggregateType, data: parsed };
     for (const sub of subscribers) {
       if (sub.entityName === parsed.aggregateType) sub.listener(event);
     }
@@ -62,14 +63,12 @@ export function createEventSourceLiveEvents(
   const ensureListenersForEntity = (entityName: string): void => {
     // skip: not connected yet, listeners get wired once ensureConnected runs
     if (source === undefined) return;
-    for (const verb of VERBS) {
-      const type = `${entityName}.${verb}`;
-      if (wiredTypes.has(type)) continue;
-      source.addEventListener(type, (e) => {
-        handleEvent(type, (e as MessageEvent).data);
-      });
-      wiredTypes.add(type);
-    }
+    // skip: already wired for this entity
+    if (wiredEntities.has(entityName)) return;
+    source.addEventListener(entityName, (e) => {
+      handleEvent((e as MessageEvent).data);
+    });
+    wiredEntities.add(entityName);
   };
 
   const closeIfEmpty = (): void => {
@@ -79,7 +78,7 @@ export function createEventSourceLiveEvents(
     if (source === undefined) return;
     source.close();
     source = undefined;
-    wiredTypes.clear();
+    wiredEntities.clear();
   };
 
   return (entityName, listener) => {