@cosmicdrift/kumiko-renderer-web 0.275.0 → 0.276.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.275.0",
+  "version": "0.276.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.275.0",
-    "@cosmicdrift/kumiko-headless": "0.275.0",
-    "@cosmicdrift/kumiko-renderer": "0.275.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.276.0",
+    "@cosmicdrift/kumiko-headless": "0.276.0",
+    "@cosmicdrift/kumiko-renderer": "0.276.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -66,7 +66,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.275.0"
+    "@cosmicdrift/kumiko-locale-de": "0.276.0"
   },
   "repository": {
     "type": "git",

package/src/__tests__/kumiko-screen-money-tenant-currency.test.tsx

@@ -0,0 +1,188 @@
+// fw#2933: a `money` field declaring `currency: { kind: "tenant" }` resolves
+// its empty-value currency from the tenant-settings config key
+// (`tenant-settings:config:currency`) via `config:query:values`, instead of
+// entity.defaultCurrency ?? "EUR". A stored value always keeps its own
+// currency, and a field without the declaration is unaffected.
+
+import { describe, expect, test } from "bun:test";
+import type {
+  EntityDefinition,
+  EntityEditScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
+import { DispatcherProvider, KumikoScreen } from "@cosmicdrift/kumiko-renderer";
+import userEvent from "@testing-library/user-event";
+import { createMockDispatcher, render, screen, waitFor } from "./test-utils";
+
+// `price` opts into the tenant-settings currency; `cost`/`fee` don't and
+// keep today's entity.defaultCurrency ("EUR") fallback.
+const invoiceEntity = {
+  defaultCurrency: "EUR",
+  fields: {
+    price: { type: "money", currency: { kind: "tenant" } },
+    cost: { type: "money" },
+    fee: { type: "money" },
+  },
+} as unknown as EntityDefinition;
+
+const editScreen: EntityEditScreenDefinition = {
+  id: "invoice-edit",
+  type: "entityEdit",
+  entity: "invoice",
+  layout: { sections: [{ fields: ["price", "cost", "fee"] }] },
+};
+
+const schema: FeatureSchema = {
+  featureName: "billing",
+  entities: { invoice: invoiceEntity },
+  screens: [editScreen],
+};
+
+const TENANT_CURRENCY_VALUES = {
+  "tenant-settings:config:currency": { value: "GBP", scope: "tenant", source: "tenant-row" },
+};
+
+function makeDispatcher(overrides: Partial<Dispatcher> = {}): Dispatcher {
+  const base = createMockDispatcher({
+    query: (async (type: string) => {
+      if (type === "billing:query:invoice:detail") {
+        return {
+          isSuccess: true,
+          data: {
+            id: "inv-1",
+            version: 4,
+            price: null,
+            cost: { amount: 50, currency: "EUR" },
+            fee: null,
+          },
+        };
+      }
+      if (type === "config:query:values") {
+        return { isSuccess: true, data: TENANT_CURRENCY_VALUES };
+      }
+      return { isSuccess: true, data: { rows: [], nextCursor: null } };
+    }) as unknown as Dispatcher["query"],
+  });
+  return { ...base, ...overrides };
+}
+
+async function typeMoney(testId: string, amount: string): Promise<void> {
+  const input = screen.getByTestId(testId).querySelector("input");
+  if (!input) throw new Error(`expected an <input> inside ${testId}`);
+  const user = userEvent.setup();
+  await user.clear(input);
+  await user.type(input, amount);
+}
+
+describe("money field currency: { kind: 'tenant' } (fw#2933)", () => {
+  test("update: empty tenant-declared field uses the tenant currency; stored value keeps its own currency; undeclared empty field keeps entity.defaultCurrency", async () => {
+    const writeCalls: { type: string; payload: unknown }[] = [];
+    const dispatcher = makeDispatcher({
+      write: (async (type: string, payload: unknown) => {
+        writeCalls.push({ type, payload });
+        return { isSuccess: true, data: { id: "inv-1" } };
+      }) as unknown as Dispatcher["write"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={schema} qn="billing:screen:invoice-edit" entityId="inv-1" />
+      </DispatcherProvider>,
+    );
+
+    // Two sequential real async stages (detail, then tenant-currency) — the
+    // default 1000ms waitFor timeout flakes under load (render-edit.test.tsx
+    // uses the same 3000ms bump for comparable multi-stage async waits).
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull(), {
+      timeout: 3000,
+    });
+    expect(screen.getByTestId("render-edit-form")).toBeTruthy();
+
+    await typeMoney("field-price", "10.00");
+    await typeMoney("field-cost", "75.00");
+    await typeMoney("field-fee", "5.00");
+    await userEvent.setup().click(screen.getByTestId("render-edit-submit"));
+
+    await waitFor(() => expect(writeCalls.length).toBe(1));
+    const [call] = writeCalls;
+    expect(call?.type).toBe("billing:write:invoice:update");
+    expect(call?.payload).toEqual({
+      id: "inv-1",
+      version: 4,
+      changes: {
+        price: { amount: 10, currency: "GBP" },
+        cost: { amount: 75, currency: "EUR" },
+        fee: { amount: 5, currency: "EUR" },
+      },
+    });
+  });
+
+  test("create: untouched tenant-declared field submits with the tenant currency, not EUR", async () => {
+    const writeCalls: { type: string; payload: unknown }[] = [];
+    const dispatcher = makeDispatcher({
+      write: (async (type: string, payload: unknown) => {
+        writeCalls.push({ type, payload });
+        return { isSuccess: true, data: { id: "inv-2" } };
+      }) as unknown as Dispatcher["write"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={schema} qn="billing:screen:invoice-edit" />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull(), {
+      timeout: 3000,
+    });
+    // The submit button stays disabled while the form is pristine — touch an
+    // unrelated field so the click below actually fires; `price` itself is
+    // deliberately left untouched to prove its initial value already carries
+    // the tenant currency.
+    await typeMoney("field-cost", "20.00");
+    await userEvent.setup().click(screen.getByTestId("render-edit-submit"));
+
+    await waitFor(() => expect(writeCalls.length).toBe(1));
+    const [call] = writeCalls;
+    expect(call?.type).toBe("billing:write:invoice:create");
+    const payload = call?.payload as { price?: unknown; cost?: unknown; fee?: unknown };
+    expect(payload.price).toEqual({ amount: 0, currency: "GBP" });
+    expect(payload.cost).toEqual({ amount: 20, currency: "EUR" });
+    expect(payload.fee).toEqual({ amount: 0, currency: "EUR" });
+  });
+
+  test("entity without a tenant-declared money field never calls config:query:values", async () => {
+    const plainEntity = {
+      defaultCurrency: "EUR",
+      fields: { cost: { type: "money" } },
+    } as unknown as EntityDefinition;
+    const plainScreen: EntityEditScreenDefinition = {
+      id: "plain-edit",
+      type: "entityEdit",
+      entity: "plain",
+      layout: { sections: [{ fields: ["cost"] }] },
+    };
+    const plainSchema: FeatureSchema = {
+      featureName: "billing",
+      entities: { plain: plainEntity },
+      screens: [plainScreen],
+    };
+    const queriedTypes: string[] = [];
+    const dispatcher = makeDispatcher({
+      query: (async (type: string) => {
+        queriedTypes.push(type);
+        return { isSuccess: true, data: { rows: [], nextCursor: null } };
+      }) as unknown as Dispatcher["query"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={plainSchema} qn="billing:screen:plain-edit" />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByTestId("render-edit-form")).toBeTruthy());
+    expect(queriedTypes).not.toContain("config:query:values");
+  });
+});

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

@@ -3621,6 +3621,75 @@ describe("RenderEdit fields filter", () => {
   });
 });
 
+describe("RenderEdit — slots.titleAction", () => {
+  function TitleChips({ entityId }: { readonly entityId: string | null }): ReactNode {
+    return (
+      <span data-testid="title-chips" data-entity-id={entityId ?? "(create)"}>
+        3 left
+      </span>
+    );
+  }
+
+  test("titleAction renders in the form title row, next to the title and outside the actions", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <ExtensionSectionsProvider value={{ TitleChips }}>
+          <RenderEdit<TestValues>
+            screen={{
+              id: "orders:screen:order-edit-title-action",
+              type: "entityEdit",
+              entity: "order",
+              description: "Edit the order",
+              layout: {
+                sections: [{ title: "Basics", columns: 1, fields: [{ field: "title" }] }],
+              },
+              slots: { titleAction: { react: { __component: "TitleChips" } } },
+            }}
+            entity={orderEntity}
+            featureName="orders"
+            initial={{ title: "Acme", count: 0, isUrgent: false }}
+            writeCommand="order:update"
+            entityId="order-1"
+          />
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+
+    const titleAction = screen.getByTestId("render-edit-form-title-action");
+    const chips = screen.getByTestId("title-chips");
+    expect(titleAction.contains(chips)).toBe(true);
+    expect(chips.getAttribute("data-entity-id")).toBe("order-1");
+    const titleRow = titleAction.parentElement;
+    expect(titleRow?.contains(screen.getByTestId("render-edit-form-title"))).toBe(true);
+    expect(
+      screen.getByTestId("render-edit-form-actions").querySelector('[data-testid="title-chips"]'),
+    ).toBeNull();
+  });
+
+  test("without titleAction the title row has no action container", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit<TestValues>
+          screen={{
+            id: "orders:screen:order-edit-plain-title",
+            type: "entityEdit",
+            entity: "order",
+            description: "Edit the order",
+            layout: { sections: [{ title: "Basics", columns: 1, fields: [{ field: "title" }] }] },
+          }}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "Acme", count: 0, isUrgent: false }}
+          writeCommand="order:update"
+          entityId="order-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    expect(screen.queryByTestId("render-edit-form-title-action")).toBeNull();
+  });
+});
+
 describe("RenderEdit — slots.header", () => {
   function HeaderExtra({ entityId }: { readonly entityId: string | null }): ReactNode {
     return (

package/src/primitives/index.tsx

@@ -2294,39 +2294,52 @@ function FormSections({
 function FormTitleBlock({
   title,
   subtitle,
+  titleAction,
   testId,
   bordered,
   fillHeight,
 }: {
   readonly title: ReactNode;
   readonly subtitle: ReactNode;
+  readonly titleAction: ReactNode;
   readonly testId: string | undefined;
   readonly bordered: boolean;
   readonly fillHeight: boolean | undefined;
 }): ReactNode {
-  if (title === undefined && subtitle === undefined) return null;
+  if (title === undefined && subtitle === undefined && titleAction === undefined) return null;
   return (
     <div
       className={cn(
+        "flex items-start justify-between gap-4",
         bordered ? cn(cardHeaderBorder, "px-6 pb-4 pt-5") : "pb-4",
         fillHeight === true && "shrink-0",
       )}
     >
-      {title !== undefined && (
-        <h2
-          data-testid={testId !== undefined ? `${testId}-title` : undefined}
-          className="text-lg font-semibold tracking-tight"
-        >
-          {title}
-        </h2>
-      )}
-      {subtitle !== undefined && (
-        <p
-          data-testid={testId !== undefined ? `${testId}-subtitle` : undefined}
-          className="mt-1 text-sm text-muted-foreground"
+      <div className="min-w-0">
+        {title !== undefined && (
+          <h2
+            data-testid={testId !== undefined ? `${testId}-title` : undefined}
+            className="text-lg font-semibold tracking-tight"
+          >
+            {title}
+          </h2>
+        )}
+        {subtitle !== undefined && (
+          <p
+            data-testid={testId !== undefined ? `${testId}-subtitle` : undefined}
+            className="mt-1 text-sm text-muted-foreground"
+          >
+            {subtitle}
+          </p>
+        )}
+      </div>
+      {titleAction !== undefined && (
+        <div
+          data-testid={testId !== undefined ? `${testId}-title-action` : undefined}
+          className="flex shrink-0 flex-wrap items-center justify-end gap-2"
         >
-          {subtitle}
-        </p>
+          {titleAction}
+        </div>
       )}
     </div>
   );
@@ -2397,6 +2410,7 @@ function DefaultForm({
   width,
   stickyActions,
   headerRegion,
+  titleAction,
   fillHeight,
   chromeless,
 }: FormProps): ReactNode {
@@ -2473,6 +2487,7 @@ function DefaultForm({
           <FormTitleBlock
             title={title}
             subtitle={subtitle}
+            titleAction={titleAction}
             testId={testId}
             bordered={false}
             fillHeight={fillHeight}
@@ -2519,6 +2534,7 @@ function DefaultForm({
           <FormTitleBlock
             title={title}
             subtitle={subtitle}
+            titleAction={titleAction}
             testId={testId}
             bordered={true}
             fillHeight={fillHeight}