@cosmicdrift/kumiko-renderer-web 0.237.1 → 0.237.2

package/package.json

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

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

@@ -17,6 +17,7 @@ import {
 import { type ReactNode, useCallback, useState } from "react";
 import { z } from "zod";
 import { PATCH_DRAFT_SAVE_DEBOUNCE_MS } from "../../../renderer/src/components/render-edit";
+import { defaultPrimitives, ScreenWidthProvider } from "../primitives";
 import {
   act,
   createFakeDraftStorage,
@@ -37,6 +38,8 @@ const orderEntity = {
   },
 } as unknown as EntityDefinition;
 
+const { Button } = defaultPrimitives;
+
 function makeScreen(): EntityEditScreenDefinition {
   return {
     id: "orders:screen:order-edit",
@@ -320,6 +323,78 @@ describe("RenderEdit", () => {
     expect(shell?.className).not.toContain("max-w-full");
   });
 
+  test("ScreenWidthProvider width='full' widens the form shell when layout.width is unset (fw#2656)", () => {
+    render(
+      <ScreenWidthProvider width="full">
+        <DispatcherProvider dispatcher={makeDispatcher()}>
+          <RenderEdit<TestValues>
+            screen={makeScreen()}
+            entity={orderEntity}
+            featureName="orders"
+            initial={{ title: "", count: 0, isUrgent: false }}
+            writeCommand="order:create"
+          />
+        </DispatcherProvider>
+      </ScreenWidthProvider>,
+    );
+
+    const shell = screen.getByTestId("render-edit-form").firstElementChild;
+    expect(shell?.className).toContain("max-w-full");
+    expect(shell?.className).not.toContain("max-w-4xl");
+  });
+
+  test("layout.width: '3xl' overrides ScreenWidthProvider width='full' (fw#2656)", () => {
+    const screenDef = makeScreen();
+    render(
+      <ScreenWidthProvider width="full">
+        <DispatcherProvider dispatcher={makeDispatcher()}>
+          <RenderEdit<TestValues>
+            screen={{ ...screenDef, layout: { ...screenDef.layout, width: "3xl" } }}
+            entity={orderEntity}
+            featureName="orders"
+            initial={{ title: "", count: 0, isUrgent: false }}
+            writeCommand="order:create"
+          />
+        </DispatcherProvider>
+      </ScreenWidthProvider>,
+    );
+
+    const shell = screen.getByTestId("render-edit-form").firstElementChild;
+    expect(shell?.className).toContain("max-w-3xl");
+    expect(shell?.className).not.toContain("max-w-full");
+  });
+
+  test("Cancel button renders with the same hover-class family as a secondary button, not the link look (fw#2656)", () => {
+    render(
+      <>
+        <Button testId="secondary-reference" variant="secondary">
+          Reference
+        </Button>
+        <DispatcherProvider dispatcher={makeDispatcher()}>
+          <RenderEdit<TestValues>
+            screen={makeScreen()}
+            entity={orderEntity}
+            featureName="orders"
+            initial={{ title: "", count: 0, isUrgent: false }}
+            writeCommand="order:create"
+            onCancel={() => {}}
+          />
+        </DispatcherProvider>
+      </>,
+    );
+
+    const reference = screen.getByTestId("secondary-reference");
+    const cancel = screen.getByTestId("render-edit-cancel");
+    const referenceHoverClass = reference.className
+      .split(" ")
+      .find((token) => token.startsWith("hover:"));
+
+    expect(referenceHoverClass).toBeDefined();
+    expect(cancel.className).toContain(referenceHoverClass as string);
+    expect(cancel.className).not.toContain("h-auto");
+    expect(cancel.className).not.toContain("px-0");
+  });
+
   test("title resolved aus i18n-Key `screen:<id>.title` mit screenId als Fallback", () => {
     const dispatcher = makeDispatcher();
     render(

package/src/app/create-app.tsx

@@ -19,6 +19,7 @@ import {
   DraftStorageProvider,
   ExtensionSectionsProvider,
   type FeatureSchema,
+  type FormWidth,
   hasDetailScreen,
   KumikoScreen,
   kumikoDefaultTranslations,
@@ -40,7 +41,7 @@ import {
 import { type ComponentType, type ReactNode, useMemo } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { lastSegment } from "../layout/nav-tree";
-import { defaultPrimitives } from "../primitives";
+import { defaultPrimitives, ScreenWidthProvider } from "../primitives";
 import { ToastProvider } from "../primitives/toast";
 import { createEventSourceLiveEvents } from "../sse/live-events";
 import { useBrowserTokensApi } from "../tokens";
@@ -189,6 +190,13 @@ export type CreateKumikoAppOptions = {
     readonly hasWorkspaces?: boolean;
     readonly features?: readonly FeatureSchema[];
   }) => NavApi;
+  /** App-wide default width for form/detail screens that don't set their
+   *  own `layout.width` (fw#2656). Default "4xl" (unchanged behavior) — a
+   *  consumer app that wants e.g. bundled-feature screens to match its own
+   *  full-width lists passes `screenWidth: "full"` once here instead of
+   *  forking every screen it doesn't own. Per-screen `layout.width` always
+   *  wins over this default. */
+  readonly screenWidth?: FormWidth;
 };
 
 // Reads the dev-server-injected schema from the global. Guarded for
@@ -429,32 +437,34 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonl
       <LocaleProvider resolver={localeResolver} fallbackBundles={fallbackBundles}>
         <DocumentLangSync resolver={localeResolver} />
         <PrimitivesProvider value={primitives}>
-          <AppFeaturesProvider features={app.features}>
-            <DispatcherProvider dispatcher={dispatcher}>
-              <DraftStorageProvider value={draftStorage}>
-                <LiveEventsProvider value={liveEvents}>
-                  <DashboardBodyProvider value={WebDashboardBody}>
-                    <CustomScreensProvider value={customScreens}>
-                      <ColumnRenderersProvider value={columnRenderers}>
-                        <ContentEditorsProvider value={contentEditors}>
-                          <ExtensionSectionsProvider value={extensionSectionComponents}>
-                            <NavProvidersProvider value={navProviders} entities={navEntities}>
-                              <ResolversProvider resolvers={resolvers}>
-                                <ToastProvider>
-                                  <UpdateChecker />
-                                  {stackWrappers(providers, stackWrappers(gates, screenNode))}
-                                </ToastProvider>
-                              </ResolversProvider>
-                            </NavProvidersProvider>
-                          </ExtensionSectionsProvider>
-                        </ContentEditorsProvider>
-                      </ColumnRenderersProvider>
-                    </CustomScreensProvider>
-                  </DashboardBodyProvider>
-                </LiveEventsProvider>
-              </DraftStorageProvider>
-            </DispatcherProvider>
-          </AppFeaturesProvider>
+          <ScreenWidthProvider width={options.screenWidth ?? "4xl"}>
+            <AppFeaturesProvider features={app.features}>
+              <DispatcherProvider dispatcher={dispatcher}>
+                <DraftStorageProvider value={draftStorage}>
+                  <LiveEventsProvider value={liveEvents}>
+                    <DashboardBodyProvider value={WebDashboardBody}>
+                      <CustomScreensProvider value={customScreens}>
+                        <ColumnRenderersProvider value={columnRenderers}>
+                          <ContentEditorsProvider value={contentEditors}>
+                            <ExtensionSectionsProvider value={extensionSectionComponents}>
+                              <NavProvidersProvider value={navProviders} entities={navEntities}>
+                                <ResolversProvider resolvers={resolvers}>
+                                  <ToastProvider>
+                                    <UpdateChecker />
+                                    {stackWrappers(providers, stackWrappers(gates, screenNode))}
+                                  </ToastProvider>
+                                </ResolversProvider>
+                              </NavProvidersProvider>
+                            </ExtensionSectionsProvider>
+                          </ContentEditorsProvider>
+                        </ColumnRenderersProvider>
+                      </CustomScreensProvider>
+                    </DashboardBodyProvider>
+                  </LiveEventsProvider>
+                </DraftStorageProvider>
+              </DispatcherProvider>
+            </AppFeaturesProvider>
+          </ScreenWidthProvider>
         </PrimitivesProvider>
       </LocaleProvider>
     </TokensBoot>

package/src/index.ts

@@ -141,6 +141,7 @@ export {
   DefaultCard as Card,
   defaultPrimitives,
   FormScreenShell,
+  ScreenWidthProvider,
 } from "./primitives";
 export type { ActionMenuProps, MenuItemDef } from "./primitives/action-menu";
 export { ActionMenu } from "./primitives/action-menu";

package/src/primitives/index.tsx

@@ -2028,6 +2028,21 @@ export function BareFormProvider({ children }: { children: ReactNode }): ReactNo
   return <BareFormContext.Provider value={true}>{children}</BareFormContext.Provider>;
 }
 
+// App-wide default for FormScreenShell's width when a screen doesn't set its
+// own `layout.width`. Default "4xl" keeps today's behavior for apps that
+// don't opt into `createKumikoApp({ screenWidth })` (fw#2656).
+const ScreenWidthContext = createContext<FormWidth>("4xl");
+
+export function ScreenWidthProvider({
+  width,
+  children,
+}: {
+  readonly width: FormWidth;
+  readonly children: ReactNode;
+}): ReactNode {
+  return <ScreenWidthContext.Provider value={width}>{children}</ScreenWidthContext.Provider>;
+}
+
 function DefaultForm({
   onSubmit,
   children,
@@ -2161,27 +2176,29 @@ function DefaultForm({
 }
 
 // Canonical form/settings shell shared by DefaultForm (configEdit/entityEdit)
-// and custom settings screens (profile, privacy-center). Default width is
-// "4xl" — a centered column, narrower than list chrome (which runs full-
-// width) — override via maxWidth / layout.width, e.g. "full" to match list
-// chrome or "3xl" for a narrower auth-adjacent form.
+// and custom settings screens (profile, privacy-center). Width resolution:
+// explicit `maxWidth` prop (screen's `layout.width`) wins, else the app-wide
+// `createKumikoApp({ screenWidth })` default from ScreenWidthContext, else
+// "4xl" (a centered column, narrower than list chrome, which runs full-width).
 export type FormScreenShellWidth = FormWidth;
 
 export function FormScreenShell({
   children,
   className,
   testId,
-  maxWidth = "4xl",
+  maxWidth,
 }: {
   readonly children: ReactNode;
   readonly className?: string;
   readonly testId?: string;
   readonly maxWidth?: FormScreenShellWidth;
 }): ReactNode {
+  const contextWidth = useContext(ScreenWidthContext);
+  const width = maxWidth ?? contextWidth;
   return (
     <div
       data-testid={testId}
-      className={cn("px-6 pt-6 pb-12 w-full", screenWidthClassName[maxWidth], className)}
+      className={cn("px-6 pt-6 pb-12 w-full", screenWidthClassName[width], className)}
     >
       {children}
     </div>