@cosmicdrift/kumiko-renderer-web 0.243.4 → 0.244.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.243.4",
+  "version": "0.244.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.244.0",
+    "@cosmicdrift/kumiko-headless": "0.244.0",
+    "@cosmicdrift/kumiko-renderer": "0.244.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.244.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/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";
@@ -2261,7 +2261,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>
   );