@cosmicdrift/kumiko-renderer-web 0.156.2 → 0.157.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.156.2",
+  "version": "0.157.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.156.2",
-    "@cosmicdrift/kumiko-headless": "0.156.2",
-    "@cosmicdrift/kumiko-renderer": "0.156.2",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.157.0",
+    "@cosmicdrift/kumiko-headless": "0.157.0",
+    "@cosmicdrift/kumiko-renderer": "0.157.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__/kumiko-screen.test.tsx

@@ -432,6 +432,31 @@ describe("KumikoScreen", () => {
     expect(screen.queryByTestId("render-edit-form-error")).toBeNull();
   });
 
+  test("entityEdit update-mode: query-Error zeigt übersetzten Text statt rohem i18nKey (issue #1193)", 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={schema} qn="tasks:screen:task-edit" entityId="task-1" />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-error")).toBeTruthy());
+    const bannerText = screen.getByTestId("kumiko-screen-error").textContent;
+    expect(bannerText).toBe(kumikoDefaultTranslations["en"]?.["errors.access.denied"] ?? "");
+    expect(bannerText).not.toBe("errors.access.denied");
+  });
+
   // RowActions-Mapping (Tier 2.7a Resolution-Layer): pinst dass
   // EntityListBody die Schema-Form (handler-QN, label-i18nKey, payload-
   // builder, visible-Function, confirmLabel) zu DataTableRowAction

package/src/widgets/__tests__/result-panel.test.tsx

@@ -32,6 +32,29 @@ describe("ResultTable", () => {
     expect(container.querySelector(".rounded-lg.border.bg-card")).toBeNull();
     expect(container.querySelector("thead.bg-muted")).toBeNull();
   });
+
+  test("footer rows render as table rows spanning all-but-last column, value under the last column", () => {
+    const { container } = render(
+      <ResultTable
+        columns={COLUMNS}
+        rows={ROWS}
+        rowKey={(r) => String(r.year)}
+        testId="rt"
+        footer={[
+          { label: "Subtotal", value: "300" },
+          { label: "Total", value: "300", emphasize: true },
+        ]}
+      />,
+    );
+    const footerRows = container.querySelectorAll("tbody tr");
+    // 2 data rows + 2 footer rows.
+    expect(footerRows).toHaveLength(4);
+    const totalRow = footerRows[3];
+    expect(totalRow?.querySelector("td[colspan]")?.textContent).toBe("Total");
+    expect(totalRow?.querySelectorAll("td")[1]?.textContent).toBe("300");
+    expect(totalRow?.className).toContain("font-semibold");
+    expect(screen.getByText("Subtotal")).toBeTruthy();
+  });
 });
 
 describe("ComparisonTable", () => {

package/src/widgets/result-panel.tsx

@@ -54,6 +54,12 @@ export interface ResultColumn<Row> {
   readonly cell: (row: Row) => ReactNode;
 }
 
+export interface ResultTableFooterRow {
+  readonly label: string;
+  readonly value: ReactNode;
+  readonly emphasize?: boolean;
+}
+
 /** Statische, prop-getriebene Ergebnistabelle für berechnete Zeilen (Tranchen,
  *  Szenarien). Nimmt dem Screen die `<table>`+tabular-nums-Ketten ab.
  *  ponytail: bewusst die minimale Read-only-Tabelle — für Sort/Pager/Facets
@@ -65,6 +71,7 @@ export function ResultTable<Row>({
   testId,
   className,
   card,
+  footer,
 }: {
   readonly columns: readonly ResultColumn<Row>[];
   readonly rows: readonly Row[];
@@ -74,6 +81,11 @@ export function ResultTable<Row>({
   /** Rahmen-Look wie die CRUD-Liste (DataTable): gerundeter Border-Container +
    *  bg-muted-Header-Band. Default = bare (nur die Tabelle, ohne Container). */
   readonly card?: boolean;
+  /** Summary rows (Subtotal/Tax/Total) rendered as real `<tr>`s in the same
+   *  `<table>` instead of a separate flex-div next to it — guarantees
+   *  column-alignment to the last (typically "Amount") column instead of
+   *  approximating it with an independent layout. */
+  readonly footer?: readonly ResultTableFooterRow[];
 }): ReactNode {
   const table = (
     <div className="overflow-x-auto">
@@ -111,6 +123,28 @@ export function ResultTable<Row>({
               ))}
             </tr>
           ))}
+          {footer?.map((row, i) => (
+            <tr
+              key={row.label}
+              className={cn(i === 0 && "border-t", row.emphasize === true && "font-semibold")}
+            >
+              <td
+                colSpan={Math.max(columns.length - 1, 1)}
+                className={cn(
+                  "py-1.5 text-muted-foreground",
+                  card === true && "px-3",
+                  row.emphasize === true && "text-foreground",
+                )}
+              >
+                {row.label}
+              </td>
+              {columns.length > 1 && (
+                <td className={cn("py-1.5 text-right tabular-nums", card === true && "px-3")}>
+                  {row.value}
+                </td>
+              )}
+            </tr>
+          ))}
         </tbody>
       </table>
     </div>