@cosmicdrift/kumiko-renderer-web 0.243.4 → 0.245.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.243.4",
+  "version": "0.245.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.243.4",
-    "@cosmicdrift/kumiko-headless": "0.243.4",
-    "@cosmicdrift/kumiko-renderer": "0.243.4",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.245.0",
+    "@cosmicdrift/kumiko-headless": "0.245.0",
+    "@cosmicdrift/kumiko-renderer": "0.245.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.243.4"
+    "@cosmicdrift/kumiko-locale-de": "0.245.0"
   },
   "repository": {
     "type": "git",

package/src/__tests__/primitives.test.tsx

@@ -1743,10 +1743,27 @@ describe("PageSection", () => {
         <span data-testid="child">x</span>
       </PageSection>,
     );
-    expect(screen.getByTestId("p").className).toContain("p-6");
+    expect(screen.getByTestId("p").className).toContain("px-6");
     expect(screen.getByTestId("child")).toBeDefined();
   });
 
+  test("renders the same padding classes as FormScreenShell (fw#2640)", () => {
+    render(
+      <>
+        <PageSection testId="page-pad">x</PageSection>
+        <FormScreenShell testId="shell-pad">x</FormScreenShell>
+      </>,
+    );
+    const paddingOf = (testId: string): string[] =>
+      screen
+        .getByTestId(testId)
+        .className.split(" ")
+        .filter((c) => /^p[xytblr]?-/.test(c))
+        .sort();
+    expect(paddingOf("page-pad")).toEqual(["pb-12", "pt-6", "px-6"]);
+    expect(paddingOf("page-pad")).toEqual(paddingOf("shell-pad"));
+  });
+
   test("maxWidth=4xl sets the same width class as FormScreenShell maxWidth=4xl (fw#2640)", () => {
     render(
       <>

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

@@ -0,0 +1,122 @@
+// `kind: "select"` with an explicit `display` (#2711). The short-option-set
+// heuristic covered by select-segmented.test.tsx stays the default; these
+// tests only cover the case where the caller states a presentation and the
+// heuristic would have decided the other way.
+
+import { describe, expect, test } from "bun:test";
+import { fireEvent } from "@testing-library/react";
+import { render, screen } from "../../__tests__/test-utils";
+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.
+const HEURISTIC_REJECTS = [
+  "Background Jobs Queue",
+  "Inbound Mail Processing",
+  "Realtime Event Stream",
+  "Scheduled Reporting",
+  "Tenant Provisioning",
+  "Search Index Rebuild",
+];
+
+// Three short labels — the heuristic would render the radio group for these.
+const HEURISTIC_ACCEPTS = ["Draft", "Review", "Done"];
+
+function renderSelect(
+  options: readonly string[],
+  overrides: {
+    readonly display?: "radio" | "dropdown";
+    readonly value?: string;
+  } = {},
+): string[] {
+  const changes: string[] = [];
+  render(
+    <Field id="area" label="Area" testId="field-area">
+      <Input
+        kind="select"
+        id="area"
+        name="area"
+        value={overrides.value ?? options[0] ?? ""}
+        onChange={(v) => changes.push(v)}
+        options={options}
+        {...(overrides.display !== undefined && { display: overrides.display })}
+      />
+    </Field>,
+  );
+  return changes;
+}
+
+describe("DefaultInput select — explicit display request", () => {
+  test('display: "radio" renders the radio group even where the heuristic says dropdown', () => {
+    renderSelect(HEURISTIC_REJECTS, { display: "radio" });
+    expect(screen.queryByTestId("combobox-area")).toBeNull();
+    expect(screen.getAllByRole("radio")).toHaveLength(6);
+  });
+
+  test("the forced radio group keeps the accessible group name and checked state", () => {
+    renderSelect(HEURISTIC_REJECTS, {
+      display: "radio",
+      value: "Realtime Event Stream",
+    });
+    expect(screen.getByRole("radiogroup", { name: "Area" })).toBeTruthy();
+    expect(
+      screen.getByRole("radio", { name: "Realtime Event Stream" }).getAttribute("aria-checked"),
+    ).toBe("true");
+    expect(
+      screen.getByRole("radio", { name: "Background Jobs Queue" }).getAttribute("aria-checked"),
+    ).toBe("false");
+  });
+
+  test("the forced radio group reports the raw option value on click", () => {
+    const changes = renderSelect(HEURISTIC_REJECTS, {
+      display: "radio",
+      value: "Background Jobs Queue",
+    });
+    fireEvent.click(screen.getByRole("radio", { name: "Search Index Rebuild" }));
+    expect(changes).toEqual(["Search Index Rebuild"]);
+  });
+
+  test('display: "dropdown" keeps the dropdown where the heuristic says radio group', () => {
+    renderSelect(HEURISTIC_ACCEPTS, { display: "dropdown" });
+    expect(screen.queryByRole("radiogroup")).toBeNull();
+    expect(screen.getByTestId("combobox-area")).toBeTruthy();
+  });
+
+  test("no display stated: the heuristic still decides", () => {
+    renderSelect(HEURISTIC_REJECTS);
+    expect(screen.getByTestId("combobox-area")).toBeTruthy();
+  });
+
+  test('display: "radio" without options falls back to the dropdown, not an empty group', () => {
+    renderSelect([], { display: "radio" });
+    expect(screen.queryByRole("radiogroup")).toBeNull();
+    expect(screen.getByTestId("combobox-area")).toBeTruthy();
+  });
+
+  test("labelled options render their label and report their value", () => {
+    const changes: string[] = [];
+    render(
+      <Field id="area" label="Area" testId="field-area">
+        <Input
+          kind="select"
+          id="area"
+          name="area"
+          value="jobs"
+          onChange={(v) => changes.push(v)}
+          display="radio"
+          options={[
+            { value: "jobs", label: "Background Jobs Queue" },
+            { value: "mail", label: "Inbound Mail Processing" },
+            { value: "search", label: "Search Index Rebuild" },
+            { value: "events", label: "Realtime Event Stream" },
+            { value: "tenants", label: "Tenant Provisioning" },
+          ]}
+        />
+      </Field>,
+    );
+    fireEvent.click(screen.getByRole("radio", { name: "Inbound Mail Processing" }));
+    expect(changes).toEqual(["mail"]);
+  });
+});

package/src/primitives/index.tsx

@@ -110,7 +110,7 @@ import {
 import { EmbeddedListInput } from "./embedded-list-input";
 import { FileUploadInput } from "./file-upload";
 import { DefaultJsonView } from "./json-view";
-import { screenWidthClassName } from "./layout";
+import { screenPaddingClassName, screenWidthClassName } from "./layout";
 import { DefaultLightbox } from "./lightbox";
 import { LocatedTimestampInput } from "./located-timestamp-input";
 import { DefaultMetric } from "./metric";
@@ -422,11 +422,10 @@ function withUnitSuffix(unit: string | undefined, input: ReactNode): ReactNode {
   );
 }
 
-// Segmented control for `kind: "select"` with a small closed option set —
+// 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). Purely a rendering choice inside the
-// "select" branch below; the primitives contract is untouched (still
-// `options` + string value/onChange).
+// (edit-existing screenshot feedback). Only consulted when the caller states
+// no `display` of its own; an explicit `display` wins (#2711).
 const SEGMENTED_SELECT_MAX_OPTIONS = 4;
 const SEGMENTED_SELECT_MAX_LABEL_LENGTH = 14;
 
@@ -699,7 +698,13 @@ function DefaultInput(props: InputProps): ReactNode {
       const comboOptions = props.options.map((o) =>
         typeof o === "string" ? { value: o, label: o } : o,
       );
-      if (isSegmentedSelectEligible(comboOptions)) {
+      // 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).
+      const wantsRadioGroup =
+        props.display === "radio" ||
+        (props.display === undefined && isSegmentedSelectEligible(comboOptions));
+      if (wantsRadioGroup && comboOptions.length > 0) {
         return (
           <SegmentedSelect
             id={props.id}
@@ -2261,7 +2266,7 @@ export function FormScreenShell({
   return (
     <div
       data-testid={testId}
-      className={cn("px-6 pt-6 pb-12 w-full", screenWidthClassName[width], className)}
+      className={cn(screenPaddingClassName, "w-full", screenWidthClassName[width], className)}
     >
       {children}
     </div>

package/src/primitives/layout.tsx

@@ -1,5 +1,5 @@
 // Layout primitives for custom screens: one place for vertical spacing and
-// screen padding, so consumers don't hand-roll `flex flex-col gap-*` / `p-6`.
+// screen padding, so consumers don't hand-roll `flex flex-col gap-*` / screen insets.
 // Deliberately thin — not a generic box-with-20-props system.
 
 import type { FormWidth } from "@cosmicdrift/kumiko-renderer";
@@ -17,6 +17,12 @@ export const screenWidthClassName: Record<ScreenWidth, string> = {
   full: "max-w-full",
 };
 
+// Shared screen padding for both screen containers (PageSection and
+// FormScreenShell). The wider bottom inset keeps the last field or table row
+// off the viewport edge; applying it everywhere makes footer spacing
+// independent of the screen type (fw#2640).
+export const screenPaddingClassName = "px-6 pt-6 pb-12";
+
 const STACK_GAP = { sm: "gap-2", md: "gap-4", lg: "gap-6" } as const;
 
 type StackGap = keyof typeof STACK_GAP;
@@ -50,7 +56,10 @@ export function PageSection({
   maxWidth = "full",
 }: PageSectionProps): ReactNode {
   return (
-    <div data-testid={testId} className={cn("p-6", screenWidthClassName[maxWidth], className)}>
+    <div
+      data-testid={testId}
+      className={cn(screenPaddingClassName, screenWidthClassName[maxWidth], className)}
+    >
       {children}
     </div>
   );