@cosmicdrift/kumiko-renderer-web 0.248.0 → 0.250.0

package/package.json

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

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

@@ -816,6 +816,69 @@ describe("KumikoScreen", () => {
     expect(screen.queryByText("raw fallback — must NOT appear")).toBeNull();
   });
 
+  // fw#2752: navigate rowActions may now carry style="danger" — it renders
+  // red like the writeHandler variant, but does NOT force a confirm dialog
+  // (the target form/screen is itself the confirmation).
+  test("entityList rowActions kind=navigate mit style=danger: rot, aber navigiert sofort ohne Dialog", async () => {
+    const navigateCalls: { screenId: string }[] = [];
+    const memoryNav = {
+      route: { screenId: "task-list" },
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
+      replace: () => undefined,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
+      searchParams: {},
+      setSearchParams: () => undefined,
+    };
+    const dispatcher = makeDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: {
+          rows: [{ id: "r1", title: "Alpha", count: 1, done: false }],
+          nextCursor: null,
+        },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    const screenWithDangerNav: EntityListScreenDefinition = {
+      id: "task-list",
+      type: "entityList",
+      entity: "task",
+      columns: ["title"],
+      rowActions: [
+        {
+          kind: "navigate",
+          id: "terminate",
+          label: "actions.terminate",
+          screen: "task-edit",
+          style: "danger",
+        },
+      ],
+    };
+
+    const { NavProvider } = await import("@cosmicdrift/kumiko-renderer");
+    const user = userEvent.setup();
+    render(
+      <NavProvider value={memoryNav}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={{ ...schema, screens: [screenWithDangerNav] }}
+            qn="tasks:screen:task-list"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+
+    const button = screen.getByTestId("row-r1-action-terminate");
+    expect(button.className).toContain("text-destructive");
+
+    await user.click(button);
+    await waitFor(() => expect(navigateCalls).toEqual([{ screenId: "task-edit" }]));
+    expect(screen.queryByTestId("row-r1-action-terminate-dialog")).toBeNull();
+  });
+
   // Tier 2.7e-1: rowAction kind="navigate" — Click ruft nav.navigate
   // mit screen-id, ggf. mit URL-Search-Params aus params(row).
   // Reihenfolge ist Teil des Contracts: navigate ZUERST, dann
@@ -1229,6 +1292,65 @@ describe("KumikoScreen", () => {
     expect(navigateCalls).toEqual([{ screenId: "task-edit" }]);
   });
 
+  // fw#2752: same decoupling as the rowAction variant — style="danger" on a
+  // navigate toolbarAction renders the destructive button variant without
+  // forcing a confirm dialog.
+  test("entityList toolbarActions navigate-kind mit style=danger: destructive Button, navigiert sofort ohne Dialog", async () => {
+    const navigateCalls: { screenId: string }[] = [];
+    const dispatcher = makeDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { rows: [{ id: "r1", title: "x", count: 0, done: false }], nextCursor: null },
+      })) as unknown as Dispatcher["query"],
+    });
+    const memoryNav = {
+      route: { screenId: "task-list" },
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
+      replace: () => undefined,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
+      searchParams: {},
+      setSearchParams: () => undefined,
+    };
+    const screenWithToolbar: EntityListScreenDefinition = {
+      id: "task-list",
+      type: "entityList",
+      entity: "task",
+      columns: ["title"],
+      toolbarActions: [
+        {
+          kind: "navigate",
+          id: "terminate-all",
+          label: "actions.terminate-all",
+          screen: "task-edit",
+          style: "danger",
+        },
+      ],
+    };
+
+    const { NavProvider } = await import("@cosmicdrift/kumiko-renderer");
+    const user = userEvent.setup();
+    render(
+      <NavProvider value={memoryNav}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={{ ...schema, screens: [screenWithToolbar] }}
+            qn="tasks:screen:task-list"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+
+    const button = screen.getByTestId("render-list-toolbar-action-terminate-all");
+    expect(button.getAttribute("data-variant")).toBe("destructive");
+
+    await user.click(button);
+    await waitFor(() => expect(navigateCalls).toEqual([{ screenId: "task-edit" }]));
+    expect(screen.queryByTestId("render-list-toolbar-action-terminate-all-dialog")).toBeNull();
+  });
+
   test("entityList toolbarActions writeHandler-kind: Click → dispatcher.write", async () => {
     const writeCalls: { type: string; payload: unknown }[] = [];
     const dispatcher = makeDispatcher({
@@ -1789,6 +1911,67 @@ describe("KumikoScreen", () => {
     expect(writeCalls[0]?.payload).toEqual({ title: "New Task", priority: 1 });
   });
 
+  // fw#2752: actionForm submitStyle reaches the submit button.
+  test("actionForm submitStyle='danger': submit button renders destructive variant", async () => {
+    const dispatcher = makeDispatcher({
+      write: (async () => ({
+        isSuccess: true,
+        data: { id: "new-id" },
+      })) as unknown as Dispatcher["write"],
+    });
+
+    const actionScreen: ActionFormScreenDefinition = {
+      id: "quick-add",
+      type: "actionForm",
+      handler: "tasks:write:task:quick-add",
+      submitStyle: "danger",
+      fields: {
+        title: { type: "text", required: true },
+        priority: { type: "number", default: 1 },
+      },
+      layout: { sections: [{ title: "Basics", fields: ["title", "priority"] }] },
+    };
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={{ ...schema, screens: [actionScreen] }} qn="tasks:screen:quick-add" />
+      </DispatcherProvider>,
+    );
+
+    expect(screen.getByTestId("render-edit-submit").getAttribute("data-variant")).toBe(
+      "destructive",
+    );
+  });
+
+  // fw#2752: actionForm submitStyle reaches the submit button.
+  test("actionForm ohne submitStyle: submit button renders default variant", async () => {
+    const dispatcher = makeDispatcher({
+      write: (async () => ({
+        isSuccess: true,
+        data: { id: "new-id" },
+      })) as unknown as Dispatcher["write"],
+    });
+
+    const actionScreen: ActionFormScreenDefinition = {
+      id: "quick-add",
+      type: "actionForm",
+      handler: "tasks:write:task:quick-add",
+      fields: {
+        title: { type: "text", required: true },
+        priority: { type: "number", default: 1 },
+      },
+      layout: { sections: [{ title: "Basics", fields: ["title", "priority"] }] },
+    };
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={{ ...schema, screens: [actionScreen] }} qn="tasks:screen:quick-add" />
+      </DispatcherProvider>,
+    );
+
+    expect(screen.getByTestId("render-edit-submit").getAttribute("data-variant")).toBe("default");
+  });
+
   test("actionForm mit redirect auf entityList: nach success → navigate ohne entityId (#2419)", async () => {
     const navigateCalls: NavTarget[] = [];
     const dispatcher = makeDispatcher({

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

@@ -102,6 +102,39 @@ describe("RenderEdit", () => {
     expect(screen.queryByTestId("field-notes")).toBeNull();
   });
 
+  // fw#2752: submitVariant carries an actionForm's submitStyle through to the
+  // submit button — "danger" for a destructive handler (terminate, revoke).
+  test("submitVariant='danger' renders the destructive submit button; default stays primary", () => {
+    const { rerender } = render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit<TestValues>
+          screen={makeScreen()}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "", count: 0, isUrgent: false }}
+          writeCommand="order:create"
+          submitVariant="danger"
+        />
+      </DispatcherProvider>,
+    );
+    expect(screen.getByTestId("render-edit-submit").getAttribute("data-variant")).toBe(
+      "destructive",
+    );
+
+    rerender(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit<TestValues>
+          screen={makeScreen()}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "", count: 0, isUrgent: false }}
+          writeCommand="order:create"
+        />
+      </DispatcherProvider>,
+    );
+    expect(screen.getByTestId("render-edit-submit").getAttribute("data-variant")).toBe("default");
+  });
+
   // 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", () => {

package/src/primitives/__tests__/select-display-request.test.tsx

@@ -10,8 +10,8 @@ import { defaultPrimitives } from "../index";
 
 const { Field, Input } = defaultPrimitives;
 
-// Six options, every label past the 14-char threshold — the heuristic would
-// render a dropdown for these.
+// Six options, past the heuristic's four-option threshold — it would render a
+// dropdown for these.
 const HEURISTIC_REJECTS = [
   "Background Jobs Queue",
   "Inbound Mail Processing",
@@ -21,7 +21,7 @@ const HEURISTIC_REJECTS = [
   "Search Index Rebuild",
 ];
 
-// Three short labels — the heuristic would render the radio group for these.
+// Three options — the heuristic would render the radio group for these.
 const HEURISTIC_ACCEPTS = ["Draft", "Review", "Done"];
 
 function renderSelect(

package/src/primitives/__tests__/select-segmented.test.tsx

@@ -1,7 +1,8 @@
 // Segment control for `kind: "select"` with a small closed option set
 // (edit-existing screenshot feedback): a Status field with 3 short values
-// no longer stretches into a full-width dropdown. Threshold: ≤4 options,
-// each label ≤14 chars — otherwise the unchanged ComboboxInput dropdown.
+// no longer stretches into a full-width dropdown. Threshold: ≤4 options —
+// otherwise the unchanged ComboboxInput dropdown. Label length is explicitly
+// not part of the threshold (#2606).
 
 import { describe, expect, test } from "bun:test";
 import { fireEvent } from "@testing-library/react";
@@ -52,10 +53,10 @@ describe("DefaultInput select → segmented control (edit-existing feedback)", (
     expect(screen.getByTestId("combobox-status")).toBeTruthy();
   });
 
-  test("3 options with one long label (>14 chars) keep the dropdown", () => {
+  test("a long label no longer pushes the field into the dropdown", () => {
     renderSelect(["Draft", "Review", "Published Status"]);
-    expect(screen.queryByRole("radiogroup")).toBeNull();
-    expect(screen.getByTestId("combobox-status")).toBeTruthy();
+    expect(screen.queryByTestId("combobox-status")).toBeNull();
+    expect(screen.getAllByRole("radio")).toHaveLength(3);
   });
 
   test("clicking a segment reports the same value the dropdown's onChange would give", () => {
@@ -82,3 +83,54 @@ describe("DefaultInput select → segmented control (edit-existing feedback)", (
     expect(changes).toEqual([]);
   });
 });
+
+// offlot-app's language picker from #2606: same four option values, the German
+// translations land at 14 chars and the English ones above it.
+const LANGUAGE_OPTIONS_EN = [
+  { value: "", label: "Select a language" },
+  { value: "de", label: "German" },
+  { value: "en", label: "English" },
+  { value: "es", label: "Spanish" },
+];
+
+const LANGUAGE_OPTIONS_DE = [
+  { value: "", label: "Sprache wählen" },
+  { value: "de", label: "Deutsch" },
+  { value: "en", label: "Englisch" },
+  { value: "es", label: "Spanisch" },
+];
+
+function renderedSelectWidget(
+  options: readonly { readonly value: string; readonly label: string }[],
+): "radiogroup" | "combobox" | "neither" {
+  const { container, unmount } = render(
+    <Field id="language" label="Language" testId="field-language">
+      <Input
+        kind="select"
+        id="language"
+        name="language"
+        value=""
+        onChange={() => {}}
+        options={options}
+      />
+    </Field>,
+  );
+  const hasRadioGroup = container.querySelector('[role="radiogroup"]') !== null;
+  const hasCombobox = container.querySelector('[data-testid="combobox-language"]') !== null;
+  unmount();
+  if (hasRadioGroup) return "radiogroup";
+  return hasCombobox ? "combobox" : "neither";
+}
+
+describe("DefaultInput select → widget choice is independent of the UI language", () => {
+  test("translated labels of different lengths pick the same widget", () => {
+    expect(renderedSelectWidget(LANGUAGE_OPTIONS_EN)).toBe(
+      renderedSelectWidget(LANGUAGE_OPTIONS_DE),
+    );
+  });
+
+  test("and that widget is the segmented control both times", () => {
+    expect(renderedSelectWidget(LANGUAGE_OPTIONS_EN)).toBe("radiogroup");
+    expect(renderedSelectWidget(LANGUAGE_OPTIONS_DE)).toBe("radiogroup");
+  });
+});

package/src/primitives/index.tsx

@@ -426,16 +426,14 @@ function withUnitSuffix(unit: string | undefined, input: ReactNode): ReactNode {
 // Default presentation for `kind: "select"` with a small closed option set —
 // a 4-value Status field looked wrong stretched into a full-width dropdown
 // (edit-existing screenshot feedback). Only consulted when the caller states
-// no `display` of its own; an explicit `display` wins (#2711).
+// no `display` of its own; an explicit `display` wins (#2711). The option
+// count is the only criterion: labels arrive already translated, so the former
+// label-length threshold made the widget type depend on the active UI language
+// (#2606). Labels that no longer fit wrap inside the group.
 const SEGMENTED_SELECT_MAX_OPTIONS = 4;
-const SEGMENTED_SELECT_MAX_LABEL_LENGTH = 14;
 
-function isSegmentedSelectEligible(options: readonly { readonly label: string }[]): boolean {
-  return (
-    options.length > 0 &&
-    options.length <= SEGMENTED_SELECT_MAX_OPTIONS &&
-    options.every((o) => o.label.length <= SEGMENTED_SELECT_MAX_LABEL_LENGTH)
-  );
+function isSegmentedSelectEligible(options: readonly unknown[]): boolean {
+  return options.length > 0 && options.length <= SEGMENTED_SELECT_MAX_OPTIONS;
 }
 
 // WAI-ARIA radiogroup pattern (role="radiogroup" + role="radio" children):
@@ -701,7 +699,7 @@ function DefaultInput(props: InputProps): ReactNode {
       );
       // An explicit `display` is an author decision and outranks the
       // heuristic in both directions — a requested radio group renders as
-      // one even when the labels are long or numerous (#2711).
+      // one even when the options outnumber the heuristic's threshold (#2711).
       const wantsRadioGroup =
         props.display === "radio" ||
         (props.display === undefined && isSegmentedSelectEligible(comboOptions));
@@ -1327,10 +1325,13 @@ function RowActionsCell({
 // Components hatten denselben State-Block dupliziert + parallel zur
 // Confirm-Dialog-Render-Logic — der Hook konsolidiert das.
 //
-// "needsConfirm" Helper kapselt die Regel: explizites confirm ODER
-// style=danger triggert den Dialog, alles andere fired direkt.
+// The rule: an explicit confirm OR style=danger opens the dialog,
+// everything else fires straight through.
+// `confirmRequired` overrides the danger-implies-confirm default (e.g.
+// schema-driven navigate/drawer actions where the target form is itself
+// the confirmation).
 function needsConfirm(action: DataTableRowAction): boolean {
-  return action.confirm !== undefined || action.style === "danger";
+  return action.confirm !== undefined || (action.confirmRequired ?? action.style === "danger");
 }
 
 function useRowActionTrigger(row: ListRowViewModel) {